X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fscss%2Fstyles.scss;fp=assets%2Fscss%2Fstyles.scss;h=0000000000000000000000000000000000000000;hb=9ff2d2683d3ca68d237f3e713c516d43c997f47f;hp=f784ca99e87ee43b6a593fd6d93c049f54d59eb7;hpb=fba1d7cc64b98e494c87d119fc54b99cb7ad7ee1;p=ghost-theme-willow.git diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss deleted file mode 100644 index f784ca9..0000000 --- a/assets/scss/styles.scss +++ /dev/null @@ -1,391 +0,0 @@ -/* - | ----------------------------------------------------------------------------- - | Variables - | ----------------------------------------------------------------------------- -*/ -$sidebarWidth : 290px; -$maxPageWidth : 1000px; - -$c-white : #ffffff; -$c-baseNormal : #555555; -$c-grayNormal : #f7f7f7; - -$c-grayDark : darken($c-grayNormal, 5); -$c-baseLight : lighten($c-baseNormal, 20); - -/* - | ----------------------------------------------------------------------------- - | Imports - | ----------------------------------------------------------------------------- -*/ -@import "vendor/normalize"; -@import "helpers/mixins"; -@import "helpers/classes"; - -/* - | ----------------------------------------------------------------------------- - | Resets and html + body styles - | ----------------------------------------------------------------------------- -*/ -* { - box-sizing: border-box; -} - -h1, h2, h3, p, ul, blockquote, pre { - margin: 0; - padding: 0; -} - -html, body { - height: 100%; -} - -html, body { - min-width: 320px; - background: $c-grayNormal; - font-size: 16px; - line-height: 1.2em; - color: $c-baseNormal; - font-family: 'Merriweather', serif; -} - -/* - | ----------------------------------------------------------------------------- - | Anchors - | ----------------------------------------------------------------------------- -*/ -a { - outline: none; - color: $c-baseNormal; - text-decoration: none; - @include transition(); - - &:hover { - color: $c-baseLight; - } -} - -/* - | ----------------------------------------------------------------------------- - | Layout - | ----------------------------------------------------------------------------- -*/ -.wrapper { - width: 100%; - height: 100%; - overflow-x: hidden; -} - -.viewport { - width: 100%; - @include translateX(0); - - @include breakpoint(mobile) { - @include transition(300ms); - } -} - -@include breakpoint(mobile) { - .wrapper[data-menu-visible="1"] .viewport { - @include translateX($sidebarWidth); - } -} - -.sidebar { - width: $sidebarWidth; - position: absolute; - height: 100%; - z-index: 1; - top : 0; - - @include breakpoint(desktop) { - left: 0; - } - - @include breakpoint(mobile) { - left: -$sidebarWidth; - } -} - -.content { - min-height: 100vh; - max-width: $maxPageWidth; - - @include breakpoint(desktop) { - margin-left: $sidebarWidth; - } -} - -/* - | ----------------------------------------------------------------------------- - | Sidebar - | ----------------------------------------------------------------------------- -*/ -.sidebar { - text-align: center; - - .sidebar-header { - background-position: 50% 50%; - background-size: cover; - margin-bottom: 70px; - position: relative; - height: 100px; - - a, img { - width: 80px; - height: 80px; - } - - a { - left: 50%; - bottom: -40px; - position: absolute; - margin-left: -40px; - } - - img { - display: block; - border: 2px solid $c-white; - @include border-radius(40px); - } - } - - h1, h2, .sidebar-menu, .sidebar-links { - margin: 0 auto 20px; - max-width: 265px; - } - - h1 { - font-size: 1.2em; - } - - h2 { - font-size: 0.8em; - color: $c-baseLight; - font-weight: normal; - } - - .sidebar-links { - font-size: 0.8em; - padding-bottom: 20px; - border-bottom: 1px solid $c-grayDark; - - a { - padding: 0 5px; - } - } - - .sidebar-menu { - a { - display: block; - padding: 5px 0; - font-size: 0.9em; - font-weight: bold; - } - } -} - -/* - | ----------------------------------------------------------------------------- - | Mobile header - | ----------------------------------------------------------------------------- -*/ -.mobile-header { - margin-bottom: 20px; - - .mobile-menu, - .mobile-logo { - height: 40px; - cursor: pointer; - display: inline-block; - } - - .mobile-menu { - font-weight: bold; - line-height: 40px; - } - - .mobile-logo { - width: 40px; - float: right; - - img { - max-width: 100%; - @include border-radius(20px); - } - } - - @include breakpoint(desktop) { - display: none; - } -} - -/* - | ----------------------------------------------------------------------------- - | 404 page - | ----------------------------------------------------------------------------- -*/ -.error-page { - text-align: center; - color: $c-baseLight; - line-height: 2em; -} - -/* - | ----------------------------------------------------------------------------- - | Content - | ----------------------------------------------------------------------------- -*/ -.content { - background: $c-white; - border-left: 1px solid $c-grayDark; - - @include breakpoint(mobile) { - padding: 20px; - } - - @include breakpoint(desktop) { - padding: 30px; - border-right: 1px solid $c-grayDark; - } - - /* - | --------------------------------------------------------------------------- - | Posts list - | --------------------------------------------------------------------------- - */ - .post-listed { - margin-bottom: 35px; - padding-bottom: 20px; - border-bottom: 1px solid $c-grayDark; - - h2 { - font-size: 1.1em; - line-height: 1.4em; - margin-bottom: 10px; - } - - @media (min-width: 1200px) { - @include post3Col(); - } - - @media (max-width: 640px) and (min-width: 600px) { - @include post2Col(); - } - - @media (max-width: 1199px) and (min-width: 880px) { - @include post2Col(); - } - } - - /* - | --------------------------------------------------------------------------- - | Single post - | --------------------------------------------------------------------------- - */ - .post-single { - .post-header, .post-footer { - margin: 50px 0 40px; - padding: 40px 0; - text-align: center; - border-top: 1px solid $c-grayNormal; - border-bottom: 1px solid $c-grayNormal; - - h1 { - font-size: 1.4em; - line-height: normal; - margin-bottom: 20px; - } - } - - .post-header { - margin-top: 0; - } - } - - /* - | --------------------------------------------------------------------------- - | Main post image - | --------------------------------------------------------------------------- - */ - .post-image { - display: block; - margin-bottom: 15px; - - &:not(div):hover { - opacity: 0.8; - } - - img { - width: 100%; - display: block; - } - } - - /* - | --------------------------------------------------------------------------- - | Post content - markdown - | --------------------------------------------------------------------------- - */ - .post-content { - @extend .markdown; - } - - /* - | --------------------------------------------------------------------------- - | Post meta block - tags, share links, etc. - | --------------------------------------------------------------------------- - */ - .post-meta { - font-size: 0.8em; - font-style: italic; - color: $c-baseLight; - - .tags { - a { - text-transform: lowercase; - } - } - - .share { - a { - font-weight: bold; - padding: 0 5px 0 0; - } - - .share-twitter { - color: #4099FF; - } - - .share-facebook { - color: #3B5998; - } - - .share-google-plus { - color: #d34836; - } - - .share-twitter, - .share-facebook, - .share-google-plus { - &:hover { - color: $c-baseLight; - } - } - } - } - - /* - | --------------------------------------------------------------------------- - | Posts pagination - | --------------------------------------------------------------------------- - */ - .pagination { - clear: both; - @extend .clear; - - .older-posts { - float: right; - } - } -} \ No newline at end of file