Move beta changes into main

Author: fwextensions

src/pages/beta/_components/BigText.astro src/components/BigText.astrosrc/pages/beta/_components/BigText.astro renamed to src/components/BigText.astro

@@ -10,78 +10,31 @@ interface Props {
 const { color, title, body, label, href } = Astro.props;
 ---
 
-<div class="card" style={`background: ${color}`}>
-	<slot />
-	<div class="body">
-		<h3>{title}</h3>
-		<p>
+<div class="flex flex-col items-center text-center p-8 rounded-lg" style={`background: ${color}`}>
+	<div class="w-3/5 mb-4">
+		<slot />
+	</div>
+	<div class="flex flex-col h-full gap-2">
+		<h3 class="text-white font-[var(--font-barlow-condensed)] uppercase text-2xl font-bold min-h-[3rem]">{title}</h3>
+		<p class="text-white text-sm h-full mb-4">
 			{body}
 		</p>
-		<a href={href} target="_blank">
+		<a href={href} target="_blank" class="text-white font-bold text-lg hover:underline decoration-white/90">
 			{label}
 		</a>
 	</div>
 </div>
 
 <style>
-	.card {
-		--pico-color: var(--pico-contrast-inverse);
-		font-size: smaller;
-		text-align: center;
-		align-items: center;
-		padding: var(--pico-block-spacing);
-		display: flex;
-		flex-direction: column;
-		gap: calc(var(--pico-block-spacing) * .25);
-	}
-
-	.card :global(img) {
-		width: 60%;
-	}
-
-	.body {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: calc(var(--pico-block-spacing) * .25);
-	}
-
-	h3 {
-		--pico-color: var(--pico-contrast-inverse);
-		font-size: 1.25rem;
-		text-transform: uppercase;
-		min-height: calc(var(--pico-line-height) * 2 * 1em);
-	}
-
-	p {
-		height: 100%;
-	}
-
-	a {
-		--pico-color: var(--pico-contrast-inverse);
-		--pico-underline: rgba(255, 255, 255, 0.35);
-		font-weight: bold;
-		font-size: larger;
-	}
-
-	a:hover {
-		--pico-color: var(--pico-contrast-inverse);
-		--pico-underline: rgba(255, 255, 255, 0.9);
-	}
-
 	@media only screen and (max-width: 768px) {
-		.card {
-			font-size: initial;
-			flex-direction: row;
-			justify-content: space-evenly;
+		div {
+			@apply flex-row justify-between;
 		}
-
-		.card :global(img) {
-			width: 30%;
+		div > div:first-child {
+			@apply w-1/3;
 		}
-
-		.body {
-			width: 60%;
+		div > div:last-child {
+			@apply w-3/5;
 		}
 	}
 </style>

src/components/Card.astro

@@ -1,20 +1,23 @@
 ---
 import GitHubEvents from "@/react/GitHubEvents/GitHubEvents";
-import HomeSection from "@/components/HomeSection.astro";
+import BigText from "./BigText.astro";
 
 // we'll pass the ID of the section to the GitHubEvents component so that it can
 // hide the whole section in case there's an error, rather than leave a broken
 // component on the page
 const id = "in-the-code";
 ---
 
-<HomeSection
-	title="In the Code"
-	id={id}
->
+<section id={id} class="mb-8">
+	<BigText size="md" showOrnament={false}>
+		<Fragment slot="title">
+			<b>In the Code</b>
+		</Fragment>
+	</BigText>
+	<div class="mt-5" />
 	<GitHubEvents
 		org="sfbrigade"
 		sectionID={id}
 		client:only="react"
 	/>
-</HomeSection>
+</section>

src/components/CodeSummary.astro

@@ -45,15 +45,15 @@ const columns = [
 ] as const;
 ---
 
-<footer class="container">
+<footer class="mx-auto px-0 py-14 text-sm flex flex-row justify-between">
 	{columns.map(([cat, links]) => (
-		<nav aria-label="Footer">
-			<h3>{cat}</h3>
-			<ul>
+		<nav aria-label="Footer" class="flex flex-col justify-start">
+			<h3 class="text-primary text-lg font-condensed font-bold uppercase mb-2">{cat}</h3>
+			<ul class="block list-none p-0 m-0">
 				{links.map(([page, label, iconName]) => (
-					<li>
+					<li class="hover:text-primary pb-1 flex items-center gap-1">
 						{iconName &&
-							<Icon name={iconName} class="icon" />
+							<Icon name={iconName} class="inline-block min-w-6 text-center align-baseline" />
 						}
 						<NavLink href={page}>
 							{label}
@@ -64,57 +64,3 @@ const columns = [
 		</nav>
 	))}
 </footer>
-
-<style>
-	footer {
-		font-size: smaller;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-	nav {
-		flex-direction: column;
-		justify-content: start;
-	}
-
-	h3 {
-		font-size: 1.25em;
-		margin-bottom: 0.5em;
-	}
-
-	ul {
-		display: block;
-	}
-
-	ul:first-of-type, ul:last-of-type {
-		margin-left: initial;
-		margin-right: initial;
-	}
-
-	li {
-		padding: .15em 0;
-		display: flex;
-		align-items: center;
-		gap: .25rem;
-	}
-
-	/* Pico CSS adds a ::before with content: "" for li's, which adds space on the */
-	/* left that we don't want */
-	li::before {
-		content: none;
-	}
-
-	/* force the a's in the NavLink to have no extra spacing */
-	li > :global(a) {
-		margin: 0;
-		padding: 0;
-	}
-
-	.icon {
-		display: inline-block;
-		min-width: 1.5em;
-		text-align: center;
-		vertical-align: baseline;
-	}
-</style>

src/components/FooterNav.astro

@@ -4,77 +4,24 @@ import { meetupURL, zoomURL } from "@/utils/urls";
 import hackNight from "@/assets/home/hack-night.png";
 ---
 
-<section>
-	<div class="info">
-		<h2>Virtual Civic Hack Night</h2>
-		<p>
+<section class="flex flex-col md:flex-row justify-between items-stretch mt-12">
+	<div class="bg-[var(--color-sf-navy)] text-center p-8 flex-[1.2] flex flex-col justify-center">
+		<h2 class="text-[var(--color-sf-red)] font-[var(--font-barlow-condensed)] uppercase text-5xl font-bold mb-8">Virtual Civic Hack Night</h2>
+		<p class="text-[var(--color-white)] mb-4">
 			Not just for techies, success means having volunteers from all across our community!
 		</p>
-		<p>
-			All of our meetings are currently remote. Everyone is welcome!
+		<p class="text-[var(--color-white)] mb-4">
+			Everyone is welcome!
 		</p>
-		<p>
-			<a href={meetupURL}>Every Wednesday at 6:30pm&nbsp;Pacific</a>
+		<p class="mb-4">
+			<a href={meetupURL} class="text-[var(--color-white)] font-bold hover:underline decoration-[var(--color-white)]/90">Every Wednesday at 6:30pm&nbsp;Pacific</a>
 		</p>
 		<p>
 			Join us on Zoom
-			<a href={zoomURL}>https://c4sf.me/zoom</a>
+			<a href={zoomURL} class="text-[var(--color-white)] font-bold hover:underline decoration-[var(--color-white)]/90">https://c4sf.me/zoom</a>
 		</p>
 	</div>
-	<div class="image">
-		<Image src={hackNight} alt="hack night" loading="eager" />
+	<div class="bg-[var(--color-sf-cream)] p-8 flex-[1.8] flex items-center justify-center">
+		<Image src={hackNight} alt="hack night" loading="eager" class="w-full" />
 	</div>
 </section>
-
-<style>
-	section {
-		margin-top: var(--pico-block-spacing-vertical);
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: stretch;
-		gap: 0;
-	}
-
-	.info {
-		--pico-color: var(--pico-contrast-inverse);
-		background: rgb(50, 50, 102);
-		text-align: center;
-		padding: var(--pico-block-spacing);
-		flex: 1.2;
-	}
-
-	.info a {
-		--pico-color: var(--pico-contrast-inverse);
-		--pico-underline: rgba(255, 255, 255, 0.35);
-		font-weight: bold;
-	}
-
-	.info a:hover {
-		--pico-underline: rgba(255, 255, 255, 0.9);
-	}
-
-	.info h2 {
-		--pico-color: var(--color-accent);
-		margin-bottom: calc(2 * var(--pico-typography-spacing-vertical));
-	}
-
-	.image {
-		padding: var(--pico-block-spacing);
-		background: #f7efde;
-		flex: 1.8;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	@media only screen and (max-width: 768px) {
-		section {
-			flex-direction: column;
-		}
-
-		.info {
-			padding-inline: calc(2 * var(--pico-block-spacing));
-		}
-	}
-</style>