/* ------------------ 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 ------------------- */ html { font-family: OpenSans, sans-serif; text-align: left; font-size: 18px; } body { line-height: 1.5rem; 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; margin: 0; margin-bottom: 1.5rem; } p:last-child { margin-bottom: 0; } ul { padding: 0; margin: 0; margin-bottom: 1.5rem; } ul ul { margin-bottom: 0; } ul li { margin-left: 1.5rem; } ol { padding: 0; margin: 0; margin-bottom: 1.5rem; } ol ol { margin-bottom: 0; } ol li { margin-left: 1.5rem; } ::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.3333333em; line-height: 1em; margin-bottom: 1.5rem; font-weight: 700; } h2 { font-size: 2em; line-height: 1.5em; margin-bottom: 1.5rem; font-weight: 700; } h3 { font-size: 1.5em; line-height: 1em; margin-bottom: 1.5rem; font-weight: 700; } h4 { font-size: 1.5em; line-height: 1em; margin-bottom: 1.5rem; font-weight: 600; } h5 { font-size: 1.333333em; line-height: 1em; margin-bottom: 1.5rem; font-weight: 600; } h6 { font-size: 1.1em; line-height: 1.4em; margin-bottom: 1.5rem; 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; margin-bottom: 1.5rem; padding: 0.75rem; max-width: 100%; border-color: rgba(1, 1, 1, 0.15); font-size: 1.1rem; } .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; margin-bottom: 1.5rem; padding: 0.75rem; max-width: 100%; border-color: rgba(1, 1, 1, 0.2); background-color: #EEE; } .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; } /*# sourceMappingURL=clear-typography.css.map */