styles.scss in alembic-jekyll-theme-2.0.2

- old
+ new

@@ -1,23 +1,22 @@
 ---
 title: false
 ---
 
-
 // Frameworks & Imports
 @charset "utf-8";
-@import "colors";
+@import "settings";
 @import "normalize";
 @import "sassline-base";
 @import "syntax";
 @import "flex";
 
 
 // Structural elements
 body {
-  background: $color__site--background;
-  color: $color__site--body;
+  background: $backgroundColour;
+  color: $bodyColour;
   height: 100%;
   display: flex;
   @include flex-direction(column);
   overflow-x: hidden;
 }
@@ -30,31 +29,30 @@
 
 
 // Header, feature and footer
 .header,
 .footer {
+  .nav {
+    text-align: right;
+  }
   .container {
-    padding: 1rem 0;
     @include flexbox;
-    @include flex-direction(column);
-    @include align-items(center);
-    text-align: center;
-  }
-  @include breakpoint(break-1) {
-    .container {
-      @include flex-direction(row);
-      @include justify-content(space-between);
-      text-align: inherit;
+    @include flex-direction(row);
+    @include justify-content(space-between);
+    padding: 1rem 0;
+    text-align: inherit;
+    @include breakpoint(break-1) {
+      @include align-items(center);
     }
   }
 }
 
 .feature {
   padding-bottom: .4rem;
   margin-bottom: 1.6rem;
   text-align: center;
-  background: $color__site--accent;
+  background: $featureBackgroundColour;
   background-size: cover;
   background-position: center;
   @include flexbox;
   .container {
     min-height: 35vh;
@@ -73,31 +71,38 @@
   }
 }
 
 .small {
   padding-top: .8rem;
-  color: $color__site--captions;
+  color: $captionColour;
   display: inline-block;
 }
 
 .footer {
-  background: lighten(invert($color__site--background), 15%);
+  background: $headingColour;
+  color: $captionColour;
   a {
-    color: invert($color__site--heading);
+    color: $captionColour;
     &:hover {
-      color: lighten(invert($color__site--body), 15%);
+      color: $backgroundColour;
     }
   }
+  .container {
+    @include flex-wrap(wrap);
+  }
+  .small {
+    padding-top: 0;
+  }
 }
 
 
 // Nav and copyright
 .nav {
   &--paginator {
     @include flexbox;
     @include justify-content(space-between);
-    color: $color__site--captions;
+    color: $captionColour;
     text-align: center;
   }
   &--social {
     text-align: left;
   }
@@ -105,57 +110,38 @@
 
 .pagination {
   min-width: 20%;
 }
 
-.copyright {
-  @include breakpoint(break-1) {
-    @include order(-1);
-  }
-}
 
-
 // Main content
 .main {
   @include flexbox;
   @include flex-direction(column);
+  @include flex(1, 0, auto);
+  @include justify-content(flex-start);
   margin-bottom: 1.6rem;
   @include breakpoint(break-1) {
+    @include justify-content(center);
     @include flex-direction(row);
   }
 }
 
-.main {
-  @include flex(1, 0, auto);
-}
-
 .header,
 .feature,
 .footer {
   @include flex(0, 0, auto);
 }
 
 .content {
   width: 100%;
   @include breakpoint(break-1) {
     width: 62%;
-    margin-right: 4%;
     &--full {
       width: 100%;
       margin-right: 0%;
-      .figure--full {
-        left: 50%;
-      }
     }
-    &--aside-left {
-      margin-right: 0;
-      margin-left: 4%;
-      @include order(2);
-      .figure--full {
-        left: 19.4%;
-      }
-    }
   }
 }
 
 .share {
   .button {
@@ -165,25 +151,31 @@
 
 .aside {
   max-width: 100%;
   @include breakpoint(break-1) {
     max-width: 34%;
+    margin-left: 4%;
     @include flex(1, 0, auto);
     opacity: 0.5;
     transition: opacity .1s;
+    .section {
+      position: sticky;
+      top: 0;
+    }
+    &--left {
+      margin-left: 0;
+      margin-right: 4%;
+      order: -1;
+    }
     &:hover {
       opacity: 1;
     }
   }
 }
 
 .section {
   margin: 0;
-  &--category-index {
-    position: sticky;
-    top: 0;
-  }
 }
 
 
 // Lists
 .list {
@@ -193,11 +185,16 @@
   }
   &--nav,
   &--categories {
     list-style: none;
   }
-  .item--post {
+  &--nav {
+    overflow: hidden;
+    transition: .2s;
+  }
+  .item--post,
+  .item--result {
     margin-left: 0;
   }
   &--categories {
     .item {
       margin-left: 0;
@@ -206,18 +203,22 @@
 }
 
 .item {
   &--nav {
     display: inline-block;
-    margin-left: 1rem;
+    width: 100%;
+    @include breakpoint(break-1) {
+      width: auto;
+      margin-left: 1rem;
+    }
     &:first-of-type {
       margin-left: 0;
     }
   }
   &--current {
     a {
-      color: $color__site--link--current;
+      opacity: 0.5;
     }
   }
 }
 
 
@@ -228,11 +229,11 @@
   line-height: 1;
   .icon {
     display: inline-block;
     transition: fill .1s;
     &:hover {
-      fill: darken($color__site--link, 10%);
+      fill: $hoverColour;
     }
   }
 }
 
 .icon {
@@ -252,24 +253,11 @@
   height: auto;
 }
 
 .figure {
   line-height: 0;
-  &--full {
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    margin-left: -50vw;
-    .caption {
-      padding-left: .8rem;
-      padding-right: .8rem;
-    }
-  }
   @include breakpoint(break-1) {
-    &--full {
-      left: 80.6%;
-    }
     &--left {
       float: left;
       padding-right: .8rem;
     }
     &--right {
@@ -316,11 +304,13 @@
 .button,
 input[type="text"],
 input[type="email"],
 input[type="search"],
 input[type="submit"],
-textarea {
+input[type="color"],
+textarea,
+select {
   padding: .6rem 1.2rem;
   margin-bottom: .6rem;
   transition: color .1s, background-color .1s, border .1s;
   line-height: inherit;
   border: none;
@@ -330,16 +320,31 @@
   .icon {
     margin: 0 0 .35rem;
   }
 }
 
+input[type="color"] {
+  padding: 0;
+  height: 2.4rem;
+  &::-webkit-color-swatch-wrapper {
+  	padding: 0;
+    &:after {
+      content: "Color";
+    }
+  }
+  &::-webkit-color-swatch {
+  	border: none;
+  }
+}
+
 input[type="submit"],
 button,
 .button {
   cursor: pointer;
   display: inline-block;
-  background: $color__site--accent;
+  color: $backgroundColour;
+  background: $accentColour;
   position: relative;
   transition: box-shadow .1s;
   will-change: box-shadow;
   box-shadow: inset 0 0 0 2rem transparent;
   &:hover {
@@ -349,36 +354,59 @@
   &:focus {
     box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.4);
   }
 }
 
+.button--nav {
+  @include breakpoint(break-1) {
+    display: none;
+  }
+  background: none;
+  color: $linkColour;
+  margin-bottom: 0;
+  min-height: 4rem;
+  min-width: 4rem;
+  &:hover,
+  &:focus {
+    box-shadow: none;
+    color: $hoverColour;
+  }
+}
+
 a,
 button,
 .button,
 input,
-textarea {
+textarea,
+select {
   &:focus,
   &:hover:focus {
-    outline: solid .12rem invert($color__site--accent);
+    outline: solid .12rem $focusColour;
   }
 }
 
 a:hover:focus {
   outline: none;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="search"],
-textarea {
+input[type="color"],
+textarea,
+select {
   width: 100%;
-  border: 1px solid $color__site--captions;
+  border: 1px solid $captionColour;
   &:hover {
-    border-color: darken($color__site--captions, 20%);
+    border-color: $bodyColour;
   }
 }
 
+select {
+  background: $codeBackgroundColour;
+}
+
 textarea {
     resize: vertical;
 }
 
 label {
@@ -396,41 +424,48 @@
 .required {
   color: red;
 }
 
 ::-webkit-input-placeholder {
-  color: darken($color__site--captions, 30%);
+  opacity: 0.5;
 }
 ::-moz-placeholder {
-  color: darken($color__site--captions, 30%);
+  opacity: 0.5;
 }
 :-ms-input-placeholder {
-  color: darken($color__site--captions, 30%);
+  opacity: 0.5;
 }
 :-moz-placeholder {
-  color: darken($color__site--captions, 30%);
+  opacity: 0.5;
 }
 
 ::selection {
-  background: $color__site--heading;
-  color: $color__site--background;
+  background: $headingColour;
+  color: $backgroundColour;
   text-shadow: none;
 }
 
+
 // Sassline overrides
 .typeset {
   .button,
   button {
     background-image: none;
     text-shadow: none;
-    color: lighten(invert($color__site--body), 15%);
+    color: $backgroundColour;
     &:hover,
     &:active,
     &:focus {
       background-image: none;
-      color: lighten(invert($color__site--body), 15%);
+      color: $backgroundColour;
     }
   }
   hr {
     width: 100%;
+  }
+  li {
+    > p {
+      padding: 0;
+      margin: 0;
+    }
   }
 }