Fix blog index page spacing+alignment

gems-cyberlang · Nov 4, 2024 · 5894817 · 5894817
1 parent 764f271
commit 5894817
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 71 deletions.
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -10,12 +10,10 @@ interface Props {
   image?: string;
 }
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const {
   title,
   description = SITE_DESCRIPTION,
-  image = "/blog-placeholder-1.jpg",
+  image = "/cyberlang-logo.png",
 } = Astro.props;
 ---
 
@@ -79,9 +77,6 @@ const {
   crossorigin
 />
 
-<!-- Canonical URL -->
-<link rel="canonical" href={canonicalURL} />
-
 <!-- Primary Meta Tags -->
 <!-- For the home page, just show the site title -->
 <title>{title ? `${title} | ${SITE_TITLE}` : SITE_TITLE}</title>

diff --git a/src/components/header/mobile/Menu.astro b/src/components/header/mobile/Menu.astro
@@ -12,7 +12,7 @@ import PageLink from "./PageLink.astro";
     </nav>
     <div id="theme-row" class="dropdown-item">
       <label for="theme">Theme:</label>
-      <select name="theme" id="theme-select">
+      <select name="theme" id="theme-select" aria-label="Theme picker">
         {themes.map(({ name, theme }) => <option value={theme ?? "Sync"}>{name}</option>)}
       </select>
     </div>

diff --git a/src/consts.ts b/src/consts.ts
@@ -2,7 +2,7 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = "CYB3RL4NG";
-export const SITE_DESCRIPTION = "Website for Team CYB3RL4NG";
+export const SITE_DESCRIPTION = "Team CYB3RL4NG's website";
 
 export const CONTACT_NAME = "Terra Oh";
 export const CONTACT_EMAIL = "[email protected]";

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -12,79 +12,65 @@ const posts = (await getCollection("blog")).sort(
 <BaseLayout title="Blog">
   <h1>Blog</h1>
   <p>
-    This is where we post about our progress and findings.
-    If you want updates, you can track our <a href={RSS_LINK}>RSS feed</a>.
+    This is where we post about our progress and findings. If you want updates,
+    you can track our <a href={RSS_LINK}>RSS feed</a>.
   </p>
-  <ul>
-    {
-      posts.map((post) => (
-        <li>
-          <h2>
-            <a href={`/blog/${post.slug}`}>{post.data.title}</a>
-          </h2>
-          Posted <FormattedDate date={post.data.pubDate} />
-          <p>{post.data.description}</p>
-        </li>
-      ))
-    }
-  </ul>
+  <div class="center-posts-container">
+    <div class="posts">
+      {
+        posts.map((post) => (
+          <div class="post">
+            <h2>
+              <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+            </h2>
+            Posted <FormattedDate date={post.data.pubDate} />
+            <p>{post.data.description}</p>
+          </div>
+        ))
+      }
+    </div>
+  </div>
 </BaseLayout>
 
-<style>
-  main {
-    width: 960px;
-  }
-  ul {
+<style lang="scss">
+  @import "../../styles/common.scss";
+
+  .center-posts-container {
     display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-  ul li {
-    width: calc(50% - 1rem);
-  }
-  ul li * {
-    text-decoration: none;
-    transition: 0.2s ease;
-  }
-  ul li img {
-    margin-bottom: 0.5rem;
-    border-radius: 12px;
   }
-  ul li a {
-    display: block;
-  }
-  .title {
-    margin: 0;
-    color: rgb(var(--black));
-    line-height: 1;
-  }
-  .date {
-    margin: 0;
-    color: rgb(var(--gray));
-  }
-  ul li a:hover h4,
-  ul li a:hover .date {
-    color: rgb(var(--accent));
+
+  .posts {
+    row-gap: 1rem;
+    column-gap: 5ch;
+
+    margin-left: auto;
+    margin-right: auto;
   }
-  ul a:hover img {
-    box-shadow: var(--box-shadow);
+
+  .posts {
+    // Single column for phones
+    display: flex;
+    flex-direction: column;
+
+    // Two columns for tablets and up
+    @media (min-width: $tabletMinWidth) {
+      display: grid;
+      grid-template-columns: auto auto;
+    }
   }
-  @media (max-width: 720px) {
-    ul {
-      gap: 0.5em;
+
+  .post {
+    width: max-content;
+
+    a {
+      text-decoration: none;
     }
-    ul li {
+  }
+
+  @media (max-width: ($tabletMinWidth - 0.5)) {
+    .post {
       width: 100%;
       text-align: center;
     }
-    ul li:first-child {
-      margin-bottom: 0;
-    }
-    ul li:first-child .title {
-      font-size: 1.563em;
-    }
   }
 </style>