chore: better comments
This commit is contained in:
parent
d30249b5be
commit
df97ce9a7e
6 changed files with 71 additions and 30 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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); }
|
||||||
}
|
}
|
||||||
|
|
|
@ -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); }
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Reference in a new issue