mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2024-12-27 07:18:17 +01:00
Code Issues Packages Projects Releases Wiki Activity
e5ca5bc98b
rickvanlieshout.com/static/css/typography.css

384 lines
7.5 KiB
CSS
Raw Normal View History

Update
2016-03-21 18:03:01 +01:00
/*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
Init
2016-03-11 23:28:19 +01:00
html, body {
Update
2016-03-21 18:03:01 +01:00
font-size: 16px;
font-size: 100%;
font-family: "PT Sans", Georgia, Times, serif;
color: #222;
Init
2016-03-11 23:28:19 +01:00
}
/* Paragraph
Update
2016-03-21 18:03:01 +01:00
========================================================================== */
Init
2016-03-11 23:28:19 +01:00
/* Headings
Update
2016-03-21 18:03:01 +01:00
========================================================================== */
Init
2016-03-11 23:28:19 +01:00
h1, h2, h3, h4, h5, h6 {
Update
2016-03-21 18:03:01 +01:00
font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #222;
Init
2016-03-11 23:28:19 +01:00
}
h1 {
Update
2016-03-21 18:03:01 +01:00
font-size: 40px;
font-size: 2.5rem;
line-height: 52px;
line-height: 3.25rem;
margin-top: 104px;
margin-top: 6.5rem;
margin-bottom: 26px;
margin-bottom: 1.625rem;
Init
2016-03-11 23:28:19 +01:00
}
h2 {
Update
2016-03-21 18:03:01 +01:00
font-size: 27px;
font-size: 1.6875rem;
line-height: 39px;
line-height: 2.4375rem;
margin-top: 65px;
margin-top: 4.0625rem;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h3 {
Update
2016-03-21 18:03:01 +01:00
font-size: 22px;
font-size: 1.375rem;
line-height: 26px;
line-height: 1.625rem;
margin-top: 52px;
margin-top: 3.25rem;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h4 {
Update
2016-03-21 18:03:01 +01:00
font-size: 19.2px;
font-size: 1.2rem;
line-height: 26px;
line-height: 1.625rem;
margin-top: 39px;
margin-top: 2.4375rem;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h5 {
Update
2016-03-21 18:03:01 +01:00
font-size: 16px;
font-size: 1rem;
line-height: 26px;
line-height: 1.625rem;
margin-top: 65px;
margin-top: 4.0625rem;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h6 {
Update
2016-03-21 18:03:01 +01:00
font-size: 16px;
font-size: 1rem;
line-height: 26px;
line-height: 1.625rem;
margin-top: 65px;
margin-top: 4.0625rem;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h1 + h2 {
Update
2016-03-21 18:03:01 +01:00
margin-top: 26px;
margin-top: 1.625rem;
Init
2016-03-11 23:28:19 +01:00
}
Update
2016-03-21 18:03:01 +01:00
h2 + h3, h3 + h4, h4 + h5 {
margin-top: 13px;
margin-top: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h5 + h6 {
Update
2016-03-21 18:03:01 +01:00
margin-top: -13px;
margin-top: -0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
h6 {
Update
2016-03-21 18:03:01 +01:00
font-style: italic;
font-weight: normal;
Init
2016-03-11 23:28:19 +01:00
}
/* Links
Update
2016-03-21 18:03:01 +01:00
========================================================================== */
Init
2016-03-11 23:28:19 +01:00
a {
Update
2016-03-21 18:03:01 +01:00
color: #5d93ff;
text-decoration: none;
transition: all .3s ease;
Init
2016-03-11 23:28:19 +01:00
}
a:hover {
Update
2016-03-21 18:03:01 +01:00
border-bottom: 1px solid;
text-decoration: none;
Init
2016-03-11 23:28:19 +01:00
}
a:visited {
Update
2016-03-21 18:03:01 +01:00
color: #222;
Init
2016-03-11 23:28:19 +01:00
}
a:visited:hover {
Update
2016-03-21 18:03:01 +01:00
color: #222;
border-bottom: 1px solid;
Init
2016-03-11 23:28:19 +01:00
}
a:active {
Update
2016-03-21 18:03:01 +01:00
color: #222;
border-bottom: 1px solid;
Init
2016-03-11 23:28:19 +01:00
}
h2 a {
Update
2016-03-21 18:03:01 +01:00
color: #222;
Init
2016-03-11 23:28:19 +01:00
}
/* Figures & other elements
Update
2016-03-21 18:03:01 +01:00
========================================================================== */
Init
2016-03-11 23:28:19 +01:00
figcaption {
Update
2016-03-21 18:03:01 +01:00
line-height: 26px;
line-height: 1.625rem;
color: #222;
font-size: .8125rem;
font-style: italic;
margin-bottom: 0;
text-align: center;
Init
2016-03-11 23:28:19 +01:00
}
blockquote {
Update
2016-03-21 18:03:01 +01:00
font-style: italic;
padding-left: 1.4375rem;
Init
2016-03-11 23:28:19 +01:00
}
cite {
Update
2016-03-21 18:03:01 +01:00
font-style: normal;
Init
2016-03-11 23:28:19 +01:00
}
figure blockquote {
Update
2016-03-21 18:03:01 +01:00
padding: 31px 0px;
padding: 1.722222222222222rem 0rem;
text-align: center;
Init
2016-03-11 23:28:19 +01:00
}
figure blockquote p {
Update
2016-03-21 18:03:01 +01:00
font-size: 27px;
font-size: 1.6875rem;
margin-top: 0;
line-height: 46.5px;
line-height: 2.583333333333334rem;
}
figure.floatLeft, figure.floatRight {
max-width: 315px;
max-width: 17.5rem;
padding: 0px 31px;
padding: 0rem 1.722222222222222rem;
}
figure.floatLeft blockquote, figure.floatRight blockquote {
text-align: left;
padding: 0px;
padding: 0rem;
}
figure.floatLeft blockquote p, figure.floatRight blockquote p {
font-size: 19.2px;
font-size: 1.2rem;
line-height: 31px;
line-height: 1.722222222222222rem;
Init
2016-03-11 23:28:19 +01:00
}
figcaption {
Update
2016-03-21 18:03:01 +01:00
line-height: 31px;
line-height: 1.722222222222222rem;
margin-bottom: 0;
Init
2016-03-11 23:28:19 +01:00
}
.floatLeft {
Update
2016-03-21 18:03:01 +01:00
float: left;
Init
2016-03-11 23:28:19 +01:00
}
.floatCenter {
Update
2016-03-21 18:03:01 +01:00
margin-left: auto;
margin-right: auto;
Init
2016-03-11 23:28:19 +01:00
}
.floatRight {
Update
2016-03-21 18:03:01 +01:00
float: right;
Init
2016-03-11 23:28:19 +01:00
}
Update
2016-03-21 18:03:01 +01:00
ul li, ol li {
margin-bottom: 0;
Init
2016-03-11 23:28:19 +01:00
}
hr {
Update
2016-03-21 18:03:01 +01:00
margin-top: 52px;
margin-top: 3.25rem;
margin-bottom: 52px;
margin-bottom: 3.25rem;
border: 0;
color: #222;
display: block;
height: 26px;
height: 1.625rem;
margin-right: auto;
margin-left: auto;
background-size: 100% 26px;
background-size: 100% 1.625rem;
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
width: 100px;
Init
2016-03-11 23:28:19 +01:00
}
small {
Update
2016-03-21 18:03:01 +01:00
line-height: 13px;
line-height: 0.8125rem;
Init
2016-03-11 23:28:19 +01:00
}
code {
Update
2016-03-21 18:03:01 +01:00
padding: 26px;
padding: 1.625rem;
Init
2016-03-11 23:28:19 +01:00
}
.alignLeft {
Update
2016-03-21 18:03:01 +01:00
text-align: left;
Init
2016-03-11 23:28:19 +01:00
}
.alignCenter {
Update
2016-03-21 18:03:01 +01:00
text-align: center;
Init
2016-03-11 23:28:19 +01:00
}
.alignRight {
Update
2016-03-21 18:03:01 +01:00
text-align: right;
Init
2016-03-11 23:28:19 +01:00
}
/* Put your styles below this line
Update
2016-03-21 18:03:01 +01:00
========================================================================== */
@media screen and (min-width:40em) {
/* Mixins
========================================================================== */
body, html {
margin: 0;
width: 100%;
max-width: none;
}
html {
font-size: 18px;
font-size: 1.125rem;
}
article {
max-width: 945px;
max-width: 52.5rem;
}
h1 {
font-size: 40px;
font-size: 2.5rem;
line-height: 62px;
line-height: 3.444444444444445rem;
margin-top: 124px;
margin-top: 6.888888888888889rem;
margin-bottom: 31px;
margin-bottom: 1.722222222222222rem;
}
h2 {
font-size: 27px;
font-size: 1.6875rem;
line-height: 46.5px;
line-height: 2.583333333333334rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h3 {
font-size: 22px;
font-size: 1.375rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 62px;
margin-top: 3.444444444444445rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h4 {
font-size: 19.2px;
font-size: 1.2rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 46.5px;
margin-top: 2.583333333333334rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h1 + h2 {
margin-top: 31px;
margin-top: 1.722222222222222rem;
}
h2 + h3, h3 + h4, h4 + h5 {
margin-top: 15.5px;
margin-top: 0.861111111111111rem;
}
h5 + h6 {
margin-top: -15.5px;
margin-top: -0.861111111111111rem;
}
figcaption {
line-height: 31px;
line-height: 1.722222222222222rem;
margin-bottom: 0;
}
figure blockquote {
padding: 31px 0px;
padding: 1.722222222222222rem 0rem;
text-align: center;
}
figure blockquote p {
font-size: 27px;
font-size: 1.6875rem;
margin-top: 0;
line-height: 46.5px;
line-height: 2.583333333333334rem;
}
figure.floatLeft, figure.floatRight {
max-width: 315px;
max-width: 17.5rem;
padding: 0px 31px;
padding: 0rem 1.722222222222222rem;
}
figure.floatLeft blockquote, figure.floatRight blockquote {
text-align: left;
padding: 0px;
padding: 0rem;
}
figure.floatLeft blockquote p, figure.floatRight blockquote p {
font-size: 19.2px;
font-size: 1.2rem;
line-height: 31px;
line-height: 1.722222222222222rem;
}
figcaption {
line-height: 31px;
line-height: 1.722222222222222rem;
margin-bottom: 0;
}
.floatLeft {
float: left;
}
.floatCenter {
margin-left: auto;
margin-right: auto;
}
.floatRight {
float: right;
}
blockquote {
padding-left: 2rem;
}
small {
line-height: 15.5px;
line-height: 0.861111111111111rem;
}
hr {
margin-top: 62px;
margin-top: 3.444444444444445rem;
margin-bottom: 62px;
margin-bottom: 3.444444444444445rem;
height: 31px;
height: 1.722222222222222rem;
background-size: 100% 31px;
background-size: 100% 1.722222222222222rem;
background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
}
code {
padding: 31px;
padding: 1.722222222222222rem;
}
Init
2016-03-11 23:28:19 +01:00
}
Reference in New Issue Copy Permalink