Starting to get responsive

3 files changed, 30 insertions, 15 deletions

diff --git a/assets/public/css/app.css b/assets/public/css/app.css
index 85d95ac..e23b16e 100644
--- a/assets/public/css/app.css
+++ b/assets/public/css/app.css
@@ -15,18 +15,36 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+h1 {
+    font-size: 35px;
+    font-weight: 400;
+}
+
+p {
+    color: #626262;
+    font-size: 16px;
+    margin-bottom: 30px;
+}
+
 main {
     display: flex;
-    justify-content: space-around;
     align-items: center;
     height: 100%;
-    width: 66%;
     margin: auto;
+    justify-content: space-between;
+    width: 75%;
 }
 
-h1 {
-    font-size: 35px;
-    font-weight: 400;
+@media (max-width: 850px) {
+    main {
+        flex-direction: column;
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .left-segment {
+        margin-top: 10rem;
+    }
 }
 
 .left-segment {
@@ -35,13 +53,5 @@ h1 {
 
 .right-segment {
     width: 315px;
-    height: 100%;
-    padding-top: 225px;
     box-sizing: border-box;
 }
-
-p {
-    color: #626262;
-    font-size: 16px;
-    margin-bottom: 30px;
-}
diff --git a/assets/src/components/Header.svelte b/assets/src/components/Header.svelte
index c956ca9..61aa02a 100644
--- a/assets/src/components/Header.svelte
+++ b/assets/src/components/Header.svelte
@@ -10,9 +10,10 @@
 
 <style>
     header {
-        padding: 5rem;
-        box-sizing: border-box;
         position: absolute;
+        display: flex;
+        padding: 4rem 4rem 3rem;
+        box-sizing: border-box;
         width: 100%;
     }
 </style>
diff --git a/assets/src/components/share/ShareStatus.svelte b/assets/src/components/share/ShareStatus.svelte
index 2a1cce3..da8531e 100644
--- a/assets/src/components/share/ShareStatus.svelte
+++ b/assets/src/components/share/ShareStatus.svelte
@@ -31,6 +31,10 @@
 {/if}
 
 <style>
+    h1 {
+        margin-top: 0;
+    }
+
     span {
         color: white;
     }