vividboarder/Vivid-Casper
1
0
Fork 0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2024-12-22 19:47:38 +00:00
Code Issues Releases Wiki Activity

Merge pull request #108 from designbyjake/typography

Browse Source 
Typography updates
This commit is contained in:
John O'Nolan 2014-07-14 09:50:54 +02:00
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

334
assets/css/screen.css
View File

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