Getting rid of Compass, now styling & compiling is done via Grunt

[ghost-theme-willow.git] / assets / scss / styles.scss

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
deleted file mode 100644 (file)
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