chore: better comments

This commit is contained in:
Kazhnuz 2019-12-07 15:58:08 +01:00
parent d30249b5be
commit df97ce9a7e
6 changed files with 71 additions and 30 deletions

View file

@ -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); $large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px 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); $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
@ -39,4 +51,4 @@ $titlefont: Amatic SC, sans-serif;
transform: skewX(-15deg); transform: skewX(-15deg);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
} }

View file

@ -1,3 +1,10 @@
/* --- 04. COMPOSANTS --- */
/*
* Les différents composants réutilisables de la page.
*
*/
@import 'components/cards'; @import 'components/cards';
@import 'components/buttons'; @import 'components/buttons';

View file

@ -1,9 +1,9 @@
/* --- 03. GLOBAL STYLING --- */
/* /*
* 1. Cards and containers * Les styles "globaux" touchant toute la page.
* All elements that are supposed to contain other stuff
* *
* */
*/
@mixin li-no-margin() { @mixin li-no-margin() {
li { li {

View file

@ -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-blue: #268bd2;
$color-violet: #d33682; $color-violet: #d33682;
@ -62,7 +70,7 @@ a, a:hover, a:active {
mark { mark {
background-color: lighten($color-mark, 30%) background-color: lighten($color-mark, 30%)
} }
blockquote, pre { blockquote, pre {
border-color: $color-primary; border-color: $color-primary;
} }
@ -84,8 +92,8 @@ blockquote, pre {
&-turquoise { @include background-color($color-turquoise, $color-light); } &-turquoise { @include background-color($color-turquoise, $color-light); }
&-yellow { @include background-color($color-yellow, $color-light); } &-yellow { @include background-color($color-yellow, $color-light); }
&-brown { @include background-color($color-brown, $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); } &-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); } &-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); } &-warning { @include background-color($color-warning, $color-light); }
@ -93,9 +101,9 @@ blockquote, pre {
&-info { @include background-color($color-info, $color-light); } &-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); } &-success { @include background-color($color-success, $color-light); }
} }
/* TEXT */ /* TEXT */
.text { .text {
&-blue { @include text-color($color-blue); } &-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); } &-violet { @include text-color($color-violet); }
@ -109,12 +117,12 @@ blockquote, pre {
&-turquoise { @include text-color($color-turquoise); } &-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); } &-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); } &-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); } &-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); } &-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); } &-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); } &-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); } &-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); } &-info { @include text-color($color-info); }
&-success { @include text-color($color-success); } &-success { @include text-color($color-success); }
} }

View file

@ -1,6 +1,6 @@
/* /*
* 2 - Typography ( _typography.scss ) * 2 - Typography ( _typography.scss )
* *
* This part of the (s)css handle everything related to the typography * This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc. * like paragraphs, blockquote, etc.
* *
@ -24,7 +24,7 @@ body {
font-family: $basefont; font-family: $basefont;
text-align: left; text-align: left;
font-size: $base_fontsize; font-size: $base_fontsize;
line-height: $base_lineheight; line-height: $base_lineheight;
color: $color-font; color: $color-font;
font-weight: $fontweight_base; font-weight: $fontweight_base;
} }
@ -79,19 +79,19 @@ ul, ol {
p, em, p em { p, em, p em {
font-weight:$fontweight_base; font-weight:$fontweight_base;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.article-thumbnail { .article-thumbnail {
padding-bottom: 1em; padding-bottom: 1em;
text-align: center; text-align: center;
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
} }
.article-excerpt { .article-excerpt {
@ -105,7 +105,7 @@ ul, ol {
margin:0; margin:0;
} }
} }
.bypass-flex-fontsize { .bypass-flex-fontsize {
line-height: $base_lineheight; line-height: $base_lineheight;
} }
@ -134,7 +134,7 @@ h1, h2, h3, h4, h5, h6, h7 {
padding:0; padding:0;
margin:0; margin:0;
font-weight: $fontweight_base; font-weight: $fontweight_base;
&.page-title { &.page-title {
color: $color-primary; color: $color-primary;
@ -143,7 +143,7 @@ h1, h2, h3, h4, h5, h6, h7 {
position: relative; position: relative;
top: -0.175em; top: -0.175em;
} }
&-flex { &-flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -151,7 +151,7 @@ h1, h2, h3, h4, h5, h6, h7 {
& > span, & > i, & > a { & > span, & > i, & > a {
display: block; display: block;
} }
& > a { & > a {
color: $color-primary; color: $color-primary;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@ -247,7 +247,7 @@ code {
mark { mark {
border-radius: 0.2em; border-radius: 0.2em;
padding:0 0.2em 0 0.2em; padding:0 0.2em 0 0.2em;
background-color: lighten($color-mark, 30%); background-color: lighten($color-mark, 30%);
color: inherit; color: inherit;
} }
@ -282,8 +282,8 @@ mark {
&-turquoise { @include text-color($color-turquoise); } &-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); } &-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); } &-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); } &-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); } &-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); } &-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); } &-warning { @include text-color($color-warning); }
@ -333,12 +333,12 @@ th {
&-turquoise { @include table-color($color-turquoise); } &-turquoise { @include table-color($color-turquoise); }
&-yellow { @include table-color($color-yellow); } &-yellow { @include table-color($color-yellow); }
&-brown { @include table-color($color-brown); } &-brown { @include table-color($color-brown); }
&-grey { @include table-color($color-grey); } &-grey { @include table-color($color-grey); }
&-primary { @include table-color($color-primary); } &-primary { @include table-color($color-primary); }
&-secondary { @include table-color($color-secondary); } &-secondary { @include table-color($color-secondary); }
&-warning { @include table-color($color-warning); } &-warning { @include table-color($color-warning); }
&-danger { @include table-color($color-danger); } &-danger { @include table-color($color-danger); }
&-info { @include table-color($color-info); } &-info { @include table-color($color-info); }
&-success { @include table-color($color-success); } &-success { @include table-color($color-success); }
} }

View file

@ -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 'palette';
@import 'definitions'; @import 'definitions';