Simpler CSS

Author: codefl0w

assets/css/style.css

@@ -1,18 +1,32 @@
+/* === BASE STYLES === */
 body {
   font-family: system-ui, sans-serif;
   margin: 0;
   background: #151c2c;
   color: #e0e0e0;
 }
 
-
+/* === HEADER === */
 header {
   background: #1b223a;
   color: #ff8ff5;
   padding: 1rem;
   text-align: center;
 }
 
+header h1 {
+  font-family: 'Open Sans', sans-serif;
+}
+
+header h1 .bracket {
+  color: #ffffff;
+}
+
+header h1 .title-text {
+  color: #ff8ff5;
+}
+
+/* === DASHBOARD CARDS === */
 div.dashboard {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -36,6 +50,7 @@ a.card:hover {
   transform: translateY(-2px);
 }
 
+/* === LINKS === */
 a {
   color: #ff8ff5;
 }
@@ -44,7 +59,9 @@ a:hover {
   text-decoration: underline;
 }
 
-button, .btn {
+/* === BUTTONS === */
+button,
+.btn {
   background-color: #ff8ff5;
   color: #121212;
   border: none;
@@ -54,7 +71,8 @@ button, .btn {
   font-weight: bold;
 }
 
-button:hover, .btn:hover {
+button:hover,
+.btn:hover {
   background-color: #c54bbb;
 }
 
@@ -68,13 +86,7 @@ button:hover, .btn:hover {
   background-color: #1c7ed6;
 }
 
-
-@media (max-width: 600px) {
-  header h1 {
-    font-size: 1.5rem;
-  }
-
-}
+/* === MAIN CONTENT PADDING === */
 main > p,
 main > h1,
 main > h2,
@@ -83,3 +95,9 @@ main > #readme {
   padding: 0 1.5rem;
 }
 
+/* === MOBILE RESPONSIVENESS === */
+@media (max-width: 600px) {
+  header h1 {
+    font-size: 1.5rem;
+  }
+}