ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style(blog): fix layout to show full nav on mobile

Browse source
This commit is contained in:
Ayo Ayco 2024-08-14 20:14:14 +02:00
parent 99d7fea607
commit 566a6c2174
2 changed files with 45 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/blog/Header.astro
View file

@ -4,8 +4,9 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
<header> <header>
<nav> <nav>
<div> <div class="site-title">
<h2><a href="/blog">{SITE_TITLE} • {SITE_DESCRIPTION}</a></h2> <h2><a href="/blog">{SITE_TITLE}</a></h2>
<small class="site-description">{SITE_DESCRIPTION}</small>
</div> </div>
<div class="social-links"> <div class="social-links">
<a href="/" target="_blank"> <a href="/" target="_blank">
@ -41,7 +42,7 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
} }
h2 { h2 {
margin: 0; margin: 0;
font-size: 1em; font-size: x-large;
} }
h2 a, h2 a,
@ -52,6 +53,7 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1em 0.5em;
& span.primary-btn { & span.primary-btn {
background-color: rgba(var(--black), 95%); background-color: rgba(var(--black), 95%);
@ -72,15 +74,22 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
} }
} }
nav a { nav .site-title {
padding: 1em 0.5em; display: flex;
}
nav a,
nav .site-description {
color: var(--black); color: var(--black);
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-decoration: none; text-decoration: none;
}
&:hover { nav a {
color: var(--accent); padding: 0 0.5em;
} }
nav a:hover {
color: var(--accent);
} }
nav a.active { nav a.active {
@ -90,13 +99,32 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
.social-links, .social-links,
.social-links a { .social-links a {
display: flex; display: flex;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.social-links { nav {
display: none; display: block;
padding: 1em 0;
& .site-description {
font-size: 1rem;
}
& span.primary-btn {
line-height: 1.5rem;
height: 1.5rem;
}
& .social-links a {
font-size: small;
svg {
height: 1.5rem;
}
}
}
nav a {
padding: 0.5em;
} }
} }
</style> </style>

5
src/layouts/BlogPost.astro
View file

@ -54,6 +54,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
@media (max-width: 720px) { @media (max-width: 720px) {
main { main {
width: 100%; width: 100%;
.prose {
max-width: calc(100% - 1em);
padding: 0;
}
} }
} }
</style> </style>