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

62
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,9 +173,17 @@ 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 )
* *
* 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.
* *
@ -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;

26
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();
@ -136,7 +136,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
@include button($button-large); @include button($button-large);
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2); @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
margin:0 $button-large/2.5 0 $button-large/2.5; margin:0 $button-large/2.5 0 $button-large/2.5;
&:before { &:before {
content: " "!important; content: " "!important;
border-right:1px solid rgba(0,0,0,0.2); border-right:1px solid rgba(0,0,0,0.2);
@ -147,10 +147,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
} }
} }
} }
// COLORIZE BUTTONS // COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { .btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
&-blue { @include button-color($color-blue, $color-button-light); } &-blue { @include button-color($color-blue, $color-button-light); }
@ -166,7 +166,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
&-yellow { @include button-color($color-yellow, $color-button-light); } &-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, $color-button-light); } &-brown { @include button-color($color-brown, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); } &-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); } &-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); } &-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); } &-warning { @include button-color($color-warning, $color-button-light); }
@ -175,20 +175,20 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
&-success { @include button-color($color-success, $color-button-light);} &-success { @include button-color($color-success, $color-button-light);}
&-link {@include button-color(transparent, $color-dark);} &-link {@include button-color(transparent, $color-dark);}
} }
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons { .share-buttons {
margin-top:1.5rem; margin-top: $lineheight;
} }
.reagir { .reagir {
text-align:right; text-align:right;
} }
.btn, a.btn { .btn, a.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);} &-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);} &-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, $color-button-light);} &-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, $color-button-light);} &-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, $color-button-light);} &-mastodon {@include button-color(#282c37, $color-button-light);}
} }

62
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;
@ -35,7 +35,7 @@ $card-smallpad: 0.75rem;
width:95%; width:95%;
@include biseau($size); @include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont; font-family:$basefont;
font-size:1rem; font-size:1rem;
@ -43,12 +43,12 @@ $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;
} }
} }
@mixin card-color($background-color, $text-color) { @mixin card-color($background-color, $text-color) {
& .card-header, & .menu-header { & .card-header, & .menu-header {
@include background-color($background-color, $text-color); @include background-color($background-color, $text-color);
&:before { &:before {
@include background-color($background-color, $text-color); @include background-color($background-color, $text-color);
@ -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;
@ -87,8 +87,8 @@ $card-smallpad: 0.75rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow:hidden; overflow:hidden;
@include biseau(0.75rem); @include biseau($lineheight_half);
} }
a { a {
@ -98,23 +98,23 @@ $card-smallpad: 0.75rem;
&:hover { &:hover {
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%)
} }
} }
} }
.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;
} }
} }
@ -185,7 +185,7 @@ ul.card-list {
&-yellow { @include card-color($color-yellow, $color-light); } &-yellow { @include card-color($color-yellow, $color-light); }
&-brown { @include card-color($color-brown, $color-light); } &-brown { @include card-color($color-brown, $color-light); }
&-grey { @include card-color($color-grey, $color-light); } &-grey { @include card-color($color-grey, $color-light); }
&-primary { @include card-color($color-primary, $color-light); } &-primary { @include card-color($color-primary, $color-light); }
&-secondary { @include card-color($color-secondary, $color-light); } &-secondary { @include card-color($color-secondary, $color-light); }
&-warning { @include card-color($color-warning, $color-light); } &-warning { @include card-color($color-warning, $color-light); }
@ -207,12 +207,12 @@ ul.card-list {
&-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); }
&-danger { @include background-color($color-danger, $color-light); } &-danger { @include background-color($color-danger, $color-light); }
&-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); }
} }

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 {