fix(footer): increase links font size and paddings in footer on mobile

VChet · Nov 22, 2020 · 2b7302c · 2b7302c
1 parent 0438e9c
commit 2b7302c
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/src/src/components/AppFooter.vue b/src/src/components/AppFooter.vue
@@ -1,9 +1,17 @@
 <template>
   <footer>
     <div class="container">
+      <ul class="link-list">
+        <li>
       <a href="mailto:feedback@stylebase.cc" rel="noopener">Contact Us</a>
+        </li>
+        <li>
       <button class="link" type="button" @click="$emit('open-nav-link', 'showPrivacyModal')">Privacy Policy</button>
+        </li>
+        <li>
       <a href="https://github.com/VChet/StyleBase" rel="noopener" target="_blank">Code on GitHub</a>
+        </li>
+      </ul>
     </div>
   </footer>
 </template>
@@ -22,12 +30,22 @@ footer {
   .container {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
-    text-align: right;
   }
 
-  button,
-  a:not(:last-child) {
-    margin-right: 1rem;
+  .link-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.75rem 1rem;
+    margin: 0;
+    list-style-type: none;
+
+    @include media-size-mobile {
+      flex-flow: column nowrap;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      font-size: 16px;
+    }
   }
 }
 </style>