diff options
| -rw-r--r-- | src/components/Header.astro | 152 |
1 files changed, 87 insertions, 65 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro index 9bab4a1..2a48dda 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,78 +3,100 @@ import HeaderLink from './HeaderLink.astro'; import { SITE_TITLE } from '../consts'; --- -<header> - <h1>{SITE_TITLE}</h1> - <nav> - <HeaderLink href="/">Home</HeaderLink> - <HeaderLink href="/blog">Blog</HeaderLink> - <HeaderLink href="/about">About</HeaderLink> - <HeaderLink href="/rss.xml">RSS</HeaderLink> - </nav> - <div class="logo"> - <img src="https://files.catbox.moe/grlaov.png" alt="Profile Picture"> - </div> -</header> - <style> - header { - background-color: #333; - color: #fff; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1em; - margin-bottom: 20px; - } + /* Default styles for non-mobile devices */ + header { + background-color: #333; + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em; + margin-bottom: 20px; + } + + .logo { + width: 50px; + height: 50px; + overflow: hidden; + border-radius: 50%; + margin-right: 1em; + } + + .logo img { + width: 100%; + height: 100%; + object-fit: cover; + } - .logo { - width: 50px; - height: 50px; - overflow: hidden; - border-radius: 50%; - margin-right: 1em; - } + h1 { + margin: 0; + font-size: 2em; + } - .logo img { - width: 100%; - height: 100%; - object-fit: cover; - } + nav { + display: flex; + align-items: center; + font-size: larger; + } - h1 { - margin: 0; - font-size: 2em; - } + nav > * { + margin-left: 1em; + text-decoration: none; + color: inherit; + transition: color 0.3s ease; + position: relative; + } - nav { - display: flex; - align-items: center; - font-size: larger; - } + nav > *:first-child { + margin-left: 0; + } - nav > * { - margin-left: 1em; - text-decoration: none; - color: inherit; - transition: color 0.3s ease; - position: relative; - } + nav > *:hover { + color: #ccc; + } - nav > *:first-child { - margin-left: 0; - } + nav > *:hover::before { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 100%; + height: 2px; + background-color: #ccc; + } - nav > *:hover { - color: #ccc; - } + /* Media query for mobile devices */ + @media (max-width: 768px) { + header { + flex-direction: column; + text-align: center; + } - nav > *:hover::before { - content: ""; - position: absolute; - bottom: -5px; - left: 0; - width: 100%; - height: 2px; - background-color: #ccc; - } + .logo { + margin-bottom: 1em; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav > * { + margin: 0.5em 0; + } + } </style> + +<header> + <div class="logo"> + <img src="https://files.catbox.moe/grlaov.png" alt="Profile Picture"> + </div> + <h1>{SITE_TITLE}</h1> + <nav> + <HeaderLink href="/">Home</HeaderLink> + <HeaderLink href="/blog">Blog</HeaderLink> + <HeaderLink href="/about">About</HeaderLink> + <HeaderLink href="/rss.xml">RSS</HeaderLink> + </nav> +</header> |