Skip to content

Commit 7fac360

Browse files
ak0rak0r
authored
Merge pull request #2 from ak0r/feature/tailwind-themes
Refactor styles and components for improved theming and layout
2 parents 9d4e56b + 19e321d commit 7fac360

File tree

10 files changed

+446
-274
lines changed

10 files changed

+446
-274
lines changed

‎src/components/blog/RenderMarkdown.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
const { className } = Astro.props
33
---
4-
<section class:list={["prose sm:prose-lg break-words mb-6 prose-cyan", className]}>
4+
<section class:list={["markdown-content mb-6", className]}>
55
<slot />
66
</section>

‎src/components/blog/SinglePost.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const pubDate = frontmatter.publishedDate.toISOString()
2323
const isDraft = frontmatter.isDraft
2424
---
2525
<PageLayout>
26-
<Container outerClass="px-6">
26+
<Container outerClass="max-w-3xl" innerClass="max-w-2xl">
2727
<RenderMarkdown>
2828
<Content />
2929
</RenderMarkdown>

‎src/components/layout/Container.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
2-
const { outerClass } = Astro.props
2+
const { outerClass, innerClass } = Astro.props
33
---
4-
<div class:list={["mx-auto", outerClass]}>
5-
<slot />
4+
<div class:list={["outer-container", outerClass]}>
5+
<div class:list={["inner-container", innerClass]}>
6+
<slot />
7+
</div>
68
</div>

‎src/components/layout/Header.astro‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,43 @@ import ThemeSwitch from "@/components/widgets/ThemeSwitch.astro";
44
import Container from './Container.astro';
55
---
66

7-
<header class="fixed top-0 w-full h-[76px] border-b border-ink/10 z-50 backdrop-blur-lg">
7+
<header class="fixed top-0 w-full h-[76px] border-b border-primary-txt/10 z-50 backdrop-blur-lg">
88

99
<!-- Mobile menu -->
10-
<div id="navMenu" class="fixed bg-umami-bg shadow-sm h-full w-full text-xl sm:w-1/2 sm:text-2xl transform transition-transform duration-300 -translate-x-full z-50">
11-
<div class="flex flex-col px-4 min-h-screen w-full bg-umami-bg">
12-
<!-- Logo -->
13-
<div class="flex items-center justify-between font-medium px-4 py-2 h-[76px] border-b border-ink/10">
14-
<a class="flex items-center gap-2" href="/">
15-
<div class="text-lg font-bold">Umami</div>
16-
</a>
17-
<div id="closeBtn" class="">
18-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" class="size-6">
19-
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
20-
</svg>
10+
<div id="navMenu" class="fixed bg-primary-bg shadow-sm h-full w-full text-xl sm:w-1/2 sm:text-2xl transform transition-transform duration-300 -translate-x-full z-50">
11+
<div class="flex flex-col min-h-screen w-full bg-primary-bg">
12+
<div class="">
13+
<!-- Logo -->
14+
<div class="flex items-center justify-between font-medium px-6 py-2 h-[76px] border-b border-primary-txt/10">
15+
<a class="flex items-center gap-2" href="/">
16+
<div class="text-lg font-bold">Umami</div>
17+
</a>
18+
<div id="closeBtn" class="">
19+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" class="size-6">
20+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
21+
</svg>
22+
</div>
23+
</div>
24+
<!-- Links -->
25+
<div class="flex flex-col text-center gap-3 px-2 py-8">
26+
<a href="/articles" class="px-4 py-2 text-muted-txt hover:text-primary-txt" aria-current={Astro.url.pathname === '/articles' ? 'page' : undefined}>
27+
<h2>Articles</h2>
28+
</a>
29+
<a href="/about" class="px-4 py-2 text-umami-tx-2 hover:text-umami-tx" aria-current={Astro.url.pathname === '/about' ? 'page' : undefined}>About</a>
30+
</div>
31+
<!-- Subscribe button -->
32+
<div class="px-4 py-2">
33+
<button class="text-lg font-medium border border-primary-ui rounded-3xl py-2 px-3 hover:border-umami-ui-2">
34+
Subscribe
35+
</button>
2136
</div>
22-
</div>
23-
<!-- Links -->
24-
<div class="flex flex-col gap-3 py-8">
25-
<a href="/articles" class="px-4 py-2 text-umami-tx-2 hover:text-umami-tx" aria-current={Astro.url.pathname === '/articles' ? 'page' : undefined}>Articles</a>
26-
<a href="/about" class="px-4 py-2 text-umami-tx-2 hover:text-umami-tx" aria-current={Astro.url.pathname === '/about' ? 'page' : undefined}>About</a>
27-
</div>
28-
<!-- Subscribe button -->
29-
<div class="px-4 py-2">
30-
<button class="text-lg font-medium border border-umami-ui rounded-3xl py-2 px-3 hover:border-umami-ui-2">
31-
Subscribe
32-
</button>
3337
</div>
3438
</div>
3539
</div>
3640

3741
<!-- Main Navigation -->
38-
<Container outerClass="flex flex-col max-w-4xl px-2 py-2 mx-auto h-full">
39-
<nav class="flex h-full w-full px-4 ">
42+
<Container outerClass="flex flex-col max-w-4xl h-full">
43+
<nav class="flex h-full w-full">
4044
<!-- Logo -->
4145
<a class="flex items-center gap-2" href="/">
4246
<div class="text-lg font-bold">Umami</div>

‎src/components/widgets/ThemeSwitch.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
---
33

4-
<button id="theme-toggle" aria-label="Toggle theme" class="p-2 rounded-full text-umami-tx2 hover:cursor-pointer hover:text-umami-tx">
5-
<svg id="sun-icon" class="size-6" fill="none" stroke="var(--flexoki-tx-2)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
4+
<button id="theme-toggle" aria-label="Toggle theme" class="p-2 rounded-full hover:cursor-pointer">
5+
<svg id="sun-icon" class="size-6" fill="none" stroke="var(--color-muted-txt)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
66
<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"></path>
77
</svg>
8-
<svg id="moon-icon" class="size-6 hidden" fill="none" stroke="var(--flexoki-tx-2)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
8+
<svg id="moon-icon" class="size-6 hidden" fill="none" stroke="var(--color-muted-txt)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
99
<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"></path>
1010
</svg>
1111
</button>

‎src/layouts/PageLayout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Footer from "@/components/layout/Footer.astro"
1313
<meta name="generator" content={Astro.generator} />
1414
<title>Astro</title>
1515
</head>
16-
<body class="relative bg-umami-bg text-umami-tx">
16+
<body class="relative ">
1717
<div class="min-h-screen flex-auto">
1818
<Header />
1919
<main class="flex py-24">

‎src/styles/fonts.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* inter-latin-wght-normal */
2+
@font-face {
3+
font-family: "Inter Variable";
4+
font-style: normal;
5+
font-display: swap;
6+
font-weight: 100 900;
7+
src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
8+
format("woff2-variations");
9+
unicode-range:
10+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
11+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12+
}

0 commit comments

Comments
 (0)