Merge branch 'refactor-input-styling' into refactor-download-modal-bu…

…tton
brown-ccv · Jun 27, 2024 · dcd3ca4 · dcd3ca4
2 parents be8135c + a8da686
commit dcd3ca4
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 17 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -31,11 +31,11 @@ const pathname = Astro.url.pathname
 <header>
   <h2><a class={`no-underline ${pathname !== "/" ? `hover:text-gray-600` : "hidden"}`} href="/">{SITE_TITLE}</a></h2>
   <nav>
-    <div class="hidden lg:flex">
+    <div class="hidden lg:flex lg:gap-8">
       {
         LINKS.map((data) =>
           <HeaderLink href=`/${data}`
-                      class="text-base pt-2.5 px-4 text-neutral-500 hover:text-gray-600 active:text-neutral-900"
+                      class="text-base text-neutral-500 active:text-neutral-900"
           >{data.toUpperCase()}</HeaderLink>)
       }
     </div>
@@ -51,7 +51,7 @@ const pathname = Astro.url.pathname
 
     </navbar-hamburger>
     <div id="menu-body" data-hidden={isHidden} class="hidden">
-      <ul class="flex flex-col items-end font-medium mt-4 absolute top-16 right-6 md:right-14">
+      <ul class="flex flex-col items-end bg-neutral-50 font-medium mt-4 absolute top-16 right-0 md:right-14">
         {
           LINKS.map((data) =>
             <HeaderLink href=`/${data}`

diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -2,6 +2,7 @@
 import BaseHead from "../components/BaseHead.astro"
 import Header from "../components/Header.astro"
 import Footer from "../components/Footer.astro"
+import FootPrint from "../components/svg/FootPrint"
 
 interface Props {
   title: string
@@ -17,8 +18,9 @@ const { title, description, lede } = Astro.props
     <BaseHead title={title} description={description} />
   </head>
 
-  <body class="grid grid-cols-1 px-16 xl:px-64">
+  <body>
     <Header />
+
     <main>
       <article class="max-w-[1000px]">
         <div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -17,10 +17,10 @@ const { title, description } = Astro.props
     <BaseHead title={title} description={description} />
  </head>
 
-  <body class="grid grid-cols-1 px-16 xl:px-64">
+  <body>
     <Header />
     <main>
-      <article class="max-w-[1000px]">
+      <article>
         <div>
           <div class="flex flex-col gap-3 pb-6">
             <h1 class="title">{title}</h1>

diff --git a/src/layouts/News.astro b/src/layouts/News.astro
@@ -10,9 +10,13 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props
 
 <Layout title={title} description={description}>
   <article>
-    <div>
-      {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
-    </div>
+    {
+      heroImage && (
+        <div>
+          <img class="w-full" src={heroImage} />
+        </div>
+      )
+    }
     <div>
       <div>
         <div>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,7 +10,7 @@ import FootPrint from "../components/svg/FootPrint"
   description="Mesoamerican Migration Project"
   lede="Furthering understanding of Mexican migration to the United States"
 >
-  <div class="hidden xl:block absolute top-24 left-24">
+  <div class="hidden xl:block absolute top-24 left-12">
     <FootPrint />
   </div>
   <div class="space-y-24">

diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro
@@ -12,14 +12,14 @@ const posts = (await getCollection("news")).sort(
   <ul class="flex flex-col items-start gap-6">
     {
       posts.map((post) => (
-        <li class="flex items-start self-stretch gap-4">
-          <p class="text-sm text-neutral-500 w-36">
+        <li class="flex justify-around gap-10">
+          <p class="text-sm text-neutral-500 w-16 flex-none">
             <FormattedDate date={post.data.pubDate} />
           </p>
-          <a href={`/news/${post.slug}/`}>
-            <img width={720} height={360} src={post.data.heroImage} alt="" />
+          <a class="hidden flex-none w-80 h-48 md:block" href={`/news/${post.slug}/`}>
+            <img class="object-cover w-full h-full" src={post.data.heroImage} alt="" />
           </a>
-          <div class="flex flex-col w-[28rem] gap-1">
+          <div class="flex flex-col gap-1 shrink">
             <a href={`/news/${post.slug}/`}>
               <h3 class="title font-medium underline">{post.data.title}</h3>
             </a>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -14,6 +14,20 @@
         @apply bg-neutral-50;
     }
 
+    body {
+        @apply grid;
+        grid-template-columns:
+            1fr
+            min(1000px, 100%)
+            1fr;
+    }
+
+    body > * {
+        grid-column: 2;
+        @apply max-w-[1000px];
+        @apply px-3;
+    }
+
     h1, h2, h3, h4 {
         @apply font-header;
         @apply text-neutral-900;
@@ -86,10 +100,9 @@
     }
 
     nav {
-        @apply flex;
-        @apply items-center;
         @apply py-8;
         @apply uppercase;
+        @apply text-sm;
     }
 
     header {
@@ -146,6 +159,11 @@
         @apply pt-6;
     }
 
+    .full-bleed {
+        @apply w-full;
+        grid-column: 1 / 4;
+    }
+
     .HoverCardContent {
         @apply bg-white;
         @apply rounded;