Converted parts of the default theme to SCSS to allow for faster editing
This commit is contained in:
@ -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
|
||||
|
||||
242
assets/scss/main.scss
Normal file
242
assets/scss/main.scss
Normal file
@ -0,0 +1,242 @@
|
||||
$header-color: #2e2e2e;
|
||||
$text: #3a4145;
|
||||
$link-text: #4a4a4a;
|
||||
$highlighted-link-text: #111;
|
||||
$bg: #3a4145;
|
||||
$arrow-bg: rgba(255, 255, 255, .7);
|
||||
$white: #fff;
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 1.8rem;
|
||||
height: 100%;
|
||||
letter-spacing: .01rem;
|
||||
line-height: 1.75em;
|
||||
max-height: 100%;
|
||||
|
||||
.post-title {
|
||||
&:not(.post-template) {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-template {
|
||||
.post-title {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $header-color;
|
||||
font-family: 'Oxygen', sans-serif;
|
||||
line-height: 2em;
|
||||
margin: 0 0 .4em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-text;
|
||||
transition: color .3s ease;
|
||||
|
||||
&:hover {
|
||||
color: $highlighted-link-text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Big cover on the frontpage
|
||||
.main-header {
|
||||
background: $bg no-repeat center center;
|
||||
background-size: cover;
|
||||
|
||||
display: table;
|
||||
height: 100vh;
|
||||
margin-bottom: 5rem;
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.inner {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
// Bouncing arrow
|
||||
.scroll-down {
|
||||
animation: bounce 4s 2s infinite;
|
||||
bottom: 45px;
|
||||
color: $arrow-bg;
|
||||
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
height: 34px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transform: rotate(-90deg);
|
||||
width: 34px;
|
||||
z-index: 100;
|
||||
|
||||
// Stop the bouncing while hovered
|
||||
&:hover {
|
||||
animation: none;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
$post-bg: $white;
|
||||
$post-border: #ebf2f6;
|
||||
$post-after-border: #e7eef2;
|
||||
$post-meta: #9eabb3;
|
||||
$post-meta-link: #9eabb3;
|
||||
|
||||
// This class is applied to all posts
|
||||
.post {
|
||||
border-bottom: $post-border 1px solid;
|
||||
margin: 4rem auto;
|
||||
max-width: 710px;
|
||||
padding-bottom: 4rem;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
p {
|
||||
font-size: .9em;
|
||||
line-height: 1.7em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.read-more {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: $post-meta;
|
||||
display: block;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.2rem;
|
||||
margin: 1.75rem 0;
|
||||
word-spacing: .2rem;
|
||||
|
||||
a {
|
||||
color: $post-meta-link;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$post-date-border: #d5dbde;
|
||||
|
||||
.post-date {
|
||||
border-left: $post-date-border 1px solid;
|
||||
display: inline-block;
|
||||
font-size: 1.3rem;
|
||||
margin-left: 8px;
|
||||
padding-left: 12px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.author-thumb {
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
height: 24px;
|
||||
margin-right: 9px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
min-height: 77px;
|
||||
padding: .3rem 40px 0 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-bio {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5rem;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
.publish-meta {
|
||||
padding: 4.3rem 0 4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.publish-heading {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
@ -6,12 +6,6 @@
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
{{#author}}
|
||||
<header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="author-profile inner">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "@christiaangoossens/chrg.nl",
|
||||
"description": "The theme for chrg.nl",
|
||||
"dependencies": {
|
||||
"waypoints": "^4.0.1"
|
||||
"waypoints": "^4.0.1",
|
||||
"animate.css": "^3.5.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
|
||||
{{!-- Styles'n'Scripts --}}
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato|Oxygen" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "assets/components/animate.css/animate.min.css"}}" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
|
||||
|
||||
@ -36,7 +38,7 @@
|
||||
{{{body}}}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||
|
||||
|
||||
@ -3,19 +3,13 @@
|
||||
|
||||
{{!-- The big featured header --}}
|
||||
<header class="main-header">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
<div class="vertical">
|
||||
<div class="main-header-content inner">
|
||||
<h1 class="page-title">{{@blog.title}}</h1>
|
||||
<h2 class="page-description">{{@blog.description}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
|
||||
<a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
|
||||
</header>
|
||||
|
||||
{{!-- The main content area on the homepage --}}
|
||||
|
||||
6
page.hbs
6
page.hbs
@ -7,12 +7,6 @@
|
||||
{{#post}}
|
||||
|
||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="content" role="main">
|
||||
|
||||
@ -1,17 +1 @@
|
||||
<div class="nav">
|
||||
<h3 class="nav-title">Menu</h3>
|
||||
<a href="#" class="nav-close">
|
||||
<span class="hidden">Close</span>
|
||||
</a>
|
||||
<ul>
|
||||
{{#foreach navigation}}
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{#if @labs.subscribers}}
|
||||
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
|
||||
{{else}}
|
||||
<a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<span class="nav-cover"></span>
|
||||
|
||||
|
||||
6
post.hbs
6
post.hbs
@ -7,12 +7,6 @@
|
||||
{{#post}}
|
||||
|
||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="content" role="main">
|
||||
|
||||
Reference in New Issue
Block a user