diff --git a/css/clear-typography.css b/css/clear-typography.css
deleted file mode 100644
index 324673d..0000000
--- a/css/clear-typography.css
+++ /dev/null
@@ -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; }
diff --git a/css/style.css b/css/style.css
index c2b27ae..7851a15 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,261 @@
+/* ------------------ 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(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
+ background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
+ background-image: linear-gradient(rgba(0, 0, 0, 0) 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; }
+
/* ------------------ CUSTOM STYLE ------------------- */
body {
background: #666 url("../img/background.png");
@@ -36,14 +294,14 @@ header h1 {
font-weight: 700;
font-size: 5.4em;
font-style: oblique;
- text-shadow: 0px 2px 12px transparent;
+ text-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
padding-bottom: 0px;
margin: auto;
text-align: center;
line-height: 1.5em; }
.navbar {
- box-shadow: 0px 2px 10px transparent;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0; }
@@ -53,7 +311,7 @@ header h1 {
margin: 0; }
.dropdown-menu {
- box-shadow: 0px 2px 6px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
/* ------------------ FOOTER ------------------- */
footer {
@@ -84,16 +342,16 @@ ul.social {
/* ------------------ CARDS ------------------- */
.card {
border-radius: 0px 0px 0px 0px;
- box-shadow: 0px 2px 10px transparent;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none;
margin-bottom: 1.2em; }
.card-shadow {
- box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 {
color: #333;
- text-shadow: 0px 0px 0px transparent; }
+ text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }
/* header and titles */
.card-header {
@@ -154,12 +412,12 @@ a.list-group-item:hover {
.btn {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
- box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }
.btn:hover {
position: relative;
- box-shadow: 0px 2px 6px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3); }
@@ -170,7 +428,7 @@ a.list-group-item:hover {
border: 1px solid rgba(0, 0, 0, 0.3); }
.btn-group {
- box-shadow: 0px 2px 10px transparent; }
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); }
.btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
@@ -196,7 +454,7 @@ a.list-group-item:hover {
.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
position: relative;
- box-shadow: 0px 2px 6px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top: 1px;
outline: none; }
@@ -205,7 +463,7 @@ a.list-group-item:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
color: rgba(0, 0, 0, 0.7);
- box-shadow: 0px 2px 10px transparent; }
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); }
.alert a, .alert-link {
color: rgba(0, 0, 0, 0.7);
@@ -214,7 +472,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */
.breadcrumb {
border-radius: 0px 0px 0px 0px;
- box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border: 0;
background-color: #eeeeec;
margin-bottom: 1.2em; }
@@ -251,7 +509,7 @@ a.list-group-item:hover {
border-radius: 0px 0px 0px 0px;
width: 100%;
margin: auto;
- box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
.preview-link:hover {
text-decoration: none !important; }
@@ -968,7 +1226,7 @@ header {
.card-meta {
border-radius: 0px 0px 0px 0px;
- box-shadow: 0px 2px 10px transparent, inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border: 0;
background-color: #eeeeec;
margin-bottom: 1.2em; }
diff --git a/index.html b/index.html
index dbb4f83..46e3d82 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,6 @@
-
diff --git a/scss/_font-face.scss b/scss/_font-face.scss
new file mode 100644
index 0000000..81b215a
--- /dev/null
+++ b/scss/_font-face.scss
@@ -0,0 +1,121 @@
+/* ------------------ 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;
+}
diff --git a/scss/_typography.scss b/scss/_typography.scss
new file mode 100644
index 0000000..8270c53
--- /dev/null
+++ b/scss/_typography.scss
@@ -0,0 +1,225 @@
+@import 'font-face';
+
+/* ------------------ GLOBAL STYLE ------------------- */
+
+@mixin paragraph() {
+ padding:0;
+ padding-bottom:1.5em;
+ margin:0;
+}
+
+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 {
+ @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: #2484c1; color: #fff; }
+::-moz-selection { background: #2484c1; color: #fff; }
+
+/* ------------------ WRAPPERS ------------------- */
+
+.text-wrapper {
+ font-size: calc(2.5mm + 1vw);
+ margin: auto;
+ line-height: 1.5em;
+
+ &.debug {
+ background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
+ background-image: -moz-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
+ background-image: -ms-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
+ background-image: -o-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
+ background-image: linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.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 ------------------- */
+
+@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 {
+ text-align: left;
+ font-size: 1em;
+ line-height: 1.5em;
+ padding:0;
+ margin:0;
+ font-weight:400;
+}
+
+h1 {
+ @include title(2.3333333em, 1em, 0.333333em, 0.6em, 700);
+}
+
+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);
+}
+
+/* ------------------ 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 ------------------- */
+
+@mixin well() {
+ 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%;
+}
+
+blockquote {
+ @include well();
+ border-color: rgba(1, 1, 1, 0.15);
+
+ .night-mode & {
+ border-color: rgba(255, 255, 255, 0.15)
+ }
+}
+
+pre {
+ @include well();
+ border-color: rgba(1,1,1,0.20);
+ background-color:#EEE;
+ overflow-x: scroll;
+
+ .night-mode & {
+ background-color:#222;
+ border-color:rgba(255,255,255,0.20);
+ }
+}
+
+
+
+/* ------------------ 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;
+}
diff --git a/scss/style.scss b/scss/style.scss
index 9331fc2..94fb48e 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -5,6 +5,8 @@
// Theme made for Wordpress for https://quarante-douze.net
//
+@import 'typography';
+
@import 'palette';
/* ------------------ CUSTOM STYLE ------------------- */