Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New typography scheme and improved readability #3

Open
wants to merge 39 commits into
base: master
Choose a base branch
from
Open

New typography scheme and improved readability #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
2cdcee7
Create test-card.md
Feb 16, 2015
afe2977
Update test-card.md
Feb 22, 2015
84c9113
Update test-card.md
Feb 22, 2015
1c690b2
Update test-card.md
Feb 22, 2015
4e92933
Update test-card.md
Feb 22, 2015
688c0b6
Update style.css
Feb 22, 2015
d0c0349
Update style.css
Feb 22, 2015
88288c9
Update style.css
Feb 22, 2015
9bb7374
Update style.css
Feb 22, 2015
42987c9
Update style.css
Feb 24, 2015
33f86a2
Update style.css
Feb 24, 2015
ee1e8b9
Update style.css
Feb 24, 2015
504d8ec
Update style.css
Feb 24, 2015
c44c576
Update theme.html
Feb 24, 2015
d338f77
Update theme.html
Feb 24, 2015
411a2cc
Update theme.html
Feb 24, 2015
c9eb02e
Update theme.html
Feb 24, 2015
735596c
Update theme.html
Feb 24, 2015
0a043d0
Update theme.html
Feb 24, 2015
d6f301c
Update theme.html
Feb 24, 2015
eda4831
Update style.css
Feb 24, 2015
d3a6785
Update style.css
Feb 24, 2015
f3df15e
Update style.css
Feb 24, 2015
27cee21
Update style.css
Feb 24, 2015
f0907eb
Update cur8r.less
Feb 27, 2015
b551644
Update style.css
Feb 27, 2015
afb13c5
Update style.css
Feb 27, 2015
77f0fb4
Update style.css
Feb 27, 2015
136adeb
Update cur8r.less
Feb 27, 2015
176c121
Update theme.html
Mar 2, 2015
37ed072
Update theme.html
Mar 2, 2015
1b87ee8
Update cur8r.less
Mar 2, 2015
36c3aef
Update style.css
Mar 2, 2015
0b036e1
Update style.css
Mar 2, 2015
7cf36d6
Update cur8r.less
Mar 2, 2015
b455bfe
Update cur8r.less
Mar 2, 2015
1d13bb5
Update style.css
Mar 2, 2015
096b772
Update cur8r.less
Mar 7, 2015
b822dd4
Update style.css
Mar 7, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 146 additions & 36 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic);
@import url(http://postach.io/static/themes/_assets/css/typicons.css);
/* Created by Shawn Adrian https://github.com/postachio/theme-cur8r
Modified by Gavin Wray 7 Mar 2015
https://github.com/gavinwray/theme-cur8r
*/
/*---------------------------------------------------
LESS Elements 0.9.1
---------------------------------------------------
Expand All @@ -23,8 +27,7 @@ body {
height: 100%;
width: 100%;
background-color: #e7e2d0;
font-size: 100%;
/* 16px */
font-size: 16px;
line-height: 1.5;
}
ul,
Expand All @@ -39,24 +42,29 @@ p,
h1,
h2,
h3,
h4 {
h4,
h5 {
margin: 0;
padding: 0;
border: 0;
position: relative;
color: #000000;
color: #222222;
list-style-type: none;
}
h1,
h2 {
font-size: 1rem;
line-height: 1rem;
}
/*
h3 { font-size: 3rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1rem; }
*/
h3 {
font-size: 1.777rem;
}
h4 {
font-size: 1.333rem;
}
h5 {
font-size: 1rem;
}
p {
padding: 0.5rem 0 0.5rem 0;
}
Expand Down Expand Up @@ -112,7 +120,7 @@ div.header h1.logo {
display: inline-block;
}
div.header h1.logo a {
color: #464748;
color: #222222;
}
div.header h1.logo a:hover {
color: #44a084;
Expand All @@ -128,7 +136,7 @@ div.header ul.nav li {
font-size: 1rem;
}
div.header ul.nav li a {
color: #464748;
color: #222222;
text-transform: uppercase;
}
div.header ul.nav li a:hover {
Expand All @@ -151,7 +159,7 @@ div.header ul.social li {
}
div.header ul.social li a {
font-size: 1.5rem;
color: #464748;
color: #222222;
}
div.header ul.social li a:hover {
color: #44a084;
Expand Down Expand Up @@ -182,14 +190,14 @@ div.mobile-nav a.toggle {
top: 30px;
right: 30px;
font-size: 1.5rem;
color: #464748;
color: #222222;
}
div.mobile-nav a.toggle:hover {
color: #44a084;
}
div.mobile-nav ul {
display: none;
border-top: 1px solid #464748;
border-top: 1px solid #222222;
position: absolute;
top: 80px;
right: 0;
Expand All @@ -201,14 +209,14 @@ div.mobile-nav ul {
background-color: #ffffff;
}
div.mobile-nav ul li {
border-bottom: 1px solid #464748;
border-bottom: 1px solid #222222;
display: block;
text-align: left;
}
div.mobile-nav ul li a {
display: block;
padding: 15px;
color: #464748;
color: #222222;
}
div.mobile-nav ul li a:hover {
background-color: #44a084;
Expand Down Expand Up @@ -238,22 +246,22 @@ div.right {
padding: 125px 35px 35px 35px;
}
div.right h2 {
border-bottom: 1px solid #464748;
border-bottom: 1px solid #222222;
padding-bottom: 15px;
}
div.right h2 .typcn {
font-size: 2.5rem;
color: #e7e2d0;
}
div.right h3 {
border-bottom: 1px solid #464748;
border-bottom: 1px solid #222222;
font-weight: 700;
padding: 10px 0 10px 0;
font-size: 1rem;
line-height: 1.5rem;
}
div.right p {
color: #464748;
color: #222222;
font-size: 0.9rem;
padding: 0;
margin: 0;
Expand All @@ -266,7 +274,7 @@ div.right ul.right-links {
line-height: 1.5rem;
}
div.right ul.right-links li a {
color: #464748;
color: #222222;
}
div.right ul.right-links li a:hover {
color: #44a084;
Expand All @@ -281,12 +289,12 @@ ul.tags li {
display: inline-block;
}
ul.tags li a {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
background-color: #b9b9b9;
font-weight: 400;
background-color: #333;
color: #ffffff;
padding: 1px 7px 3px 7px;
}
Expand Down Expand Up @@ -381,7 +389,7 @@ div.post-wrapper div.post-fragment div.post-details h2 {
font-weight: 700;
}
div.post-wrapper div.post-fragment div.post-details h2 a {
color: #464748;
color: #222222;
}
div.post-wrapper div.post-fragment div.post-details h2 a:hover {
color: #44a084;
Expand All @@ -390,10 +398,18 @@ div.post-wrapper div.post-fragment ul.tags {
position: absolute;
bottom: 20px;
left: 20px;
float: left;
}
div.post-wrapper div.post-fragment ul.tags:first-of-type {
margin-left: 0;
}
div.post-wrapper div.post-fragment span.date {
display: inline-block;
position: absolute;
bottom: 20px;
right: 20px;
font-size: 0.75rem;
}
div.post-wrapper div.post-fragment div.post-body {
display: none;
position: absolute;
Expand Down Expand Up @@ -426,17 +442,19 @@ div.post-wrapper div.post-fragment:hover div.post-body {
}
div.post {
background-color: #ffffff;
padding: 70px;
padding: 50px 100px 50px 50px;
max-width: 630px;
margin: auto;
}
div.post h2 {
font-size: 3rem;
line-height: 4rem;
font-size: 2.369rem;
line-height: 1.2;
}
div.post h2 a {
color: #464748;
color: #222222;
}
div.post h2 a:hover {
color: #464748;
color: #222222;
}
div.post ul.tags {
padding: 0.5rem 0 1.5rem 0;
Expand All @@ -445,7 +463,7 @@ div.post ul.tags:first-of-type {
margin-left: 0;
}
div.post div.post-body p {
color: #464748;
color: #222222;
}
div.post div.post-body p img {
width: 100%;
Expand Down Expand Up @@ -581,6 +599,49 @@ div.post div.post-body .post-content .post-pdf object {
display: block;
min-height: 400px;
}
div.post div.post-body .post-content table {
margin: 0.5rem 0;
padding: 0;
background-color: #f4f3e9;
font-size: 0.9rem;
}
div.post div.post-body .post-content thead,
div.post div.post-body .post-content tr:nth-child(even) {
background-color: #e7e2d0;
margin: 0;
}
div.post div.post-body .post-content th,
div.post div.post-body .post-content td {
padding: 0.25rem 0.5rem;
}
div.post div.post-body .post-content blockquote {
padding: 7.5px 60px 7.5px 15px;
margin: 7.5px 0;
border-left: 5px solid #e5e5e5;
font-size: 0.875rem;
}
div.post div.post-body .post-content pre {
padding: 7.5px 60px 7.5px 15px;
margin: 7.5px 0;
background-color: #f4f3e9;
border: 1px solid #e7e2d0;
border-left: 5px solid #e7e2d0;
font-size: 0.8rem;
}
div.post div.post-body .post-content ul,
div.post div.post-body .post-content ol {
margin-left: 40px;
}
div.post div.post-body .post-content h2,
div.post div.post-body .post-content h3,
div.post div.post-body .post-content h4 {
padding-top: 15px;
}
div.post div.post-body .post-content h5 {
padding: 10px 0 0 0;
line-height: 1.2;
margin-bottom: -5px;
}
div.post .socialbar-container {
padding: 0;
margin: 0;
Expand Down Expand Up @@ -655,7 +716,7 @@ div.pagination {
padding: 30px 35px 30px 35px;
}
div.pagination a {
color: #464748;
color: #222222;
font-size: 1rem;
}
div.pagination a.post-prev {
Expand Down Expand Up @@ -711,6 +772,7 @@ div.pagination:after {
}
div.post-wrapper {
width: 100%;
padding-top: 100px;
}
div.post-wrapper div.post-fragment {
float: left;
Expand Down Expand Up @@ -747,14 +809,30 @@ div.pagination:after {
}
/* Landscape phones and down */
@media (max-width: 560px) {
body {
font-size: 14px;
line-height: 1.45;
}
div.header {
background-color: #e7e2d0;
height: 45px;
}
div.header h1.logo {
padding: 15px 0 0 15px;
}
div.header ul.nav {
display: none;
}
div.mobile-nav {
display: block;
top: -25px;
}
div.mobile-nav ul {
top: 70px;
}
div.post-wrapper {
width: 100%;
padding: 45px 0 0 0;
}
div.post-wrapper div.post-fragment {
clear: both;
Expand All @@ -770,11 +848,43 @@ div.pagination:after {
padding: 10px 0 10px 10px;
}
div.post {
padding: 35px;
padding: 15px;
}
div.post h2 {
font-size: 1.75rem;
line-height: 2.25rem;
font-size: 1.563rem;
line-height: 1.2;
}
div.post h3 {
font-size: 1.25rem;
line-height: 1.2;
}
div.post h4,
div.post h5 {
font-size: 1rem;
line-height: 1.2;
}
div.post div.postbody .post-content ol,
div.post div.postbody .post-content ul {
margin-left: 30px;
}
div.post blockquote {
padding-right: 0px !important;
font-size: 0.8rem;
}
div.post tr {
font-size: 0.8rem;
}
div.post pre {
font-size: 0.8em !important;
}
div.post post-info p.date {
font-size: 0.8rem;
}
div.pagination {
padding-left: 25px;
}
h4.tag-header {
padding-left: 15px;
}
}
.post-pdf {
Expand Down
Loading