quarante-douze/qdouze-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

scss/typography: Add headers and support custom colors

Browse source
This commit is contained in:
Kazhnuz 2018-10-24 11:02:24 +02:00
parent 14d6869f86
commit ade564c98f
4 changed files with 44 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
css/style.css
View file

@ -17,7 +17,14 @@
.align-right { .align-right {
text-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-face {
font-family: 'OpenSans'; font-family: 'OpenSans';
src: url("../fonts/OpenSans-Light-webfont.eot"); src: url("../fonts/OpenSans-Light-webfont.eot");
@ -88,7 +95,7 @@
font-weight: 800; font-weight: 800;
font-style: italic; } font-style: italic; }
/* ------------------ GLOBAL STYLE ------------------- */ /* 2.2 - Global Typography */
body { body {
font-family: OpenSans, sans-serif; font-family: OpenSans, sans-serif;
text-align: left; text-align: left;
@ -143,7 +150,7 @@ ol {
background: #2484c1; background: #2484c1;
color: #fff; } color: #fff; }
/* ------------------ WRAPPERS ------------------- */ /* 2.2 - Text Wrapper */
.text-wrapper { .text-wrapper {
font-size: calc(2.5mm + 1vw); font-size: calc(2.5mm + 1vw);
margin: auto; margin: auto;
@ -177,7 +184,7 @@ ol {
font-size: calc(2.5mm + 12px); font-size: calc(2.5mm + 12px);
max-width: 800px; } } max-width: 800px; } }
/* ------------------ TITLES ------------------- */ /* 2.3 - Titles */
h1, h2, h3, h4, h5, h6, h7 { h1, h2, h3, h4, h5, h6, h7 {
text-align: left; text-align: left;
font-size: 1em; font-size: 1em;
@ -222,7 +229,7 @@ h6 {
padding: 0.1em 0 1.2em 0; padding: 0.1em 0 1.2em 0;
font-weight: 600; } font-weight: 600; }
/* ------------------ HR ------------------- */ /* 2.4 - hr */
hr { hr {
border-top: 0px; border-top: 0px;
border-left: 0px; border-left: 0px;
@ -232,8 +239,8 @@ hr {
border-style: solid; border-style: solid;
margin: 1.5em; } margin: 1.5em; }
/* ------------------ QUOTE ------------------- */ /* 2.5 - Wells and quotes */
blockquote { blockquote, .quote, .well {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
@ -241,10 +248,10 @@ blockquote {
padding: 0.75em 1em 0.75em 1em; padding: 0.75em 1em 0.75em 1em;
max-width: 100%; max-width: 100%;
border-color: rgba(1, 1, 1, 0.15); } 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); } border-color: rgba(255, 255, 255, 0.15); }
pre { pre, .pre, .well-pre {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
@ -254,21 +261,20 @@ pre {
border-color: rgba(1, 1, 1, 0.2); border-color: rgba(1, 1, 1, 0.2);
background-color: #EEE; background-color: #EEE;
overflow-x: scroll; } overflow-x: scroll; }
.night-mode pre { .night-mode pre, .night-mode .pre, .night-mode .well-pre {
background-color: #222; background-color: #222;
border-color: rgba(255, 255, 255, 0.2); } border-color: rgba(255, 255, 255, 0.2); }
/* ------------------ SPECIAL STYLING ------------------- */ /* 2.6 - Special styling */
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: rgba(255, 255, 0, 0.33); background-color: #e33d22;
color: inherit; } color: inherit; }
.night-mode mark { .night-mode mark {
background-color: rgba(128, 128, 0, 0.66); } background-color: #e33d22; }
/* ------------------ SPECIAL STYLING ------------------- */
.time { .time {
font-style: italic; font-style: italic;
text-align: right; text-align: right;

2
scss/_definitions.scss
View file

@ -22,6 +22,8 @@ $color-link: $color-blue;
$color-selection: $color-blue; $color-selection: $color-blue;
$color-mark: $color-yellow; $color-mark: $color-yellow;
$color-font: #444;
@mixin borders() { @mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
} }

2
scss/_font-face.scss
View file

@ -1,4 +1,4 @@
/* ------------------ FONT LOADING ------------------- */ /* 2.1 - Font Face */
@font-face { @font-face {
font-family: 'OpenSans'; font-family: 'OpenSans';

36
scss/_typography.scss
View file

@ -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'; @import 'font-face';
/* ------------------ GLOBAL STYLE ------------------- */ /* 2.2 - Global Typography */
@mixin paragraph() { @mixin paragraph() {
padding:0; padding:0;
padding-bottom:1.5em; padding-bottom:1.5em;
margin:0; margin: 0;
} }
body { body {
font-family: OpenSans, sans-serif; font-family: OpenSans, sans-serif;
text-align: left; text-align: left;
font-size: 4mm; font-size: 4mm;
line-height: 1.5em; line-height: 1.5em;
color: #444; color: $color-font;
font-weight: 400; font-weight: 400;
} }
@ -65,7 +73,7 @@ ol {
::selection { background: #2484c1; color: #fff; } ::selection { background: #2484c1; color: #fff; }
::-moz-selection { background: #2484c1; color: #fff; } ::-moz-selection { background: #2484c1; color: #fff; }
/* ------------------ WRAPPERS ------------------- */ /* 2.2 - Text Wrapper */
.text-wrapper { .text-wrapper {
font-size: calc(2.5mm + 1vw); font-size: calc(2.5mm + 1vw);
@ -111,7 +119,7 @@ ol {
} }
} }
/* ------------------ TITLES ------------------- */ /* 2.3 - Titles */
@mixin title($size, $height, $top, $bottom, $weight) { @mixin title($size, $height, $top, $bottom, $weight) {
font-size: $size; font-size: $size;
@ -153,7 +161,7 @@ h6 {
@include title(1.1em, 1.4em, 0.1em, 1.2em, 600); @include title(1.1em, 1.4em, 0.1em, 1.2em, 600);
} }
/* ------------------ HR ------------------- */ /* 2.4 - hr */
hr { hr {
border-top: 0px; border-top: 0px;
@ -165,7 +173,7 @@ hr {
margin: 1.5em; margin: 1.5em;
} }
/* ------------------ QUOTE ------------------- */ /* 2.5 - Wells and quotes */
@mixin well() { @mixin well() {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
@ -178,7 +186,7 @@ hr {
max-width: 100%; max-width: 100%;
} }
blockquote { blockquote, .quote, .well {
@include well(); @include well();
border-color: rgba(1, 1, 1, 0.15); border-color: rgba(1, 1, 1, 0.15);
@ -187,7 +195,7 @@ blockquote {
} }
} }
pre { pre, .pre, .well-pre {
@include well(); @include well();
border-color: rgba(1,1,1,0.20); border-color: rgba(1,1,1,0.20);
background-color:#EEE; background-color:#EEE;
@ -201,22 +209,20 @@ pre {
/* ------------------ SPECIAL STYLING ------------------- */ /* 2.6 - Special styling */
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:rgba(255,255,0,0.33); background-color: $color-primary;
color: inherit; color: inherit;
} }
.night-mode mark { .night-mode mark {
background-color:rgba(128,128,0,0.66); background-color: $color-primary;
} }
/* ------------------ SPECIAL STYLING ------------------- */
.time { .time {
font-style: italic; font-style: italic;
text-align: right; text-align: right;