Dem new styles tho
- Uses new typography, including Helvetica light, larger font-sizes, and px values - Wider site width, larger margins, and overall more whitespace - Responsive down to mobile
This commit is contained in:
Joel Glovier
parent
1e28eee0c7
commit
cac15574e7
|
|
@ -1,10 +1,6 @@
|
||||||
/*****************************************************************************/
|
/* Base */
|
||||||
/*
|
/* ----------------------------------------------------------*/
|
||||||
/* Common
|
|
||||||
/*
|
|
||||||
/*****************************************************************************/
|
|
||||||
|
|
||||||
/* Global Reset */
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -14,154 +10,211 @@ html, body { height: 100%; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
font: 13.34px Helvetica, Arial, sans-serif;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
font-size: small;
|
font-size: 16px;
|
||||||
text-align: center;
|
line-height: 1.5;
|
||||||
|
font-weight: 300;
|
||||||
|
background-color: #fdfdfd;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
|
||||||
font-size: 100%; }
|
|
||||||
|
|
||||||
h1 { margin-bottom: 1em; }
|
a { color: #2a7ae2; text-decoration: none; }
|
||||||
p { margin: 1em 0; }
|
a:hover { color: #000; text-decoration: underline; }
|
||||||
|
a:visited { color: #205caa; }
|
||||||
|
|
||||||
a { color: #00a; }
|
/* Utility */
|
||||||
a:hover { color: #000; }
|
|
||||||
a:visited { color: #a0a; }
|
|
||||||
|
|
||||||
/*****************************************************************************/
|
.wrap:before,
|
||||||
/*
|
.wrap:after { content:""; display:table; }
|
||||||
/* Home
|
.wrap:after { clear: both; }
|
||||||
/*
|
.wrap {
|
||||||
/*****************************************************************************/
|
max-width: 750px;
|
||||||
.posts {
|
padding: 0 30px;
|
||||||
list-style-type: none;
|
margin: 0 auto;
|
||||||
margin-bottom: 2em;
|
zoom: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posts li {
|
|
||||||
line-height: 1.75em;
|
/* Layout Styles */
|
||||||
|
/* ----------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* Site header */
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
border-top: 5px solid #333;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
min-height: 56px;
|
||||||
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posts span {
|
.site-title,
|
||||||
color: #aaa;
|
.site-title:hover,
|
||||||
font-family: Monaco, "Courier New", monospace;
|
.site-title:visited {
|
||||||
font-size: 80%;
|
display: block;
|
||||||
}
|
color: #333;
|
||||||
|
font-size: 26px;
|
||||||
/*****************************************************************************/
|
letter-spacing: -1px;
|
||||||
/*
|
|
||||||
/* Site
|
|
||||||
/*
|
|
||||||
/*****************************************************************************/
|
|
||||||
|
|
||||||
.site {
|
|
||||||
font-size: 115%;
|
|
||||||
text-align: justify;
|
|
||||||
width: 42em;
|
|
||||||
margin: 0 auto 2em;
|
|
||||||
padding-top: 3em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 44em) {
|
|
||||||
.site {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header a {
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a {
|
|
||||||
color: #a00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a:hover {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header a.extra {
|
|
||||||
color: #aaa;
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header a.extra:hover {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
font-size: 80%;
|
|
||||||
color: #666;
|
|
||||||
border-top: 4px solid #eee;
|
|
||||||
margin-top: 2em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer .contact {
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 3em;
|
line-height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .contact a {
|
.site-nav {
|
||||||
color: #8085C1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer .rss {
|
|
||||||
margin-top: 1.1em;
|
|
||||||
margin-right: -.2em;
|
|
||||||
float: right;
|
float: right;
|
||||||
|
line-height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .rss img {
|
.site-nav > a {
|
||||||
border: 0;
|
margin-left: 20px;
|
||||||
|
color: #727272;
|
||||||
|
letter-spacing: -.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*****************************************************************************/
|
/* Site footer */
|
||||||
/*
|
|
||||||
/* Posts
|
|
||||||
/*
|
|
||||||
/*****************************************************************************/
|
|
||||||
|
|
||||||
/* standard */
|
.site-footer {
|
||||||
.post pre {
|
border-top: 1px solid #e8e8e8;
|
||||||
border: 1px solid #ddd;
|
padding: 30px 0;
|
||||||
background-color: #eef;
|
|
||||||
padding: 0 .4em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post ul, .post ol {
|
.footer-heading {
|
||||||
margin-left: 1.35em;
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: -.5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-footer .column { float: left; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.footer-col-1 { width: 250px; margin-right: 10px }
|
||||||
|
.footer-col-2 { width: 215px; margin-right: 10px }
|
||||||
|
.footer-col-3 { width: 265px; }
|
||||||
|
|
||||||
|
.site-footer ul { list-style: none; }
|
||||||
|
|
||||||
|
.site-footer li,
|
||||||
|
.site-footer p {
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: -.3px;
|
||||||
|
color: #828282;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Page Content styles */
|
||||||
|
/* ----------------------------------------------------------*/
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 30px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Home styles */
|
||||||
|
/* ----------------------------------------------------------*/
|
||||||
|
|
||||||
|
.home h1 { margin-bottom: 25px; }
|
||||||
|
|
||||||
|
.posts { list-style-type: none; }
|
||||||
|
|
||||||
|
.posts li { margin-bottom: 30px; }
|
||||||
|
|
||||||
|
.posts .post-link {
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts .post-date {
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #818181;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Post styles */
|
||||||
|
/* ----------------------------------------------------------*/
|
||||||
|
|
||||||
|
.post-header { margin: 10px 0 30px; }
|
||||||
|
|
||||||
|
.post-header h1 {
|
||||||
|
font-size: 42px;
|
||||||
|
letter-spacing: -1.75px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header .meta {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #818181;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content { margin: 0 0 30px; }
|
||||||
|
|
||||||
|
.post-content > * { margin: 20px 0; }
|
||||||
|
|
||||||
|
|
||||||
|
.post-content h1,
|
||||||
|
.post-content h2,
|
||||||
|
.post-content h3,
|
||||||
|
.post-content h4,
|
||||||
|
.post-content h5,
|
||||||
|
.post-content h6 {
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 40px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
letter-spacing: -1.25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h3 {
|
||||||
|
font-size: 26px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content blockquote {
|
||||||
|
border-left: 4px solid #e8e8e8;
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
opacity: .6;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
font-style: italic;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content ul,
|
||||||
|
.post-content ol { padding-left: 20px; }
|
||||||
|
|
||||||
|
.post pre,
|
||||||
.post code {
|
.post code {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #d5d5e9;
|
||||||
background-color: #eef;
|
background-color: #eef;
|
||||||
padding: 0 .2em;
|
padding: 8px 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post pre code {
|
.post code { padding: 1px 5px; }
|
||||||
border: none;
|
|
||||||
}
|
.post ul,
|
||||||
|
.post ol { margin-left: 1.35em; }
|
||||||
|
|
||||||
|
.post pre code { border: none; }
|
||||||
|
|
||||||
/* terminal */
|
/* terminal */
|
||||||
.post pre.terminal {
|
.post pre.terminal {
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post pre.terminal code {
|
.post pre.terminal code { background-color: #333; }
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue