This repository has been archived on 2023-08-21. You can view files and clone it, but cannot push or open issues or pull requests.
bluesky-bootstrap-theme/css/clear-typography.css

223 lines
5.3 KiB
CSS
Raw Normal View History

2018-10-14 17:58:19 +02:00
/* ------------------ FONT LOADING ------------------- */
2017-02-26 10:34:11 +01:00
@font-face {
2018-10-14 17:58:19 +02:00
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; }
2017-02-26 10:34:11 +01:00
@font-face {
2018-10-14 17:58:19 +02:00
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; }
2017-02-26 10:34:11 +01:00
@font-face {
2018-10-14 17:58:19 +02:00
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; }
2017-02-26 10:34:11 +01:00
@font-face {
2018-10-14 17:58:19 +02:00
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; }
2017-02-26 10:34:11 +01:00
@font-face {
2018-10-14 17:58:19 +02:00
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; }
2017-02-26 10:34:11 +01:00
2018-10-14 17:58:19 +02:00
/* ------------------ GLOBAL STYLE ------------------- */
2017-02-26 10:34:11 +01:00
body {
2018-10-14 17:58:19 +02:00
font-family: ClearSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
color: #444;
font-weight: 400; }
.night-mode {
color: #BBB; }
2017-02-26 10:34:11 +01:00
strong {
2018-10-14 17:58:19 +02:00
font-weight: 600; }
2017-02-26 10:34:11 +01:00
em {
2018-10-14 17:58:19 +02:00
font-style: italic; }
2017-02-26 10:34:11 +01:00
a {
2018-10-14 17:58:19 +02:00
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 ------------------- */
2017-02-26 10:34:11 +01:00
h1, h2, h3, h4, h5, h6, h7 {
2018-10-14 17:58:19 +02:00
text-align: left;
font-size: 1em;
line-height: 1.5em;
padding: 0;
margin: 0;
font-weight: 400; }
2017-02-26 10:34:11 +01:00
h1 {
2018-10-14 17:58:19 +02:00
font-size: 2.33333em;
line-height: 1em;
padding: 0.33333em 0 0.6em 0;
font-weight: 600; }
2017-02-26 10:34:11 +01:00
h2 {
2018-10-14 17:58:19 +02:00
font-size: 2em;
line-height: 1.5em;
padding: 0.33333em 0 0.4em 0;
font-weight: 600; }
2017-02-26 10:34:11 +01:00
h3 {
2018-10-14 17:58:19 +02:00
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 600; }
2017-02-26 10:34:11 +01:00
h4 {
2018-10-14 17:58:19 +02:00
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 400; }
2017-02-26 10:34:11 +01:00
h5 {
2018-10-14 17:58:19 +02:00
font-size: 1.33333em;
line-height: 1em;
padding: 0.1em 0 1.13333em 0;
font-weight: 400; }
2017-02-26 10:34:11 +01:00
h6 {
2018-10-14 17:58:19 +02:00
font-size: 1.1em;
line-height: 1.4em;
padding: 0.1em 0 1.2em 0;
font-weight: 600; }
2017-02-26 10:34:11 +01:00
2018-10-14 17:58:19 +02:00
/* ------------------ HR ------------------- */
2017-02-26 10:34:11 +01:00
hr {
2018-10-14 17:58:19 +02:00
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 ------------------- */
2017-02-26 10:34:11 +01:00
.time {
2018-10-14 17:58:19 +02:00
font-style: italic;
text-align: right;
width: 100%;
display: block; }