mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 19:47:38 +00:00
Merge pull request #108 from designbyjake/typography
Typography updates
This commit is contained in:
John O'Nolan
commit
2dafaa257a
@ -14,11 +14,12 @@
|
||||
7. Third Party Elements
|
||||
8. Pagination
|
||||
9. Footer
|
||||
10. Media Queries (Tablet)
|
||||
11. Media Queries (Mobile)
|
||||
12. Animations
|
||||
10. Media Queries (Medium Desktop)
|
||||
11. Media Queries (Tablet)
|
||||
12. Media Queries (Mobile)
|
||||
13. Animations
|
||||
|
||||
*/
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
|
||||
@ -43,14 +44,14 @@ a:focus { outline: thin dotted; }
|
||||
a:active, a:hover { outline: 0; }
|
||||
h1 { font-size: 2em; margin: 0.67em 0; }
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
b, strong { font-weight: bold; }
|
||||
b, strong { font-weight: 700; }
|
||||
dfn { font-style: italic; }
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
mark { background: #ff0; color: #000; }
|
||||
mark { background: #FF0; color: #000; }
|
||||
code, kbd, pre,
|
||||
samp { font-family: monospace, serif; font-size: 1em; }
|
||||
pre { white-space: pre-wrap; }
|
||||
@ -105,12 +106,12 @@ table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
/* Import the font file with the icons in it */
|
||||
@font-face {
|
||||
font-family: 'icons';
|
||||
src:url('../fonts/icons.eot');
|
||||
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icons.woff') format('woff'),
|
||||
url('../fonts/icons.ttf') format('truetype'),
|
||||
url('../fonts/icons.svg#icons') format('svg');
|
||||
font-family: "icons";
|
||||
src:url("../fonts/icons.eot");
|
||||
src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/icons.woff") format("woff"),
|
||||
url("../fonts/icons.ttf") format("truetype"),
|
||||
url("../fonts/icons.svg#icons") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -121,7 +122,7 @@ table { border-collapse: collapse; border-spacing: 0; }
|
||||
.icon-twitter:before,
|
||||
.icon-google-plus:before,
|
||||
.icon-facebook:before {
|
||||
font-family: 'icons';
|
||||
font-family: "icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@ -164,66 +165,70 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-feature-settings: 'kern' 1;
|
||||
-moz-font-feature-settings: 'kern' 1;
|
||||
-ms-font-feature-settings: 'kern' 1;
|
||||
-o-font-feature-settings: 'kern' 1;
|
||||
font-feature-settings: 'kern' 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-family: 'Noto Serif', serif;
|
||||
font-size: 2.0rem;
|
||||
line-height: 1.6em;
|
||||
font-family: "Noto Serif", serif;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.7em;
|
||||
color: #3A4145;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: #222;
|
||||
background: #D6EDFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #222;
|
||||
background: #D6EDFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
text-rendering: optimizeLegibility;
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
color: #2E2E2E;
|
||||
line-height: 1.3em;
|
||||
margin: 0 0 0.5em 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.2em;
|
||||
font-size: 5.6rem;
|
||||
letter-spacing: -2px;
|
||||
text-indent: -3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
line-height: 1.2em;
|
||||
font-size: 4.4rem;
|
||||
letter-spacing: -1px;
|
||||
text-indent: -2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3.9rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 3rem;
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4a4a4a;
|
||||
color: #4A4A4A;
|
||||
transition: color ease 0.3s;
|
||||
}
|
||||
|
||||
@ -236,14 +241,23 @@ h4 a, h5 a, h6 a {
|
||||
color: #50585D;
|
||||
}
|
||||
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: 1.6em 0;
|
||||
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
margin: 0 0 1.7em 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ol ol, ul ul,
|
||||
ul ol, ol ul {
|
||||
margin: 0.4em 0;
|
||||
margin: 0 0 0.4em 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
@ -254,8 +268,8 @@ dl dt {
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em
|
||||
font-weight: 700;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
@ -267,7 +281,7 @@ hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #efefef;
|
||||
border-top: #EFEFEF 1px solid;
|
||||
margin: 3.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -275,9 +289,9 @@ hr {
|
||||
blockquote {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 1.6em 0 1.6em -2.2em;
|
||||
margin: 1.7em 0 1.7em -2.2em;
|
||||
padding: 0 0 0 1.6em;
|
||||
border-left: #4a4a4a 0.4em solid;
|
||||
border-left: #4A4A4A 0.4em solid;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
@ -288,20 +302,20 @@ blockquote p {
|
||||
blockquote small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size:0.9em;
|
||||
color: #ccc;
|
||||
font-size: 0.9em;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
blockquote small:before { content: '\2014 \00A0'; }
|
||||
blockquote small:before { content: "\2014 \00A0"; }
|
||||
|
||||
blockquote cite {
|
||||
font-weight:bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote cite a { font-weight: normal; }
|
||||
|
||||
mark {
|
||||
background-color: #ffc336;
|
||||
background-color: #FFC336;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
@ -309,7 +323,7 @@ code, tt {
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.85em;
|
||||
white-space: pre-wrap;
|
||||
border: 1px solid #E3EDF3;
|
||||
border: #E3EDF3 1px solid;
|
||||
background: #F7FAFB;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@ -317,8 +331,8 @@ code, tt {
|
||||
pre {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 1.6em 0;
|
||||
border: 1px solid #E3EDF3;
|
||||
margin: 0 0 1.7em 0;
|
||||
border: #E3EDF3 1px solid;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
@ -342,12 +356,12 @@ kbd {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.4em;
|
||||
padding: 1px 8px;
|
||||
border: #ccc 1px solid;
|
||||
border: #CCC 1px solid;
|
||||
color: #666;
|
||||
text-shadow: #fff 0 1px 0;
|
||||
text-shadow: #FFF 0 1px 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
background: #f4f4f4;
|
||||
font-weight: 700;
|
||||
background: #F4F4F4;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(0, 0, 0, 0.2),
|
||||
@ -357,8 +371,8 @@ kbd {
|
||||
table {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 1.6em 0;
|
||||
width:100%;
|
||||
margin: 1.7em 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -369,7 +383,7 @@ table td {
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #efefef;
|
||||
border-top: #EFEFEF 1px solid;
|
||||
}
|
||||
|
||||
table th { color: #000; }
|
||||
@ -383,13 +397,13 @@ table thead:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table tbody + tbody { border-top: 2px solid #efefef; }
|
||||
table tbody + tbody { border-top: #EFEFEF 2px solid; }
|
||||
|
||||
table table table { background-color: #fff; }
|
||||
table table table { background-color: #FFF; }
|
||||
|
||||
table tbody > tr:nth-child(odd) > td,
|
||||
table tbody > tr:nth-child(odd) > th {
|
||||
background-color: #f6f6f6;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
table.plain tbody > tr:nth-child(odd) > td,
|
||||
@ -433,7 +447,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
.inner {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -456,11 +470,15 @@ margin on the iframe, cause it breaks stuff. */
|
||||
height: 60%;
|
||||
margin-bottom: 5rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #303538 no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.site-head h1,
|
||||
.site-head h2 {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.blog-logo {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -477,19 +495,19 @@ margin on the iframe, cause it breaks stuff. */
|
||||
/* The details of your blog. Defined in ghost/settings/ */
|
||||
.blog-title {
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 5rem;
|
||||
font-size: 5.6rem;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 700;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 300;
|
||||
font-family: 'Noto Serif', serif;
|
||||
line-height: 1.6em;
|
||||
font-weight: 400;
|
||||
font-family: "Noto Serif", serif;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
|
||||
}
|
||||
@ -525,8 +543,8 @@ margin on the iframe, cause it breaks stuff. */
|
||||
/* Every post, on every page, gets this style on its <article> tag */
|
||||
.post {
|
||||
position: relative;
|
||||
width:80%;
|
||||
max-width: 700px;
|
||||
width: 80%;
|
||||
max-width: 780px;
|
||||
margin: 4rem auto;
|
||||
padding-bottom: 4rem;
|
||||
border-bottom: #EBF2F6 1px solid;
|
||||
@ -546,27 +564,19 @@ margin on the iframe, cause it breaks stuff. */
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
background: #fff;
|
||||
background: #FFF;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
margin:0;
|
||||
color: #222;
|
||||
box-shadow: #FFF 0 0 0 5px;
|
||||
}
|
||||
|
||||
.post-title a {
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.post-excerpt p {
|
||||
margin: 1.6rem 0 0 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
@ -576,7 +586,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
.post-meta {
|
||||
display: inline-block;
|
||||
margin: 0 0 5px 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
color: #9EABB3;
|
||||
}
|
||||
@ -604,7 +614,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-bio {
|
||||
@ -624,7 +634,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
|
||||
.publish-heading {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
@ -790,11 +800,11 @@ margin on the iframe, cause it breaks stuff. */
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
background: #fff;
|
||||
background: #FFF;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
box-shadow: #FFF 0 0 0 5px;
|
||||
}
|
||||
|
||||
|
||||
@ -823,9 +833,9 @@ margin on the iframe, cause it breaks stuff. */
|
||||
.pagination {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
max-width: 780px;
|
||||
margin: 4rem auto;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #9EABB3;
|
||||
text-align: center;
|
||||
@ -854,6 +864,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
.page-number {
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.newer-posts {
|
||||
@ -875,7 +886,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
margin: 8rem 0 0 0;
|
||||
padding: 4rem 0;
|
||||
border-top: #EBF2F6 1px solid;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7em;
|
||||
color: #BBC7CC;
|
||||
@ -918,7 +929,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
text-align: center;
|
||||
line-height: 2.4rem;
|
||||
border-radius: 50px;
|
||||
background: #fff;
|
||||
background: #FFF;
|
||||
transition: box-shadow 0.5s;
|
||||
}
|
||||
|
||||
@ -929,7 +940,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
@ -945,7 +956,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
|
||||
/* CSS tooltip saying "Subscribe!" - initially hidden */
|
||||
.tooltip {
|
||||
opacity:0;
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 5px 8px;
|
||||
position:absolute;
|
||||
@ -956,24 +967,24 @@ margin on the iframe, cause it breaks stuff. */
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
background: #50585D;
|
||||
border-radius:20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||||
transition: opacity 0.3s ease, top 0.3s ease;
|
||||
}
|
||||
|
||||
/* The little chiclet arrow under the tooltip, pointing down */
|
||||
.tooltip:after {
|
||||
content:"";
|
||||
border-width:5px 5px 0 5px;
|
||||
border-style:solid;
|
||||
content: " ";
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-style: solid;
|
||||
border-color: #50585D transparent;
|
||||
display:block;
|
||||
position:absolute;
|
||||
bottom:-4px;
|
||||
left:50%;
|
||||
margin-left:-5px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
z-index: 220;
|
||||
width:0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* On hover, show the tooltip! */
|
||||
@ -984,7 +995,69 @@ margin on the iframe, cause it breaks stuff. */
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
10. Media Queries - Smaller than 900px
|
||||
10. Media Queries - Smaller than 1600px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
|
||||
.blog-title {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.post {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.65em;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: 0 0 1.65em 0;
|
||||
}
|
||||
|
||||
.post,
|
||||
.inner,
|
||||
.tag-archive-header {
|
||||
max-width: 710px;
|
||||
}
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 0.4em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
11. Media Queries - Smaller than 900px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
@ -1013,8 +1086,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
}
|
||||
|
||||
.post {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6em;
|
||||
font-size: 0.8em
|
||||
}
|
||||
|
||||
.post-template .post {
|
||||
@ -1025,28 +1097,40 @@ margin on the iframe, cause it breaks stuff. */
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.8rem;
|
||||
font-size: 4.5rem;
|
||||
text-indent: -2px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.8rem;
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.3rem;
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.8rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
11. Media Queries - Smaller than 500px
|
||||
12. Media Queries - Smaller than 500px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
@ -1063,13 +1147,17 @@ margin on the iframe, cause it breaks stuff. */
|
||||
}
|
||||
|
||||
.post {
|
||||
width:auto;
|
||||
width: auto;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: 0 0 1.6em 0;
|
||||
}
|
||||
|
||||
.site-head {
|
||||
padding: 10% 0;
|
||||
}
|
||||
@ -1082,19 +1170,35 @@ margin on the iframe, cause it breaks stuff. */
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 0.3em 0;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1.1em;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.6rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.3rem;
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.post-template .post {
|
||||
@ -1175,7 +1279,7 @@ margin on the iframe, cause it breaks stuff. */
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
12. Animations
|
||||
13. Animations
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes fade-in-down {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user