Skip to content

Commit

Permalink
support theme-color and fix #29 (#30)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmoosocool
dmoosocool authored Feb 8, 2022
1 parent f762fe0 commit ee25197
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 36 deletions.
58 changes: 40 additions & 18 deletions src/components/Nav.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import { REPO_URL } from '$lib/siteConfig';
import MobileMenu from './MobileMenu.svelte';
import { REPO_URL } from '$lib/siteConfig';
import NavLink from './NavLink.svelte';
let isDark = false;
if (typeof localStorage !== 'undefined') {
Expand All @@ -25,14 +26,22 @@ import { REPO_URL } from '$lib/siteConfig';
</script>

<nav
class="relative mx-auto flex w-full max-w-2xl items-center justify-between border-gray-200 bg-gray-50 bg-opacity-60 py-8 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 sm:pb-16"
class="relative mx-auto flex w-full max-w-2xl items-center justify-between border-gray-200
bg-gray-50 bg-opacity-60 py-8 text-gray-900 dark:border-gray-700 dark:bg-gray-900
dark:text-gray-100 sm:pb-16"
>
<a href="#skip" class="skip-nav">Skip to content</a>
<MobileMenu />
<ul class="ml-[-0.60rem] flex">
<li><NavLink href="/">Home</NavLink></li>
<li><NavLink href="/blog">Blog</NavLink></li>
<li><NavLink href="/about">About</NavLink></li>
<li>
<NavLink href="/">Home</NavLink>
</li>
<li>
<NavLink href="/blog">Blog</NavLink>
</li>
<li>
<NavLink href="/about">About</NavLink>
</li>
</ul>
<div class="flex items-center space-x-4">
<!-- RSS -->
Expand Down Expand Up @@ -60,21 +69,31 @@ import { REPO_URL } from '$lib/siteConfig';
</a> -->
<!-- Github -->
<a
class="rounded-lg text-gray-700 hover:bg-yellow-200 dark:text-gray-200 dark:hover:bg-yellow-800"
class="rounded-lg text-gray-700 hover:bg-yellow-200 dark:text-gray-200
dark:hover:bg-yellow-800"
href={REPO_URL}
aria-label="GitHub source"
>
<svg aria-hidden="true" class="h-9 w-9 p-1" fill="currentColor" viewBox="0 0 24 24"
><path
<svg aria-hidden="true" class="h-9 w-9 p-1" fill="currentColor" viewBox="0 0 24 24">
<path
fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483
0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988
1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112
6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202
2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566
4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019
10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"
/></svg
>
/>
</svg>
</a>
<button
aria-label="Toggle Dark Mode"
class="ml-1 flex h-9 w-9 items-center justify-center rounded-lg bg-yellow-400 ring-yellow-400 transition-all hover:ring-2 dark:bg-yellow-800"
class="ml-1 flex h-9 w-9 items-center justify-center rounded-lg bg-yellow-400 ring-yellow-400
transition-all hover:ring-2 dark:bg-yellow-800"
on:click={toggleDarkMode}
>
{#if isDark}
Expand All @@ -84,27 +103,30 @@ import { REPO_URL } from '$lib/siteConfig';
fill="none"
stroke="currentColor"
class="h-5 w-5 text-gray-800 dark:text-yellow-100"
><path
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/></svg
>
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728
0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
class="w-5 h-5 text-gray-800 dark:text-gray-200"
><path
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/></svg
>
/>
</svg>
{/if}
</button>
</div>
Expand Down
50 changes: 32 additions & 18 deletions src/routes/__layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@
</script>

<svelte:head>
<link rel="alternate" type="application/rss+xml" title={"RSS Feed for " + SITE_TITLE} href="/rss.xml" />
<link
rel="alternate"
type="application/rss+xml"
title={'RSS Feed for ' + SITE_TITLE}
href="/rss.xml"
/>
<meta name="theme-color" content="#facc15" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#3730a3" media="(prefers-color-scheme: dark)" />
</svelte:head>


<div class="flex flex-col justify-center bg-gray-50 px-4 dark:bg-gray-900 sm:px-8">
<Nav />
</div>
Expand All @@ -21,37 +27,45 @@

<footer class="mx-auto mb-8 flex w-full max-w-2xl flex-col items-start justify-center">
<hr class="border-1 mb-8 w-full border-gray-200 dark:border-gray-800" />
<div class="grid w-full max-w-2xl grid-cols-1 gap-4 px-4 pb-16 sm:grid-cols-2 sm:px-8">
<div class="grid w-full max-w-2xl grid-cols-1 gap-4 px-4 pb-16 sm:grid-cols-2 sm:px-8">
<div class="flex flex-col space-y-4">
<a class="text-gray-500 transition hover:text-gray-300" href="/">Home</a><a
class="text-gray-500 transition hover:text-gray-300"
href="/about">About</a
>
<a class="text-gray-500 transition hover:text-gray-300" href="/">Home</a>
<a class="text-gray-500 transition hover:text-gray-300" href="/about">About</a>
<a class="text-gray-500 transition hover:text-gray-300" href="/#newsletter">Newsletter</a>
<a
class="text-gray-500 transition hover:text-gray-300"
href='/api/rss.xml'
rel="external">RSS</a
>
<a class="text-gray-500 transition hover:text-gray-300" href="/api/rss.xml" rel="external">
RSS
</a>
</div>
<div class="flex flex-col space-y-4">
<a
class="text-gray-500 transition hover:text-gray-300"
target="_blank"
rel="noopener noreferrer"
href={'https://twitter.com/intent/follow?screen_name=' + MY_TWITTER_HANDLE}>Twitter</a
><a
href={'https://twitter.com/intent/follow?screen_name=' + MY_TWITTER_HANDLE}
>
Twitter
</a>
<a
class="text-gray-500 transition hover:text-gray-300"
target="_blank"
rel="noopener noreferrer"
href={REPO_URL}>GitHub</a
><a
href={REPO_URL}
>
GitHub
</a>
<a
class="text-gray-500 transition hover:text-gray-300"
target="_blank"
rel="noopener noreferrer"
href={MY_YOUTUBE}>YouTube</a
href={MY_YOUTUBE}
>
YouTube
</a>
</div>
</div>
<p class="prose dark:prose-invert px-4 sm:px-8">This blog is based on the <a href="https://swyxkit.netlify.app/">swyxkit</a> template.</p>
<p class="prose px-4 dark:prose-invert sm:px-8">
This blog is based on the
<a href="https://swyxkit.netlify.app/">swyxkit</a>
template.
</p>
</footer>

0 comments on commit ee25197

Please sign in to comment.