Merge branch 'main' into postwoman

tsar-boomba · May 1, 2024 · e669f77 · e669f77
2 parents 9658362 + da418e9
commit e669f77
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 6 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -63,7 +63,7 @@ jobs:
         id: changes
         uses: dorny/paths-filter@v2
         with:
-          base: "master"
+          base: "main"
           filters: |
             src: api/**
             actions: .github/**

diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -0,0 +1,33 @@
+---
+import { handleStyleProps, StyleProps } from '@/utils/handleStyleProps';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import { PrimaryShades } from '@/utils/types';
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & { shade?: PrimaryShades } & StyleProps;
+
+const { as: Tag = 'button', style: ogStyles, shade, class: className, ...props } = Astro.props;
+console.log(ogStyles);
+const styles = {
+	backgroundColor: props.shade ? `rgb(var(--primary-${shade}))` : '',
+	boxShadow: props.shade
+		? `0px 0px 36px 0px rgb(var(--primary-${shade < 1200 ? shade + 100 : shade}), 0.3)`
+		: '',
+	...ogStyles,
+	...handleStyleProps(props),
+};
+---
+
+<style lang='scss'>
+	.root {
+		padding: 0.5rem 1rem;
+		background-color: rgb(var(--primary-300));
+		box-shadow: 0px 0px 32px 0px rgba(var(--primary-400), 0.4);
+		border-radius: var(--radius);
+		color: var(--text-color);
+		text-decoration: none;
+		font-weight: 600;
+	}
+</style>
+<Tag {...props} style={styles} class:list={['root', className]}>
+	<slot />
+</Tag>
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
@@ -44,6 +44,9 @@ import NavLink from './NavLink.astro';
 			left: 0;
 			right: 0;
 			gap: 0;
+			background-color: var(--bg-color-from);
+			background-image: linear-gradient(var(--bg-color-from) 5%, var(--bg-color-to) 99%);
+			box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 
 		.nav[data-opened] {
@@ -64,7 +67,7 @@ import NavLink from './NavLink.astro';
 		}
 	}
 </style>
-<header class='root'>
+<header id='header' class='root'>
 	<div>Isaiah Gamble</div>
 	<div class='toggle-wrapper'>
 		<button id='nav-toggle' class='nav-toggle' aria-label='Toggle Navigation'>
@@ -83,14 +86,17 @@ import NavLink from './NavLink.astro';
 	(() => {
 		const html = document.querySelector('html')!;
 		const nav = document.getElementById('nav') as HTMLElement;
+		const header = document.getElementById('header') as HTMLElement;
 		const toggle = document.getElementById('nav-toggle') as HTMLButtonElement;
 
 		const setupMenu = (nav: HTMLElement, toggle: HTMLButtonElement) => {
 			toggle.addEventListener('click', () => {
 				if (nav.dataset.opened) {
 					delete nav.dataset.opened;
+					header.style.boxShadow = '';
 				} else {
 					nav.dataset.opened = 'true';
+					header.style.boxShadow = 'none';
 				}
 			});
 

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -28,6 +28,7 @@ import Stack from './Stack.astro';
 				rgb(var(--primary-200)) 60%,
 				#fe62f9 90%
 			);
+			text-shadow: 0 0 96px rgba(255, 255, 255, 0.9);
 		}
 
 		:root[data-theme='light'] & > span {
@@ -46,13 +47,21 @@ import Stack from './Stack.astro';
 		text-align: center;
 	}
 
+	.hero-container {
+		padding: 6rem 0 4rem 0;
+	}
+
 	@media only screen and (max-width: $breakpoint) {
 		.hero-title {
 			font-size: 48px;
 		}
+
+		.hero-container {
+			padding: 2rem 0 1rem 0;
+		}
 	}
 </style>
-<Stack p='6rem 0 12rem 0' align='center'>
+<Stack class='hero-container' align='center'>
 	<h1 class='hero-title'><span>Isaiah Gamble</span></h1>
 	<p class='hero-text' style={{ textAlign: 'center' }}>A blog about development</p>
 </Stack>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,8 +1,15 @@
 ---
+import Button from '@/components/Button.astro';
 import Hero from '@/components/Hero.astro';
+import Stack from '@/components/Stack.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 
 <BaseLayout description='Milky Web brings a galaxy of web infrastructure into your hands.'>
-	<Hero />
+	<Stack align='center'>
+		<Hero />
+		<Button as='a' href='/posts' p='0.75rem 1.25rem' style={{ fontSize: '1.5rem' }}
+			>View Posts</Button
+		>
+	</Stack>
 </BaseLayout>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -1,8 +1,6 @@
 ---
-import Box from '@/components/Box.astro';
 import Card from '@/components/Card.astro';
 import Group from '@/components/Group.astro';
-import Stack from '@/components/Stack.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import type { PostFrontmatter } from '@/utils/types';