From df97ce9a7e178df6ddafc6efc9018231881c2a4f Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Sat, 7 Dec 2019 15:58:08 +0100 Subject: [PATCH] chore: better comments --- src/scss/_definitions.scss | 14 +++++++++++++- src/scss/_drawing.scss | 7 +++++++ src/scss/_global.scss | 8 ++++---- src/scss/_palette.scss | 28 ++++++++++++++++++---------- src/scss/_typography.scss | 30 +++++++++++++++--------------- src/scss/style.scss | 14 ++++++++++++++ 6 files changed, 71 insertions(+), 30 deletions(-) diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss index fa38a9c..11a378a 100644 --- a/src/scss/_definitions.scss +++ b/src/scss/_definitions.scss @@ -1,3 +1,15 @@ +/* --- 01. DEFINITIONS --- */ + +/* + * Les définitions globales de la stylesheet. + * Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux + * D'autres définitions importantes sont visibles dans les autres parties de la fiche. + * + * Pour customiser les couleurs, voyez _palette.scss + */ + +// A modifier pour customiser le style facilement : + $large-shadow: 0px 2px 10px rgba(0, 0, 0, 0); $narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0); $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0); @@ -39,4 +51,4 @@ $titlefont: Amatic SC, sans-serif; transform: skewX(-15deg); transition: background-color 0.3s; } -} \ No newline at end of file +} diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss index 6cd827a..8eef321 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -1,3 +1,10 @@ +/* --- 04. COMPOSANTS --- */ + +/* + * Les différents composants réutilisables de la page. + * + */ + @import 'components/cards'; @import 'components/buttons'; diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 2fe11d2..12807b5 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -1,9 +1,9 @@ +/* --- 03. GLOBAL STYLING --- */ + /* - * 1. Cards and containers - * All elements that are supposed to contain other stuff + * Les styles "globaux" touchant toute la page. * - * -*/ + */ @mixin li-no-margin() { li { diff --git a/src/scss/_palette.scss b/src/scss/_palette.scss index 47cf04b..6b7521e 100644 --- a/src/scss/_palette.scss +++ b/src/scss/_palette.scss @@ -1,7 +1,15 @@ +/* --- 00. PALETTE --- */ + /* - * 0. Palette and global colorization + * Les définitions globales des couleurs du theme. * -*/ + * Elle permettent de définir rapidement à la fois les couleurs + * de base qui seront utilisée pour tout le theme, mais + * également celles spécifiques pour certains sujets (liens, texte) + * + */ + +// Couleurs de base du theme : $color-blue: #268bd2; $color-violet: #d33682; @@ -62,7 +70,7 @@ a, a:hover, a:active { mark { background-color: lighten($color-mark, 30%) } - + blockquote, pre { border-color: $color-primary; } @@ -84,8 +92,8 @@ blockquote, pre { &-turquoise { @include background-color($color-turquoise, $color-light); } &-yellow { @include background-color($color-yellow, $color-light); } &-brown { @include background-color($color-brown, $color-light); } - &-grey { @include background-color($color-grey, $color-light); } - + &-grey { @include background-color($color-grey, $color-light); } + &-primary { @include background-color($color-primary, $color-light); } &-secondary { @include background-color($color-secondary, $color-light); } &-warning { @include background-color($color-warning, $color-light); } @@ -93,9 +101,9 @@ blockquote, pre { &-info { @include background-color($color-info, $color-light); } &-success { @include background-color($color-success, $color-light); } } - + /* TEXT */ - + .text { &-blue { @include text-color($color-blue); } &-violet { @include text-color($color-violet); } @@ -109,12 +117,12 @@ blockquote, pre { &-turquoise { @include text-color($color-turquoise); } &-yellow { @include text-color($color-yellow); } &-brown { @include text-color($color-brown); } - &-grey { @include text-color($color-grey); } - + &-grey { @include text-color($color-grey); } + &-primary { @include text-color($color-primary); } &-secondary { @include text-color($color-secondary); } &-warning { @include text-color($color-warning); } &-danger { @include text-color($color-danger); } &-info { @include text-color($color-info); } &-success { @include text-color($color-success); } -} \ No newline at end of file +} diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index 42c4346..378d0cf 100644 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -1,6 +1,6 @@ /* * 2 - Typography ( _typography.scss ) - * + * * This part of the (s)css handle everything related to the typography * like paragraphs, blockquote, etc. * @@ -24,7 +24,7 @@ body { font-family: $basefont; text-align: left; font-size: $base_fontsize; - line-height: $base_lineheight; + line-height: $base_lineheight; color: $color-font; font-weight: $fontweight_base; } @@ -79,19 +79,19 @@ ul, ol { p, em, p em { font-weight:$fontweight_base; } - + img { max-width: 100%; height: auto; } - + .article-thumbnail { padding-bottom: 1em; text-align: center; img { max-width: 100%; height: auto; - + } } .article-excerpt { @@ -105,7 +105,7 @@ ul, ol { margin:0; } } - + .bypass-flex-fontsize { line-height: $base_lineheight; } @@ -134,7 +134,7 @@ h1, h2, h3, h4, h5, h6, h7 { padding:0; margin:0; font-weight: $fontweight_base; - + &.page-title { color: $color-primary; @@ -143,7 +143,7 @@ h1, h2, h3, h4, h5, h6, h7 { position: relative; top: -0.175em; } - + &-flex { display: flex; flex-direction: row; @@ -151,7 +151,7 @@ h1, h2, h3, h4, h5, h6, h7 { & > span, & > i, & > a { display: block; } - + & > a { color: $color-primary; &:hover, &:focus, &:active { @@ -247,7 +247,7 @@ code { mark { border-radius: 0.2em; padding:0 0.2em 0 0.2em; - + background-color: lighten($color-mark, 30%); color: inherit; } @@ -282,8 +282,8 @@ mark { &-turquoise { @include text-color($color-turquoise); } &-yellow { @include text-color($color-yellow); } &-brown { @include text-color($color-brown); } - &-grey { @include text-color($color-grey); } - + &-grey { @include text-color($color-grey); } + &-primary { @include text-color($color-primary); } &-secondary { @include text-color($color-secondary); } &-warning { @include text-color($color-warning); } @@ -333,12 +333,12 @@ th { &-turquoise { @include table-color($color-turquoise); } &-yellow { @include table-color($color-yellow); } &-brown { @include table-color($color-brown); } - &-grey { @include table-color($color-grey); } - + &-grey { @include table-color($color-grey); } + &-primary { @include table-color($color-primary); } &-secondary { @include table-color($color-secondary); } &-warning { @include table-color($color-warning); } &-danger { @include table-color($color-danger); } &-info { @include table-color($color-info); } &-success { @include table-color($color-success); } -} \ No newline at end of file +} diff --git a/src/scss/style.scss b/src/scss/style.scss index fa35c84..1c343a3 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,3 +1,17 @@ +/* ------------------------------------------------- + KAZHNUZ SPACE SCSS + + Auteur : Kazhnuz + Licence : Creative Common BY-SA + + Version 0.1 + + Thème CSS basé sur Spectre et ForkAwesome + créé pour mon blog creatif kazhnuz.space + + CC BY-SA Kazhnuz +------------------------------------------------- */ + @import 'palette'; @import 'definitions';