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} {#if !collapsed}
<div <div
role="presentation"
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-20 h-full w-full bg-black opacity-50" 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 <ul
transition:slide={{ duration: 300, axis: "x" }} transition:slide={{ duration: 300, axis: "x" }}
class="fixed right-0 top-0 z-30 block h-full bg-white p-4" 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} sticky={!noStickyNavbar}
currentPath={Astro.url.pathname} currentPath={Astro.url.pathname}
/> />
<main> <main class="pb-6">
<slot /> <slot />
</main> </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> </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"} /> <meta name="theme-color" content={themeColor ?? "#facc15"} />
<ViewTransitions fallback="none" /> <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> </head>
<body class={`bg-gray-50 ${hideScrollbar ? "" : "overflow-y-scroll"}`}> <body class={`bg-gray-50 ${hideScrollbar ? "" : "overflow-y-scroll"}`}>

10
src/pages/index.astro
View file

@ -18,7 +18,7 @@ const latestArticleImage = latestArticle.data.image;
<BaseLayout> <BaseLayout>
<div <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"> <section class="mb-10 mt-4 w-full md:w-3/5">
<h1 <h1
@ -67,7 +67,7 @@ const latestArticleImage = latestArticle.data.image;
<h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2> <h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2>
<a <a
href={`/articles/${latestArticleSlug}`} 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 <div
class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md" class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md"
@ -78,8 +78,9 @@ const latestArticleImage = latestArticle.data.image;
</h3> </h3>
</div> </div>
</a> </a>
</BaseLayout>
<footer class="mb-8 mt-20 flex w-full justify-center"> <footer class="mb-8 mt-20 flex w-full justify-center">
<p class="text-xs text-gray-500"> <p class="text-xs text-gray-500">
Built with Built with
<a <a
@ -94,5 +95,4 @@ const latestArticleImage = latestArticle.data.image;
target="_blank">Tailwind CSS</a target="_blank">Tailwind CSS</a
>. >.
</p> </p>
</footer> </footer>
</BaseLayout>