feat: add articles responsive

fbuireu · May 9, 2024 · d5108a3 · d5108a3
1 parent 381e6a6
commit d5108a3
Show file tree

Hide file tree

Showing 6 changed files with 473 additions and 69 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -43,15 +43,15 @@
 	"dependencies": {
 		"@astrojs/check": "^0.6.0",
 		"@astrojs/cloudflare": "^10.2.5",
-		"@astrojs/mdx": "^2.3.1",
+		"@astrojs/mdx": "^3.0.0",
 		"@astrojs/partytown": "^2.1.0",
-		"@astrojs/react": "^3.3.2",
+		"@astrojs/react": "^3.3.3",
 		"@astrojs/rss": "^4.0.5",
 		"@astrojs/sitemap": "^3.1.4",
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@fontsource/baskervville": "^5.0.20",
 		"@hookform/resolvers": "^3.3.4",
-		"astro": "^4.7.1",
+		"astro": "^4.8.0",
 		"firebase": "^10.11.1",
 		"firebase-admin": "^12.1.0",
 		"gsap": "^3.12.5",
@@ -66,7 +66,7 @@
 		"resend": "^3.2.0",
 		"swiper": "^11.1.1",
 		"three": "^0.164.1",
-		"zod": "^3.23.7"
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.7.0",

diff --git a/src/pages/articles/_articles.css b/src/pages/articles/_articles.css
@@ -6,12 +6,24 @@
   .articles__title {
     color: var(--primary-main);
     margin-bottom: 5rem;
+
+    @media (max-width: 960px) {
+      margin-bottom: 2rem;
+    }
   }
 
   .featured-article__wrapper {
     display: grid;
     gap: 0 2rem;
-    grid: 'Featured-Article-Image Featured-Article-Content' minmax(auto, 70vh) / minmax(70%, 1fr) 1fr;
+    grid: 'Featured-Article-Image Featured-Article-Content' minmax(auto, 70dvh) / minmax(70%, 1fr) 1fr;
+
+    @media (max-width: 960px) {
+      gap: 1rem 0;
+      grid: 'Featured-Article-Image Featured-Article-Image ' minmax(auto, 50dvh)
+      'Featured-Article-Content Featured-Article-Content ' 1fr
+      / 1fr;
+      padding-block-end: 1rem;
+    }
   }
 
   .featured-article__image {
@@ -21,19 +33,36 @@
 
   .featured-article__details__wrapper {
     grid-area: Featured-Article-Content;
+    padding-inline-end: 1rem;
     position: relative;
+
+    @media (max-width: 960px) {
+      padding-inline: 1rem;
+    }
   }
 
   .featured-article__details {
     align-self: center;
     gap: 2rem 0;
+
+    @media (max-width: 960px) {
+      gap: 1rem 0;
+    }
   }
 
   .featured-article__share__wrapper {
     bottom: -0.5rem;
+    gap: 1rem 0;
+  justify-content: space-between;
     position: absolute;
     translate: 0 100%;
     width: 100%;
+
+    @media (max-width: 960px) {
+      bottom: -1.5rem;
+      gap: 0.5rem 1rem;
+      justify-content: flex-start;
+    }
   }
 
   .featured-article__share__link__item {
@@ -70,12 +99,20 @@
   .articles__grid__list {
     gap: 5rem 0;
     margin: 12rem 0;
+
+    @media (max-width: 960px) {
+      margin: 7rem 0;
+    }
   }
 
   .articles__grid__item {
     max-width: calc(100% / 4 - 2rem);
     position: relative;
     width: 100%;
+
+    @media (max-width: 960px) {
+      max-width: calc(100% / 1 - 1rem);
+    }
   }
 
   .article__card__title {

diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
@@ -74,7 +74,7 @@ const featuredArticleShareUrl = new URL(featuredArticleHref, Astro.url).href;
               Read More <img src={horizontalArrow.src} alt="Readt more" />
             </a>
           </div>
-          <div class="featured-article__share__wrapper flex row-nowrap justify-space-between">
+          <div class="featured-article__share__wrapper flex row-wrap">
             <p class="featured-article__share__title font-serif">SHARE IT!</p>
             <ul class="featured-article__share__links__list flex row-nowrap">
               <li class="featured-article__share__link__item link">

diff --git a/src/ui/components/organisms/header/components/menu/menu.css b/src/ui/components/organisms/header/components/menu/menu.css
@@ -37,7 +37,7 @@
             grid: '.' calc(var(--header-height) + 2rem)
                     'Navigation' max-content
                     'Divider' min-content
-                    'Header-Quote' 20vh / 1fr;
+                    'Header-Quote' 20dvh / 1fr;
         }
     }