responsive for phones

MaximilianMcC · Aug 4, 2024 · 2a08bf5 · 2a08bf5
1 parent 81a9de2
commit 2a08bf5
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/style/general.css b/style/general.css
@@ -54,4 +54,20 @@ main {
 section h2 {
   border-bottom: 5px solid #212121;
   margin-bottom: 10px;
+}
+
+@media (max-width: 480px) {
+  html {
+    font-size: 1.5rem;
+  }
+  main {
+    margin: 10% 15%;
+  }
+  nav {
+    display: none;
+  }
+  header {
+    font-size: 1.3rem;
+    height: 25%;
+  }
 }/*# sourceMappingURL=general.css.map */
diff --git a/style/general.scss b/style/general.scss
@@ -52,7 +52,6 @@ header {
 nav {
 	background-color: $background-secondary;
 	height: 5%;
-	// box-shadow: 0px 5px 10px black;
 
 	ul {
 		height: 100%;
@@ -83,4 +82,41 @@ section {
 		border-bottom: 5px solid $background-secondary;
 		margin-bottom: 10px;
 	}
+}
+
+
+
+
+
+
+
+
+
+
+// Responsive phone
+@media (max-width: 480px) {
+
+	// Make the base font smaller
+	html {
+		font-size: 1.5rem;
+	}
+
+	// Make the margins smaller
+	main {
+		margin: 10% 15%;
+	}
+
+	// Just straight up get
+	// rid of the navbar if
+	// they are on a phone
+	nav {
+		display: none;
+	}
+
+	// Make the header size smaller
+	// and also text smaller
+	header {
+		font-size: 1.3rem;
+		height: 25%;
+	}
 }