fix: add basic styles for small screens

martinhauke · Aug 15, 2024 · 4a61e7c · 4a61e7c
1 parent 43d8903
commit 4a61e7c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/src/components/ContentBox.astro b/src/components/ContentBox.astro
@@ -15,7 +15,6 @@ const {class: additionalClass, title: title, ...rest} = Astro.props;
 <style>
   .content-box {
     display: flex;
-    box-sizing: border-box;
     margin: 30px 0;
     padding: 0;
 
@@ -29,8 +28,11 @@ const {class: additionalClass, title: title, ...rest} = Astro.props;
     text-orientation: sideways;
     display: block;
     writing-mode: vertical-lr;
-    font-size: 4em;
     padding: 20px 0 20px 5px;
     position: relative;
+    font-size: 4em;
+    @media screen and (max-width: 800px) {
+      font-size: 3em;
+    }
   }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -16,6 +16,9 @@ import Link from "./Link.astro";
     background: var(--red);
     color: var(--flatpink);
     border-bottom: 5px solid var(--blue);
+    @media screen and (max-width: 800px) {
+      width: 100%;
+    }
   }
 
   nav {

diff --git a/src/components/RecipeList.astro b/src/components/RecipeList.astro
@@ -22,5 +22,8 @@ const recipes = await getCollection('recipes')
     gap: 20px;
     margin: 0;
     padding: 10px;
+    @media screen and (max-width: 800px) {
+      justify-content: center;
+    }
   }
 </style>
diff --git a/src/components/RecipeListItem.astro b/src/components/RecipeListItem.astro
@@ -29,10 +29,13 @@ const {href, title, body, img} = Astro.props;
   }
 
   .list-item {
+    width: calc(50% - 10px);
     max-width: 400px;
-    width: 50%;
     background: var(--flatgreen);
     border: 2px solid var(--darkgreen);
+    @media screen and (max-width: 800px) {
+      width: 100%;
+    }
   }
 
   h2 {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -72,16 +72,16 @@ const { title, description } = Astro.props;
 	}
 </style>
 <style is:global>
+  * {
+    box-sizing: border-box;
+  }
 	.content {
 		width: 100%;
 		max-width: var(--content-width);
 		margin: auto;
     padding-bottom: 10px;
 	}
 	main.content {
-	  padding-bottom: 50px;
-	}
-	.image {
-		box-sizing: border-box;
+	  padding: 0 5px 50px;
 	}
 </style>
diff --git a/src/pages/recipe/[name].astro b/src/pages/recipe/[name].astro
@@ -42,6 +42,9 @@ import ContentBox from "../../components/ContentBox.astro";
     h1 {
       padding: 0;
       margin: 0;
+      @media screen and (max-width: 800px) {
+        font-size: 2em;
+      }
     }
   }