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

chore: make lineheight controlled by the definitions

Browse source
This commit is contained in:
Kazhnuz 2019-12-07 16:06:38 +01:00
parent df97ce9a7e
commit 0b3ae8b2b0
7 changed files with 124 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
dist/style.css vendored
View file

@ -1,8 +1,26 @@
@charset "UTF-8"; @charset "UTF-8";
/* -------------------------------------------------
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
------------------------------------------------- */
/* --- 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)
*
*/
a, a:hover, a:active { a, a:hover, a:active {
color: #2aa198; } color: #2aa198; }
@ -155,6 +173,14 @@ blockquote, pre {
.text-success { .text-success {
color: #859900; } color: #859900; }
/* --- 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
*/
/* /*
* 2 - Typography ( _typography.scss ) * 2 - Typography ( _typography.scss )
* *
@ -632,12 +658,11 @@ th {
.table-success th { .table-success th {
color: #859900; } color: #859900; }
/* --- 03. GLOBAL STYLING --- */
/* /*
* 1. Cards and containers * Les styles "globaux" touchant toute la page.
* All elements that are supposed to contain other stuff
* *
* */
*/
.no-pills { .no-pills {
list-style: none; } list-style: none; }
@ -795,6 +820,11 @@ ul.social {
color: #fdf6e3; color: #fdf6e3;
background-color: #073642; } background-color: #073642; }
/* --- 04. COMPOSANTS --- */
/*
* Les différents composants réutilisables de la page.
*
*/
/* /*
* 2. Cards and containers * 2. Cards and containers
* All elements that are supposed to contain other stuff * All elements that are supposed to contain other stuff
@ -854,9 +884,9 @@ ul.social {
display: flex; display: flex;
line-height: 1.5rem; line-height: 1.5rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-left: 0.325rem; padding-left: 0.375rem;
padding-top: 0.325rem; padding-top: 0.375rem;
padding-bottom: 0.325rem; padding-bottom: 0.375rem;
margin: 0; margin: 0;
justify-content: space-between; justify-content: space-between;
word-wrap: none; word-wrap: none;
@ -900,10 +930,10 @@ ul.social {
background-color: #e3d9ba; } background-color: #e3d9ba; }
.card-menu .menu-divider, .menu-menu .menu-divider { .card-menu .menu-divider, .menu-menu .menu-divider {
position: relative; position: relative;
left: -0.325rem; left: -0.375rem;
font-weight: 800; font-weight: 800;
padding-top: 0.325rem; padding-top: 0.375rem;
padding-bottom: 0.325rem; } padding-bottom: 0.375rem; }
/* CARD LIST - Make a list part of a card */ /* CARD LIST - Make a list part of a card */
ul.card-list { ul.card-list {
@ -912,9 +942,9 @@ ul.card-list {
ul.card-list li.list-element { ul.card-list li.list-element {
line-height: 1.5rem; line-height: 1.5rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-left: 0.325rem; padding-left: 0.375rem;
padding-top: 0.325rem; padding-top: 0.375rem;
padding-bottom: 0.325rem; padding-bottom: 0.375rem;
margin: 0; } margin: 0; }
.list-check li.list-element { .list-check li.list-element {

7
src/scss/_definitions.scss
View file

@ -16,6 +16,13 @@ $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0); $inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0); $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
$baseline: 1.5;
$fontsize: 4.75mm;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$border-radius: 0px; $border-radius: 0px;
$border-size: 0px; $border-size: 0px;

12
src/scss/_global.scss
View file

@ -12,8 +12,8 @@
} }
@mixin container-big() { @mixin container-big() {
padding-left: 3*1.5rem; padding-left: 3*$lineheight;
padding-right: 3*1.5rem; padding-right: 3*$lineheight;
} }
.no-pills { .no-pills {
@ -30,7 +30,7 @@
#page-header { #page-header {
background: $color-turquoise url('img/background.png') center bottom repeat-x; background: $color-turquoise url('img/background.png') center bottom repeat-x;
height:10*1.5rem; height:10*$lineheight;
border-top: 6px solid $color-dark2; border-top: 6px solid $color-dark2;
@include container-big(); @include container-big();
} }
@ -76,7 +76,7 @@ header h1 {
display: grid; display: grid;
grid-template-columns: auto 360px; grid-template-columns: auto 360px;
grid-template-rows: auto; grid-template-rows: auto;
row-gap: 1.5rem; row-gap: $lineheight;
column-gap: 3rem; column-gap: 3rem;
grid-template-areas: "main sidebar"; grid-template-areas: "main sidebar";
@ -95,7 +95,7 @@ section.sidebar {
display: grid; display: grid;
grid-template-columns: 360px auto; grid-template-columns: 360px auto;
grid-template-rows: auto; grid-template-rows: auto;
row-gap: 1.5rem; row-gap: $lineheight;
column-gap: 3rem; column-gap: 3rem;
grid-template-areas: "sidebar main"; grid-template-areas: "sidebar main";
@ -104,7 +104,7 @@ section.sidebar {
.container-onecolumn { .container-onecolumn {
max-width:1280px; max-width:1280px;
margin: auto; margin: auto;
padding-bottom: 1.5rem; padding-bottom: $lineheight;
} }
.container-personnage { .container-personnage {

26
src/scss/_typography.scss
View file

@ -10,21 +10,17 @@
/* 2.2 - Global Typography */ /* 2.2 - Global Typography */
$baseline: 1.5;
$base_lineheight: $baseline * 1rem;
$base_fontsize: 4.75mm;
@mixin paragraph() { @mixin paragraph() {
padding:0; padding:0;
padding-bottom: $base_lineheight; padding-bottom: $lineheight;
margin: 0; margin: 0;
} }
body { body {
font-family: $basefont; font-family: $basefont;
text-align: left; text-align: left;
font-size: $base_fontsize; font-size: $fontsize;
line-height: $base_lineheight; line-height: $lineheight;
color: $color-font; color: $color-font;
font-weight: $fontweight_base; font-weight: $fontweight_base;
} }
@ -65,8 +61,8 @@ ul, ol {
} }
li { li {
margin:0; margin:0;
margin-left: $base_lineheight; margin-left: $lineheight;
line-height: $base_lineheight; line-height: $lineheight;
} }
} }
@ -107,12 +103,12 @@ ul, ol {
} }
.bypass-flex-fontsize { .bypass-flex-fontsize {
line-height: $base_lineheight; line-height: $lineheight;
} }
} }
article.maintext { article.maintext {
padding-bottom: 1.5rem; padding-bottom: $lineheight;
} }
/* 2.3 - Titles */ /* 2.3 - Titles */
@ -121,9 +117,9 @@ article.maintext {
$lineNumber: ceil($size / 1.5); $lineNumber: ceil($size / 1.5);
font-family: $font; font-family: $font;
font-size: $size * 1rem; font-size: $size * 1rem;
line-height: $lineNumber * 1.5rem; line-height: $lineNumber * $lineheight;
padding: 0; padding: 0;
padding-bottom: 1.5rem; padding-bottom: $lineheight;
font-weight: $weight; font-weight: $weight;
} }
@ -208,8 +204,8 @@ hr {
border-style: none; border-style: none;
border-radius: 0px; border-radius: 0px;
margin: 0 0 1.5rem 0; margin: 0 0 $lineheight 0;
padding: 1.5rem 1rem 1.5rem 1rem; padding: $lineheight 1rem $lineheight 1rem;
max-width: 100%; max-width: 100%;
background-color: $color-light2; background-color: $color-light2;

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

@ -7,8 +7,8 @@
$color-button-light: $color-light; $color-button-light: $color-light;
$color-button-dark: $color-dark; $color-button-dark: $color-dark;
$button_large: 1.5rem; $button_large: $lineheight;
$button_small: 0.375rem; $button_small: $lineheight_quarter;
@mixin button($size) { @mixin button($size) {
padding: $size; padding: $size;
@ -16,9 +16,9 @@ $button_small: 0.375rem;
padding-bottom: $size/3; padding-bottom: $size/3;
margin:$size/2; margin:$size/2;
margin-top: $size/3; margin-top: $size/3;
margin-bottom: 1.5rem; margin-bottom: $lineheight;
//font-size: 4.75mm; //font-size: 4.75mm;
line-height:1.5rem; line-height:$lineheight;
height:auto; height:auto;
@include borders(); @include borders();
@include border-radius(); @include border-radius();
@ -179,7 +179,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons { .share-buttons {
margin-top:1.5rem; margin-top: $lineheight;
} }
.reagir { .reagir {

44
src/scss/components/_cards.scss
View file

@ -5,8 +5,8 @@
* *
*/ */
$card-bigpad: 1.5rem; $card-bigpad: $lineheight;
$card-smallpad: 0.75rem; $card-smallpad: $lineheight_half;
@mixin card($size) { @mixin card($size) {
@include border-radius(); @include border-radius();
@ -14,7 +14,7 @@ $card-smallpad: 0.75rem;
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
margin:0; margin:0;
margin-bottom:1.5rem; margin-bottom:$lineheight;
padding: $size; padding: $size;
} }
@ -26,8 +26,8 @@ $card-smallpad: 0.75rem;
padding-left:0; padding-left:0;
padding-right:0; padding-right:0;
padding-bottom: $size/2!important; padding-bottom: $size/2!important;
margin-bottom:0.75rem; margin-bottom:$lineheight_half;
line-height:1.5rem; line-height:$lineheight;
position:relative; position:relative;
left: -$size*1.25; left: -$size*1.25;
@ -43,7 +43,7 @@ $card-smallpad: 0.75rem;
margin:0px; margin:0px;
color:$color-light; color:$color-light;
font-weight: $fontweight_big; font-weight: $fontweight_big;
line-height:1.5rem; line-height:$lineheight;
} }
} }
@ -75,11 +75,11 @@ $card-smallpad: 0.75rem;
flex-direction: column; flex-direction: column;
.menu-element { .menu-element {
display:flex; display:flex;
line-height:1.5rem; line-height:$lineheight;
padding-right:0.75rem; padding-right:$lineheight_half;
padding-left:0.325rem; padding-left:$lineheight_quarter;
padding-top:0.325rem; padding-top:$lineheight_quarter;
padding-bottom:0.325rem; padding-bottom:$lineheight_quarter;
margin:0; margin:0;
justify-content: space-between; justify-content: space-between;
@ -88,7 +88,7 @@ $card-smallpad: 0.75rem;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow:hidden; overflow:hidden;
@include biseau(0.75rem); @include biseau($lineheight_half);
} }
a { a {
@ -99,7 +99,7 @@ $card-smallpad: 0.75rem;
text-decoration:none; text-decoration:none;
color: $color-violet; color: $color-violet;
@include biseau(0.75rem); @include biseau($lineheight_half);
&:before { &:before {
background-color: darken($color-light2, 7.5%) background-color: darken($color-light2, 7.5%)
@ -111,10 +111,10 @@ $card-smallpad: 0.75rem;
.menu-divider { .menu-divider {
position: relative; position: relative;
left: -0.325rem; left: -$lineheight_quarter;
font-weight: $fontweight_hyper; font-weight: $fontweight_hyper;
padding-top:0.325rem; padding-top:$lineheight_quarter;
padding-bottom:0.325rem; padding-bottom:$lineheight_quarter;
} }
} }
} }
@ -128,7 +128,7 @@ $card-smallpad: 0.75rem;
&::before { &::before {
font-family: "ForkAwesome"; font-family: "ForkAwesome";
content:$symbol; content:$symbol;
padding-right:0.75rem; padding-right:$lineheight_half;
} }
} }
} }
@ -145,11 +145,11 @@ ul.card-list {
padding:0; padding:0;
margin:0; margin:0;
li.list-element { li.list-element {
line-height:1.5rem; line-height:$lineheight;
padding-right:0.75rem; padding-right:$lineheight_half;
padding-left:0.325rem; padding-left:$lineheight_quarter;
padding-top:0.325rem; padding-top:$lineheight_quarter;
padding-bottom:0.325rem; padding-bottom:$lineheight_quarter;
margin:0; margin:0;
} }
} }

20
src/scss/components/_previews.scss
View file

@ -3,14 +3,14 @@
* Special style for previews cards * Special style for previews cards
* *
*/ */
$preview-height: 8*1.5rem; $preview-height: 8*$lineheight;
.previews-section { .previews-section {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-gap: 1.5rem; grid-gap: $lineheight;
padding-bottom: 1.5rem; padding-bottom: $lineheight;
} }
.preview-container { .preview-container {
@ -49,7 +49,7 @@ $preview-height: 8*1.5rem;
.preview-item { .preview-item {
height: $preview-height; height: $preview-height;
font-size:0.9rem; font-size:0.9rem;
line-height: 1.5rem !important; line-height: $lineheight !important;
padding:0.2em; padding:0.2em;
text-align:justify; text-align:justify;
background-color:rgba(0,0,0,0.00); background-color:rgba(0,0,0,0.00);
@ -67,14 +67,14 @@ $preview-height: 8*1.5rem;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
padding: 0.75rem; padding: $lineheight_half;
backdrop-filter: none; backdrop-filter: none;
transition: background 0.3s; transition: background 0.3s;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $color-light; color: $color-light;
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: $lineheight;
font-weight:$fontweight_big; font-weight:$fontweight_big;
} }
@ -82,7 +82,7 @@ $preview-height: 8*1.5rem;
font-family: $basefont; font-family: $basefont;
font-size: 1rem; font-size: 1rem;
background-color: $color-primary; background-color: $color-primary;
@include card-header(0.75rem); @include card-header($lineheight_half);
font-weight: $fontweight_big; font-weight: $fontweight_big;
} }
} }
@ -159,7 +159,7 @@ $preview-height: 8*1.5rem;
border-radius:100%; border-radius:100%;
padding:0; padding:0;
margin:0; margin:0;
margin-right:1.5rem; margin-right:$lineheight;
} }
.author-metadata { .author-metadata {
@ -175,7 +175,7 @@ $preview-height: 8*1.5rem;
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom:1.5rem; margin-bottom:$lineheight;
} }
} }
@ -187,7 +187,7 @@ $preview-height: 8*1.5rem;
} }
.mwarea { .mwarea {
height:5*1.5rem; height:5*$lineheight;
} }
.mwaimg { .mwaimg {