chore: make lineheight controlled by the definitions
This commit is contained in:
Kazhnuz
parent
df97ce9a7e
commit
0b3ae8b2b0
7 changed files with 124 additions and 91 deletions
62
dist/style.css
vendored
62
dist/style.css
vendored
|
|
@ -1,8 +1,26 @@
|
|||
@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 {
|
||||
color: #2aa198; }
|
||||
|
||||
|
|
@ -155,9 +173,17 @@ blockquote, pre {
|
|||
.text-success {
|
||||
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 )
|
||||
*
|
||||
*
|
||||
* This part of the (s)css handle everything related to the typography
|
||||
* like paragraphs, blockquote, etc.
|
||||
*
|
||||
|
|
@ -632,12 +658,11 @@ th {
|
|||
.table-success th {
|
||||
color: #859900; }
|
||||
|
||||
/* --- 03. GLOBAL STYLING --- */
|
||||
/*
|
||||
* 1. Cards and containers
|
||||
* All elements that are supposed to contain other stuff
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*
|
||||
*/
|
||||
*/
|
||||
.no-pills {
|
||||
list-style: none; }
|
||||
|
||||
|
|
@ -795,6 +820,11 @@ ul.social {
|
|||
color: #fdf6e3;
|
||||
background-color: #073642; }
|
||||
|
||||
/* --- 04. COMPOSANTS --- */
|
||||
/*
|
||||
* Les différents composants réutilisables de la page.
|
||||
*
|
||||
*/
|
||||
/*
|
||||
* 2. Cards and containers
|
||||
* All elements that are supposed to contain other stuff
|
||||
|
|
@ -854,9 +884,9 @@ ul.social {
|
|||
display: flex;
|
||||
line-height: 1.5rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.325rem;
|
||||
padding-top: 0.325rem;
|
||||
padding-bottom: 0.325rem;
|
||||
padding-left: 0.375rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
word-wrap: none;
|
||||
|
|
@ -900,10 +930,10 @@ ul.social {
|
|||
background-color: #e3d9ba; }
|
||||
.card-menu .menu-divider, .menu-menu .menu-divider {
|
||||
position: relative;
|
||||
left: -0.325rem;
|
||||
left: -0.375rem;
|
||||
font-weight: 800;
|
||||
padding-top: 0.325rem;
|
||||
padding-bottom: 0.325rem; }
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem; }
|
||||
|
||||
/* CARD LIST - Make a list part of a card */
|
||||
ul.card-list {
|
||||
|
|
@ -912,9 +942,9 @@ ul.card-list {
|
|||
ul.card-list li.list-element {
|
||||
line-height: 1.5rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.325rem;
|
||||
padding-top: 0.325rem;
|
||||
padding-bottom: 0.325rem;
|
||||
padding-left: 0.375rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
margin: 0; }
|
||||
|
||||
.list-check li.list-element {
|
||||
|
|
|
|||
|
|
@ -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-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-size: 0px;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: 3*1.5rem;
|
||||
padding-right: 3*1.5rem;
|
||||
padding-left: 3*$lineheight;
|
||||
padding-right: 3*$lineheight;
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
#page-header {
|
||||
background: $color-turquoise url('img/background.png') center bottom repeat-x;
|
||||
height:10*1.5rem;
|
||||
height:10*$lineheight;
|
||||
border-top: 6px solid $color-dark2;
|
||||
@include container-big();
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ header h1 {
|
|||
display: grid;
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-rows: auto;
|
||||
row-gap: 1.5rem;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas: "main sidebar";
|
||||
|
|
@ -95,7 +95,7 @@ section.sidebar {
|
|||
display: grid;
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-rows: auto;
|
||||
row-gap: 1.5rem;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas: "sidebar main";
|
||||
|
|
@ -104,7 +104,7 @@ section.sidebar {
|
|||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.container-personnage {
|
||||
|
|
|
|||
|
|
@ -10,21 +10,17 @@
|
|||
|
||||
/* 2.2 - Global Typography */
|
||||
|
||||
$baseline: 1.5;
|
||||
$base_lineheight: $baseline * 1rem;
|
||||
$base_fontsize: 4.75mm;
|
||||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom: $base_lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: $base_fontsize;
|
||||
line-height: $base_lineheight;
|
||||
font-size: $fontsize;
|
||||
line-height: $lineheight;
|
||||
color: $color-font;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
|
@ -65,8 +61,8 @@ ul, ol {
|
|||
}
|
||||
li {
|
||||
margin:0;
|
||||
margin-left: $base_lineheight;
|
||||
line-height: $base_lineheight;
|
||||
margin-left: $lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,12 +103,12 @@ ul, ol {
|
|||
}
|
||||
|
||||
.bypass-flex-fontsize {
|
||||
line-height: $base_lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
article.maintext {
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
/* 2.3 - Titles */
|
||||
|
|
@ -121,9 +117,9 @@ article.maintext {
|
|||
$lineNumber: ceil($size / 1.5);
|
||||
font-family: $font;
|
||||
font-size: $size * 1rem;
|
||||
line-height: $lineNumber * 1.5rem;
|
||||
line-height: $lineNumber * $lineheight;
|
||||
padding: 0;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
|
|
@ -208,8 +204,8 @@ hr {
|
|||
border-style: none;
|
||||
border-radius: 0px;
|
||||
|
||||
margin: 0 0 1.5rem 0;
|
||||
padding: 1.5rem 1rem 1.5rem 1rem;
|
||||
margin: 0 0 $lineheight 0;
|
||||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
background-color: $color-light2;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
$color-button-light: $color-light;
|
||||
$color-button-dark: $color-dark;
|
||||
|
||||
$button_large: 1.5rem;
|
||||
$button_small: 0.375rem;
|
||||
$button_large: $lineheight;
|
||||
$button_small: $lineheight_quarter;
|
||||
|
||||
@mixin button($size) {
|
||||
padding: $size;
|
||||
|
|
@ -16,9 +16,9 @@ $button_small: 0.375rem;
|
|||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:1.5rem;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
@include borders();
|
||||
@include border-radius();
|
||||
|
|
@ -136,7 +136,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
@include button($button-large);
|
||||
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
|
||||
margin:0 $button-large/2.5 0 $button-large/2.5;
|
||||
|
||||
|
||||
&:before {
|
||||
content: " "!important;
|
||||
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 {
|
||||
&-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); }
|
||||
&-brown { @include button-color($color-brown, $color-button-light); }
|
||||
&-grey { @include button-color($color-grey, $color-button-light); }
|
||||
|
||||
|
||||
&-primary { @include button-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include button-color($color-secondary, $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);}
|
||||
&-link {@include button-color(transparent, $color-dark);}
|
||||
}
|
||||
|
||||
|
||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||
|
||||
.share-buttons {
|
||||
margin-top:1.5rem;
|
||||
margin-top: $lineheight;
|
||||
}
|
||||
|
||||
|
||||
.reagir {
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
.btn, a.btn {
|
||||
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
||||
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
||||
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
||||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$card-bigpad: 1.5rem;
|
||||
$card-smallpad: 0.75rem;
|
||||
$card-bigpad: $lineheight;
|
||||
$card-smallpad: $lineheight_half;
|
||||
|
||||
@mixin card($size) {
|
||||
@include border-radius();
|
||||
|
|
@ -14,7 +14,7 @@ $card-smallpad: 0.75rem;
|
|||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:1.5rem;
|
||||
margin-bottom:$lineheight;
|
||||
padding: $size;
|
||||
}
|
||||
|
||||
|
|
@ -26,8 +26,8 @@ $card-smallpad: 0.75rem;
|
|||
padding-left:0;
|
||||
padding-right:0;
|
||||
padding-bottom: $size/2!important;
|
||||
margin-bottom:0.75rem;
|
||||
line-height:1.5rem;
|
||||
margin-bottom:$lineheight_half;
|
||||
line-height:$lineheight;
|
||||
|
||||
position:relative;
|
||||
left: -$size*1.25;
|
||||
|
|
@ -35,7 +35,7 @@ $card-smallpad: 0.75rem;
|
|||
width:95%;
|
||||
|
||||
@include biseau($size);
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-family:$basefont;
|
||||
font-size:1rem;
|
||||
|
|
@ -43,12 +43,12 @@ $card-smallpad: 0.75rem;
|
|||
margin:0px;
|
||||
color:$color-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:1.5rem;
|
||||
line-height:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& .card-header, & .menu-header {
|
||||
& .card-header, & .menu-header {
|
||||
@include background-color($background-color, $text-color);
|
||||
&:before {
|
||||
@include background-color($background-color, $text-color);
|
||||
|
|
@ -75,11 +75,11 @@ $card-smallpad: 0.75rem;
|
|||
flex-direction: column;
|
||||
.menu-element {
|
||||
display:flex;
|
||||
line-height:1.5rem;
|
||||
padding-right:0.75rem;
|
||||
padding-left:0.325rem;
|
||||
padding-top:0.325rem;
|
||||
padding-bottom:0.325rem;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
margin:0;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
@ -87,8 +87,8 @@ $card-smallpad: 0.75rem;
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
|
||||
@include biseau(0.75rem);
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -98,23 +98,23 @@ $card-smallpad: 0.75rem;
|
|||
&:hover {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
|
||||
@include biseau(0.75rem);
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
&:before {
|
||||
background-color: darken($color-light2, 7.5%)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
position: relative;
|
||||
left: -0.325rem;
|
||||
left: -$lineheight_quarter;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top:0.325rem;
|
||||
padding-bottom:0.325rem;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ $card-smallpad: 0.75rem;
|
|||
&::before {
|
||||
font-family: "ForkAwesome";
|
||||
content:$symbol;
|
||||
padding-right:0.75rem;
|
||||
padding-right:$lineheight_half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -145,11 +145,11 @@ ul.card-list {
|
|||
padding:0;
|
||||
margin:0;
|
||||
li.list-element {
|
||||
line-height:1.5rem;
|
||||
padding-right:0.75rem;
|
||||
padding-left:0.325rem;
|
||||
padding-top:0.325rem;
|
||||
padding-bottom:0.325rem;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
|
@ -185,7 +185,7 @@ ul.card-list {
|
|||
&-yellow { @include card-color($color-yellow, $color-light); }
|
||||
&-brown { @include card-color($color-brown, $color-light); }
|
||||
&-grey { @include card-color($color-grey, $color-light); }
|
||||
|
||||
|
||||
&-primary { @include card-color($color-primary, $color-light); }
|
||||
&-secondary { @include card-color($color-secondary, $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); }
|
||||
&-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); }
|
||||
&-danger { @include background-color($color-danger, $color-light); }
|
||||
&-info { @include background-color($color-info, $color-light); }
|
||||
&-success { @include background-color($color-success, $color-light); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
* Special style for previews cards
|
||||
*
|
||||
*/
|
||||
$preview-height: 8*1.5rem;
|
||||
$preview-height: 8*$lineheight;
|
||||
|
||||
.previews-section {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
|
|
@ -49,7 +49,7 @@ $preview-height: 8*1.5rem;
|
|||
.preview-item {
|
||||
height: $preview-height;
|
||||
font-size:0.9rem;
|
||||
line-height: 1.5rem !important;
|
||||
line-height: $lineheight !important;
|
||||
padding:0.2em;
|
||||
text-align:justify;
|
||||
background-color:rgba(0,0,0,0.00);
|
||||
|
|
@ -67,14 +67,14 @@ $preview-height: 8*1.5rem;
|
|||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding: 0.75rem;
|
||||
padding: $lineheight_half;
|
||||
backdrop-filter: none;
|
||||
transition: background 0.3s;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-light;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
line-height: $lineheight;
|
||||
font-weight:$fontweight_big;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ $preview-height: 8*1.5rem;
|
|||
font-family: $basefont;
|
||||
font-size: 1rem;
|
||||
background-color: $color-primary;
|
||||
@include card-header(0.75rem);
|
||||
@include card-header($lineheight_half);
|
||||
font-weight: $fontweight_big;
|
||||
}
|
||||
}
|
||||
|
|
@ -159,7 +159,7 @@ $preview-height: 8*1.5rem;
|
|||
border-radius:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-right:1.5rem;
|
||||
margin-right:$lineheight;
|
||||
}
|
||||
|
||||
.author-metadata {
|
||||
|
|
@ -175,7 +175,7 @@ $preview-height: 8*1.5rem;
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom:1.5rem;
|
||||
margin-bottom:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +187,7 @@ $preview-height: 8*1.5rem;
|
|||
}
|
||||
|
||||
.mwarea {
|
||||
height:5*1.5rem;
|
||||
height:5*$lineheight;
|
||||
}
|
||||
|
||||
.mwaimg {
|
||||
|
|
|
|||
Reference in a new issue