refactor(styles): use container queries

isabelroses · Dec 14, 2024 · 66cf681 · 66cf681
1 parent b909ed3
commit 66cf681
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/styles/layouts/base.scss b/styles/layouts/base.scss
@@ -21,6 +21,7 @@ body {
 
 .main-page {
   flex: 1;
+  container: main-page / inline-size;
 }
 
 a {

diff --git a/styles/partials/blog-preview.scss b/styles/partials/blog-preview.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .blog-previews {
     grid-template-columns: 1fr;
   }

diff --git a/styles/partials/donations.scss b/styles/partials/donations.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .donations {
     grid-template-columns: 1fr 1fr;
   }

diff --git a/styles/partials/project.scss b/styles/partials/project.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .projects {
     grid-template-columns: 1fr;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ body { @@
     .main-page {
       flex: 1;
+      container: main-page / inline-size;
     }
     a {
@@ Expand Down @@