Updated styles for mobile.

Flutter-Bounty-Hunters · Mar 24, 2024 · 2d322c5 · 2d322c5
1 parent 6802953
commit 2d322c5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/source/styles/article.scss b/source/styles/article.scss
@@ -65,6 +65,11 @@ main {
 
   padding-left: 48px;
   padding-right: 48px;
+
+  @media (max-width: 599px) {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }
 
 header {
@@ -85,6 +90,10 @@ header {
     font-family: 'Roboto', sans-serif;
     font-size: 48px;
     font-weight: bold;
+
+    @media (max-width: 599px) {
+      margin-top: 32px;
+    }
   }
 
   .social-media-divider {
@@ -153,13 +162,22 @@ header {
 
     color: #66DDFF;
     font-size: 38px;
+
+    @media (max-width: 599px) {
+      margin-top: 2em;
+    }
   }
 
   h3 {
     margin-top: 3em;
     margin-bottom: 0.5em;
 
     color: #66DDFF;
+
+    @media (max-width: 599px) {
+      margin-top: 2em;
+      font-size: 32px;
+    }
   }
 
   p {

diff --git a/source/styles/homepage.scss b/source/styles/homepage.scss
@@ -18,6 +18,10 @@
     padding-bottom: 48px;
 
     text-align: center;
+
+    @media (max-width: 599px) {
+      width: 360px;
+    }
   }
 
   .logo {
@@ -35,6 +39,10 @@
     font-size: 42px;
     font-weight: bold;
     line-height: 1;
+
+    @media (max-width: 599px) {
+      font-size: 32px;
+    }
   }
 
   .divider {
@@ -46,12 +54,20 @@
     height: 1px;
 
     background: $dividerColor;
+
+    @media (max-width: 599px) {
+      width: 250px;
+    }
   }
 
   .description {
     color: #526277;
     font-size: 30px;
     line-height: 1.2;
+
+    @media (max-width: 599px) {
+      font-size: 24px;
+    }
   }
 
   .material-symbols-outlined {
@@ -90,12 +106,22 @@ main {
   padding-top: 100px;
   padding-bottom: 100px;
 
+  @media (max-width: 599px) {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
   #catalog {
     max-width: 896px;
     margin: auto;
     padding-left: 48px;
     padding-right: 48px;
 
+    @media (max-width: 599px) {
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+
     h2 {
       margin-bottom: 0.5em;