-.sass-cache/
+node_modules/
--- /dev/null
+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
## 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
-/*
- | -----------------------------------------------------------------------------
- | 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
+++ /dev/null
-sass_dir = "./"
-css_dir = "../css"
-images_dir = "../img"
-environment = :production
-output_style = :compressed
\ No newline at end of file
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | 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
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | 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;
- }
-}
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | Print styles
- | -----------------------------------------------------------------------------
-*/
-.content {
- margin-left: 0 !important;
-}
-
-.sidebar, .mobile-header, .post-image {
- display: none !important;
-}
\ No newline at end of file
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | 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
+++ /dev/null
-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
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | 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
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | 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
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | 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;
+ }
+}
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | Print styles
+ | -----------------------------------------------------------------------------
+*/
+.content {
+ margin-left: 0 !important;
+}
+
+.sidebar, .mobile-header, .post-image {
+ display: none !important;
+}
\ No newline at end of file
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | 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
--- /dev/null
+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
{
- "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
projects / ghost-theme-willow.git / commitdiff