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 {
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;

2
scss/_definitions.scss
View file

@ -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)
}

2
scss/_font-face.scss
View file

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

34
scss/_typography.scss
View file

@ -1,11 +1,19 @@
/*
* 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 {
@ -13,7 +21,7 @@ body {
text-align: left;
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;