From 7067e7f8f9575ef3ad923c8f819e907dffd07773 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Mon, 15 Oct 2018 11:49:08 +0200 Subject: [PATCH] dep: use Clear-Typography 1.1 --- css/clear-typography.css | 351 +++++++++++++++++++++------------------ 1 file changed, 185 insertions(+), 166 deletions(-) diff --git a/css/clear-typography.css b/css/clear-typography.css index a193e13..46bca99 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -1,203 +1,222 @@ +/* ------------------ FONT LOADING ------------------- */ @font-face { - font-family: 'ClearSans'; - src: url('../fonts/ClearSans-Light.eot'); - src: url('../fonts/ClearSans-Light.woff') format('woff'), - url('../fonts/ClearSans-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; -} + font-family: 'ClearSans'; + src: url("../fonts/ClearSans-Light.eot"); + src: url("../fonts/ClearSans-Light.woff") format("woff"), url("../fonts/ClearSans-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; } @font-face { - font-family: 'ClearSans'; - src: url('../fonts/ClearSans-Regular.eot'); - src: url('../fonts/ClearSans-Regular.woff') format('woff'), - url('../fonts/ClearSans-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} + font-family: 'ClearSans'; + src: url("../fonts/ClearSans-Regular.eot"); + src: url("../fonts/ClearSans-Regular.woff") format("woff"), url("../fonts/ClearSans-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; } @font-face { - font-family: 'ClearSans'; - src: url('../fonts/ClearSans-Italic.eot'); - src: url('../fonts/ClearSans-Italic.woff') format('woff'), - url('../fonts/ClearSans-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; -} + font-family: 'ClearSans'; + src: url("../fonts/ClearSans-Italic.eot"); + src: url("../fonts/ClearSans-Italic.woff") format("woff"), url("../fonts/ClearSans-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; } @font-face { - font-family: 'ClearSans'; - src: url('../fonts/ClearSans-Medium.eot'); - src: url('../fonts/ClearSans-Medium.woff') format('woff'), - url('../fonts/ClearSans-Medium.ttf') format('truetype'); - font-weight: 600; - font-style: normal; -} + font-family: 'ClearSans'; + src: url("../fonts/ClearSans-Medium.eot"); + src: url("../fonts/ClearSans-Medium.woff") format("woff"), url("../fonts/ClearSans-Medium.ttf") format("truetype"); + font-weight: 600; + font-style: normal; } @font-face { - font-family: 'ClearSans'; - src: url('../fonts/ClearSans-MediumItalic.eot'); - src: url('../fonts/ClearSans-MediumItalic.woff') format('woff'), - url('../fonts/ClearSans-MediumItalic.ttf') format('truetype'); - font-weight: 600; - font-style: italic; -} + font-family: 'ClearSans'; + src: url("../fonts/ClearSans-MediumItalic.eot"); + src: url("../fonts/ClearSans-MediumItalic.woff") format("woff"), url("../fonts/ClearSans-MediumItalic.ttf") format("truetype"); + font-weight: 600; + font-style: italic; } +/* ------------------ GLOBAL STYLE ------------------- */ body { - font-family: ClearSans, sans-serif; - text-align:justify; - font-size: 4mm; - line-height: 1.5em; - color: #333; - font-weight: 400; -} + font-family: ClearSans, 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; -} + font-weight: 600; } em { - font-style: italic; -} + font-style: italic; } a { -color:#2484c1; -text-decoration:none; -} + 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:justify; - font-size: 1em; - line-height: 1.5em; - padding:0px; - margin:0px; - font-weight:400; - -} + text-align: left; + font-size: 1em; + line-height: 1.5em; + padding: 0; + margin: 0; + font-weight: 400; } h1 { - - text-align:center; - font-size: 2em; - line-height: 1.5em; - padding:0.2em; - margin-bottom:1em; - font-weight:600; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:1px; - border-color:#666; - border-style:none; - -} + font-size: 2.33333em; + line-height: 1em; + padding: 0.33333em 0 0.6em 0; + font-weight: 600; } h2 { - - text-align:center; - font-size: 1.8em; - line-height: 1.5em; - padding:0.1em; - /*margin-bottom:0.5em;*/ - font-weight:600; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:0px; - border-color:#666; - border-style:dashed; - -} + font-size: 2em; + line-height: 1.5em; + padding: 0.33333em 0 0.4em 0; + font-weight: 600; } h3 { - - text-align:justify; - font-size: 1.8em; - line-height: 1.5em; - padding:0.1em; - /*margin-bottom:0.5em;*/ - font-weight:600; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:0px; - border-color:#666; - border-style:dashed; - -} + font-size: 1.5em; + line-height: 1em; + padding: 0em 0 1em 0; + font-weight: 600; } h4 { - - text-align:justify; - font-size: 1.5em; - line-height: 1.5em; - padding:0.1em; - /*margin-bottom:0.5em;*/ - font-weight:600; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:0px; - border-color:#666; - border-style:dashed; - -} + font-size: 1.5em; + line-height: 1em; + padding: 0em 0 1em 0; + font-weight: 400; } h5 { - - text-align:justify; - font-size: 1.3em; - line-height: 1.5em; - padding:0.1em; - /*margin-bottom:0.5em;*/ - font-weight:600; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:0px; - border-color:#666; - border-style:dashed; - -} + font-size: 1.33333em; + line-height: 1em; + padding: 0.1em 0 1.13333em 0; + font-weight: 400; } h6 { + font-size: 1.1em; + line-height: 1.4em; + padding: 0.1em 0 1.2em 0; + font-weight: 600; } - text-align:justify; - font-size: 1.3em; - line-height: 1.5em; - padding:0.1em; - /*margin-bottom:0.5em;*/ - font-weight:400; - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:0px; - border-color:#666; - border-style:dashed; - -} - +/* ------------------ 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; } - border-top:0px; - border-left:0px; - border-right:0px; - border-bottom:1px; - border-color:#666; - border-style:dashed; - margin:2em; +/* ------------------ 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; - -} - -::selection { background: #2484c1; color: #fff; } -::-moz-selection { background: #2484c1; color: #fff; } + font-style: italic; + text-align: right; + width: 100%; + display: block; }