|
|
@ -174,90 +174,8 @@ td, th{ padding: 0; } |
|
|
|
2. General - Setting up some base styles |
|
|
|
========================================================================== */ |
|
|
|
|
|
|
|
html { |
|
|
|
height: 100%; |
|
|
|
max-height: 100%; |
|
|
|
font-size: 62.5%; |
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
height: 100%; |
|
|
|
max-height: 100%; |
|
|
|
font-family: "Merriweather", serif; |
|
|
|
letter-spacing: 0.01rem; |
|
|
|
font-size: 1.8rem; |
|
|
|
line-height: 1.75em; |
|
|
|
color: #3A4145; |
|
|
|
-webkit-font-feature-settings: 'kern' 1; |
|
|
|
-moz-font-feature-settings: 'kern' 1; |
|
|
|
-o-font-feature-settings: 'kern' 1; |
|
|
|
text-rendering: geometricPrecision; |
|
|
|
} |
|
|
|
|
|
|
|
::-moz-selection { |
|
|
|
background: #D6EDFF; |
|
|
|
} |
|
|
|
|
|
|
|
::selection { |
|
|
|
background: #D6EDFF; |
|
|
|
} |
|
|
|
|
|
|
|
h1, h2, h3, |
|
|
|
h4, h5, h6 { |
|
|
|
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
|
|
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
|
|
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
|
|
color: #2E2E2E; |
|
|
|
line-height: 1.15em; |
|
|
|
margin: 0 0 0.4em 0; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
text-rendering: geometricPrecision; |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
font-size: 5rem; |
|
|
|
letter-spacing: -2px; |
|
|
|
text-indent: -3px; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-size: 3.6rem; |
|
|
|
letter-spacing: -1px; |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-size: 3rem; |
|
|
|
letter-spacing: -0.6px; |
|
|
|
} |
|
|
|
|
|
|
|
h4 { |
|
|
|
font-size: 2.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
h5 { |
|
|
|
font-size: 2rem; |
|
|
|
} |
|
|
|
|
|
|
|
h6 { |
|
|
|
font-size: 2rem; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: #4A4A4A; |
|
|
|
transition: color 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
a:hover { |
|
|
|
color: #111; |
|
|
|
} |
|
|
|
|
|
|
|
p, ul, ol, dl { |
|
|
|
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; |
|
|
|
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; |
|
|
|
-o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; |
|
|
|
margin: 0 0 1.75em 0; |
|
|
|
text-rendering: geometricPrecision; |
|
|
|
} |
|
|
|
|
|
|
|
ol, ul { |
|
|
@ -559,565 +477,7 @@ button { |
|
|
|
z-index: 10; |
|
|
|
min-height: 100%; |
|
|
|
background: #fff; |
|
|
|
-webkit-transition: -webkit-transform 0.5s ease; |
|
|
|
transition: transform 0.5s ease; |
|
|
|
} |
|
|
|
|
|
|
|
body.nav-opened .site-wrapper { |
|
|
|
overflow-x: hidden; |
|
|
|
-webkit-transform: translate3D(-240px, 0, 0); |
|
|
|
-ms-transform: translate3D(-240px, 0, 0); |
|
|
|
transform: translate3D(-240px, 0, 0); |
|
|
|
-webkit-transition: -webkit-transform 0.3s ease; |
|
|
|
transition: transform 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* ========================================================================== |
|
|
|
4. General - The main styles for the the theme |
|
|
|
========================================================================== */ |
|
|
|
|
|
|
|
/* Big cover image on the home page */ |
|
|
|
.main-header { |
|
|
|
position: relative; |
|
|
|
display: table; |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
margin-bottom: 5rem; |
|
|
|
text-align: center; |
|
|
|
background: #222 no-repeat center center; |
|
|
|
background-size: cover; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.main-header .inner { |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
|
|
|
|
.main-nav { |
|
|
|
position: relative; |
|
|
|
padding: 35px 40px; |
|
|
|
margin: 0 0 30px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.main-nav a { |
|
|
|
text-decoration: none; |
|
|
|
font-family: 'Open Sans', sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
/* Navigation */ |
|
|
|
body.nav-opened .nav-cover { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 240px; |
|
|
|
bottom: 0; |
|
|
|
z-index: 200; |
|
|
|
} |
|
|
|
|
|
|
|
.nav { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 5; |
|
|
|
width: 240px; |
|
|
|
opacity: 0; |
|
|
|
background: #111; |
|
|
|
margin-bottom: 0; |
|
|
|
text-align: left; |
|
|
|
overflow-y: auto; |
|
|
|
-webkit-transition: -webkit-transform 0.5s ease, |
|
|
|
opacity 0.3s ease 0.7s; |
|
|
|
transition: transform 0.5s ease, |
|
|
|
opacity 0.3s ease 0.7s; |
|
|
|
} |
|
|
|
|
|
|
|
body.nav-closed .nav { |
|
|
|
-webkit-transform: translate3D(97px, 0, 0); |
|
|
|
-ms-transform: translate3D(97px, 0, 0); |
|
|
|
transform: translate3D(97px, 0, 0); |
|
|
|
} |
|
|
|
|
|
|
|
body.nav-opened .nav { |
|
|
|
opacity: 1; |
|
|
|
-webkit-transition: -webkit-transform 0.3s ease, |
|
|
|
opacity 0s ease 0s; |
|
|
|
transition: transform 0.3s ease, |
|
|
|
opacity 0s ease 0s; |
|
|
|
-webkit-transform: translate3D(0, 0, 0); |
|
|
|
-ms-transform: translate3D(0, 0, 0); |
|
|
|
transform: translate3D(0, 0, 0); |
|
|
|
} |
|
|
|
|
|
|
|
.nav-title { |
|
|
|
position: absolute; |
|
|
|
top: 45px; |
|
|
|
left: 30px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 100; |
|
|
|
text-transform: uppercase; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close { |
|
|
|
position: absolute; |
|
|
|
top: 38px; |
|
|
|
right: 25px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
padding: 0; |
|
|
|
font-size: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close:focus { |
|
|
|
outline: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close:before, |
|
|
|
.nav-close:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
width: 20px; |
|
|
|
height: 1px; |
|
|
|
background: rgb(150,150,150); |
|
|
|
top: 15px; |
|
|
|
-webkit-transition: background 0.15s ease; |
|
|
|
transition: background 0.15s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close:before { |
|
|
|
-webkit-transform: rotate(45deg); |
|
|
|
-ms-transform: rotate(45deg); |
|
|
|
transform: rotate(45deg); |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close:after { |
|
|
|
-webkit-transform: rotate(-45deg); |
|
|
|
-ms-transform: rotate(-45deg); |
|
|
|
transform: rotate(-45deg); |
|
|
|
} |
|
|
|
|
|
|
|
.nav-close:hover:before, |
|
|
|
.nav-close:hover:after { |
|
|
|
background: rgb(255,255,255); |
|
|
|
} |
|
|
|
|
|
|
|
.nav ul { |
|
|
|
padding: 90px 9% 5%; |
|
|
|
list-style: none; |
|
|
|
counter-reset: item; |
|
|
|
} |
|
|
|
|
|
|
|
.nav li:before { |
|
|
|
display: block; |
|
|
|
float: right; |
|
|
|
padding-right: 4%; |
|
|
|
padding-left: 5px; |
|
|
|
text-align: right; |
|
|
|
font-size: 1.2rem; |
|
|
|
vertical-align: bottom; |
|
|
|
color: #B8B8B8; |
|
|
|
content: counter(item, lower-roman); |
|
|
|
counter-increment: item; |
|
|
|
} |
|
|
|
.nav li { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.nav li a { |
|
|
|
text-decoration: none; |
|
|
|
line-height: 1.4; |
|
|
|
font-size: 1.4rem; |
|
|
|
display: block; |
|
|
|
padding: 0.6rem 4%; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.nav li a:after { |
|
|
|
display: inline-block; |
|
|
|
content: " ......................................................."; |
|
|
|
color: rgba(255,255,255,0.2); |
|
|
|
margin-left: 5px; |
|
|
|
} |
|
|
|
.nav .nav-current:before { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.nav .nav-current a:after { |
|
|
|
content: " "; |
|
|
|
border-bottom: rgba(255,255,255,0.5) 1px solid; |
|
|
|
width: 100%; |
|
|
|
height: 1px; |
|
|
|
} |
|
|
|
|
|
|
|
.nav a:link, |
|
|
|
.nav a:visited { |
|
|
|
color: #B8B8B8; |
|
|
|
} |
|
|
|
|
|
|
|
.nav li.nav-current a, |
|
|
|
.nav a:hover, |
|
|
|
.nav a:active, |
|
|
|
.nav a:focus { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.subscribe-button { |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
-moz-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
bottom: 30px; |
|
|
|
left: 30px; |
|
|
|
right: 30px; |
|
|
|
height: 38px; |
|
|
|
padding: 0 20px; |
|
|
|
color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */ |
|
|
|
text-align: center; |
|
|
|
font-size: 12px; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
text-transform: uppercase; |
|
|
|
text-decoration: none; |
|
|
|
line-height: 35px; |
|
|
|
border-radius: 3px; |
|
|
|
background: #fff; |
|
|
|
transition: all ease 0.3s; |
|
|
|
} |
|
|
|
.subscribe-button:before { |
|
|
|
font-size: 9px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Create a bouncing scroll-down arrow on homepage with cover image */ |
|
|
|
.scroll-down { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
z-index: 100; |
|
|
|
bottom: 45px; |
|
|
|
left: 50%; |
|
|
|
margin-left: -16px; |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
font-size: 34px; |
|
|
|
text-align: center; |
|
|
|
text-decoration: none; |
|
|
|
color: rgba(255,255,255,0.7); |
|
|
|
-webkit-transform: rotate(-90deg); |
|
|
|
-ms-transform: rotate(-90deg); |
|
|
|
transform: rotate(-90deg); |
|
|
|
-webkit-animation: bounce 4s 2s infinite; |
|
|
|
animation: bounce 4s 2s infinite; |
|
|
|
} |
|
|
|
|
|
|
|
/* Stop it bouncing and increase contrast when hovered */ |
|
|
|
.scroll-down:hover { |
|
|
|
color: #fff; |
|
|
|
-webkit-animation: none; |
|
|
|
animation: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* Put a semi-opaque radial gradient behind the icon to make it more visible |
|
|
|
on photos which happen to have a light background. */ |
|
|
|
.home-template .main-header:after { |
|
|
|
display: block; |
|
|
|
content: " "; |
|
|
|
width: 150px; |
|
|
|
height: 130px; |
|
|
|
border-radius: 100%; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 50%; |
|
|
|
margin-left: -75px; |
|
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); |
|
|
|
} |
|
|
|
|
|
|
|
/* Hide when there's no cover image or on page2+ */ |
|
|
|
.no-cover .scroll-down, |
|
|
|
.no-cover.main-header:after, |
|
|
|
.paged .scroll-down, |
|
|
|
.paged .main-header:after { |
|
|
|
display: none |
|
|
|
} |
|
|
|
|
|
|
|
/* Appears in the top left corner of your home page */ |
|
|
|
.blog-logo { |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
background: none !important; /* Makes sure there is never a background */ |
|
|
|
border: none !important; /* Makes sure there is never a border */ |
|
|
|
} |
|
|
|
|
|
|
|
.blog-logo img { |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
-moz-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
display: block; |
|
|
|
height: 38px; |
|
|
|
padding: 1px 0 5px 0; |
|
|
|
width: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-button { |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
-moz-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
display: inline-block; |
|
|
|
float: right; |
|
|
|
height: 38px; |
|
|
|
padding: 0 15px; |
|
|
|
border-style: solid; |
|
|
|
border-width: 1px; |
|
|
|
opacity: 1; |
|
|
|
text-align: center; |
|
|
|
font-size: 12px; |
|
|
|
text-transform: uppercase; |
|
|
|
line-height: 35px; |
|
|
|
white-space: nowrap; |
|
|
|
border-radius: 3px; |
|
|
|
transition: all 0.5s ease; |
|
|
|
} |
|
|
|
.menu-button:before { |
|
|
|
font-size: 12px; |
|
|
|
font-weight: bold; |
|
|
|
margin-right: 6px; |
|
|
|
position: relative; |
|
|
|
top: 1px; |
|
|
|
} |
|
|
|
.menu-button:hover { |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
.menu-button:focus { |
|
|
|
outline: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* When the navigation is closed */ |
|
|
|
.nav-closed .menu-button { |
|
|
|
color: #fff; |
|
|
|
border-color: rgba(255, 255, 255, 0.6); |
|
|
|
} |
|
|
|
.nav-closed .menu-button:hover { |
|
|
|
color: #222; |
|
|
|
} |
|
|
|
|
|
|
|
/* When the navigation is closed and there is no cover image */ |
|
|
|
.nav-closed .no-cover .menu-button { |
|
|
|
border-color: #BFC8CD; |
|
|
|
color: #9EABB3; |
|
|
|
} |
|
|
|
.nav-closed .no-cover .menu-button:hover { |
|
|
|
border-color: #555; |
|
|
|
color: #555; |
|
|
|
} |
|
|
|
|
|
|
|
/* When the navigation is opened */ |
|
|
|
.nav-opened .menu-button { |
|
|
|
padding: 0 12px; |
|
|
|
background: #111; |
|
|
|
border-color: #111; |
|
|
|
color: #fff; |
|
|
|
-webkit-transform: translate3D(94px, 0, 0); |
|
|
|
-ms-transform: translate3D(94px, 0, 0); |
|
|
|
transform: translate3D(94px, 0, 0); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-opened .menu-button .word { |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* Special styles when overlaid on an image*/ |
|
|
|
.main-nav.overlay { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
height: 70px; |
|
|
|
border: none; |
|
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); |
|
|
|
} |
|
|
|
.no-cover .main-nav.overlay { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* The details of your blog. Defined in ghost/settings/ */ |
|
|
|
.page-title { |
|
|
|
margin: 10px 0 10px 0; |
|
|
|
font-size: 5rem; |
|
|
|
letter-spacing: -1px; |
|
|
|
font-weight: 700; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.page-description { |
|
|
|
margin: 0; |
|
|
|
font-size: 2rem; |
|
|
|
line-height: 1.5em; |
|
|
|
font-weight: 400; |
|
|
|
font-family: "Merriweather", serif; |
|
|
|
letter-spacing: 0.01rem; |
|
|
|
color: rgba(255,255,255,0.8); |
|
|
|
} |
|
|
|
|
|
|
|
.no-cover.main-header { |
|
|
|
min-height: 160px; |
|
|
|
max-height: 40vh; |
|
|
|
background: #f5f8fa; |
|
|
|
} |
|
|
|
|
|
|
|
.no-cover .page-title { |
|
|
|
color: rgba(0,0,0,0.8); |
|
|
|
} |
|
|
|
|
|
|
|
.no-cover .page-description { |
|
|
|
color: rgba(0,0,0,0.5); |
|
|
|
} |
|
|
|
|
|
|
|
/* Add subtle load-in animation for content on the home page */ |
|
|
|
.home-template .page-title { |
|
|
|
-webkit-animation: fade-in-down 0.6s; |
|
|
|
animation: fade-in-down 0.6s both; |
|
|
|
-webkit-animation-delay: 0.2s; |
|
|
|
animation-delay: 0.2s; |
|
|
|
} |
|
|
|
.home-template .page-description { |
|
|
|
-webkit-animation: fade-in-down 0.9s; |
|
|
|
animation: fade-in-down 0.9s both; |
|
|
|
-webkit-animation-delay: 0.1s; |
|
|
|
animation-delay: 0.1s; |
|
|
|
} |
|
|
|
|
|
|
|
/* Every post, on every page, gets this style on its <article> tag */ |
|
|
|
.post { |
|
|
|
position: relative; |
|
|
|
width: 80%; |
|
|
|
max-width: 710px; |
|
|
|
margin: 4rem auto; |
|
|
|
padding-bottom: 4rem; |
|
|
|
border-bottom: #EBF2F6 1px solid; |
|
|
|
word-wrap: break-word; |
|
|
|
} |
|
|
|
|
|
|
|
/* Add a little circle in the middle of the border-bottom on our .post |
|
|
|
just for the lolz and stylepoints. */ |
|
|
|
.post:after { |
|
|
|
display: block; |
|
|
|
content: ""; |
|
|
|
width: 7px; |
|
|
|
height: 7px; |
|
|
|
border: #E7EEF2 1px solid; |
|
|
|
position: absolute; |
|
|
|
bottom: -5px; |
|
|
|
left: 50%; |
|
|
|
margin-left: -5px; |
|
|
|
background: #FFF; |
|
|
|
border-radius: 100%; |
|
|
|
box-shadow: #FFF 0 0 0 5px; |
|
|
|
} |
|
|
|
|
|
|
|
body:not(.post-template) .post-title { |
|
|
|
font-size: 3.6rem; |
|
|
|
} |
|
|
|
|
|
|
|
body.page-template .post-title { |
|
|
|
font-size: 5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.post-title a { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.post-excerpt p { |
|
|
|
margin: 0; |
|
|
|
font-size: 0.9em; |
|
|
|
line-height: 1.7em; |
|
|
|
} |
|
|
|
|
|
|
|
.read-more { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.post-meta { |
|
|
|
display: block; |
|
|
|
margin: 1.75rem 0 0 0; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
font-size: 1.5rem; |
|
|
|
line-height: 2.2rem; |
|
|
|
color: #9EABB3; |
|
|
|
} |
|
|
|
|
|
|
|
.author-thumb { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
float: left; |
|
|
|
margin-right: 9px; |
|
|
|
border-radius: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.post-meta a { |
|
|
|
color: #9EABB3; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.post-meta a:hover { |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
|
|
|
|
.user-meta { |
|
|
|
position: relative; |
|
|
|
padding: 0.3rem 40px 0 100px; |
|
|
|
min-height: 77px; |
|
|
|
} |
|
|
|
|
|
|
|
.post-date { |
|
|
|
display: inline-block; |
|
|
|
margin-left: 8px; |
|
|
|
padding-left: 12px; |
|
|
|
border-left: #d5dbde 1px solid; |
|
|
|
text-transform: uppercase; |
|
|
|
font-size: 1.3rem; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.user-image { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.user-name { |
|
|
|
display: block; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.user-bio { |
|
|
|
display: block; |
|
|
|
max-width: 440px; |
|
|
|
font-size: 1.4rem; |
|
|
|
line-height: 1.5em; |
|
|
|
} |
|
|
|
|
|
|
|
.publish-meta { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
padding: 4.3rem 0 4rem 0; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.publish-heading { |
|
|
|
display: block; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.publish-date { |
|
|
|
display: block; |
|
|
|
font-size: 1.4rem; |
|
|
|
line-height: 1.5em; |
|
|
|
transition: transform 0.5s ease; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -1400,7 +760,6 @@ body.page-template .post-title { |
|
|
|
/* Location, website, and link */ |
|
|
|
.author-profile .author-meta { |
|
|
|
margin: 2rem 0; |
|
|
|
font-family: "Merriweather", serif; |
|
|
|
letter-spacing: 0.01rem; |
|
|
|
font-size: 1.7rem; |
|
|
|
} |
|
|
@ -1486,7 +845,7 @@ body.page-template .post-title { |
|
|
|
padding: 4px 10px 5px; |
|
|
|
text-transform: uppercase; |
|
|
|
font-size: 1.1rem; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
font-family: 'Lato', sans-serif; |
|
|
|
color: rgba(255,255,255,0.8); |
|
|
|
border: rgba(255,255,255,0.5) 1px solid; |
|
|
|
border-radius: 4px; |
|
|
@ -1578,7 +937,7 @@ body.page-template .post-title { |
|
|
|
width: 80%; |
|
|
|
max-width: 710px; |
|
|
|
margin: 4rem auto; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
font-family: 'Lato', sans-serif; |
|
|
|
font-size: 1.3rem; |
|
|
|
color: #9EABB3; |
|
|
|
text-align: center; |
|
|
@ -1707,48 +1066,11 @@ body.page-template .post-title { |
|
|
|
} |
|
|
|
|
|
|
|
.gh-subscribe-rss { |
|
|
|
font-family: 'Open Sans', sans-serif; |
|
|
|
font-family: 'Lato', sans-serif; |
|
|
|
font-size: 1.2rem; |
|
|
|
line-height: 1.4em; |
|
|
|
} |
|
|
|
|
|
|
|
/* ========================================================================== |
|
|
|
11. Footer - The bottom of every page |
|
|
|
========================================================================== */ |
|
|
|
|
|
|
|
.site-footer { |
|
|
|
position: relative; |
|
|
|
margin: 8rem 0 0 0; |
|
|
|
padding: 1rem 15px; |
|
|
|
font-family: "Open Sans", sans-serif; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.75em; |
|
|
|
color: #BBC7CC; |
|
|
|
} |
|
|
|
|
|
|
|
.site-footer a { |
|
|
|
color: #BBC7CC; |
|
|
|
text-decoration: none; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.site-footer a:hover { |
|
|
|
border-bottom: #bbc7cc 1px solid; |
|
|
|
} |
|
|
|
|
|
|
|
.poweredby { |
|
|
|
display: block; |
|
|
|
width: 45%; |
|
|
|
float: right; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.copyright { |
|
|
|
display: block; |
|
|
|
width: 45%; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* ========================================================================== |
|
|
|
12. Media Queries - Smaller than 900px |
|
|
|