Periodic/blazestar.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes responsiveness for small screen sizes

Browse Source
This commit is contained in:
Drew Haven
2025-06-23 20:21:22 -07:00
parent 9dcf57a730
commit 1e35719c3a
3 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Header.astro
View File

@@ -5,7 +5,7 @@ import Blazestar from './Blazestar.astro';
<header> <header>
<nav> <nav>
<h2><Blazestar /></h2> <h1><Blazestar /></h1>
<div class="internal-links"> <div class="internal-links">
<HeaderLink href="/">Home</HeaderLink> <HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/blog">Blog</HeaderLink>
@@ -39,13 +39,14 @@ import Blazestar from './Blazestar.astro';
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h2 {
margin: 0; h1 {
font-size: 1em; margin-bottom: 0.5em;
font-size: 2em;
} }
h2 a, h1 a,
h2 a.active { h1 a.active {
text-decoration: none; text-decoration: none;
} }
nav { nav {
@@ -76,4 +77,9 @@ import Blazestar from './Blazestar.astro';
display: none; display: none;
} }
} }
@media (max-width: 520px) {
nav {
flex-direction: column;
}
}
</style> </style>

8
src/components/Sidebar.astro
View File

@@ -5,7 +5,7 @@ import Blazestar from './Blazestar.astro';
<header> <header>
<nav> <nav>
<h2><Blazestar /></h2> <h1><Blazestar /></h1>
<div class="internal-links"> <div class="internal-links">
<SidebarLink href="/">Home</SidebarLink> <SidebarLink href="/">Home</SidebarLink>
<SidebarLink href="/blog">Blog</SidebarLink> <SidebarLink href="/blog">Blog</SidebarLink>
@@ -39,13 +39,13 @@ import Blazestar from './Blazestar.astro';
padding: 0 1em; padding: 0 1em;
} }
h2 { h1 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
font-size: 1.5em; font-size: 1.5em;
} }
h2 a, h1 a,
h2 a.active { h1 a.active {
text-decoration: none; text-decoration: none;
} }

8
src/layouts/RootLayout.astro
View File

@@ -33,14 +33,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
</div> </div>
</body> </body>
<style> <style>
@media (max-width: 720px) { @media (max-width: 800px) {
body { body {
grid-template-areas: grid-template-areas:
"header" "header"
"main" "main"
"footer"; "footer";
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 1rem 0.5rem;
} }
.header { .header {
display: block; display: block;
@@ -49,13 +49,14 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
display: none; display: none;
} }
} }
@media (min-width: 720px) { @media (min-width: 800px) {
body { body {
grid-template-areas: grid-template-areas:
"header header" "header header"
"sidebar main" "sidebar main"
"footer footer"; "footer footer";
grid-template-columns: 20rem 1fr; grid-template-columns: 20rem 1fr;
margin: 2rem 1rem;
} }
.header { .header {
display: none; display: none;
@@ -66,7 +67,6 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
} }
body { body {
display: grid; display: grid;
margin: 2rem 3rem;
} }
.header { .header {