From ade564c98fc3cac4dbcd13c0282d4749afcd9f4c Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 24 Oct 2018 11:02:24 +0200 Subject: [PATCH] scss/typography: Add headers and support custom colors --- css/style.css | 34 ++++++++++++++++++++-------------- scss/_definitions.scss | 2 ++ scss/_font-face.scss | 2 +- scss/_typography.scss | 36 +++++++++++++++++++++--------------- 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 2e937c2..7f220f1 100644 --- a/css/style.css +++ b/css/style.css @@ -17,7 +17,14 @@ .align-right { text-align: right; } -/* ------------------ FONT LOADING ------------------- */ +/* + * 2 - Typography ( _typography.scss ) + * + * This part of the (s)css handle everything related to the typography + * like paragraphs, blockquote, etc. + * +*/ +/* 2.1 - Font Face */ @font-face { font-family: 'OpenSans'; src: url("../fonts/OpenSans-Light-webfont.eot"); @@ -88,7 +95,7 @@ font-weight: 800; font-style: italic; } -/* ------------------ GLOBAL STYLE ------------------- */ +/* 2.2 - Global Typography */ body { font-family: OpenSans, sans-serif; text-align: left; @@ -143,7 +150,7 @@ ol { background: #2484c1; color: #fff; } -/* ------------------ WRAPPERS ------------------- */ +/* 2.2 - Text Wrapper */ .text-wrapper { font-size: calc(2.5mm + 1vw); margin: auto; @@ -177,7 +184,7 @@ ol { font-size: calc(2.5mm + 12px); max-width: 800px; } } -/* ------------------ TITLES ------------------- */ +/* 2.3 - Titles */ h1, h2, h3, h4, h5, h6, h7 { text-align: left; font-size: 1em; @@ -222,7 +229,7 @@ h6 { padding: 0.1em 0 1.2em 0; font-weight: 600; } -/* ------------------ HR ------------------- */ +/* 2.4 - hr */ hr { border-top: 0px; border-left: 0px; @@ -232,8 +239,8 @@ hr { border-style: solid; margin: 1.5em; } -/* ------------------ QUOTE ------------------- */ -blockquote { +/* 2.5 - Wells and quotes */ +blockquote, .quote, .well { border-width: 0 0 0 0.2em; border-style: solid; border-radius: 3px; @@ -241,10 +248,10 @@ blockquote { padding: 0.75em 1em 0.75em 1em; max-width: 100%; border-color: rgba(1, 1, 1, 0.15); } - .night-mode blockquote { + .night-mode blockquote, .night-mode .quote, .night-mode .well { border-color: rgba(255, 255, 255, 0.15); } -pre { +pre, .pre, .well-pre { border-width: 0 0 0 0.2em; border-style: solid; border-radius: 3px; @@ -254,21 +261,20 @@ pre { border-color: rgba(1, 1, 1, 0.2); background-color: #EEE; overflow-x: scroll; } - .night-mode pre { + .night-mode pre, .night-mode .pre, .night-mode .well-pre { background-color: #222; border-color: rgba(255, 255, 255, 0.2); } -/* ------------------ SPECIAL STYLING ------------------- */ +/* 2.6 - Special styling */ mark { border-radius: 0.2em; padding: 0 0.2em 0 0.2em; - background-color: rgba(255, 255, 0, 0.33); + background-color: #e33d22; color: inherit; } .night-mode mark { - background-color: rgba(128, 128, 0, 0.66); } + background-color: #e33d22; } -/* ------------------ SPECIAL STYLING ------------------- */ .time { font-style: italic; text-align: right; diff --git a/scss/_definitions.scss b/scss/_definitions.scss index 65a2d50..f357d10 100644 --- a/scss/_definitions.scss +++ b/scss/_definitions.scss @@ -22,6 +22,8 @@ $color-link: $color-blue; $color-selection: $color-blue; $color-mark: $color-yellow; +$color-font: #444; + @mixin borders() { border: $border-size solid rgba(0, 0, 0, 0.3) } diff --git a/scss/_font-face.scss b/scss/_font-face.scss index 81b215a..0fee335 100644 --- a/scss/_font-face.scss +++ b/scss/_font-face.scss @@ -1,4 +1,4 @@ -/* ------------------ FONT LOADING ------------------- */ +/* 2.1 - Font Face */ @font-face { font-family: 'OpenSans'; diff --git a/scss/_typography.scss b/scss/_typography.scss index 8270c53..982d0f9 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -1,19 +1,27 @@ +/* + * 2 - Typography ( _typography.scss ) + * + * This part of the (s)css handle everything related to the typography + * like paragraphs, blockquote, etc. + * +*/ + @import 'font-face'; -/* ------------------ GLOBAL STYLE ------------------- */ +/* 2.2 - Global Typography */ @mixin paragraph() { padding:0; padding-bottom:1.5em; - margin:0; + margin: 0; } body { font-family: OpenSans, sans-serif; text-align: left; - font-size: 4mm; + font-size: 4mm; line-height: 1.5em; - color: #444; + color: $color-font; font-weight: 400; } @@ -65,7 +73,7 @@ ol { ::selection { background: #2484c1; color: #fff; } ::-moz-selection { background: #2484c1; color: #fff; } -/* ------------------ WRAPPERS ------------------- */ +/* 2.2 - Text Wrapper */ .text-wrapper { font-size: calc(2.5mm + 1vw); @@ -111,7 +119,7 @@ ol { } } -/* ------------------ TITLES ------------------- */ +/* 2.3 - Titles */ @mixin title($size, $height, $top, $bottom, $weight) { font-size: $size; @@ -153,7 +161,7 @@ h6 { @include title(1.1em, 1.4em, 0.1em, 1.2em, 600); } -/* ------------------ HR ------------------- */ +/* 2.4 - hr */ hr { border-top: 0px; @@ -165,7 +173,7 @@ hr { margin: 1.5em; } -/* ------------------ QUOTE ------------------- */ +/* 2.5 - Wells and quotes */ @mixin well() { border-width: 0 0 0 0.2em; @@ -178,7 +186,7 @@ hr { max-width: 100%; } -blockquote { +blockquote, .quote, .well { @include well(); border-color: rgba(1, 1, 1, 0.15); @@ -187,7 +195,7 @@ blockquote { } } -pre { +pre, .pre, .well-pre { @include well(); border-color: rgba(1,1,1,0.20); background-color:#EEE; @@ -201,22 +209,20 @@ pre { -/* ------------------ SPECIAL STYLING ------------------- */ +/* 2.6 - Special styling */ mark { border-radius: 0.2em; padding:0 0.2em 0 0.2em; - background-color:rgba(255,255,0,0.33); + background-color: $color-primary; color: inherit; } .night-mode mark { - background-color:rgba(128,128,0,0.66); + background-color: $color-primary; } -/* ------------------ SPECIAL STYLING ------------------- */ - .time { font-style: italic; text-align: right;