themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #108 from designbyjake/typography 

Typography updates
This commit is contained in:
John O'Nolan 2014-07-14 09:50:54 +02:00
parent 75fd290804 9a860f2b3f
commit 2dafaa257a
1 changed files with 219 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

302
assets/css/screen.css
View File

@ -14,9 +14,10 @@
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
*/
@ -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 {
@ -289,19 +303,19 @@ blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
color: #ccc;
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,7 +371,7 @@ kbd {
table {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0;
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);
}
@ -526,7 +544,7 @@ margin on the iframe, cause it breaks stuff. */
.post {
position: relative;
width: 80%;
max-width: 700px;
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;
}
@ -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) {
@ -1070,6 +1154,10 @@ margin on the iframe, cause it breaks stuff. */
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 {