From 5f6368e3e0437c51a77c760c15e4865acbb18f8d Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Wed, 23 Dec 2020 15:19:53 +0100
Subject: [PATCH] Clean up SCSS

---
 src/_mixins.scss                  |  65 +++++++++++++
 src/_variables.scss               |   1 +
 src/layouts/default.scss          | 129 ++++++++++++-------------
 src/pages/friends.module.scss     | 113 ++++++++++------------
 src/pages/index.module.scss       |  67 +++----------
 src/pages/projects.module.scss    | 154 +++++++++++-------------------
 src/pages/social.module.scss      |  61 +++++-------
 src/templates/project.module.scss | 116 +++++++++++-----------
 8 files changed, 336 insertions(+), 370 deletions(-)
 create mode 100644 src/_mixins.scss

diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..e50689a
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/_variables.scss b/src/_variables.scss
index 890b01a..051ee50 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -3,3 +3,4 @@ $accentColor: #e5502b;
 $background: #0d0d0d;
 $textColor: white;
 
+$mainFont: 'Anonymous Pro', monospace;
\ No newline at end of file
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index 3c14f8d..7371d9a 100644
--- a/src/layouts/default.scss
+++ b/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,11 +25,11 @@ footer {
     color: white;
     padding: 5px;
     text-align: center;
-}
 
-footer a {
-    color: white;
-    text-decoration: underline dotted currentColor;
+    a {
+        color: white;
+        text-decoration: underline dotted currentColor;
+    }
 }
 
 #content {
@@ -49,36 +48,36 @@ footer a {
     background: #000710;
     z-index: 999;
     transition: background .25s;
+
+    .topBarInner {
+        display: flex;
+        width: 90%;
+        max-width: 900px;
+        margin: auto;
+        
+        a {
+            display: block;
+            padding: 10px 15px;
+            color: white;
+            /*text-decoration: underline dotted white;*/
+            text-decoration: none;
+            border-top: 2px solid transparent;
+
+            &:hover {
+                border-color: rgba(255, 255, 255, .25);
+            }
+
+            &.active {
+                border-color: white;
+            }
+        }
+    }
 }
 
 .homeBar.homeBarTransparent {
     background: transparent;
 }
 
-.topBarInner {
-    display: flex;
-    width: 90%;
-    max-width: 900px;
-    margin: auto;
-}
-
-.topBar a {
-    display: block;
-    padding: 10px 15px;
-    color: white;
-    /*text-decoration: underline dotted white;*/
-    text-decoration: none;
-    border-top: 2px solid transparent;
-}
-
-.topBar a:hover {
-    border-color: rgba(255, 255, 255, .25);
-}
-
-.topBar a.active {
-    border-color: white;
-}
-
 .flexSpacer {
     flex-grow: 1;
     text-align: center;
@@ -91,19 +90,23 @@ section > div:not(.profile), section > article, .section > div:not(.profile), .s
     margin: 0 auto;
 }
 
-article p {
-    text-align: justify;
+article {
+    p {
+        text-align: justify;
+    }
+
+    a {
+        color: $accentColor;
+        text-decoration: underline dotted currentColor;
+        text-decoration-skip: none;
+    }
 }
 
-article h1, section > div > h1 {
+h1 {
     font-size: 2em;
 }
 
-article a {
-    color: $accentColor;
-    text-decoration: underline dotted currentColor;
-    text-decoration-skip: none;
-}.languageModal {
+.languageModal {
     position: fixed;
     top: 0;
     left: 0;
@@ -113,34 +116,32 @@ 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 {
-    opacity: 1;
-    pointer-events: auto;
-}
+    &:target {
+        opacity: 1;
+        pointer-events: auto;
+    }
 
-.languageModalInner {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    background: black;
-    font-family: 'Anonymous Pro', monospace;
-    padding: 20px;
-    border-radius: 5px;
-}
-.languageModalInner a {
-    color: white;
-    text-decoration-style: dotted;
-}
+    .languageModalInner {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        background: black;
+        font-family: 'Anonymous Pro', monospace;
+        padding: 20px;
+        border-radius: 5px;
 
-.modalCloseLink {
-    text-decoration: none;
+        a {
+            color: white;
+            text-decoration-style: dotted;
+        }
+        
+    }
+
+    .modalCloseLink {
+        text-decoration: none;
+    }
 }
\ No newline at end of file
diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss
index 77e915b..527b869 100644
--- a/src/pages/friends.module.scss
+++ b/src/pages/friends.module.scss
@@ -1,73 +1,60 @@
 @import "../variables";
+@import "../mixins";
 
 .friendsList {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
+    @include flexList;
 
-.friendProfile {
-    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;
-    display: flex;
-    flex-direction: column;
-    margin: 20px;
-    color: white;
-    text-decoration: none;
-}
+    .friendProfile {
+        @include cardGeneric;
+        display: flex;
+        flex-direction: column;
 
-.friendImage {
-    width: 100%;
-    height: 300px;
-    background-position: center;
-    background-size: cover;
-    display: flex;
-    padding: 10px;
-    flex-direction: column-reverse;
-    text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-}
+        .friendImage {
+            width: 100%;
+            height: 300px;
+            background-position: center;
+            background-size: cover;
+            display: flex;
+            padding: 10px;
+            flex-direction: column-reverse;
+            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
 
-.friendBio {
-    padding: 15px;
-    flex-grow: 1;
-    text-align: justify;
-    display: block;
-    padding-bottom: 0;
-}
+            .friendName {
+                font-size: 2em;
+                margin-top: -5px;
+            }
+            
+            .friendTitle {
+                margin-top: auto;
+            }
+        }
 
-.friendProfile .contactLinks {
-    padding: 15px;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-}
+        .friendBio {
+            padding: 15px;
+            flex-grow: 1;
+            text-align: justify;
+            display: block;
+            padding-bottom: 0;
+        }
+        
+        .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 {
+                transition: text-decoration .5s;
+                text-decoration: underline dotted rgba(0, 0, 0, 0);
+                padding: 6px 0 6px 25px;
+                color: $textColor;
 
-.contactLink > 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;
+                > i {
+                    color: $accentColor;
+                    margin-left: -25px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 2a3ea48..177262a 100644
--- a/src/pages/index.module.scss
+++ b/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;
-    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;
+    @include homeBanner;
 }
 
 .creditSection {
+    @include homeBanner;
     background: #060606;
-    cursor: pointer;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-}
-
-.creditSection > div {
-    display: flex;
-    height: 100%;
-    padding: 15px !important;
-    line-height: 15px;
-    font-size: 1.2em;
-    color: white;
-}
-
-.creditSection > div > span {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.creditSection > div > i {
-    line-height: 15px !important;
-}
-
+    
+    > div {
+        padding: 15px !important;
+        line-height: 15px;
+        font-size: 1.2em;
+        color: white;
+        
+        > span > i {
+            line-height: 15px !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/projects.module.scss b/src/pages/projects.module.scss
index 83b690e..bc683e9 100644
--- a/src/pages/projects.module.scss
+++ b/src/pages/projects.module.scss
@@ -1,127 +1,89 @@
 @import "../variables";
+@import "../mixins";
 
 .projectList {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
+    @include flexList;
     margin: 15px 0;
 }
 
 .projectCard {
-    background: $background;
-    border-radius: 4px;
-    overflow: hidden;
-    margin: 15px;
-    color: var(--text-color);
+    @include cardGeneric;
     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 {
+    @media(max-width: 800px) {
         width: calc((100% / 2) - 30px);
     }
-}
 
-@media(max-width: 500px) {
-    .projectCard {
+    @media(max-width: 500px) {
         width: 100%;
     }
-}
 
-.projectCardActivityIndicator {
-    position: absolute;
-    margin: 12px;
-    padding: 2px 5px;
-    border-radius: 3px;
-}
+    .projectCardActivityIndicator {
+        position: absolute;
+        margin: 12px;
+        padding: 2px 5px;
+        border-radius: 3px;
 
-.activityIndicatorGreen {
-    background: #26de81;
-}
+        &.activityIndicatorGreen {
+            background: #26de81;
+        }
+        
+        &.activityIndicatorYellow {
+            background: #f7b731;
+        }
+        
+        &.activityIndicatorRed {
+            background: #fc5c65;
+        }
+        
+        &.activityIndicatorBlue {
+            background: #45aaf2;
+        }
+    }
 
-.activityIndicatorYellow {
-    background: #f7b731;
-}
+    .projectCardImage {
+        display: block;
+        height: 150px;
+        background-position: center;
+        background-size: cover;
+    }
 
-.activityIndicatorRed {
-    background: #fc5c65;
-}
+    .projectCardMeta {
+        padding: 10px;
+        flex-grow: 1;
+    }
 
-.activityIndicatorBlue {
-    background: #45aaf2;
-}
+    .projectCardTitle {
+        display: block;
+        font-size: 1.2em;
+    }
 
-.projectCardImage {
-    display: block;
-    height: 150px;
-    background-position: center;
-    background-size: cover;
-}
+    .projectCardCTA {
+        display: block;
+    }
 
-.projectCardMeta {
-    padding: 10px;
-    flex-grow: 1;
-}
+    .projectCardCTA a {
+        @include buttonBasic;
+    }
 
-.projectCardTitle {
-    display: block;
-    font-size: 1.2em;
-}
-
-.projectCardCTA {
-    display: block;
-}
-
-.projectCardCTA a {
-    display: block;
-    padding: 10px;
-    text-align: center;
-    background: var(--accent-color);
-    color: white;
-    text-decoration: none;
-}
-
-.projectCardCTAContainer {
-    display: flex;
-}
-
-@media(max-width: 900px) {
     .projectCardCTAContainer {
-        flex-direction: column;
+        display: flex;
     }
 
-    .projectCardCTA:nth-child(2) {
-        border-left: none;
+    @media(max-width: 900px) {
+        .projectCardCTAContainer {
+            flex-direction: column;
+        }
+    
+        .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;
+    .projectCardCTAContainer > * {
+        flex-grow: 1;
+    }
 }
\ No newline at end of file
diff --git a/src/pages/social.module.scss b/src/pages/social.module.scss
index 913db1c..a2f315b 100644
--- a/src/pages/social.module.scss
+++ b/src/pages/social.module.scss
@@ -1,45 +1,32 @@
 @import "../variables";
+@import "../mixins";
 
 .socialList {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
+    @include flexList;
 
-.socialCard {
-    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;
-    display: flex;
-    flex-direction: column;
-    margin: 20px;
-    color: white;
-    text-decoration: none;
-}
+    .socialCard {
+        @include cardGeneric;
+        display: flex;
+        flex-direction: column;
 
-.socialImage {
-    width: 100%;
-    height: 300px;
-    background-position: center;
-    background-size: cover;
-    display: flex;
-    padding: 10px;
-    flex-direction: column-reverse;
-    text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-}
+        .socialImage {
+            width: 100%;
+            height: 300px;
+            background-position: center;
+            background-size: cover;
+            display: flex;
+            padding: 10px;
+            flex-direction: column-reverse;
+            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
 
-.socialName {
-    font-size: 2em;
-    margin-top: -5px;
-}
+            .socialName {
+                font-size: 2em;
+                margin-top: -5px;
+            }
 
-.socialUsername {
-    margin-top: auto;
-}
-
-.socialCard:hover, .socialCard:focus {
-    transform: scale(1.05);
+            .socialUsername {
+                margin-top: auto;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/templates/project.module.scss b/src/templates/project.module.scss
index 8aaddfe..7751ef7 100644
--- a/src/templates/project.module.scss
+++ b/src/templates/project.module.scss
@@ -1,50 +1,48 @@
 @import "../variables";
 
-.projectHeader .headerBackground {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 200px;
-    background-position: center;
-    background-size: cover;
-}
+.projectHeader {
+    > div {
+        padding-bottom: 0 !important;
+    }
 
-.projectHeader header {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 200px;
-    background: rgba(0, 0, 0, .5);
-}
+    .headerBackground {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 200px;
+        background-position: center;
+        background-size: cover;
+    }
 
-.projectHeader .headerInner {
-    max-width: $layoutWidth;
-    width: 100%;
-    margin: 0 auto;
-    padding: 65px 20px 0;
-}
+    header {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 200px;
+        background: rgba(0, 0, 0, .5);
+        
+        .headerInner {
+            max-width: $layoutWidth;
+            width: 100%;
+            margin: 0 auto;
+            padding: 65px 20px 0;
 
-.projectHeader .headerInner * {
-    margin: 0;
-    color: white;
-}
+            * {
+                margin: 0;
+                color: white;
+            }
+            
+            h1 {
+                font-size: 2em;
+            }
+        }
+        
+    }
 
-.headerPlaceholder {
-    width: 100%;
-    height: 225px;
-}
-
-.projectHeader .headerPlaceholder {
-    width: 100%;
-    height: 200px;
-}
-
-.projectHeader h1 {
-    font-size: 2em;
-}
-
-.projectHeader > div {
-    padding-bottom: 0 !important;
+    .headerPlaceholder {
+        width: 100%;
+        height: 200px;
+    }
 }
 
 .projectAbout {
@@ -52,23 +50,25 @@
     color: white;
 }
 
-.projectLinks .linkList {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-}
+.projectLinks {
+    .linkList {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
 
-.projectLinks a {
-    display: inline-block;
-    border: thin solid rgb(200, 200, 200);
-    border-radius: 5px;
-    padding: 10px 15px;
-    margin: 5px;
-    color: $textColor;
-    text-decoration-skip: none;
-    text-decoration: underline dotted currentColor;
-}
+    a {
+        display: inline-block;
+        border: thin solid rgb(200, 200, 200);
+        border-radius: 5px;
+        padding: 10px 15px;
+        margin: 5px;
+        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 {
-    display: inline;
+        i.fab, i.fas, i.fa, i.far, i.fal {
+            display: inline;
+        }
+    }
 }
\ No newline at end of file