feat: begin adding typography support
This commit is contained in:
Kazhnuz
parent
77041a6285
commit
551d9b5e49
10 changed files with 806 additions and 261 deletions
|
|
@ -15,7 +15,6 @@
|
||||||
<!-- framework utilisés -->
|
<!-- framework utilisés -->
|
||||||
<link href="css/spectre.min.css" rel="stylesheet">
|
<link href="css/spectre.min.css" rel="stylesheet">
|
||||||
<link href="css/fork-awesome.css" rel="stylesheet">
|
<link href="css/fork-awesome.css" rel="stylesheet">
|
||||||
<link href="css/clear-typography.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<link href="css/style.css" rel="stylesheet">
|
<link href="css/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1,257 +0,0 @@
|
||||||
/* ------------------ FONT LOADING ------------------- */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-Light-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-LightItalic-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-Regular-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-Italic-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-Semibold-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-Bold-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-ExtraBold-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 800;
|
|
||||||
font-style: normal; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'OpenSans';
|
|
||||||
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot");
|
|
||||||
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
|
|
||||||
font-weight: 800;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
/* ------------------ GLOBAL STYLE ------------------- */
|
|
||||||
body {
|
|
||||||
font-family: OpenSans, sans-serif;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 4mm;
|
|
||||||
line-height: 1.5em;
|
|
||||||
color: #444;
|
|
||||||
font-weight: 400; }
|
|
||||||
|
|
||||||
.night-mode {
|
|
||||||
color: #BBB; }
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 600; }
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #2484c1;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 1.5em;
|
|
||||||
margin: 0; }
|
|
||||||
p:last-child {
|
|
||||||
padding-bottom: 0; }
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 1.5em;
|
|
||||||
margin: 0; }
|
|
||||||
ul ul {
|
|
||||||
padding-bottom: 0; }
|
|
||||||
ul li {
|
|
||||||
margin-left: 1.5em; }
|
|
||||||
|
|
||||||
ol {
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 1.5em;
|
|
||||||
margin: 0; }
|
|
||||||
ol ol {
|
|
||||||
padding-bottom: 0; }
|
|
||||||
ol li {
|
|
||||||
margin-left: 1.5em; }
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: #2484c1;
|
|
||||||
color: #fff; }
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: #2484c1;
|
|
||||||
color: #fff; }
|
|
||||||
|
|
||||||
/* ------------------ WRAPPERS ------------------- */
|
|
||||||
.text-wrapper {
|
|
||||||
font-size: calc(2.5mm + 1vw);
|
|
||||||
margin: auto;
|
|
||||||
line-height: 1.5em; }
|
|
||||||
.text-wrapper.debug {
|
|
||||||
background-image: -webkit-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
|
|
||||||
background-image: -moz-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
|
|
||||||
background-image: -ms-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
|
|
||||||
background-image: -o-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
|
|
||||||
background-image: linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
|
|
||||||
background-position: 50% 0;
|
|
||||||
background-size: 1.5em 1.5em; }
|
|
||||||
|
|
||||||
@media screen and (min-width: 640px) {
|
|
||||||
.text-wrapper.size-640 {
|
|
||||||
max-width: 640px;
|
|
||||||
font-size: calc(2.5mm + 6.4px); } }
|
|
||||||
|
|
||||||
@media screen and (min-width: 800px) {
|
|
||||||
.text-wrapper.size-800 {
|
|
||||||
font-size: calc(2.5mm + 8.0px);
|
|
||||||
max-width: 800px; } }
|
|
||||||
|
|
||||||
@media screen and (min-width: 920px) {
|
|
||||||
.text-wrapper.size-920 {
|
|
||||||
font-size: calc(2.5mm + 9.2px);
|
|
||||||
max-width: 800px; } }
|
|
||||||
|
|
||||||
@media screen and (min-width: 1200px) {
|
|
||||||
.text-wrapper.size-1200 {
|
|
||||||
font-size: calc(2.5mm + 12px);
|
|
||||||
max-width: 800px; } }
|
|
||||||
|
|
||||||
/* ------------------ TITLES ------------------- */
|
|
||||||
h1, h2, h3, h4, h5, h6, h7 {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 400; }
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.33333em;
|
|
||||||
line-height: 1em;
|
|
||||||
padding: 0.33333em 0 0.6em 0;
|
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
padding: 0.33333em 0 0.4em 0;
|
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
padding: 0em 0 1em 0;
|
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
padding: 0em 0 1em 0;
|
|
||||||
font-weight: 600; }
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 1.33333em;
|
|
||||||
line-height: 1em;
|
|
||||||
padding: 0.1em 0 1.13333em 0;
|
|
||||||
font-weight: 600; }
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 1.1em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
padding: 0.1em 0 1.2em 0;
|
|
||||||
font-weight: 600; }
|
|
||||||
|
|
||||||
/* ------------------ HR ------------------- */
|
|
||||||
hr {
|
|
||||||
border-top: 0px;
|
|
||||||
border-left: 0px;
|
|
||||||
border-right: 0px;
|
|
||||||
border-bottom: 1px;
|
|
||||||
border-color: rgba(1, 1, 1, 0.15);
|
|
||||||
border-style: solid;
|
|
||||||
margin: 1.5em; }
|
|
||||||
|
|
||||||
/* ------------------ QUOTE ------------------- */
|
|
||||||
blockquote {
|
|
||||||
border-width: 0 0 0 0.2em;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin: -0.75em -0.2em 0.75em -0.2em;
|
|
||||||
padding: 0.75em 1em 0.75em 1em;
|
|
||||||
max-width: 100%;
|
|
||||||
border-color: rgba(1, 1, 1, 0.15); }
|
|
||||||
.night-mode blockquote {
|
|
||||||
border-color: rgba(255, 255, 255, 0.15); }
|
|
||||||
|
|
||||||
pre {
|
|
||||||
border-width: 0 0 0 0.2em;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin: -0.75em -0.2em 0.75em -0.2em;
|
|
||||||
padding: 0.75em 1em 0.75em 1em;
|
|
||||||
max-width: 100%;
|
|
||||||
border-color: rgba(1, 1, 1, 0.2);
|
|
||||||
background-color: #EEE;
|
|
||||||
overflow-x: scroll; }
|
|
||||||
.night-mode pre {
|
|
||||||
background-color: #222;
|
|
||||||
border-color: rgba(255, 255, 255, 0.2); }
|
|
||||||
|
|
||||||
/* ------------------ SPECIAL STYLING ------------------- */
|
|
||||||
mark {
|
|
||||||
border-radius: 0.2em;
|
|
||||||
padding: 0 0.2em 0 0.2em;
|
|
||||||
background-color: rgba(255, 255, 0, 0.33);
|
|
||||||
color: inherit; }
|
|
||||||
|
|
||||||
.night-mode mark {
|
|
||||||
background-color: rgba(128, 128, 0, 0.66); }
|
|
||||||
|
|
||||||
/* ------------------ SPECIAL STYLING ------------------- */
|
|
||||||
.time {
|
|
||||||
font-style: italic;
|
|
||||||
text-align: right;
|
|
||||||
width: 100%;
|
|
||||||
display: block; }
|
|
||||||
389
css/style.css
389
css/style.css
|
|
@ -161,6 +161,395 @@ blockquote, pre {
|
||||||
color: #859900;
|
color: #859900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 2 - Typography ( _typography.scss )
|
||||||
|
*
|
||||||
|
* This part of the (s)css handle everything related to the typography
|
||||||
|
* like paragraphs, blockquote, etc.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/* 2.1 - Font Face */
|
||||||
|
/* 2.1.1 - OpenSans */
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-Light-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("fonts/OpenSans-Light-webfont.woff") format("woff"), url("fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-LightItalic-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-Regular-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("fonts/OpenSans-Regular-webfont.woff") format("woff"), url("fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-Italic-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("fonts/OpenSans-Italic-webfont.woff") format("woff"), url("fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-Semibold-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-SemiboldItalic-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-Bold-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("fonts/OpenSans-Bold-webfont.woff") format("woff"), url("fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-BoldItalic-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-ExtraBold-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "OpenSans";
|
||||||
|
src: url("fonts/OpenSans-ExtraBoldItalic-webfont.eot");
|
||||||
|
src: url("fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
/* 2.2 - Global Typography */
|
||||||
|
body {
|
||||||
|
font-family: OpenSans, sans-serif;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 4.5mm;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: #073642;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.night-mode {
|
||||||
|
color: #eee8d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #268bd2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover, a:active {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
p:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul ul {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ol ol {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
ol li {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #268bd2;
|
||||||
|
color: #fdf6e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: #268bd2;
|
||||||
|
color: #fdf6e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.2 - Text Wrapper */
|
||||||
|
.article-content {
|
||||||
|
font-size: calc(4mm + 0.4vw);
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: 1em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.article-content p, .article-content em, .article-content p em {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.article-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.article-content .article-thumbnail {
|
||||||
|
padding-bottom: 1em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.article-content .article-thumbnail img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.article-content .article-excerpt {
|
||||||
|
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: calc(3.5mm + 0.4vw);
|
||||||
|
}
|
||||||
|
.article-content .article-author {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.article-content .article-author .card-meta {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.article-content .bypass-flex-fontsize {
|
||||||
|
font-size: 4mm;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.3 - Titles */
|
||||||
|
h1, h2, h3, h4, h5, h6, h7 {
|
||||||
|
font-family: OpenSans;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h1.page-title, h2.page-title, h3.page-title, h4.page-title, h5.page-title, h6.page-title, h7.page-title {
|
||||||
|
font-family: OpenSans;
|
||||||
|
color: #6c71c4;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h1.page-title i, h2.page-title i, h3.page-title i, h4.page-title i, h5.page-title i, h6.page-title i, h7.page-title i {
|
||||||
|
font-size: 0.55em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.175em;
|
||||||
|
}
|
||||||
|
h1.page-title-flex, h2.page-title-flex, h3.page-title-flex, h4.page-title-flex, h5.page-title-flex, h6.page-title-flex, h7.page-title-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
h1.page-title-flex > span, h1.page-title-flex > i, h1.page-title-flex > a, h2.page-title-flex > span, h2.page-title-flex > i, h2.page-title-flex > a, h3.page-title-flex > span, h3.page-title-flex > i, h3.page-title-flex > a, h4.page-title-flex > span, h4.page-title-flex > i, h4.page-title-flex > a, h5.page-title-flex > span, h5.page-title-flex > i, h5.page-title-flex > a, h6.page-title-flex > span, h6.page-title-flex > i, h6.page-title-flex > a, h7.page-title-flex > span, h7.page-title-flex > i, h7.page-title-flex > a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
h1.page-title-flex > a, h2.page-title-flex > a, h3.page-title-flex > a, h4.page-title-flex > a, h5.page-title-flex > a, h6.page-title-flex > a, h7.page-title-flex > a {
|
||||||
|
color: #6c71c4;
|
||||||
|
}
|
||||||
|
h1.page-title-flex > a:hover, h1.page-title-flex > a:focus, h1.page-title-flex > a:active, h2.page-title-flex > a:hover, h2.page-title-flex > a:focus, h2.page-title-flex > a:active, h3.page-title-flex > a:hover, h3.page-title-flex > a:focus, h3.page-title-flex > a:active, h4.page-title-flex > a:hover, h4.page-title-flex > a:focus, h4.page-title-flex > a:active, h5.page-title-flex > a:hover, h5.page-title-flex > a:focus, h5.page-title-flex > a:active, h6.page-title-flex > a:hover, h6.page-title-flex > a:focus, h6.page-title-flex > a:active, h7.page-title-flex > a:hover, h7.page-title-flex > a:focus, h7.page-title-flex > a:active {
|
||||||
|
color: #484fb5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 0.5em 0 0.6em 0;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: 0.333333em 0 0.4em 0;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 0em 0 1em 0;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 0em 0 1em 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.333333em;
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 0.1em 0 1.133333em 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 1.4em;
|
||||||
|
padding: 0.1em 0 1.2em 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.4 - hr */
|
||||||
|
hr {
|
||||||
|
border-top: 0px;
|
||||||
|
border-left: 0px;
|
||||||
|
border-right: 0px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-color: rgba(1, 1, 1, 0.15);
|
||||||
|
border-style: solid;
|
||||||
|
margin: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.5 - Wells and quotes */
|
||||||
|
blockquote, .quote, .well {
|
||||||
|
border-width: 0 0 0 0em;
|
||||||
|
border-style: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
margin: -0.75em -0.2em 0.75em -0.2em;
|
||||||
|
padding: 0.75em 1em 0.75em 1em;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: #eee8d5;
|
||||||
|
font-style: italic;
|
||||||
|
color: #073642;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, .pre, .well-pre {
|
||||||
|
border-width: 0 0 0 0em;
|
||||||
|
border-style: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
margin: -0.75em -0.2em 0.75em -0.2em;
|
||||||
|
padding: 0.75em 1em 0.75em 1em;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: #eee8d5;
|
||||||
|
font-style: italic;
|
||||||
|
color: #073642;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: transparent;
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.6 - Special styling */
|
||||||
|
mark {
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding: 0 0.2em 0 0.2em;
|
||||||
|
background-color: #ffd44f;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.night-mode mark {
|
||||||
|
background-color: #6c71c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-style: italic;
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.6.1 - Colored texts */
|
||||||
|
.text-blue {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
.text-violet {
|
||||||
|
color: #d33682;
|
||||||
|
}
|
||||||
|
.text-purple {
|
||||||
|
color: #6c71c4;
|
||||||
|
}
|
||||||
|
.text-red {
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
.text-orange {
|
||||||
|
color: #cb4b16;
|
||||||
|
}
|
||||||
|
.text-green {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
.text-skyblue {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
.text-dark {
|
||||||
|
color: #002b36;
|
||||||
|
}
|
||||||
|
.text-light {
|
||||||
|
color: #fdf6e3;
|
||||||
|
}
|
||||||
|
.text-turquoise {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
.text-yellow {
|
||||||
|
color: #b58900;
|
||||||
|
}
|
||||||
|
.text-brown {
|
||||||
|
color: #b58900;
|
||||||
|
}
|
||||||
|
.text-grey {
|
||||||
|
color: #586e75;
|
||||||
|
}
|
||||||
|
.text-primary {
|
||||||
|
color: #6c71c4;
|
||||||
|
}
|
||||||
|
.text-secondary {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
.text-warning {
|
||||||
|
color: #cb4b16;
|
||||||
|
}
|
||||||
|
.text-danger {
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
.text-info {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
.text-success {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* 1. Cards and containers
|
* 1. Cards and containers
|
||||||
* All elements that are supposed to contain other stuff
|
* All elements that are supposed to contain other stuff
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -15,7 +15,6 @@
|
||||||
<!-- framework utilisés -->
|
<!-- framework utilisés -->
|
||||||
<link href="css/spectre.min.css" rel="stylesheet">
|
<link href="css/spectre.min.css" rel="stylesheet">
|
||||||
<link href="css/fork-awesome.css" rel="stylesheet">
|
<link href="css/fork-awesome.css" rel="stylesheet">
|
||||||
<link href="css/clear-typography.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<link href="css/style.css" rel="stylesheet">
|
<link href="css/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@
|
||||||
<!-- framework utilisés -->
|
<!-- framework utilisés -->
|
||||||
<link href="css/spectre.min.css" rel="stylesheet">
|
<link href="css/spectre.min.css" rel="stylesheet">
|
||||||
<link href="css/fork-awesome.css" rel="stylesheet">
|
<link href="css/fork-awesome.css" rel="stylesheet">
|
||||||
<link href="css/clear-typography.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<link href="css/style.css" rel="stylesheet">
|
<link href="css/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
126
scss/_font-face.scss
Normal file
126
scss/_font-face.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
||||||
|
/* 2.1 - Font Face */
|
||||||
|
|
||||||
|
$basefont: OpenSans, sans-serif;
|
||||||
|
$titlefont: OpenSans, sans-serif;
|
||||||
|
|
||||||
|
/* 2.1.1 - OpenSans */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-Light-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-LightItalic-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-Regular-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-Italic-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-Semibold-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-Bold-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'OpenSans';
|
||||||
|
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
|
||||||
|
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
|
||||||
|
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
|
||||||
|
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
|
||||||
|
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
@ -31,6 +31,7 @@ $color-link: $color-blue;
|
||||||
$color-selection: $color-blue;
|
$color-selection: $color-blue;
|
||||||
$color-mark: $color-yellow;
|
$color-mark: $color-yellow;
|
||||||
|
|
||||||
|
$color-font: $color-dark2;
|
||||||
$color-warning: $color-orange;
|
$color-warning: $color-orange;
|
||||||
$color-danger: $color-red;
|
$color-danger: $color-red;
|
||||||
$color-info: $color-skyblue;
|
$color-info: $color-skyblue;
|
||||||
|
|
|
||||||
287
scss/_typography.scss
Normal file
287
scss/_typography.scss
Normal file
|
|
@ -0,0 +1,287 @@
|
||||||
|
/*
|
||||||
|
* 2 - Typography ( _typography.scss )
|
||||||
|
*
|
||||||
|
* This part of the (s)css handle everything related to the typography
|
||||||
|
* like paragraphs, blockquote, etc.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import 'font-face';
|
||||||
|
|
||||||
|
/* 2.2 - Global Typography */
|
||||||
|
|
||||||
|
@mixin paragraph() {
|
||||||
|
padding:0;
|
||||||
|
padding-bottom:1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $basefont;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 4.5mm;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: $color-font;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.night-mode {
|
||||||
|
color: $color-light2;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $color-link;
|
||||||
|
text-decoration:none;
|
||||||
|
&:hover, &:active {
|
||||||
|
color: $color-link;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@include paragraph();
|
||||||
|
&:last-child {
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
@include paragraph();
|
||||||
|
ul {
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-left:1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
@include paragraph();
|
||||||
|
ol {
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-left:1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
::selection { background: $color-selection; color: $color-light; }
|
||||||
|
::-moz-selection { background: $color-selection; color: $color-light; }
|
||||||
|
|
||||||
|
/* 2.2 - Text Wrapper */
|
||||||
|
|
||||||
|
.article-content {
|
||||||
|
font-size: calc(4mm + 0.4vw);
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: 1em;
|
||||||
|
font-weight:300;
|
||||||
|
p, em, p em {
|
||||||
|
font-weight:300;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-thumbnail {
|
||||||
|
padding-bottom: 1em;
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-excerpt {
|
||||||
|
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: calc(3.5mm + 0.4vw);
|
||||||
|
}
|
||||||
|
.article-author {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
.card-meta {
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bypass-flex-fontsize {
|
||||||
|
font-size: 4mm;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.3 - Titles */
|
||||||
|
|
||||||
|
@mixin title($size, $height, $top, $bottom, $weight) {
|
||||||
|
font-size: $size;
|
||||||
|
line-height: $height;
|
||||||
|
padding: $top 0 $bottom 0;
|
||||||
|
font-weight: $weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, h7 {
|
||||||
|
font-family: OpenSans;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
font-weight:400;
|
||||||
|
|
||||||
|
&.page-title {
|
||||||
|
font-family: OpenSans;
|
||||||
|
color: $color-primary;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 0.55em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.175em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
& > span, & > i, & > a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover, &:focus, &:active {
|
||||||
|
color: darken($color-primary, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@include title(3em, 1em, 0.5em, 0.6em, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include title(2em, 1.5em, 0.333333em, 0.4em, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@include title(1.5em, 1em, 0em, 1em, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@include title(1.5em, 1em, 0em, 1em, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@include title(1.333333em, 1em, 0.1em, 1.133333em, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@include title(1.1em, 1.4em, 0.1em, 1.2em, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.4 - hr */
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-top: 0px;
|
||||||
|
border-left: 0px;
|
||||||
|
border-right: 0px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-color: rgba(1,1,1,0.15);
|
||||||
|
border-style: solid;
|
||||||
|
margin: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.5 - Wells and quotes */
|
||||||
|
|
||||||
|
@mixin well() {
|
||||||
|
border-width: 0 0 0 0em;
|
||||||
|
border-style: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
|
||||||
|
margin: -0.75em -0.2em 0.75em -0.2em;
|
||||||
|
padding: 0.75em 1em 0.75em 1em;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: $color-light2;
|
||||||
|
font-style: italic;
|
||||||
|
color: $color-dark2;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote, .quote, .well {
|
||||||
|
@include well();
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, .pre, .well-pre {
|
||||||
|
@include well();
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background:transparent;
|
||||||
|
color: $color-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 2.6 - Special styling */
|
||||||
|
|
||||||
|
mark {
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding:0 0.2em 0 0.2em;
|
||||||
|
|
||||||
|
background-color: lighten($color-mark, 30%);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.night-mode mark {
|
||||||
|
background-color: $color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-style: italic;
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.6.1 - Colored texts */
|
||||||
|
|
||||||
|
@mixin text-color($text-color) {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
&-blue { @include text-color($color-blue); }
|
||||||
|
&-violet { @include text-color($color-violet); }
|
||||||
|
&-purple { @include text-color($color-purple); }
|
||||||
|
&-red { @include text-color($color-red); }
|
||||||
|
&-orange { @include text-color($color-orange); }
|
||||||
|
&-green { @include text-color($color-green); }
|
||||||
|
&-skyblue { @include text-color($color-skyblue); }
|
||||||
|
&-dark { @include text-color($color-dark); }
|
||||||
|
&-light { @include text-color($color-light); }
|
||||||
|
&-turquoise { @include text-color($color-turquoise); }
|
||||||
|
&-yellow { @include text-color($color-yellow); }
|
||||||
|
&-brown { @include text-color($color-brown); }
|
||||||
|
&-grey { @include text-color($color-grey); }
|
||||||
|
|
||||||
|
&-primary { @include text-color($color-primary); }
|
||||||
|
&-secondary { @include text-color($color-secondary); }
|
||||||
|
&-warning { @include text-color($color-warning); }
|
||||||
|
&-danger { @include text-color($color-danger); }
|
||||||
|
&-info { @include text-color($color-info); }
|
||||||
|
&-success { @include text-color($color-success); }
|
||||||
|
}
|
||||||
|
|
@ -2,4 +2,6 @@
|
||||||
|
|
||||||
@import 'definitions';
|
@import 'definitions';
|
||||||
|
|
||||||
|
@import 'typography';
|
||||||
|
|
||||||
@import 'commons';
|
@import 'commons';
|
||||||
Loading…
Reference in a new issue