scss/typography: Add headers and support custom colors
This commit is contained in:
Kazhnuz
parent
14d6869f86
commit
ade564c98f
4 changed files with 44 additions and 30 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* ------------------ FONT LOADING ------------------- */
|
||||
/* 2.1 - Font Face */
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
/*
|
||||
* 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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Reference in a new issue