From 1174f162a8077e39ee20507563d0e0d842229343 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 24 Oct 2018 10:20:55 +0200 Subject: [PATCH] scss: Add typography directly to the scss It's easier to make clear-typography directly a part of the style, as now we can make it directly support custom colors. --- css/clear-typography.css | 257 ----------------------------------- css/style.css | 286 +++++++++++++++++++++++++++++++++++++-- index.html | 1 - scss/_font-face.scss | 121 +++++++++++++++++ scss/_typography.scss | 225 ++++++++++++++++++++++++++++++ scss/style.scss | 2 + 6 files changed, 620 insertions(+), 272 deletions(-) delete mode 100644 css/clear-typography.css create mode 100644 scss/_font-face.scss create mode 100644 scss/_typography.scss 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 ------------------- */