commit

styles/Home.module.scss

@@ -0,0 +1,128 @@
+@import '_variables';
+
+.bodySection {
+    margin-top: 8rem;
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+.mainLayout {
+    h1 {
+        line-height: .2;
+        font-size: 3rem;
+        font-weight: 700;
+    }
+
+    p {
+        color: $secondary-color;
+        font-size: 1rem;
+        font-weight: 400;
+    }
+}
+
+
+.iconLayout {
+    margin-bottom: 5%;
+
+    svg {
+        font-size: 1.4em;
+        cursor: pointer;
+        margin-right: 6%;
+        margin-bottom: 1em;
+    }
+}
+
+.time {
+    svg {
+        font-size: .9em;
+    }
+}
+
+.weather {
+    img {
+        float: left;
+    }
+
+    p {
+        display: inline;
+    }
+
+    span {
+        font-size: .8rem;
+    }
+    
+    a:hover {
+        text-decoration: none;
+        color: #C7D2FE;
+    }
+    svg {
+        font-size: .9em;
+    }
+}
+    
+.spotify {
+    font-size: 1em;
+    margin-top: 5%;
+    padding: 1rem 1rem 1.8rem 1rem;
+    border: 1px solid $spotify-box-color;
+    border-radius: .5rem;
+
+    img {
+        border-radius: 10px;
+        float: left;
+        margin-right: 5%;
+    }
+
+    p {
+        display: inline;
+    }
+
+    .tinyText {
+        font-weight: 300;
+        font-size: .8em;
+
+        svg {
+            margin-top: 5px;
+            color: #1DB954;
+        }
+    }
+}
+
+
+.footerLayout {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+
+    a {
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            color: #C7D2FE
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    .bodySection {
+        margin-left: 30%;
+        margin-right: 45%;
+    }
+
+    .iconLayout {
+        margin-bottom: 2%;
+    }
+
+    .spotify {
+        margin-top: 8%;
+        width: 80%;
+    }
+}
+
+@media (min-height: 800px) {
+    .bodySection {
+        margin-top: 15rem;
+    }
+}

styles/_variables.scss

@@ -0,0 +1,6 @@
+$background-color: #000000;
+$primary-color: #ffffff;
+$secondary-color: #9CA3AF;
+$selection-color: #8039e2;
+$spotify-box-color: #521c9e;
+$font: 'Inter', sans-serif;

styles/globals.scss

@@ -0,0 +1,26 @@
+@import '_variables';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700&display=swap');
+
+html,
+body {
+    background-color: $background-color;
+    color: $primary-color;
+    padding: 0;
+    margin: 0;
+    font-family: $font;
+    font-weight: 400;
+}
+
+::selection {
+  background: rgba($selection-color, .7);
+  color: $primary-color;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+* {
+    box-sizing: border-box;
+}