From: Raivis Vitols Date: Thu, 7 Apr 2016 09:54:20 +0000 (+0300) Subject: Getting rid of Compass, now styling & compiling is done via Grunt X-Git-Tag: v2.0~3 X-Git-Url: https://git.njae.me.uk/?a=commitdiff_plain;h=9ff2d2683d3ca68d237f3e713c516d43c997f47f;p=ghost-theme-willow.git Getting rid of Compass, now styling & compiling is done via Grunt --- diff --git a/.gitignore b/.gitignore index 0d31019..c2658d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -.sass-cache/ +node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100755 index 0000000..2a89ad1 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,47 @@ +module.exports = function (grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + sass: { + dist: { + files: { + 'assets/css/styles.css': 'assets/src/sass/styles.scss', + 'assets/css/print.css': 'assets/src/sass/print.scss' + }, + + options: { + sourcemap: 'none', + outputStyle: 'compressed' + } + } + }, + + uglify: { + script: { + files: { + 'assets/js/script.js': [ + 'assets/src/js/vendor/*.js', + 'assets/src/js/*.js' + ] + } + } + }, + + watch: { + css: { + files: 'assets/src/sass/**/*.scss', + tasks: ['sass'] + }, + + js: { + files: 'assets/src/js/**/*.js', + tasks: ['uglify'] + } + } + }); + + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.registerTask('default', ['watch']); +}; \ No newline at end of file diff --git a/README.md b/README.md index aa77536..e1998a0 100644 --- a/README.md +++ b/README.md @@ -5,14 +5,15 @@ Personal, responsive, minimalist and open-source theme for Ghost blogging platfo ## Demo -This theme is currenly used on my [personal blog](https://raivis.com/). +This theme is currently used on my [personal blog](https://raivis.com/). ## Styling & Compiling -Requires [Compass](http://compass-style.org/) framework to be installed. +Requires Grunt task runner & NPM to be installed. - $ cd content/themes/[theme-folder]/assets/scss - $ compass watch ./ + $ cd content/themes/[theme-folder] + $ npm install + $ grunt ## Adding Disqus diff --git a/assets/js/script.js b/assets/js/script.js index 95e8c9f..c04d296 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,48 +1 @@ -/* - | ----------------------------------------------------------------------------- - | Functionality for off-canvas menu / sidebar visibility - | ----------------------------------------------------------------------------- -*/ - -/*jslint browser:true*/ - -(function (document) { - 'use strict'; - - document.addEventListener('DOMContentLoaded', function () { - var menu = document.getElementById('mobile-menu'), - wrapper = document.getElementById('wrapper'), - content = document.getElementById('content'), - menuVisibilityData = 'data-menu-visible'; - - /* - | --------------------------------------------------------------------- - | Click on content element results in menu getting closed - | --------------------------------------------------------------------- - */ - content.addEventListener('click', function (event) { - if (wrapper.getAttribute(menuVisibilityData)) { - wrapper.removeAttribute(menuVisibilityData); - - event.preventDefault(); - event.stopPropagation(); - } - }); - - /* - | --------------------------------------------------------------------- - | Click on menu element results in menu getting opened - | --------------------------------------------------------------------- - */ - menu.addEventListener('click', function (event) { - if (!wrapper.getAttribute(menuVisibilityData)) { - wrapper.setAttribute(menuVisibilityData, '1'); - } else { - wrapper.removeAttribute(menuVisibilityData); - } - - event.preventDefault(); - event.stopPropagation(); - }); - }); -}(document)); \ No newline at end of file +!function(a){"use strict";a.addEventListener("DOMContentLoaded",function(){var b=a.getElementById("mobile-menu"),c=a.getElementById("wrapper"),d=a.getElementById("content"),e="data-menu-visible";d.addEventListener("click",function(a){c.getAttribute(e)&&(c.removeAttribute(e),a.preventDefault(),a.stopPropagation())}),b.addEventListener("click",function(a){c.getAttribute(e)?c.removeAttribute(e):c.setAttribute(e,"1"),a.preventDefault(),a.stopPropagation()})})}(document); \ No newline at end of file diff --git a/assets/scss/config.rb b/assets/scss/config.rb deleted file mode 100644 index 20be464..0000000 --- a/assets/scss/config.rb +++ /dev/null @@ -1,5 +0,0 @@ -sass_dir = "./" -css_dir = "../css" -images_dir = "../img" -environment = :production -output_style = :compressed \ No newline at end of file diff --git a/assets/scss/helpers/_classes.scss b/assets/scss/helpers/_classes.scss deleted file mode 100644 index 0e0090e..0000000 --- a/assets/scss/helpers/_classes.scss +++ /dev/null @@ -1,89 +0,0 @@ -/* - | ----------------------------------------------------------------------------- - | Helper classes - | ----------------------------------------------------------------------------- -*/ -.clear:after { - content: ""; - clear: both; - display: table; -} - -/* - | ----------------------------------------------------------------------------- - | Markdown content style - | ----------------------------------------------------------------------------- -*/ -.markdown { - line-height: 2em; - - h1, h2, h3, p, ul, - blockquote, pre, .gist { - margin-bottom: 30px; - - &:last-child { - margin-bottom: 0; - } - } - - h1 { - font-size: 1.4em; - } - - h2 { - font-size: 1.2em; - } - - h3 { - font-size: 1em; - } - - ul { - padding-left: 3em; - } - - a { - text-decoration: underline; - - &:hover { - text-decoration: none; - - img { - opacity: 0.8; - } - } - } - - img { - width: 100%; - @include transition(); - } - - blockquote { - padding-left: 30px; - font-style: italic; - border-left: 4px solid $c-grayNormal; - } - - hr { - border: 0; - height: 1px; - margin: 30px 0; - background: $c-grayNormal; - } - - pre { - padding: 1em; - font-size: 0.9em; - line-height: 1.5em; - background: $c-grayNormal; - } - - code { - background: $c-grayNormal; - } - - .gist .gist-file { - margin-bottom: 0; - } -} \ No newline at end of file diff --git a/assets/scss/helpers/_mixins.scss b/assets/scss/helpers/_mixins.scss deleted file mode 100644 index 6730448..0000000 --- a/assets/scss/helpers/_mixins.scss +++ /dev/null @@ -1,80 +0,0 @@ -/* - | ----------------------------------------------------------------------------- - | Breakpoints - | ----------------------------------------------------------------------------- -*/ -@mixin breakpoint($breakpoint) { - @if $breakpoint == "mobile" { - @media (max-width: 640px) { - @content; - } - } - - @else if $breakpoint == "desktop" { - @media (min-width: 641px) { - @content; - } - } -} - -/* - | ----------------------------------------------------------------------------- - | Useful mixins - | ----------------------------------------------------------------------------- -*/ -@mixin border-radius($value: 3px) { - -webkit-border-radius: $value; - -moz-border-radius : $value; - -ms-border-radius : $value; - -o-border-radius : $value; - border-radius : $value; -} - -@mixin transition($transition : all 150ms ease-in-out) { - -webkit-transition: $transition; - -moz-transition : $transition; - -ms-transition : $transition; - -o-transition : $transition; - transition : $transition; -} - -@mixin translateX($value) { - -webkit-transform: translateX($value); - -moz-transform: translateX($value); - -ms-transform: translateX($value); - -o-transform: translateX($value); - transform: translateX($value); -} - -/* - | ----------------------------------------------------------------------------- - | Columns for posts - | ----------------------------------------------------------------------------- -*/ -@mixin post2Col() { - width: 48%; - float: left; - margin-right: 4%; - - &:nth-child(2n) { - margin-right: 0; - } - - &:nth-child(2n + 1) { - clear: left; - } -} - -@mixin post3Col() { - width: 31.33333%; - float: left; - margin-right: 3%; - - &:nth-child(3n) { - margin-right: 0; - } - - &:nth-child(3n + 1) { - clear: left; - } -} diff --git a/assets/scss/print.scss b/assets/scss/print.scss deleted file mode 100644 index bf89f05..0000000 --- a/assets/scss/print.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* - | ----------------------------------------------------------------------------- - | Print styles - | ----------------------------------------------------------------------------- -*/ -.content { - margin-left: 0 !important; -} - -.sidebar, .mobile-header, .post-image { - display: none !important; -} \ No newline at end of file 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 diff --git a/assets/scss/vendor/_normalize.scss b/assets/scss/vendor/_normalize.scss deleted file mode 100644 index 96f8dd0..0000000 --- a/assets/scss/vendor/_normalize.scss +++ /dev/null @@ -1 +0,0 @@ -html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} \ No newline at end of file diff --git a/assets/src/js/script.js b/assets/src/js/script.js new file mode 100644 index 0000000..95e8c9f --- /dev/null +++ b/assets/src/js/script.js @@ -0,0 +1,48 @@ +/* + | ----------------------------------------------------------------------------- + | Functionality for off-canvas menu / sidebar visibility + | ----------------------------------------------------------------------------- +*/ + +/*jslint browser:true*/ + +(function (document) { + 'use strict'; + + document.addEventListener('DOMContentLoaded', function () { + var menu = document.getElementById('mobile-menu'), + wrapper = document.getElementById('wrapper'), + content = document.getElementById('content'), + menuVisibilityData = 'data-menu-visible'; + + /* + | --------------------------------------------------------------------- + | Click on content element results in menu getting closed + | --------------------------------------------------------------------- + */ + content.addEventListener('click', function (event) { + if (wrapper.getAttribute(menuVisibilityData)) { + wrapper.removeAttribute(menuVisibilityData); + + event.preventDefault(); + event.stopPropagation(); + } + }); + + /* + | --------------------------------------------------------------------- + | Click on menu element results in menu getting opened + | --------------------------------------------------------------------- + */ + menu.addEventListener('click', function (event) { + if (!wrapper.getAttribute(menuVisibilityData)) { + wrapper.setAttribute(menuVisibilityData, '1'); + } else { + wrapper.removeAttribute(menuVisibilityData); + } + + event.preventDefault(); + event.stopPropagation(); + }); + }); +}(document)); \ No newline at end of file diff --git a/assets/src/sass/helpers/_classes.scss b/assets/src/sass/helpers/_classes.scss new file mode 100644 index 0000000..0e0090e --- /dev/null +++ b/assets/src/sass/helpers/_classes.scss @@ -0,0 +1,89 @@ +/* + | ----------------------------------------------------------------------------- + | Helper classes + | ----------------------------------------------------------------------------- +*/ +.clear:after { + content: ""; + clear: both; + display: table; +} + +/* + | ----------------------------------------------------------------------------- + | Markdown content style + | ----------------------------------------------------------------------------- +*/ +.markdown { + line-height: 2em; + + h1, h2, h3, p, ul, + blockquote, pre, .gist { + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + } + } + + h1 { + font-size: 1.4em; + } + + h2 { + font-size: 1.2em; + } + + h3 { + font-size: 1em; + } + + ul { + padding-left: 3em; + } + + a { + text-decoration: underline; + + &:hover { + text-decoration: none; + + img { + opacity: 0.8; + } + } + } + + img { + width: 100%; + @include transition(); + } + + blockquote { + padding-left: 30px; + font-style: italic; + border-left: 4px solid $c-grayNormal; + } + + hr { + border: 0; + height: 1px; + margin: 30px 0; + background: $c-grayNormal; + } + + pre { + padding: 1em; + font-size: 0.9em; + line-height: 1.5em; + background: $c-grayNormal; + } + + code { + background: $c-grayNormal; + } + + .gist .gist-file { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/assets/src/sass/helpers/_mixins.scss b/assets/src/sass/helpers/_mixins.scss new file mode 100644 index 0000000..6730448 --- /dev/null +++ b/assets/src/sass/helpers/_mixins.scss @@ -0,0 +1,80 @@ +/* + | ----------------------------------------------------------------------------- + | Breakpoints + | ----------------------------------------------------------------------------- +*/ +@mixin breakpoint($breakpoint) { + @if $breakpoint == "mobile" { + @media (max-width: 640px) { + @content; + } + } + + @else if $breakpoint == "desktop" { + @media (min-width: 641px) { + @content; + } + } +} + +/* + | ----------------------------------------------------------------------------- + | Useful mixins + | ----------------------------------------------------------------------------- +*/ +@mixin border-radius($value: 3px) { + -webkit-border-radius: $value; + -moz-border-radius : $value; + -ms-border-radius : $value; + -o-border-radius : $value; + border-radius : $value; +} + +@mixin transition($transition : all 150ms ease-in-out) { + -webkit-transition: $transition; + -moz-transition : $transition; + -ms-transition : $transition; + -o-transition : $transition; + transition : $transition; +} + +@mixin translateX($value) { + -webkit-transform: translateX($value); + -moz-transform: translateX($value); + -ms-transform: translateX($value); + -o-transform: translateX($value); + transform: translateX($value); +} + +/* + | ----------------------------------------------------------------------------- + | Columns for posts + | ----------------------------------------------------------------------------- +*/ +@mixin post2Col() { + width: 48%; + float: left; + margin-right: 4%; + + &:nth-child(2n) { + margin-right: 0; + } + + &:nth-child(2n + 1) { + clear: left; + } +} + +@mixin post3Col() { + width: 31.33333%; + float: left; + margin-right: 3%; + + &:nth-child(3n) { + margin-right: 0; + } + + &:nth-child(3n + 1) { + clear: left; + } +} diff --git a/assets/src/sass/print.scss b/assets/src/sass/print.scss new file mode 100644 index 0000000..bf89f05 --- /dev/null +++ b/assets/src/sass/print.scss @@ -0,0 +1,12 @@ +/* + | ----------------------------------------------------------------------------- + | Print styles + | ----------------------------------------------------------------------------- +*/ +.content { + margin-left: 0 !important; +} + +.sidebar, .mobile-header, .post-image { + display: none !important; +} \ No newline at end of file diff --git a/assets/src/sass/styles.scss b/assets/src/sass/styles.scss new file mode 100644 index 0000000..f784ca9 --- /dev/null +++ b/assets/src/sass/styles.scss @@ -0,0 +1,391 @@ +/* + | ----------------------------------------------------------------------------- + | 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 diff --git a/assets/src/sass/vendor/_normalize.scss b/assets/src/sass/vendor/_normalize.scss new file mode 100644 index 0000000..96f8dd0 --- /dev/null +++ b/assets/src/sass/vendor/_normalize.scss @@ -0,0 +1 @@ +html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} \ No newline at end of file diff --git a/package.json b/package.json index f1a3e91..4abc0c8 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,14 @@ { - "name": "Willow", - "version": "0.1.0", - "author": { - "name": "Raivis Vitols", - "url": "http://raivis.com" - } -} + "name": "Willow", + "version": "0.1.0", + "author": { + "name": "Raivis Vitols", + "url": "http://raivis.com" + }, + "devDependencies": { + "grunt": "~1.0.1", + "grunt-sass": "~1.1.0", + "grunt-contrib-watch": "~1.0.0", + "grunt-contrib-uglify": "~1.0.1" + } +} \ No newline at end of file