From f2e448849e2917f33fcf11f22c48c40c434ba228 Mon Sep 17 00:00:00 2001
From: WriterV2 <primary-v2@protonmail.com>
Date: Sun, 29 Jan 2023 14:05:48 +0100
Subject: Add responsive style adjustments to home page content

---
 sass/style.scss | 70 ++++++++++++++++++++++++++++++++-------------------------
 1 file changed, 40 insertions(+), 30 deletions(-)

(limited to 'sass')

diff --git a/sass/style.scss b/sass/style.scss
index cc11d16..dafaba0 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -46,7 +46,6 @@ nav {
     background-color: $background-color;
 }
 
-
 main {
     margin: 2em;
     min-height: calc(100vh - 108.8px - 25.6px - 25.6px - 32px - 32px);
@@ -58,7 +57,15 @@ main {
             grid-template-columns: 1fr 1fr;
         }
         @media screen and (min-width: 1024px) {
-            grid-template-columns: 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    }
+    .about-me {
+        display: grid;
+        row-gap: 2em;
+        column-gap: 2em;
+        @media screen and (min-width: 1024px) {
+            grid-template-columns: 1fr 1fr 1fr;
         }
     }
 }
@@ -83,30 +90,40 @@ h3 {
     color: $accent-color;
 }
 
-.work-card {
+.card {
     padding: 2em;
     background-color: $box-color;
     border-radius: 0.3em;
     border: 1px solid $background-color;
-    height: 300px;
-    @media screen and (min-width: 600px) {
-        height: 250px;
-    }
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .info {
+    
+    &.work-card {
         display: flex;
-        flex-flow: row wrap;
-        span {
-            background-color: $background-color;
-            padding: 0.5em;
-            margin: 0 0.5em 0.5em;
-            font-size: 0.8em;
+        flex-direction: column;
+        justify-content: space-between;
+        .info {
+            display: flex;
+            flex-flow: row wrap;
+            span {
+                background-color: $background-color;
+                padding: 0.5em;
+                margin: 0 0.5em 0.5em;
+                font-size: 0.8em;
+            }
         }
-    }
-    &:hover {
-        border: 1px solid $accent-color;
+        &:hover {
+            border: 1px solid $accent-color;
+        }
+        height: 350px;
+        @media screen and (min-width: 480px) {
+            height: 250px;
+        }
+        @media screen and (min-width: 768px) {
+            height: 300px;
+        }
+        @media screen and (min-width: 1024px) {
+            height: 350px;
+        }
+
     }
 }
 
@@ -139,21 +156,14 @@ h3 {
 table {
     border-collapse: collapse;
     width: 100%;
-    margin: 1em;
+    background-color: $background-color;
+    margin: 0.8em 0;
     tr {
         td {
-            border: 1px solid $background-color;
-            background-color: $box-color;
+            border: 1px solid $box-color;
             text-align: left;
             padding: 1em;
             font-size: 0.9em;
         }
-        &.title-row {
-            td {
-                border: none;
-                background-color: $background-color;
-                font-size: inherit;
-            }
-        }
     }
 }
-- 
cgit v1.2.3