Clean up SCSS

src/_mixins.scss

@@ -0,0 +1,65 @@
+@import "./variables";
+
+@mixin flexList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+}
+
+@mixin cardGeneric {
+    max-width: 300px;
+    width: 100%;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
+    transition: transform .25s, box-shadow .25s;
+    color: $textColor;
+    text-decoration: none;
+    margin: 20px;
+    background: $background;
+
+    &:hover, &:active, &:focus {
+        transform: scale(1.05);
+        box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);
+    }
+}
+
+@mixin buttonBasic {
+    display: block;
+    padding: 10px;
+    text-align: center;
+    background: $accentColor;
+    color: white;
+    text-decoration: none;
+}
+
+@mixin homeBanner {
+    background: #10141e;
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+
+    img {
+        height: 50px;
+    }
+
+    > div {
+        display: flex;
+        height: 100%;
+        padding: 20px !important;
+        line-height: 50px;
+        font-size: 1.7em;
+        color: white;
+
+        > span {
+            margin-left: auto;
+            margin-right: auto;
+
+            > i {
+                line-height: 50px !important;
+            }
+        }
+    }
+}

src/_variables.scss

@@ -3,3 +3,4 @@ $accentColor: #e5502b;
 $background: #0d0d0d;
 $textColor: white;
 
+$mainFont: 'Anonymous Pro', monospace;

src/layouts/default.scss

@@ -9,13 +9,12 @@ body, html, #___gatsby, #gatsby-focus-wrapper {
     padding: 0;
     width: 100%;
     min-height: 100vh;
-    font-family: 'Anonymous Pro', monospace;
+    font-family: $mainFont;
 }
 
 #gatsby-focus-wrapper {
     background: $background;
     color: $textColor;
-    transition: background .25s, color .25s;
     display: flex;
     flex-direction: column;
 }
@@ -26,12 +25,12 @@ footer {
     color: white;
     padding: 5px;
     text-align: center;
-}
 
-footer a {
+    a {
         color: white;
         text-decoration: underline dotted currentColor;
     }
+}
 
 #content {
     /*min-height: calc(100vh - 26px);*/
@@ -49,35 +48,35 @@ footer a {
     background: #000710;
     z-index: 999;
     transition: background .25s;
-}
-
-.homeBar.homeBarTransparent {
-    background: transparent;
-}
 
     .topBarInner {
         display: flex;
         width: 90%;
         max-width: 900px;
         margin: auto;
-}
         
-.topBar a {
+        a {
             display: block;
             padding: 10px 15px;
             color: white;
             /*text-decoration: underline dotted white;*/
             text-decoration: none;
             border-top: 2px solid transparent;
-}
 
-.topBar a:hover {
+            &:hover {
                 border-color: rgba(255, 255, 255, .25);
             }
 
-.topBar a.active {
+            &.active {
                 border-color: white;
             }
+        }
+    }
+}
+
+.homeBar.homeBarTransparent {
+    background: transparent;
+}
 
 .flexSpacer {
     flex-grow: 1;
@@ -91,19 +90,23 @@ section > div:not(.profile), section > article, .section > div:not(.profile), .s
     margin: 0 auto;
 }
 
-article p {
+article {
+    p {
         text-align: justify;
     }
 
-article h1, section > div > h1 {
+    a {
-    font-size: 2em;
-}
-
-article a {
         color: $accentColor;
         text-decoration: underline dotted currentColor;
         text-decoration-skip: none;
-}.languageModal {
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
+
+.languageModal {
     position: fixed;
     top: 0;
     left: 0;
@@ -113,14 +116,9 @@ article a {
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity .25s;
-    -moz-transition: opacity .25s;
-    -ms-transition: opacity .25s;
-    -o-transition: opacity .25s;
     transition: opacity .25s;
-}
 
-.languageModal:target {
+    &:target {
         opacity: 1;
         pointer-events: auto;
     }
@@ -135,12 +133,15 @@ article a {
         font-family: 'Anonymous Pro', monospace;
         padding: 20px;
         border-radius: 5px;
-}
+
-.languageModalInner a {
+        a {
             color: white;
             text-decoration-style: dotted;
         }
         
+    }
+
     .modalCloseLink {
         text-decoration: none;
     }
+}

src/pages/friends.module.scss

@@ -1,24 +1,13 @@
 @import "../variables";
+@import "../mixins";
 
 .friendsList {
-    display: flex;
+    @include flexList;
-    flex-wrap: wrap;
-    justify-content: center;
-}
 
     .friendProfile {
-    max-width: 300px;
+        @include cardGeneric;
-    width: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
-    transition: transform .25s;
         display: flex;
         flex-direction: column;
-    margin: 20px;
-    color: white;
-    text-decoration: none;
-}
 
         .friendImage {
             width: 100%;
@@ -29,6 +18,15 @@
             padding: 10px;
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+
+            .friendName {
+                font-size: 2em;
+                margin-top: -5px;
+            }
+            
+            .friendTitle {
+                margin-top: auto;
+            }
         }
 
         .friendBio {
@@ -39,35 +37,24 @@
             padding-bottom: 0;
         }
         
-.friendProfile .contactLinks {
+        .contactLinks {
             padding: 15px;
             margin: 0;
             display: flex;
             flex-direction: column;
-}
 
             .contactLink {
                 transition: text-decoration .5s;
                 text-decoration: underline dotted rgba(0, 0, 0, 0);
                 padding: 6px 0 6px 25px;
                 color: $textColor;
-}
 
-.contactLink > i {
+                > i {
                     color: $accentColor;
                     margin-left: -25px;
                     margin-right: 5px;
                 }
-
-.friendProfile:hover {
-    transform: scale(1.05);
             }
-
-.friendName {
-    font-size: 2em;
-    margin-top: -5px;
         }
-
+    }
-.friendTitle {
-    margin-top: auto;
 }

src/pages/index.module.scss

@@ -1,4 +1,5 @@
 @import "../variables";
+@import "../mixins";
 
 .heroSection {
     width: 100%;
@@ -125,59 +126,21 @@
 }
 
 .amazonAlexaSection, .donationSection, .hireMeSection {
-    min-height: 90px;
+    @include homeBanner;
-    background: #10141e;
-    cursor: pointer;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-}
-
-.amazonAlexaSection img {
-    height: 50px;
-}
-
-.amazonAlexaSection > div, .donationSection > div, .hireMeSection > div {
-    display: flex;
-    height: 100%;
-    padding: 20px !important;
-    line-height: 50px;
-    font-size: 1.7em;
-    color: white;
-}
-
-.amazonAlexaSection > div > span, .donationSection > div > span, .hireMeSection > div > span {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.amazonAlexaSection > div > i, .donationSection > div > i, .hireMeSection > div > i {
-    line-height: 50px !important;
 }
 
 .creditSection {
+    @include homeBanner;
     background: #060606;
-    cursor: pointer;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-}
     
-.creditSection > div {
+    > div {
-    display: flex;
-    height: 100%;
         padding: 15px !important;
         line-height: 15px;
         font-size: 1.2em;
         color: white;
-}
         
-.creditSection > div > span {
+        > span > i {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.creditSection > div > i {
             line-height: 15px !important;
         }
-
+    }
+}

src/pages/projects.module.scss

@@ -1,67 +1,48 @@
 @import "../variables";
+@import "../mixins";
 
 .projectList {
-    display: flex;
+    @include flexList;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
     margin: 15px 0;
 }
 
 .projectCard {
-    background: $background;
+    @include cardGeneric;
-    border-radius: 4px;
-    overflow: hidden;
-    margin: 15px;
-    color: var(--text-color);
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     width: calc(100% / 4);
-    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
-    max-width: 300px;
-    transition: transform .25s, box-shadow .25s;
-}
-
-.projectCard:hover {
-    transform: scale(1.05);
-    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);
-}
 
     @media(max-width: 800px) {
-    .projectCard {
         width: calc((100% / 2) - 30px);
     }
-}
 
     @media(max-width: 500px) {
-    .projectCard {
         width: 100%;
     }
-}
 
     .projectCardActivityIndicator {
         position: absolute;
         margin: 12px;
         padding: 2px 5px;
         border-radius: 3px;
-}
 
-.activityIndicatorGreen {
+        &.activityIndicatorGreen {
             background: #26de81;
         }
         
-.activityIndicatorYellow {
+        &.activityIndicatorYellow {
             background: #f7b731;
         }
         
-.activityIndicatorRed {
+        &.activityIndicatorRed {
             background: #fc5c65;
         }
         
-.activityIndicatorBlue {
+        &.activityIndicatorBlue {
             background: #45aaf2;
         }
+    }
 
     .projectCardImage {
         display: block;
@@ -85,12 +66,7 @@
     }
 
     .projectCardCTA a {
-    display: block;
+        @include buttonBasic;
-    padding: 10px;
-    text-align: center;
-    background: var(--accent-color);
-    color: white;
-    text-decoration: none;
     }
 
     .projectCardCTAContainer {
@@ -105,23 +81,9 @@
         .projectCardCTA:nth-child(2) {
             border-left: none;
         }
-
-
     }
 
     .projectCardCTAContainer > * {
         flex-grow: 1;
     }
-
-.projectCardCTA {
-    display: block;
-}
-
-.projectCardCTA a {
-    display: block;
-    padding: 10px;
-    text-align: center;
-    background: $accentColor;
-    color: white;
-    text-decoration: none;
 }

src/pages/social.module.scss

@@ -1,24 +1,13 @@
 @import "../variables";
+@import "../mixins";
 
 .socialList {
-    display: flex;
+    @include flexList;
-    flex-wrap: wrap;
-    justify-content: center;
-}
 
     .socialCard {
-    max-width: 300px;
+        @include cardGeneric;
-    width: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
-    transition: transform .25s;
         display: flex;
         flex-direction: column;
-    margin: 20px;
-    color: white;
-    text-decoration: none;
-}
 
         .socialImage {
             width: 100%;
@@ -29,7 +18,6 @@
             padding: 10px;
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-}
 
             .socialName {
                 font-size: 2em;
@@ -39,7 +27,6 @@
             .socialUsername {
                 margin-top: auto;
             }
-
+        }
-.socialCard:hover, .socialCard:focus {
+    }
-    transform: scale(1.05);
 }

src/templates/project.module.scss

@@ -1,6 +1,11 @@
 @import "../variables";
 
-.projectHeader .headerBackground {
+.projectHeader {
+    > div {
+        padding-bottom: 0 !important;
+    }
+
+    .headerBackground {
         position: absolute;
         left: 0;
         width: 100%;
@@ -9,42 +14,35 @@
         background-size: cover;
     }
 
-.projectHeader header {
+    header {
         position: absolute;
         left: 0;
         width: 100%;
         height: 200px;
         background: rgba(0, 0, 0, .5);
-}
         
-.projectHeader .headerInner {
+        .headerInner {
             max-width: $layoutWidth;
             width: 100%;
             margin: 0 auto;
             padding: 65px 20px 0;
-}
 
-.projectHeader .headerInner * {
+            * {
                 margin: 0;
                 color: white;
             }
             
-.headerPlaceholder {
+            h1 {
-    width: 100%;
+                font-size: 2em;
-    height: 225px;
+            }
         }
         
-.projectHeader .headerPlaceholder {
+    }
+
+    .headerPlaceholder {
         width: 100%;
         height: 200px;
     }
-
-.projectHeader h1 {
-    font-size: 2em;
-}
-
-.projectHeader > div {
-    padding-bottom: 0 !important;
 }
 
 .projectAbout {
@@ -52,13 +50,14 @@
     color: white;
 }
 
-.projectLinks .linkList {
+.projectLinks {
+    .linkList {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
     }
 
-.projectLinks a {
+    a {
         display: inline-block;
         border: thin solid rgb(200, 200, 200);
         border-radius: 5px;
@@ -67,8 +66,9 @@
         color: $textColor;
         text-decoration-skip: none;
         text-decoration: underline dotted currentColor;
-}
 
-.projectLinks a i.fab, .projectLinks a i.fas, .projectLinks a i.fa, .projectLinks a i.far, .projectLinks a i.fal {
+        i.fab, i.fas, i.fa, i.far, i.fal {
             display: inline;
         }
+    }
+}