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

1219 lines
22 KiB
CSS
Raw Normal View History

Casper - initial commit to separate GitHub repo
2013-05-11 10:16:11 +00:00
/*
* Theme Name: Casper
* Theme URI: http://tryghost.org
* Description: The default Ghost theme for personal blogging.
* Author: Ghost
* Author URI: http://tryghost.org;
* Version:1.0
*/
/* ==========================================================================
Table of Contents
========================================================================== */
/*
1. Includes
2. Something
3. Something else
*/
/* ==========================================================================
1. Includes
========================================================================== */
@import url(normalize.css);
@import url(boilerplate.css);
@import url(fonts.css);
/* ==========================================================================
2. Typography
========================================================================== */
body {
color: #333;
font-style: normal;
font-weight: 400;
font-family: Georgia;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: galette;
text-transform: uppercase;
}
h1, .h1 {
font-size: 69px;
line-height: 75px;
margin-bottom: 0px;
font-weight: 500;
letter-spacing: -1px;
}
h2, .h2 {
margin-top: 50px;
margin-bottom: 25px;
font-size: 34px;
line-height: 34px;
letter-spacing: 0;
font-weight: 500;
}
h3, .h3 {
font-size: 20px;
line-height: 20px;
margin: 1.5em 0 6px 0;
font-weight: normal;
}
h4, .h4 {
font-size: 16px;
line-height: 26px;
margin: 1.5em 0 6px 0;
font-weight: normal;
}
h5, .h5 {
font-size: 14px;
line-height: 18px;
margin: 1.5em 0 6px 0;
font-weight: normal;
}
h6, .h6 {
font-size: 14px;
line-height: 18px;
margin: 1.5em 0 6px 0;
font-weight: normal;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color:#333;
text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
text-decoration: underline;
}
a {
color:#222;
}
small {
font-family: sans-serif;
font-size: 11px;
color:#aaa;
}
blockquote {
margin:1.5em 0;
padding:0 0 0 1.5em;
font-size: 20px;
font-family: sans-serif;
font-style: italic;
font-weight: 400;
text-align: left;
border-left:#eee 8px solid;
}
pre code {
display: block;
padding:1em 0;
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
background: #f5f5f5;
position: relative;
}
pre code:before {
content: " ";
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
background: #f5f5f5;
position: absolute;
top: -1px;
bottom: -1px;
right:100%;
width: 9999px;
}
pre code:after {
content: " ";
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
background: #f5f5f5;
position: absolute;
top: -1px;
bottom: -1px;
left:100%;
width: 9999px;
}
figure {
position: relative;
}
figcaption {
position: absolute;
bottom:0;
left:0;
right:0;
padding:8px 10px;
font-size: 12px;
font-family: sans-serif;
background: rgba(0,0,0,0.5);
color:#e4e4e4;
-webkit-transition: background .5s, color .5s;
-moz-transition: background .5s, color .5s;
-ms-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
figcaption a {
color:#fff;
}
figure:hover figcaption {
background: rgba(0,0,0,0.7);
color:#efefef;
-webkit-transition: background .5s, color .5s;
-moz-transition: background .5s, color .5s;
-ms-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
input, textarea {
-webkit-appearance: none;
outline: none;
}
input[type="text"],
textarea {
height:20px;
padding:8px;
font-size: 14px;
text-shadow:none;
background: #fff;
border:#dadada 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
input[type="text"]:focus,
textarea:focus {
border-color: #aaa;
}
input[type="submit"] {
height:38px;
padding: 0;
color:#fff;
font-size: 14px;
text-shadow:none;
border:#000 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background: #222;
background: -moz-linear-gradient(bottom, #000, #333);
background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#333));
}
input[type="submit"]:hover {
cursor:pointer;
background: #444;
background: -moz-linear-gradient(bottom, #111, #444);
background: -webkit-gradient(linear, left bottom, left top, from(#111), to(#444));
}
/* ==========================================================================
3. Layout
========================================================================== */
body {
background:#ececee url(../img/texture.png) top left repeat;
}
body > header {
width:280px;
padding:60px;
position: fixed;
top: 0;
right:0;
bottom:0;
}
section.content {
margin-right:400px;
background:#fff;
overflow: hidden; /*hide the :before :after elements on the entry header and footer*/
-webkit-box-shadow: rgba(0,0,0,0.1) 1px 0 10px;
-moz-box-shadow: rgba(0,0,0,0.1) 1px 0 10px;
-ms-box-shadow: rgba(0,0,0,0.1) 1px 0 10px;
box-shadow: rgba(0,0,0,0.1) 1px 0 10px;
}
/* Generic wrapper to control content width */
.wrap {
max-width:640px;
padding:0 60px;
margin:0 auto;
}
/* ==========================================================================
4. Header/Sidebar
========================================================================== */
body > header {
font-family: sans-serif;
font-size:14px;
color:rgba(0,0,0,0.45);
}
#logo {
display: block;
margin-bottom:25px;
}
#logo img {
max-width: 280px;
height:auto;
}
.blog-icon {
display: inline;
width:12px;
height:12px;
margin:0 0 0 5px;
vertical-align: baseline;
}
#title {
font-family: Galette, sans-serif;
font-size: 30px;
line-height: 30px;
font-style: normal;
font-weight: normal;
color:#333;
text-transform: uppercase;
text-decoration: none;
}
#site-navigation ul {
padding: 0;
position: relative;
z-index: 500;
}
#site-navigation ul li {
border-top:rgba(0,0,0,0.1) 1px solid;
margin: 0;
line-height: 1.3em;
}
#site-navigation ul li:first-child {
border:none;
}
#site-navigation ul li a {
display: block;
padding:10px 0;
color:#333;
text-decoration: none;
background:transparent;
-webkit-transition: padding-left .25s, background .25s;
-moz-transition: padding-left .25s, background .25s;
-ms-transition: padding-left .25s, background .25s;
transition: padding-left .25s, background .25s;
}
#site-navigation ul li a:hover {
padding-left: 10px;
background: rgba(0,0,0,0.05);
-webkit-transition: padding-left .25s, background .25s;
-moz-transition: padding-left .25s, background .25s;
-ms-transition: padding-left .25s, background .25s;
transition: padding-left .25s, background .25s;
}
#site-navigation ul li.current-menu-item a {
padding-left:28px;
background: rgba(0,0,0,0.05) url(../img/icon.png) 10px 14px no-repeat;
background-size: 10px;
}
/* ==========================================================================
5. Post Content
========================================================================== */
.post-thumb {
margin-bottom:-115px; /* Pull the article header+title up over the post image */
min-height:115px; /* Make post layout look normal while image is loading */
}
.post-thumb img {
width:100%;
height:auto;
}
.hentry header {
margin:35px 0 0 0;
padding:25px 0 0 30px;
background: #fff;
position: relative;
left:-30px;
z-index: 300;
}
.hentry header:after {
content: " ";
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left:100%;
width: 9999px;
}
.entry-title {
margin-top:0;
}
.entry-meta {
font-style: italic;
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
color:#666;
}
.entry-meta time {
font-style: normal;
text-transform: uppercase;
}
.hentry header .entry-meta time {
display: inline;
}
.entry-content {
padding-bottom: 60px;
}
.entry-content p {
margin-bottom: 0px;
text-indent: 16px;
}
.entry-content blockquote p {
text-indent: -4px;
}
.entry-content p:nth-of-type(1) {
text-indent: 0px;
}
/* Introduction/Kicker */
.post .entry-content p:nth-of-type(1),
.kicker {
margin-bottom: 25px;
line-height: 33px;
font-size: 24px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
}
.post .entry-content div p:nth-of-type(1),
.post .entry-content blockquote p:nth-of-type(1) {
margin-bottom: inherit;
line-height: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
/* First paragraph after Introduction */
.entry-content p:nth-of-type(2),
.introduction {
text-indent: 0px;
}
/* Tombstone */
.post .entry-content p:last-child:after,
.tombstone {
content: "";
display: inline-block;
width:11px;
height:11px;
margin:0 0 0 8px;
vertical-align: baseline;
background: url(../img/icon.png) bottom right no-repeat;
background-size: 11px 11px;
}
/* Prevent Tombstone from appearing in nested elements */
.entry-content * p:after {display: none!important;}
.entry-content figure {
margin: 1.5em 0;
}
.entry-content figure img {
width:100%;
height:auto;
}
.hfeed {
padding-bottom: 1px;
}
.hfeed .entry-content ol,
.hfeed .entry-content ul,
.hfeed .entry-content dl {
margin: 1em 0;
padding: 0 0 0 2em;
}
.hfeed .entry-content li {
max-width: none;
padding:0;
margin:5px 0 0 0;
}
.entry-footer {
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
position: relative;
font-size:11px;
line-height:17px;
color:#666;
}
.entry-footer h4 {
font-family: Galette, sans-serif;
text-transform: uppercase;
letter-spacing: 0;
font-style: normal;
color:#aaa;
line-height:16px;
margin:0 0 12px 0;
}
.entry-footer h5 {
font-family: Galette, sans-serif;
text-transform: uppercase;
letter-spacing: 0;
font-style: normal;
color:#aaa;
margin:13px 0 0 0;
}
.entry-footer h5:first-child {
margin:0;
}
.entry-footer .entry-meta {
font-size:11px;
line-height:17px;
}
.entry-footer p {
margin:0;
}
.entry-footer .share {
list-style: none;
margin: 0;
padding: 0;
font-style: normal;
letter-spacing: 0;
}
.entry-footer .share li {
float:left;
padding:0 0 0 3px;
}
.entry-footer .share li:after {
content: " \2022 "; /* Hex reference for • bullet point to divide list items */
}
.entry-footer .share li:last-child:after {
content: none;
}
.entry-footer .share li:first-child {
padding-left:0;
border:none;
}
.entry-footer:before {
content: "";
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
position: absolute;
top: -1px;
bottom: -1px;
right:100%;
width: 9999px;
}
.entry-footer:after {
content: "";
border-top:#dadada 1px solid;
border-bottom: #dadada 1px solid;
position: absolute;
top: -1px;
bottom: -1px;
left:100%;
width: 9999px;
}
.entry-footer .entry-meta {
width:30%;
padding: 4% 5% 4% 0;
float:left;
-webkit-box-shadow:#dadada 1px 0 0;
-moz-box-shadow:#dadada 1px 0 0;
-ms-box-shadow:#dadada 1px 0 0;
box-shadow:#dadada 1px 0 0;
}
.entry-footer .comments {
width:60%;
padding: 4% 0 4% 5%;
float:left;
-webkit-box-shadow:#dadada 1px 0 0 inset;
-moz-box-shadow:#dadada 1px 0 0 inset;
-ms-box-shadow:#dadada 1px 0 0 inset;
box-shadow:#dadada 1px 0 0 inset;
}
/* ==========================================================================
6. Single Post
========================================================================== */
/* ==========================================================================
6. Page
========================================================================== */
.error404 section.content {
padding:100px 0 140px 0;
text-align: center;
}
/* ==========================================================================
7. Post Feed
========================================================================== */
.hfeed {
margin: 0;
padding: 0;
list-style: none;
}
.hfeed li {
max-width: 640px;
margin-top:0;
}
.hfeed li.featured {
max-width: none;
padding:0;
}
.hfeed .entry-title {
margin-bottom:0;
}
.hfeed .hentry {
margin-bottom:40px;
}
.hfeed .updated {
display: block;
color:#aaa;
font-size: 14px;
line-height: 14px;
}
.hfeed .featured .updated {
display: inline;
color: inherit;
font-size: inherit;
line-height: 12px!important;
}
#pagination {
height:32px;
padding:40px;
border-top:#dadada 1px solid;
text-align: center;
color: #aaa;
}
#pagination a {
display: inline-block;
padding:8px 12px;
font-family: sans-serif;
font-size: 12px;
line-height: 12px;
text-decoration: none;
color:#fff;
border:#000 1px solid;
background: #222;
position: relative;
left: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
transition: all 0.25s;
}
.previous-page {
float:right;
}
.next-page {
float:left;
}
#pagination .next-page a:hover {
left:-40px;
padding-left:52px;
margin-right:-40px;
border-radius: 0 5px 5px 0;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
transition: all 0.25s;
}
#pagination .previous-page a:hover {
left:40px;
padding-right:52px;
margin-left:-40px;
border-radius: 5px 0 0 5px;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
transition: all 0.25s;
}
.page-number {
display: inline-block;
padding:9px 10px;
font-family: sans-serif;
font-size: 14px;
line-height: 14px;
text-align: center;
}
.loading {
padding:0 0 0 40px;
line-height: 34px;
opacity:0.4;
background: url(../img/loading.gif) top left no-repeat;
}
#infscr-loading {
text-align: center;
}
/* ==========================================================================
x. Archive
========================================================================== */
.archive section.content,
.search section.content,
.paged section.content {
padding-top:60px;
}
.archive .hfeed {
margin:0 0 80px 0;
padding-bottom: 1px;
box-shadow:#dadada 2px 0 0 inset;
position: relative;
}
.archive .hfeed:after {
content: " ";
background: #dadada;
position: absolute;
bottom: 0;
left:0;
width: 9999px;
height:2px;
}
.archive .hfeed li {
overflow: hidden; /* Hide the dots assigned to each li on timeline view with :before */
}
.archive .hfeed .timestamp {
max-width: none;
padding:0;
margin-bottom:40px;
list-style: none;
display: inline-block;
height:60px;
font-family: galette, sans-serif;
font-size: 50px;
line-height: 70px;
color:#ccc;
background: #fff;
position: relative;
left:-30px;
overflow: visible; /*Show the extra border added to the right of timestamps with :after */
}
.archive .hfeed .timestamp:after {
content: " ";
background: #dadada;
position: absolute;
top: 30px;
left:110%;
width: 9999px;
height:2px;
}
.archive .hfeed .hentry {
padding-left: 30px;
position:relative;
}
.archive .hfeed .hentry:before {
content: " ";
display: block;
width:12px;
height:12px;
border-radius:15px;
background:#dadada;
position: absolute;
top:23px;
left:-5px;
}
#searchform {
position: relative;
margin-bottom: 60px;
padding-right:128px;
}
#searchform #s {
display:inline-block;
width:100%;
}
#searchform #searchsubmit {
width:100px;
display: inline-block;
position: absolute;
top:0;
right:0;
}
/* ==========================================================================
x. Media Queries
========================================================================== */
/*
* Large Screen Devices
*/
@media only screen and (min-width: 1500px) {
body > header {
left:0;
padding:100px;
}
section.content {
max-width: 1100px;
margin: 60px 100px 60px 480px;
}
}
/*
* Tablets
*/
@media only screen and (max-width: 1100px) {
body > header {
width:140px;
padding:30px;
}
#logo img {
max-width: 140px;
}
#title {
font-size: 25px;
line-height: 25px;
margin:0px 0 0 0;
}
section.content {
margin-right:200px;
}
.wrap {
padding:0 30px;
}
.archive section.content,
.search section.content,
.paged section.content {
padding-top:30px;
}
.post-thumb {
margin-bottom:0;
}
.hentry header {
margin:0 0 0 0;
}
.hentry header:after {
display:none;
}
.entry-content {
padding-bottom: 40px;
}
#pagination {
padding:30px;
}
.nav-previous {
top:30px;
left:30px;
}
.nav-next {
top:30px;
right:30px;
}
#searchform {
margin-bottom:35px;
}
#sidebar #searchform #s{
font-size: 12px;
}
.archive .hfeed .timestamp {
left:-15px;
}
.error404 section.content {
padding:80px 0 100px 0;
}
}
/*
* Small Tablets
*/
@media only screen and (max-width: 900px) {
h1, .h1 {
font-size: 54px;
line-height: 63px;
}
h2, .h2 {
font-size: 30px;
line-height: 30px;
}
.archive .hfeed .hentry:before {
top:19px;
}
}
/*
* Mobile Devices
*/
@media only screen and (max-width: 700px) {
h1, .h1 {
font-size: 40px;
line-height: 46px;
}
h2, .h2 {
font-size: 25px;
line-height: 25px;
}
h3, .h3 {
font-size: 18px;
line-height: 18px;
}
h4, .h4 {
font-size: 16px;
line-height: 26px;
margin: 1.5em 0 6px 0;
}
h5, .h5 {
font-size: 14px;
line-height: 18px;
margin: 1.5em 0 6px 0;
}
h6, .h6 {
font-size: 14px;
line-height: 18px;
margin: 1.5em 0 6px 0;
}
/* Introduction/Kicker */
.post .entry-content p:nth-of-type(1) {
margin-bottom: 20px;
line-height: 29px;
font-size: 20px;
}
body > header {
position: relative;
width:auto;
padding:20px 20px 0 20px;
}
#logo {
float:left;
margin: 0 20px 0 0;
}
#logo img {
max-width:75px;
}
#title {
font-size: 20px;
line-height: 20px;
margin:10px 0 0 0;
}
#description {
max-width: 460px;
font-size:1em;
line-height: 1.2em;
margin: 5px 0 0 0;
}
#site-navigation ul {
margin: 20px 0 0 0;
}
#site-navigation ul:after {
content: " ";
display: table;
clear:both;
}
#site-navigation ul li {
border:none;
float:left;
}
#site-navigation ul li a {
padding: 8px 10px;
color:#333;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
}
#site-navigation ul li a:hover {
padding: 8px 10px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
}
#site-navigation ul li.current-menu-item a {
padding: 8px 10px;
background: #fff;
}
#ghost {
display: none;
}
section.content {
margin:0;
}
.wrap {
padding:0 20px;
}
.archive section.content,
.search section.content,
.paged section.content {
padding-top:20px;
}
.entry-content {
padding-bottom: 30px;
}
#pagination {
padding:20px;
}
.extended {
display: none;
}
#searchform {
margin-bottom:25px;
}
.archive .hfeed .hentry {
padding-left: 20px;
}
.archive .hfeed .hentry:before {
top:14px;
left:-6px;
}
.archive .hfeed .timestamp {
left:-3px;
margin-bottom: 30px;
font-size: 30px;
}
.error404 section.content {
padding:30px 0 50px 0;
}
}
/*
* Very Small Devices
*/
@media only screen and (max-width: 400px) {
h1, .h1 {
font-size: 30px;
line-height: 36px;
}
h2, .h2 {
font-size: 20px;
line-height: 20px;
}
h3, .h3 {
font-size: 16px;
line-height: 16px;
}
h4, .h4 {
font-size: 15px;
line-height: 25px;
margin: 1.5em 0 6px 0;
}
h5, .h5 {
font-size: 13px;
line-height: 16px;
margin: 1.5em 0 6px 0;
}
h6, .h6 {
font-size: 12px;
line-height: 16px;
margin: 1.5em 0 6px 0;
}
#logo img {
max-width: 60px;
}
#description {
font-size:0.9em;
line-height: 1.1em;
}
#site-navigation {
font-size: 13px;
}
.hfeed .hentry {
margin-bottom: 30px;
}
.hfeed .updated {
font-size: 13px;
}
.archive .hfeed .hentry:before {
top:12px;
left:-7px;
}
.entry-footer .entry-meta{
width:100%;
padding:2em 0;
box-shadow: none;
}
.entry-footer .comments {
width:100%;
padding:2em 0;
border-top:#dadada 1px dashed;
box-shadow: none;
}
.page-number {display:none;}
}
/* ==========================================================================
DO NOT ADD ANY CODE BELOW THIS POINT
========================================================================== */