fixed the style of Search, Navigation and Hamburger. Created AboutLayout

brklntmhwk · Apr 1, 2024 · bd5c507 · bd5c507
1 parent 0e8b9dc
commit bd5c507
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 164 deletions.
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -1,17 +1,17 @@
 ---
-import HeaderLink from './HeaderLink.astro'
+import NavLink from './NavLink.astro'
 import Svg from '@/components/Svg/index.astro'
 ---
 
 <div class="hamburger-menu">
   <input type="checkbox" id="menu-toggle-check" />
   <label for="menu-toggle-check" class="hamburger-icon-btn"><span></span></label
   >
-  <nav class="menu-content">
+  <nav class="mobile-nav">
     <div class="nav-links">
-      <HeaderLink href="/">Home</HeaderLink>
-      <HeaderLink href="/blog">Blog</HeaderLink>
-      <HeaderLink href="/about">About</HeaderLink>
+      <NavLink href="/">Home</NavLink>
+      <NavLink href="/blog">Blog</NavLink>
+      <NavLink href="/about">About</NavLink>
     </div>
     <div class="icon-links">
       <a href="https://twitter.com/astrodotbuild" target="_blank">
@@ -26,20 +26,20 @@ import Svg from '@/components/Svg/index.astro'
   </nav>
 </div>
 <style>
-  nav.menu-content {
+  nav.mobile-nav {
     width: 100%;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 100%;
     z-index: 80;
     padding-top: 3rem;
-    margin-top: 5.25rem;
+    margin-top: 4.75rem;
     background-color: #f4f4f4;
     transition: all 0.2s;
   }
-  nav.menu-content > * {
-    padding: 0.75rem 2.25rem;
+  nav.mobile-nav > * {
+    padding: 0.75rem 2.5rem;
   }
   .nav-links {
     display: grid;
@@ -89,7 +89,7 @@ import Svg from '@/components/Svg/index.astro'
     top: 0;
     transform: rotate(-45deg);
   }
-  #menu-toggle-check:checked ~ nav.menu-content {
+  #menu-toggle-check:checked ~ nav.mobile-nav {
     left: 0;
   }
   #menu-toggle-check {

diff --git a/src/components/Header.astro b/src/components/Header.astro
diff --git a/src/components/HeaderLink.astro → src/components/NavLink.astro b/src/components/HeaderLink.astro → src/components/NavLink.astro
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,21 +1,21 @@
 ---
 // import { getEntry } from 'astro:content'
-import HeaderLink from './HeaderLink.astro'
+import NavLink from './NavLink.astro'
 import Svg from '@/components/Svg/index.astro'
 import Search from '@/components/Search.astro'
 import Hamburger from '@/components/Hamburger.astro'
 
 // const meta = await getEntry('meta', 'site-data')
 ---
 
-<nav class="nav-menu">
+<nav>
   <a class="blog-title" href="/"
     ><Svg iconName="site-logo" width={32} height={32} /></a
   >
   <div class="nav-links">
-    <HeaderLink href="/">Home</HeaderLink>
-    <HeaderLink href="/blog">Blog</HeaderLink>
-    <HeaderLink href="/about">About</HeaderLink>
+    <NavLink href="/">Home</NavLink>
+    <NavLink href="/blog">Blog</NavLink>
+    <NavLink href="/about">About</NavLink>
   </div>
   <div class="icon-links">
     <Search />
@@ -35,7 +35,7 @@ import Hamburger from '@/components/Hamburger.astro'
 </nav>
 
 <style>
-  nav.nav-menu {
+  nav {
     background-color: rgba(255 255 255 0.4);
     backdrop-filter: opacity(0.2);
     backdrop-filter: blur(6px);
@@ -44,23 +44,23 @@ import Hamburger from '@/components/Hamburger.astro'
     left: 0;
     right: 0;
     z-index: 10;
-    /* width: 100%; */
-    height: 2.5rem;
-    margin: 1.5rem 1.05rem; /* これの影響でハンバーガーのコンテンツ領域や検索モーダルの背景の両端が切れてるが、ナビのPADDING効かない分MARGINいじらないといけない現状 */
+    height: 2.75rem;
     box-sizing: border-box;
-    /* padding: 1.5rem 1.05rem; */
-    /* grid-area: navigation; */
+    padding: 2.5rem 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    /* margin: 1.5rem 1.05rem; */
+    /* width: 100%; */
+    /* grid-area: navigation; */
   }
-  nav.nav-menu a {
+  nav a {
     /* padding: 1em 0.5em; */
     color: var(--black);
     border-bottom: 2px solid transparent;
     text-decoration: none;
   }
-  nav.nav-menu a.active {
+  nav a.active {
     text-decoration: none;
     border-bottom-color: var(--accent);
   }
@@ -74,10 +74,10 @@ import Hamburger from '@/components/Hamburger.astro'
     column-gap: 1rem;
   }
   @media (min-width: 768px) {
-    nav.nav-menu {
-      height: 2.5rem;
+    nav {
+      height: 2.75rem;
       box-sizing: border-box;
-      padding: 1rem 1.25rem;
+      padding: 2.75rem 1.5rem;
     }
     .icon-links,
     .nav-links {
@@ -89,7 +89,7 @@ import Hamburger from '@/components/Hamburger.astro'
     }
   }
   @media (min-width: 1024px) {
-    nav.nav-menu {
+    nav {
       display: grid;
       grid-template-rows: 1fr 6fr 1fr;
       grid-template-columns: 1fr;

diff --git a/src/components/Pager.astro b/src/components/Pager.astro
@@ -2,6 +2,7 @@
 import type { Page } from 'astro'
 import type { CollectionEntry } from 'astro:content'
 import Svg from '@/components/Svg/index.astro'
+import { DEFAULT_PAGINATION_WIDTH } from '@/lib/consts'
 
 type Props = {
   page?: Page<CollectionEntry<'blog'>>
@@ -11,7 +12,7 @@ const { page } = Astro.props
 const paginator = (
   curPageNum: number,
   totalPageNum: number,
-  width: number = 2
+  width: number = DEFAULT_PAGINATION_WIDTH
 ) => {
   const prevEnd = curPageNum - width
   const nextEnd = curPageNum + width

diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -17,11 +17,10 @@ import Svg from '@/components/Svg/index.astro'
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 100vh;
     padding-top: 1.5rem;
     z-index: 90;
-
     background-color: hsla(223, 13%, 10%, 0.66);
     backdrop-filter: blur(0.25rem);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
@@ -33,6 +32,10 @@ import Svg from '@/components/Svg/index.astro'
     --pagefind-ui-font: initial;
     --pagefind-ui-tag: color-mix(in srgb, var(--code) 95%, var(--fg) 5%);
   }
+  @media (min-width: 1024px) {
+    #search-modal {
+    }
+  }
   #search-modal.hidden {
     display: none;
   }

diff --git a/src/content/blog/using-mdx.mdx b/src/content/blog/using-mdx.mdx
@@ -26,11 +26,11 @@ If you have existing content authored in MDX, this integration will hopefully ma
 Here is how you import and use a UI component inside of MDX.
 When you open this page in the browser, you should see the clickable button below.
 
-import HeaderLink from "../../components/HeaderLink.astro";
+import NavLink from '../../components/NavLink.astro'
 
-<HeaderLink href="#" onclick="alert('clicked!')">
+<NavLink href="#" onclick="alert('clicked!')">
   Embedded component in MDX
-</HeaderLink>
+</NavLink>
 
 ## More Links
 

diff --git a/src/content/page/about.mdx b/src/content/page/about.mdx
@@ -4,6 +4,6 @@ type: page
 modifiedAt: 2024-02-28T06:27:41.594Z
 ---
 
-# About Me
+## Introduction
 
 Hi, there!
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -0,0 +1,62 @@
+---
+import { Image } from 'astro:assets'
+import { getEntry } from 'astro:content'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+
+const meta = await getEntry('meta', 'site-data')
+---
+
+<BaseLayout
+  title={meta.data.about.title}
+  description={meta.data.about.description}
+>
+  <main>
+    <h1>About Me</h1>
+    <section class="profile-section">
+      <Image
+        alt="My profile icon"
+        class="profile-icon"
+        src="/blog-placeholder-about.jpg"
+        width={150}
+        height={150}
+        format="avif"
+        quality={75}
+      />
+      <div>
+        <span class="my-name">brklntmhwk</span>
+        <p class="short-intro">Hello. This is my short introduction.</p>
+      </div>
+    </section>
+    <hr />
+    <article>
+      <slot />
+    </article>
+  </main>
+</BaseLayout>
+<style>
+  section.profile-section {
+    padding: 2.25rem 0;
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+  }
+  @media (min-width: 1024px) {
+    section.profile-section {
+      gap: 2.5rem;
+      justify-content: start;
+    }
+  }
+  .profile-icon {
+    border-radius: 9999px;
+    object-fit: cover;
+  }
+  section.profile-section div {
+    display: grid;
+  }
+  span.my-name {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+  p.short-intro {
+  }
+</style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -2,7 +2,6 @@
 import '@/styles/global.css'
 import '@fontsource-variable/roboto-condensed'
 import BaseHead from '../components/BaseHead.astro'
-// import Header from '../components/Header.astro'
 import Navigation from '../components/Navigation.astro'
 import Footer from '../components/Footer.astro'
 
@@ -20,7 +19,6 @@ const { title, description } = Astro.props
     <BaseHead title={title} description={description ?? ''} />
   </head>
   <body>
-    <!-- <Header /> -->
     <div class="base-wrapper">
       <Navigation />
       <slot />

diff --git a/src/lib/consts.ts b/src/lib/consts.ts
@@ -1 +1,2 @@
 export const LIMIT_PER_PAGE = 2
+export const DEFAULT_PAGINATION_WIDTH = 2
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const LIMIT_PER_PAGE = 2
		export const DEFAULT_PAGINATION_WIDTH = 2