kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

chore: split drawing and global

Browse source
This commit is contained in:
Kazhnuz 2021-07-30 11:17:05 +02:00
parent 70fb39159f
commit 16f777ed2a
16 changed files with 332 additions and 317 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/scss/_drawing.scss
View file

@ -6,66 +6,8 @@
*/ */
@import 'components/buttons'; @import 'components/buttons';
@import 'components/navbars';
@import 'components/pagination';
@import 'components/cards'; @import 'components/cards';
@import 'components/tables'; @import 'components/tables';
@import 'components/previews'; @import 'components/previews';
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
}
a.article-nav-link-wrap {
@include button($button_large);
padding-left: $button_large;
padding-right: $button_large;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
@include button-color($color-info);
}
.pigimg {
padding-bottom:1.5rem;
}
nav.pagination {
padding-bottom:1.5rem;
.nav-links {
text-align: center;
width:100%;
}
.page-numbers, .next, .prev {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
@include button-color($color-font-light);
&.current {
@include button-color($color-info);
}
}
}
.card-select {
width:100%;
}
.input-group {
padding-bottom:1.5rem;
input, textarea {
width:100%;
background-color:$color-background;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;
}
}

262
src/scss/_global.scss
View file

@ -1,258 +1,12 @@
/* --- 03. GLOBAL STYLING --- */ /* 4 - Custom styling
* Styles that are custom to this particular theme
**/
$color-footer-back: get-color("dark2"); $color-footer-back: get-color("dark2");
$color-header-back: get-color("skyblue"); $color-header-back: get-color("skyblue");
/* @import 'custom/header';
* Les styles "globaux" touchant toute la page. @import 'custom/footer';
* @import 'custom/blog';
*/ @import 'custom/personnage';
@import 'custom/previews';
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
margin:auto;
}
/* ------------------ HEADERS ------------------- */
#page-header {
background: $color-header-back url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-footer-back;
padding-top:$lineheight;
padding-bottom:3rem;
.header-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"logo";
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
.navbar-area {
grid-area: nav;
text-align: center;
}
.logo-area {
grid-area: logo;
}
@include lg() {
grid-template-columns: 1fr 1fr;
grid-template-areas: "logo nav";
height:11*$lineheight;
padding-bottom:0;
.navbar-area {
text-align: right;
}
}
@include xxl() {
height:13*$lineheight;
}
}
}
header h1 {
border-style:none !important;
color: $color-font-light;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding-bottom:0px;
line-height: 1.5em;
img {
width: 100%;
height: auto;
margin-top:0.75rem;
}
}
.navbar {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-font-light;
a {
color: $color-font-light;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* ------------------ CONTAINERS ------------------- */
.container-big {
@include container-big();
}
.container-blog {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
}
.mainpane {
grid-area: main;
}
.sidebar {
grid-area: side;
}
.container-preview {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: 360px auto;
grid-template-areas: "side main";
}
}
.container-onecolumn {
max-width:1280px;
margin: auto;
padding-bottom: $lineheight;
}
.container-personnage {
@include container-big();
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 3rem;
column-gap: 3rem;
grid-template-areas:
"nomp nomp nomp nomp nomp nomp"
"info info info info meta meta"
"goss goss look look look look"
"aime aime aime dete dete dete"
"hist hist hist hist hist hist";
.card {
margin:0;
}
h1 {
padding:0;
}
}
.personnage {
&-nomp {grid-area: nomp;}
&-info {grid-area: info;}
&-meta {grid-area: meta;}
&-goss {grid-area: goss;}
&-look {grid-area: look;}
&-aime {grid-area: aime;}
&-dete {grid-area: dete;}
&-hist {grid-area: hist;}
}
/* ------------------ PAGE ------------------- */
#wrapper {
background-color: $color-background;
}
/* ------------------ FOOTER ------------------- */
body {
// On colorise le background de la page complete de la même
// couleur que le fond du footer.
background-color: $color-footer-back;
}
footer {
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
color: getTextColorFromBackground($color-footer-back);
padding-top:1.5rem;
font-size: 0.85rem!important;
padding-bottom:1.5rem;
.footer-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
a, a:visited {
&:hover, &:active, &:visited {
color: getTextColorFromBackground($color-footer-back);
}
}
}
}
/* social media */
ul.social {
font-size:1.5em;
padding-bottom:1.5em;
margin:auto;
text-align:center;
li {
margin:0;
list-style: none;
display: inline;
a, a:visited {
color: $color-footer-back;
background-color: getTextColorFromBackground($color-footer-back);
padding:0.3em;
padding-left:0.36em;
padding-right:0.36em;
vertical-align:middle;
border-radius:100%;
&:hover {
color:getTextColorFromBackground($color-footer-back);
background-color: $color-footer-back;
}
}
}
}

5
src/scss/components/_buttons.scss
View file

@ -220,3 +220,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
&-diaspora {@include button-color(#313739);} &-diaspora {@include button-color(#313739);}
&-mastodon {@include button-color(#282c37);} &-mastodon {@include button-color(#282c37);}
} }
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
}

11
src/scss/components/_input.scss Normal file
View file

@ -0,0 +1,11 @@
.input-group {
padding-bottom:1.5rem;
input, textarea {
width:100%;
background-color:$color-background;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;
}
}

10
src/scss/components/_navbars.scss Normal file
View file

@ -0,0 +1,10 @@
.navbar {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-font-light;
a {
color: $color-font-light;
}
@include li-no-margin();
}

17
src/scss/components/_pagination.scss Normal file
View file

@ -0,0 +1,17 @@
nav.pagination {
padding-bottom:1.5rem;
.nav-links {
text-align: center;
width:100%;
}
.page-numbers, .next, .prev {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
@include button-color($color-font-light);
&.current {
@include button-color($color-info);
}
}
}

13
src/scss/core/_containers.scss Normal file
View file

@ -0,0 +1,13 @@
#wrapper {
background-color: $color-background;
}
.container-big {
@include container-big();
}
.container-onecolumn {
max-width:1280px;
margin: auto;
padding-bottom: $lineheight;
}

47
src/scss/custom/_blog.scss Normal file
View file

@ -0,0 +1,47 @@
/* 4.3 - Blog
* The blog related class
**/
/** Layout **/
.container-blog {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
}
.mainpane {
grid-area: main;
}
.sidebar {
grid-area: side;
}
/** Navigation **/
a.article-nav-link-wrap {
@include button($button_large);
padding-left: $button_large;
padding-right: $button_large;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
@include button-color($color-info);
}

66
src/scss/custom/_footer.scss Normal file
View file

@ -0,0 +1,66 @@
/* 4.2 - Footer
* The page footer
**/
/** Main styling **/
body {
// On colorise le background de la page complete de la même
// couleur que le fond du footer.
background-color: $color-footer-back;
}
footer {
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
color: getTextColorFromBackground($color-footer-back);
padding-top:1.5rem;
font-size: 0.85rem!important;
padding-bottom:1.5rem;
.footer-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
a, a:visited {
&:hover, &:active, &:visited {
color: getTextColorFromBackground($color-footer-back);
}
}
}
}
/** Social media buttons **/
ul.social {
font-size:1.5em;
padding-bottom:1.5em;
margin:auto;
text-align:center;
li {
margin:0;
list-style: none;
display: inline;
a, a:visited {
color: $color-footer-back;
background-color: getTextColorFromBackground($color-footer-back);
padding:0.3em;
padding-left:0.36em;
padding-right:0.36em;
vertical-align:middle;
border-radius:100%;
&:hover {
color:getTextColorFromBackground($color-footer-back);
background-color: $color-footer-back;
}
}
}
}

67
src/scss/custom/_header.scss Normal file
View file

@ -0,0 +1,67 @@
/* 4.1 - Header
* The page header
**/
#page-header {
background: $color-header-back url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-footer-back;
padding-top:$lineheight;
padding-bottom:3rem;
.header-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"logo";
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
.navbar-area {
grid-area: nav;
text-align: center;
}
.logo-area {
grid-area: logo;
}
@include lg() {
grid-template-columns: 1fr 1fr;
grid-template-areas: "logo nav";
height:11*$lineheight;
padding-bottom:0;
.navbar-area {
text-align: right;
}
}
@include xxl() {
height:13*$lineheight;
}
}
}
header h1 {
border-style:none !important;
color: $color-font-light;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding-bottom:0px;
line-height: 1.5em;
img {
width: 100%;
height: auto;
margin-top:0.75rem;
}
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}

11
src/scss/custom/_other.scss Normal file
View file

@ -0,0 +1,11 @@
/* 4.x - Some other stuff
* Mix stuff used by Kazhnuz.space
**/
.pigimg {
padding-bottom:1.5rem;
}
.card-select {
width:100%;
}

38
src/scss/custom/_personnage.scss Normal file
View file

@ -0,0 +1,38 @@
/* 4.4 - Personnage
* A character sheet style
**/
.container-personnage {
@include container-big();
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 3rem;
column-gap: 3rem;
grid-template-areas:
"nomp nomp nomp nomp nomp nomp"
"info info info info meta meta"
"goss goss look look look look"
"aime aime aime dete dete dete"
"hist hist hist hist hist hist";
.card {
margin:0;
}
h1 {
padding:0;
}
}
.personnage {
&-nomp {grid-area: nomp;}
&-info {grid-area: info;}
&-meta {grid-area: meta;}
&-goss {grid-area: goss;}
&-look {grid-area: look;}
&-aime {grid-area: aime;}
&-dete {grid-area: dete;}
&-hist {grid-area: hist;}
}

21
src/scss/custom/_previews.scss Normal file
View file

@ -0,0 +1,21 @@
/* 4.5 - Previews
* Simple content previews
**/
.container-preview {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: 360px auto;
grid-template-areas: "side main";
}
}

8
src/scss/mixins/_borders.scss
View file

@ -1,4 +1,4 @@
// BORDERS AND BORDERS RADIUS MIXINS // Border, border radius and margin
@mixin borders() { @mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
@ -13,3 +13,9 @@
@mixin border-radius($border-radius) { @mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius; border-radius: $border-radius $border-radius $border-radius $border-radius;
} }
@mixin li-no-margin() {
li {
margin: 0;
}
}

7
src/scss/mixins/_responsive.scss
View file

@ -57,3 +57,10 @@ $screen-xxl-min: 1600px;
@content; @content;
} }
} }
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
margin:auto;
}

4
src/scss/style.scss
View file

@ -23,6 +23,6 @@
@import 'utils'; @import 'utils';
@import 'global';
@import 'drawing'; @import 'drawing';
@import 'global';