fix: left align logo and text on small screens

gleam-lang · May 7, 2024 · 3203a0d · 3203a0d
1 parent bcd4102
commit 3203a0d
Showing 1 changed file with 29 additions and 23 deletions.
diff --git a/styles/main.css b/styles/main.css
@@ -843,29 +843,6 @@ main.content {
   color: var(--color-charcoal);
 }
 
-/* Same as --width-content */
-@media (max-width: 960px) {
-  .wide-only {
-    display: none;
-  }
-
-  .navbar .content {
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .navbar .content > *:first-child {
-    margin-bottom: var(--gap-2);
-  }
-
-  .hero {
-    padding-top: 0;
-  }
-  .community-socials {
-    flex-direction: column;
-  }
-}
-
 .community-socials {
   padding-top: 2rem;
   list-style-type: none;
@@ -901,3 +878,32 @@ main.content {
   padding: 0.35rem;
   transition: transform ease-in-out 150ms;
 }
+
+/* Same as --width-content */
+@media (max-width: 960px) {
+  .wide-only {
+    display: none;
+  }
+
+  .navbar .content {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .navbar .content > *:first-child {
+    margin-bottom: var(--gap-2);
+  }
+
+  .hero {
+    padding-top: 0;
+  }
+
+  .community-socials {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  .community-socials a {
+    flex-direction: row;
+  }
+}