Merge pull request #9 from FireIsGood/fix-projects

Fix projects page images for mobile
hazelthatsme · Apr 30, 2024 · 4ea13fe · 4ea13fe
2 parents 5c130aa + a32673a
commit 4ea13fe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/project.astro b/src/components/project.astro
@@ -17,8 +17,8 @@ const { title, image, url, url_text, content } = Astro.props;
 
 <style>
     .project {
-        display: flex;
-        flex-direction: row;
+        display: grid;
+        grid-template-columns: auto 1fr;
         align-items: center;
         gap: 1rem;
         margin: 1rem 0;
@@ -31,4 +31,13 @@ const { title, image, url, url_text, content } = Astro.props;
     .project h2 {
         margin: 0;
     }
-</style>
+
+    @media (width < 800px) {
+        .project {
+            grid-template-columns: 1fr;
+        }
+        .project .thumbnail {
+            max-height: unset;
+        }
+    }
+</style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -39,3 +39,8 @@ pre {
 pre code {
   background-color: transparent;
 }
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}