Refactor and modularize SCSS

_config.yml

@@ -44,7 +44,7 @@ plugins:
   - jekyll-sitemap
   - jekyll-redirect-from
 
-pinpost: ["A Freebie's Resource List (Mostly Related to Programming)", "An Absolute Beginners' Complete Web Development Resource List"]
+pinpost: ["A Freebie's Resource List (Mostly Related to Programming)"]
 
 google_analytics: UA-126718538-1
 

_sass/_custom.scss

@@ -7,22 +7,6 @@ a,
 a:hover,
 a:visited {
     color: $light-brown; // Specified settings for the headers in 'post.html'
-    &.heading-links {
-        color: $text-color;
-        &:hover {
-            text-decoration: none;
-            &::after {
-                color: $grey-color;
-                content: ' →';
-            }
-        }
-    }
-    &.post-link:visited {
-        color: $brown;
-    }
-    &.post-alt-link:visited {
-        color: $brown;
-    }
 }
 
 blockquote {
@@ -34,11 +18,7 @@ blockquote {
     word-spacing: 1px;
 }
 
-h1,
+h1, h2, h3, h4, h5, h6 {
-h2,
-h3 h4,
-h5,
-h6 {
     code {
         font-size: 1em;
     }
@@ -100,43 +80,6 @@ table:not(.rouge-table) {
     }
 }
 
-.relative-posts {
-    color: $grey-color-dark;
-    display: flex;
-    font-size: $small-font-size;
-    justify-content: space-between;
-    margin-top: 2em;
-
-    a {
-        font-size: $base-font-size * 1.2;
-    }
-
-    .previous-post {
-        text-align: left;
-        max-width: 45%;
-    }
-
-    .next-post {
-        text-align: right;
-        max-width: 45%;
-    }
-
-    @include media-query($on-laptop) {
-        flex-flow: column wrap;
-        align-content: center;
-        justify-content: center;
-        text-align: center;        
-
-        > * {
-            margin-top: 2em;
-        }
-
-        .previous-post, .next-post {
-            text-align: center;
-        }
-    }
-}
-
 // code syntax table
 figure.highlight {
     border: 1px solid $grey-color-light;
@@ -162,93 +105,6 @@ figure.highlight {
     font-size: 1.4em !important;
 }
 
-// alt title properties
-main .home {
-    > .home-post:not(:first-of-type) {
-        margin-top: 3em;
-    }
-
-    > .home-post > * {
-        margin: 0;
-    }
-}
-
-h2.post-alt-title {
-    font-family: "Georgia", $base-font-family;
-}
-
-// wrapper
-.wrapper {
-    main > & {
-        & > :first-child {
-            margin-top: 0;
-            padding-top: 0;
-        }
-
-        .post-content {
-            > h1:not(:first-of-type){
-                margin-top: $spacing-unit * 1.65;
-            }
-
-            h2:first-of-type {
-                margin-top: $spacing-unit * 1.5;
-            }
-
-            h2:not(:first-of-type) {
-                margin-top: $spacing-unit * 1.4;
-            }
-
-            h3:not(:first-of-type) {
-                margin-top: $spacing-unit * 1.15;
-            }
-
-            > p {
-                word-spacing: 1px;
-            }
-
-            p > img {
-                display: block;
-                margin: 0 auto;
-            }
-
-            ul.resources-link {
-                list-style: none; 
-                margin-left: 1.9em;
-
-                @include media-query($on-palm) {
-                    margin-left: 0;
-
-                    > li {
-                        margin-bottom: 0.75em;
-                    }
-                }
-            }
-        }
-    }
-}
-
-// notes.md
-.entry-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: .25em;
-    padding: .5em;
-    &:nth-child(odd) {
-        background: lighten($brown, 50%);
-    }
-    &:last-child {
-        margin-bottom: 1em;
-    }
-    .post-list-date {
-        display: block;
-    }
-    @include media-query($on-palm) {
-        flex-flow: column;
-        align-items: baseline;
-    }
-}
-
 // custom properties for several layout items
 #personal-logo {
     width: 29px;
@@ -261,229 +117,12 @@ h2.post-alt-title {
     text-decoration: underline;
 }
 
-p.caption {
-    color: $grey-color;
-    font-size: $small-font-size;
-    padding-bottom: 1.5em;
-    text-align: center;
-    width: 100%;
-}
-
 code.fileName {
     color: darken($code-keywords, 10%);
 }
 
-// List of topics properties found on posts type
-#list-container {
-    border: 3px $brown dashed;
-    border-left: 0px;
-    border-right: 0px;
-    color: $grey-color;
-    line-height: 1.75em;
-    margin: 2em 0;
-    padding: 2em;
-    width: inherit;
-    @include relative-font-size(0.95);
-    ul {
-        list-style: upper-roman;
-    }
-}
-
-// Header custom settings
-.site-header {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
-    border-top: 5px solid $dark-brown;
-    border-bottom: 1px solid $grey-color-light;
-    color: $super-platinum;
-    .site-title {
-        @include relative-font-size(1.625);
-        font-weight: 300;
-        line-height: $base-line-height * $base-font-size * 2.25;
-        letter-spacing: -1px;
-        margin-bottom: 0;
-        float: left;
-        &,
-        &:visited {
-            color: $super-platinum;
-        }
-    }
-    .site-nav {
-        float: right;
-        line-height: $base-line-height * $base-font-size * 2.25;
-        .nav-trigger {
-            display: none;
-        }
-        .menu-icon {
-            display: none;
-        }
-        .page-link {
-            color: $super-platinum;
-            line-height: $base-line-height; // Gaps between nav items, but not on the last one
-            &:not(:last-child) {
-                margin-right: 20px;
-            }
-        }
-        @include media-query($on-palm) {
-            .page-link {
-                color: $text-color;
-                margin: 0 .5em;
-                text-align: left;
-            }
-            .menu-icon {
-                display: block;
-            }
-        }
-    }
-}
-
-// Post Title
-.post-subtitle {
-    color: $grey-color;
-    font-size: $base-font-size * 1.7;
-    margin: .24em 0;
-}
-
-// Markdown Table of Content
-// Pinned posts style on the homepage
-#pinned-section {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
-    border: $brown 4px solid;
-    border-top: 0;
-    border-bottom: 0;
-    color: white;
-    margin-bottom: 2em;
-    padding: $base-font-size;
-    
-
-    ul.pinned-posts {
-        & * {color: white;}
-
-        list-style: none;
-        padding: 0;
-
-        @include media-query($on-palm) {
-            margin-left: 0;
-        }
-    }
-}
-
 .dt-updated, .reading-minutes {
     color: $grey-color;
     font-size: $small-font-size;
     margin-top: 0;
 }
-
-// Pagination custom settings
-.pagination {
-    align-content: center;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    margin: 2em;
-    .previous,
-    .next {
-        border-radius: 4px;
-        padding: 1em;
-        text-align: center;
-        width: 100px;
-        &.disabled {
-            color: $grey-color;
-        }
-    }
-    &>* {
-        padding: 1em;
-    }
-    @include media-query($on-palm) {
-        flex-flow: column wrap;
-    }
-}
-
-// Tags custom settings
-.list-tags {
-    color: $grey-color;
-}
-
-.home-tags {
-    font-size: $small-font-size;
-}
-
-.post-updatedOn {
-    color: $grey-color-dark;
-    font-size: $small-font-size;
-    margin-bottom: $base-font-size;
-    span.updatedPostDate {
-        font-weight: bolder;
-    }
-}
-
-.post-tags {
-    color: $grey-color-dark;
-    font-size: $small-font-size;
-    .link-tag {
-        color: $brown;
-    }
-}
-
-// Footer custom settings
-.site-footer {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
-    border-top: 1px solid $grey-color-light;
-    color: $platinum;
-    padding: $spacing-unit 0;
-    .footer-col-1 {
-        width: -webkit-calc(25% - (#{$spacing-unit} / 2));
-        width : calc(25% - (#{$spacing-unit} / 2));
-    }
-    .footer-col-2 {
-        width: -webkit-calc(30% - (#{$spacing-unit} / 2));
-        width : calc(30% - (#{$spacing-unit} / 2));
-    }
-    .footer-col-wrapper {
-        color: $super-platinum;
-        .u-email,
-        .username {
-            color: $super-platinum;
-            &:hover {
-                color: $super-platinum;
-            }
-        }
-        .svg-icon {
-            fill: $super-platinum;
-        }
-    }
-
-    .site-icon-credits {
-        font-size: $small-font-size;
-        margin-bottom: 1.5em;
-
-        p {
-            margin: 0;
-        }
-
-        a {
-            color: $footer-link;
-        }
-    }
-
-    .site-credits {
-        text-align: center;
-        > p {
-            margin: 0;
-        }
-
-        a {
-            color: $footer-link;
-        }
-
-        .copyright {
-            font-size: $small-font-size;
-        }
-    }
-    @include media-query($on-palm) {
-        .footer-col-1,
-        .footer-col-2,
-        .footer-col-3 {
-            width: 100%;
-        }
-    }
-}

_sass/custom_elems/_pinned_posts.scss

@@ -0,0 +1,21 @@
+#pinned-section {
+    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    border: $brown 4px solid;
+    border-top: 0;
+    border-bottom: 0;
+    color: white;
+    margin-bottom: 2em;
+    padding: $base-font-size;
+    
+
+    ul.pinned-posts {
+        & * {color: white;}
+
+        list-style: none;
+        padding: 0;
+
+        @include media-query($on-palm) {
+            margin-left: 0;
+        }
+    }
+}

_sass/custom_elems/index.scss

@@ -0,0 +1,3 @@
+@import
+    "pinned_posts"
+;

_sass/custom_layout/_footer.scss

@@ -0,0 +1,66 @@
+.site-footer {
+    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    border-top: 1px solid $grey-color-light;
+    color: $platinum;
+    padding: $spacing-unit 0;
+}
+
+.footer-col-1 {
+    width: -webkit-calc(25% - (#{$spacing-unit} / 2));
+    width : calc(25% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+    width: -webkit-calc(30% - (#{$spacing-unit} / 2));
+    width : calc(30% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-wrapper {
+    color: $super-platinum;
+    .u-email,
+    .username {
+        color: $super-platinum;
+        &:hover {
+            color: $super-platinum;
+        }
+    }
+    .svg-icon {
+        fill: $super-platinum;
+    }
+}
+
+.site-icon-credits {
+    font-size: $small-font-size;
+    margin-bottom: 1.5em;
+
+    p {
+        margin: 0;
+    }
+
+    a {
+        color: $footer-link;
+    }
+}
+
+.site-credits {
+    text-align: center;
+    > p {
+        margin: 0;
+    }
+
+    a {
+        color: $footer-link;
+    }
+
+    .copyright {
+        font-size: $small-font-size;
+    }
+}
+
+@include media-query($on-palm) {
+    .footer-col-1,
+    .footer-col-2,
+    .footer-col-3 {
+        width: 100%;
+    }
+}

_sass/custom_layout/_header.scss

@@ -0,0 +1,51 @@
+.site-header {
+    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    border-top: 5px solid $dark-brown;
+    border-bottom: 1px solid $grey-color-light;
+    color: $super-platinum;
+}
+
+.site-title {
+    @include relative-font-size(1.625);
+    font-weight: 300;
+    line-height: $base-line-height * $base-font-size * 2.25;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    float: left;
+    &,
+    &:visited {
+        color: $super-platinum;
+    }
+}
+
+.site-nav {
+    float: right;
+    line-height: $base-line-height * $base-font-size * 2.25;
+    
+    .nav-trigger {
+        display: none;
+    }
+
+    .menu-icon {
+        display: none;
+    }
+
+    .page-link {
+        color: $super-platinum;
+        line-height: $base-line-height; // Gaps between nav items, but not on the last one
+        &:not(:last-child) {
+            margin-right: 20px;
+        }
+    }
+
+    @include media-query($on-palm) {
+        .page-link {
+            color: $text-color;
+            margin: 0 .5em;
+            text-align: left;
+        }
+        .menu-icon {
+            display: block;
+        }
+    }
+}

_sass/custom_layout/index.scss

@@ -0,0 +1,4 @@
+@import
+    "footer",
+    "header"
+;

_sass/minima.scss

@@ -68,5 +68,13 @@ $code-flags:             #16e2e9;
   "minima/base",
   "minima/layout",
   "minima/syntax-highlighting",
+
+  "custom_layout/index",
+  "custom_elems/index",
+
+  "pages/index",
+  "pagination/index",
+  "post_content/index",
+  
   "custom"
 ;

_sass/minima/_layout.scss

@@ -170,8 +170,6 @@
   }
 }
 
-
-
 /**
  * Page content
  */
@@ -206,50 +204,3 @@
   display: block;
   @include relative-font-size(1.5);
 }
-
-
-
-/**
- * Posts
- */
-.post-header {
-  margin-bottom: $spacing-unit;
-}
-
-.post-title {
-  @include relative-font-size(2.625);
-  letter-spacing: -1px;
-  line-height: 1;
-
-  @include media-query($on-laptop) {
-    @include relative-font-size(2.25);
-  }
-}
-
-.post-content {
-  margin-bottom: $spacing-unit;
-
-  h2 {
-    @include relative-font-size(2);
-
-    @include media-query($on-laptop) {
-      @include relative-font-size(1.75);
-    }
-  }
-
-  h3 {
-    @include relative-font-size(1.625);
-
-    @include media-query($on-laptop) {
-      @include relative-font-size(1.375);
-    }
-  }
-
-  h4 {
-    @include relative-font-size(1.25);
-
-    @include media-query($on-laptop) {
-      @include relative-font-size(1.125);
-    }
-  }
-}

_sass/pages/index.scss

@@ -0,0 +1,3 @@
+@import
+    "notes"
+;

_sass/pages/notes.scss

@@ -0,0 +1,20 @@
+.entry-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: .25em;
+    padding: .5em;
+    &:nth-child(odd) {
+        background: lighten($brown, 50%);
+    }
+    &:last-child {
+        margin-bottom: 1em;
+    }
+    .post-list-date {
+        display: block;
+    }
+    @include media-query($on-palm) {
+        flex-flow: column;
+        align-items: baseline;
+    }
+}

_sass/pagination/_home_post_list.scss

@@ -0,0 +1,9 @@
+main .home {
+    > .home-post:not(:first-of-type) {
+        margin-top: 3em;
+    }
+
+    > .home-post > * {
+        margin: 0;
+    }
+}

_sass/pagination/_style.scss

@@ -0,0 +1,25 @@
+.pagination {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: 2em;
+    .previous,
+    .next {
+        border-radius: 4px;
+        padding: 1em;
+        text-align: center;
+        width: 100px;
+        &.disabled {
+            color: $grey-color;
+        }
+    }
+
+    & > * {
+        padding: 1em;
+    }
+    
+    @include media-query($on-palm) {
+        flex-flow: column wrap;
+    }
+}

_sass/pagination/index.scss

@@ -0,0 +1,4 @@
+@import
+    "style",
+    "home_post_list"
+;

_sass/post_content/_list_container.scss

@@ -0,0 +1,15 @@
+#list-container {
+    border: 3px $brown dashed;
+    border-left: 0px;
+    border-right: 0px;
+    color: $grey-color;
+    line-height: 1.75em;
+    margin: 2em 0;
+    padding: 2em;
+    width: inherit;
+    @include relative-font-size(0.95);
+    
+    ul {
+        list-style: upper-roman;
+    }
+}

_sass/post_content/_post.scss

@@ -0,0 +1,90 @@
+
+/**
+ * Posts
+ */
+ .post-header {
+    margin-bottom: $spacing-unit;
+  }
+
+.post-title {
+  @include relative-font-size(2.625);
+  letter-spacing: -1px;
+  line-height: 1;
+
+  @include media-query($on-laptop) {
+    @include relative-font-size(2.25);
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  h2 {
+    @include relative-font-size(2);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.75);
+    }
+  }
+
+  h3 {
+    @include relative-font-size(1.625);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.375);
+    }
+  }
+
+  h4 {
+    @include relative-font-size(1.25);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.125);
+    }
+  }
+}
+
+.caption {
+  color: $grey-color;
+  font-size: $small-font-size;
+  padding-bottom: 1.5em;
+  text-align: center;
+  width: 100%;
+}
+
+.relative-posts {
+  color: $grey-color-dark;
+  display: flex;
+  font-size: $small-font-size;
+  justify-content: space-between;
+  margin-top: 2em;
+
+  a {
+      font-size: $base-font-size * 1.2;
+  }
+
+  .previous-post {
+      text-align: left;
+      max-width: 45%;
+  }
+
+  .next-post {
+      text-align: right;
+      max-width: 45%;
+  }
+
+  @include media-query($on-laptop) {
+      flex-flow: column wrap;
+      align-content: center;
+      justify-content: center;
+      text-align: center;        
+
+      > * {
+          margin-top: 2em;
+      }
+
+      .previous-post, .next-post {
+          text-align: center;
+      }
+  }
+}

_sass/post_content/_post_links.scss

@@ -0,0 +1,20 @@
+.heading-links {
+    color: $text-color;
+    &:hover {
+        color: $text-color;
+        text-decoration: none;
+        &::after {
+            color: $grey-color;
+            content: ' →';
+        }
+    }
+
+    &:visited {
+        color: $text-color;
+    }
+}
+
+.post-link:visited {
+    color: $brown;
+}
+

_sass/post_content/_tags.scss

@@ -0,0 +1,24 @@
+.list-tags {
+    color: $grey-color;
+}
+
+.home-tags {
+    font-size: $small-font-size;
+}
+
+.post-updatedOn {
+    color: $grey-color-dark;
+    font-size: $small-font-size;
+    margin-bottom: $base-font-size;
+    span.updatedPostDate {
+        font-weight: bolder;
+    }
+}
+
+.post-tags {
+    color: $grey-color-dark;
+    font-size: $small-font-size;
+    .link-tag {
+        color: $brown;
+    }
+}

_sass/post_content/_wrapper.scss

@@ -0,0 +1,48 @@
+.wrapper {
+    main > & {
+        & > :first-child {
+            margin-top: 0;
+            padding-top: 0;
+        }
+
+        .post-content {
+            > h1:not(:first-of-type){
+                margin-top: $spacing-unit * 1.65;
+            }
+
+            h2:first-of-type {
+                margin-top: $spacing-unit * 1.5;
+            }
+
+            h2:not(:first-of-type) {
+                margin-top: $spacing-unit * 1.4;
+            }
+
+            h3:not(:first-of-type) {
+                margin-top: $spacing-unit * 1.15;
+            }
+
+            > p {
+                word-spacing: 1px;
+            }
+
+            p > img {
+                display: block;
+                margin: 0 auto;
+            }
+
+            ul.resources-link {
+                list-style: none; 
+                margin-left: 1.9em;
+
+                @include media-query($on-palm) {
+                    margin-left: 0;
+
+                    > li {
+                        margin-bottom: 0.75em;
+                    }
+                }
+            }
+        }
+    }
+}

_sass/post_content/index.scss

@@ -0,0 +1,7 @@
+@import
+    "list_container",
+    "post",
+    "post_links",
+    "tags",
+    "wrapper"
+;