kazhnuz/bluesky-bootstrap-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

dependancies: use clear-typography 1.1

Browse source
This commit is contained in:
Kazhnuz 2018-10-14 17:58:19 +02:00
parent 200d32cfcb
commit fd584acca3
1 changed files with 185 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

351
css/clear-typography.css
View file

@ -1,203 +1,222 @@
/* ------------------ FONT LOADING ------------------- */
@font-face { @font-face {
font-family: 'ClearSans'; font-family: 'ClearSans';
src: url('../fonts/ClearSans-Light.eot'); src: url("../fonts/ClearSans-Light.eot");
src: url('../fonts/ClearSans-Light.woff') format('woff'), src: url("../fonts/ClearSans-Light.woff") format("woff"), url("../fonts/ClearSans-Light.ttf") format("truetype");
url('../fonts/ClearSans-Light.ttf') format('truetype'); font-weight: 300;
font-weight: 300; font-style: normal; }
font-style: normal;
}
@font-face { @font-face {
font-family: 'ClearSans'; font-family: 'ClearSans';
src: url('../fonts/ClearSans-Regular.eot'); src: url("../fonts/ClearSans-Regular.eot");
src: url('../fonts/ClearSans-Regular.woff') format('woff'), src: url("../fonts/ClearSans-Regular.woff") format("woff"), url("../fonts/ClearSans-Regular.ttf") format("truetype");
url('../fonts/ClearSans-Regular.ttf') format('truetype'); font-weight: 400;
font-weight: 400; font-style: normal; }
font-style: normal;
}
@font-face { @font-face {
font-family: 'ClearSans'; font-family: 'ClearSans';
src: url('../fonts/ClearSans-Italic.eot'); src: url("../fonts/ClearSans-Italic.eot");
src: url('../fonts/ClearSans-Italic.woff') format('woff'), src: url("../fonts/ClearSans-Italic.woff") format("woff"), url("../fonts/ClearSans-Italic.ttf") format("truetype");
url('../fonts/ClearSans-Italic.ttf') format('truetype'); font-weight: 400;
font-weight: 400; font-style: italic; }
font-style: italic;
}
@font-face { @font-face {
font-family: 'ClearSans'; font-family: 'ClearSans';
src: url('../fonts/ClearSans-Medium.eot'); src: url("../fonts/ClearSans-Medium.eot");
src: url('../fonts/ClearSans-Medium.woff') format('woff'), src: url("../fonts/ClearSans-Medium.woff") format("woff"), url("../fonts/ClearSans-Medium.ttf") format("truetype");
url('../fonts/ClearSans-Medium.ttf') format('truetype'); font-weight: 600;
font-weight: 600; font-style: normal; }
font-style: normal;
}
@font-face { @font-face {
font-family: 'ClearSans'; font-family: 'ClearSans';
src: url('../fonts/ClearSans-MediumItalic.eot'); src: url("../fonts/ClearSans-MediumItalic.eot");
src: url('../fonts/ClearSans-MediumItalic.woff') format('woff'), src: url("../fonts/ClearSans-MediumItalic.woff") format("woff"), url("../fonts/ClearSans-MediumItalic.ttf") format("truetype");
url('../fonts/ClearSans-MediumItalic.ttf') format('truetype'); font-weight: 600;
font-weight: 600; font-style: italic; }
font-style: italic;
}
/* ------------------ GLOBAL STYLE ------------------- */
body { body {
font-family: ClearSans, sans-serif; font-family: ClearSans, sans-serif;
text-align:justify; text-align: left;
font-size: 4mm; font-size: 4mm;
line-height: 1.5em; line-height: 1.5em;
color: #333; color: #444;
font-weight: 400; font-weight: 400; }
}
.night-mode {
color: #BBB; }
strong { strong {
font-weight: 600; font-weight: 600; }
}
em { em {
font-style: italic; font-style: italic; }
}
a { a {
color:#2484c1; color: #2484c1;
text-decoration:none; 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 { h1, h2, h3, h4, h5, h6, h7 {
text-align: left;
text-align:justify; font-size: 1em;
font-size: 1em; line-height: 1.5em;
line-height: 1.5em; padding: 0;
padding:0px; margin: 0;
margin:0px; font-weight: 400; }
font-weight:400;
}
h1 { h1 {
font-size: 2.33333em;
text-align:center; line-height: 1em;
font-size: 2em; padding: 0.33333em 0 0.6em 0;
line-height: 1.5em; font-weight: 600; }
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;
}
h2 { h2 {
font-size: 2em;
text-align:center; line-height: 1.5em;
font-size: 1.8em; padding: 0.33333em 0 0.4em 0;
line-height: 1.5em; font-weight: 600; }
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;
}
h3 { h3 {
font-size: 1.5em;
text-align:justify; line-height: 1em;
font-size: 1.8em; padding: 0em 0 1em 0;
line-height: 1.5em; font-weight: 600; }
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;
}
h4 { h4 {
font-size: 1.5em;
text-align:justify; line-height: 1em;
font-size: 1.5em; padding: 0em 0 1em 0;
line-height: 1.5em; font-weight: 400; }
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;
}
h5 { h5 {
font-size: 1.33333em;
text-align:justify; line-height: 1em;
font-size: 1.3em; padding: 0.1em 0 1.13333em 0;
line-height: 1.5em; font-weight: 400; }
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;
}
h6 { h6 {
font-size: 1.1em;
line-height: 1.4em;
padding: 0.1em 0 1.2em 0;
font-weight: 600; }
text-align:justify; /* ------------------ HR ------------------- */
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; /* ------------------ QUOTE ------------------- */
border-left:0px; blockquote {
border-right:0px; border-width: 0 0 0 0.2em;
border-bottom:1px; border-style: solid;
border-color:#666; border-radius: 3px;
border-style:dashed; margin: -0.75em -0.2em 0.75em -0.2em;
margin: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 { .time {
font-style: italic;
font-style:italic; text-align: right;
text-align:right; width: 100%;
width:100%; display: block; }
display:block;
}
::selection { background: #2484c1; color: #fff; }
::-moz-selection { background: #2484c1; color: #fff; }