mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 19:22:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Minor styling and accessibility changes

Browse source
This commit is contained in:
Mikkel Svartveit 2023-12-13 16:30:41 -08:00
parent 99a4efc59e
commit dc70df15f2
4 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Navbar.svelte
View file

@ -77,9 +77,15 @@
{#if !collapsed}
<div
role="presentation"
transition:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-20 h-full w-full bg-black opacity-50"
on:click={() => (collapsed = true)}
on:keydown={(event) => {
if (event.key === "Escape") collapsed = true;
}}
/>
<ul
transition:slide={{ duration: 300, axis: "x" }}
class="fixed right-0 top-0 z-30 block h-full bg-white p-4"

6
src/layouts/BaseLayout.astro
View file

@ -17,11 +17,7 @@ const { title, description, noStickyNavbar } = Astro.props;
sticky={!noStickyNavbar}
currentPath={Astro.url.pathname}
/>
<main>
<main class="pb-6">
<slot />
</main>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Code+Pro&family=Source+Serif+Pro:wght@300;400;600&display=swap");
</style>
</RootLayout>

4
src/layouts/RootLayout.astro
View file

@ -27,6 +27,10 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
/>
<meta name="theme-color" content={themeColor ?? "#facc15"} />
<ViewTransitions fallback="none" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Code+Pro&family=Source+Serif+Pro:wght@300;400;600&display=swap");
</style>
</head>
<body class={`bg-gray-50 ${hideScrollbar ? "" : "overflow-y-scroll"}`}>

6
src/pages/index.astro
View file

@ -18,7 +18,7 @@ const latestArticleImage = latestArticle.data.image;
<BaseLayout>
<div
class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-3 pb-6 pt-8 sm:px-6 md:flex-row"
class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-4 pb-6 pt-8 sm:px-6 md:flex-row"
>
<section class="mb-10 mt-4 w-full md:w-3/5">
<h1
@ -67,7 +67,7 @@ const latestArticleImage = latestArticle.data.image;
<h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2>
<a
href={`/articles/${latestArticleSlug}`}
class="mx-auto block max-w-lg px-3 text-gray-600 sm:px-6"
class="mx-auto block max-w-lg px-4 text-gray-600 sm:px-6"
>
<div
class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md"
@ -78,6 +78,7 @@ const latestArticleImage = latestArticle.data.image;
</h3>
</div>
</a>
</BaseLayout>
<footer class="mb-8 mt-20 flex w-full justify-center">
<p class="text-xs text-gray-500">
@ -95,4 +96,3 @@ const latestArticleImage = latestArticle.data.image;
>.
</p>
</footer>
</BaseLayout>