From 16f777ed2a490abdde7124bd43923a8953217465 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Fri, 30 Jul 2021 11:17:05 +0200 Subject: [PATCH] chore: split drawing and global --- src/scss/_drawing.scss | 62 +------ src/scss/_global.scss | 262 +-------------------------- src/scss/components/_buttons.scss | 5 + src/scss/components/_input.scss | 11 ++ src/scss/components/_navbars.scss | 10 + src/scss/components/_pagination.scss | 17 ++ src/scss/core/_containers.scss | 13 ++ src/scss/custom/_blog.scss | 47 +++++ src/scss/custom/_footer.scss | 66 +++++++ src/scss/custom/_header.scss | 67 +++++++ src/scss/custom/_other.scss | 11 ++ src/scss/custom/_personnage.scss | 38 ++++ src/scss/custom/_previews.scss | 21 +++ src/scss/mixins/_borders.scss | 8 +- src/scss/mixins/_responsive.scss | 7 + src/scss/style.scss | 4 +- 16 files changed, 332 insertions(+), 317 deletions(-) create mode 100644 src/scss/components/_input.scss create mode 100644 src/scss/components/_navbars.scss create mode 100644 src/scss/components/_pagination.scss create mode 100644 src/scss/core/_containers.scss create mode 100644 src/scss/custom/_blog.scss create mode 100644 src/scss/custom/_footer.scss create mode 100644 src/scss/custom/_header.scss create mode 100644 src/scss/custom/_other.scss create mode 100644 src/scss/custom/_personnage.scss create mode 100644 src/scss/custom/_previews.scss diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss index f284286..17b953e 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -6,66 +6,8 @@ */ @import 'components/buttons'; - +@import 'components/navbars'; +@import 'components/pagination'; @import 'components/cards'; - @import 'components/tables'; - @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; - } -} diff --git a/src/scss/_global.scss b/src/scss/_global.scss index b13c04c..aef56f6 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -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-header-back: get-color("skyblue"); -/* - * Les styles "globaux" touchant toute la page. - * - */ - -@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; - } - } - } -} +@import 'custom/header'; +@import 'custom/footer'; +@import 'custom/blog'; +@import 'custom/personnage'; +@import 'custom/previews'; diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index 67d58e0..bbf1eb6 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -220,3 +220,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb { &-diaspora {@include button-color(#313739);} &-mastodon {@include button-color(#282c37);} } + +strong.btn-fake { + @include button($button_large); + @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1)); +} diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss new file mode 100644 index 0000000..1173c70 --- /dev/null +++ b/src/scss/components/_input.scss @@ -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; + } +} diff --git a/src/scss/components/_navbars.scss b/src/scss/components/_navbars.scss new file mode 100644 index 0000000..ba18e6a --- /dev/null +++ b/src/scss/components/_navbars.scss @@ -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(); +} diff --git a/src/scss/components/_pagination.scss b/src/scss/components/_pagination.scss new file mode 100644 index 0000000..618b5a0 --- /dev/null +++ b/src/scss/components/_pagination.scss @@ -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); + } + } +} diff --git a/src/scss/core/_containers.scss b/src/scss/core/_containers.scss new file mode 100644 index 0000000..d709633 --- /dev/null +++ b/src/scss/core/_containers.scss @@ -0,0 +1,13 @@ +#wrapper { + background-color: $color-background; +} + +.container-big { + @include container-big(); +} + +.container-onecolumn { + max-width:1280px; + margin: auto; + padding-bottom: $lineheight; +} diff --git a/src/scss/custom/_blog.scss b/src/scss/custom/_blog.scss new file mode 100644 index 0000000..7e1afbc --- /dev/null +++ b/src/scss/custom/_blog.scss @@ -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); +} diff --git a/src/scss/custom/_footer.scss b/src/scss/custom/_footer.scss new file mode 100644 index 0000000..cf14197 --- /dev/null +++ b/src/scss/custom/_footer.scss @@ -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; + } + } + } +} diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss new file mode 100644 index 0000000..bb69cec --- /dev/null +++ b/src/scss/custom/_header.scss @@ -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; +} diff --git a/src/scss/custom/_other.scss b/src/scss/custom/_other.scss new file mode 100644 index 0000000..dc4dce7 --- /dev/null +++ b/src/scss/custom/_other.scss @@ -0,0 +1,11 @@ +/* 4.x - Some other stuff + * Mix stuff used by Kazhnuz.space +**/ + +.pigimg { + padding-bottom:1.5rem; +} + +.card-select { + width:100%; +} diff --git a/src/scss/custom/_personnage.scss b/src/scss/custom/_personnage.scss new file mode 100644 index 0000000..6e49029 --- /dev/null +++ b/src/scss/custom/_personnage.scss @@ -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;} +} diff --git a/src/scss/custom/_previews.scss b/src/scss/custom/_previews.scss new file mode 100644 index 0000000..27a2152 --- /dev/null +++ b/src/scss/custom/_previews.scss @@ -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"; + } +} diff --git a/src/scss/mixins/_borders.scss b/src/scss/mixins/_borders.scss index 59a5221..41264b0 100644 --- a/src/scss/mixins/_borders.scss +++ b/src/scss/mixins/_borders.scss @@ -1,4 +1,4 @@ -// BORDERS AND BORDERS RADIUS MIXINS +// Border, border radius and margin @mixin borders() { border: $border-size solid rgba(0, 0, 0, 0.3) @@ -13,3 +13,9 @@ @mixin border-radius($border-radius) { border-radius: $border-radius $border-radius $border-radius $border-radius; } + +@mixin li-no-margin() { + li { + margin: 0; + } +} diff --git a/src/scss/mixins/_responsive.scss b/src/scss/mixins/_responsive.scss index 69cff3e..d711d4c 100644 --- a/src/scss/mixins/_responsive.scss +++ b/src/scss/mixins/_responsive.scss @@ -57,3 +57,10 @@ $screen-xxl-min: 1600px; @content; } } + +@mixin container-big() { + padding-left: $lineheight; + padding-right: $lineheight; + max-width: 1600px; + margin:auto; +} diff --git a/src/scss/style.scss b/src/scss/style.scss index 3ed622a..178c1ac 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -23,6 +23,6 @@ @import 'utils'; -@import 'global'; - @import 'drawing'; + +@import 'global';