💄 Improve svg icons responsiveness (#26)

Androz2091 · May 25, 2021 · c717288 · c717288
1 parent 08d03d0
commit c717288
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/src/components/FunFact.svelte b/src/components/FunFact.svelte
@@ -29,10 +29,22 @@
 
 <style>
     svg {
-        height: 40px;
+        --icon-dimensions: 2.5rem;
+
+        min-height: var(--icon-dimensions);
+        max-height: var(--icon-dimensions);
+        min-width: var(--icon-dimensions);
+        max-width: var(--icon-dimensions);
     }
+
     .fun-fact {
         display: flex;
         align-items: center;
     }
+
+    @media (max-width: 800px) {
+        svg {
+            --icon-dimensions: 2rem;
+        }
+    }
 </style>
diff --git a/src/components/ProfileCard.svelte b/src/components/ProfileCard.svelte
@@ -16,22 +16,45 @@
 </div>
 
 <style>
+    h1 {
+        font-size: 2rem;
+    }
+
     .user-profile {
         display: grid;
         justify-content: center;
     }
+
     .avatar {
         text-align: center;
     }
+
     .avatar img {
         margin-top: 20px;
         border-radius: 50%;
         height: 128px;
         width: 128px;
     }
+
+    @media (max-width: 1200px) {
+        h1 {
+            font-size: 1.5rem;
+        }
+    }
+    
+    @media (max-width: 900px) {
+        h1 {
+            font-size: 1.2rem;
+        }
+    }
+
     @media screen and (max-width: 600px){
         .avatar img {
             height: 120px;
         }
+
+        h1 {
+            font-size: 2rem;
+        }
     }
 </style>
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
@@ -182,16 +182,18 @@
         h3 {
             margin-left: 10px;
         }
+
         .statistics {
             color: white;
             padding: 20px;
         }
+
         .cards {
             display: grid;
             grid-gap: 10px;
         }
+
         .contributors {
-    
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -202,6 +204,7 @@
     
             border-radius: 10px;
         }
+
         .contributors-item {
             width: 50px;
             height: 50px;
@@ -216,11 +219,11 @@
             background-size: contain;
             cursor: pointer;
         }
+
         @media (min-width: 600px) {
             .cards {
                 grid-template-columns: repeat(11, 1fr);
             }
         }
-        
     </style>