Skip to content

Commit

Permalink
feat: add badge front (#112)
Browse files Browse the repository at this point in the history 
## Overview

Adds:

- [ ] `/badge/back`: waiting on sponsor finalization
- [x] `/badge/front`
  • Loading branch information
@JoshuaKGoldberg
JoshuaKGoldberg authored Sep 9, 2024
1 parent b521151 commit b6f3e5e
Show file tree
Hide file tree
Showing 10 changed files with 444 additions and 169 deletions.
0 src/assets/squiggle-logo.svg → src/assets/squiggle-logo-red.svg
View file
File renamed without changes
13 changes: 13 additions & 0 deletions src/assets/squiggle-logo-yellow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 34 additions & 29 deletions src/components/DeepBlueSea.astro
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,64 @@
---
import SquiggleWave from "./SquiggleWave.astro";
import SquiggleWavesBackdrop from "./SquiggleWavesBackdrop.astro";
const { class: className, ...rest } = Astro.props;
interface Props {
class?: string;
light?: "bottom" | "top";
unmasked?: boolean;
}
const { class: className, light, unmasked, ...rest } = Astro.props;
---

<div class:list={["deepBlueSea", className]} id="home" {...rest}>
<div
class:list={[
"deep-blue-sea",
light === "top" ? "deep-blue-sea-top" : "deep-blue-sea-bottom",
className,
]}
id="home"
{...rest}
>
<slot name="toggle" />
<div class="squiggles">
<SquiggleWave left={-5} scale={0.5} top={5} />
<SquiggleWave left={20} scale={0.5} top={5} />
<SquiggleWave left={45} scale={0.5} top={5} />
<SquiggleWave left={70} scale={0.5} top={5} />
<SquiggleWave left={95} scale={0.5} top={5} />
<SquiggleWave left={-10} scale={0.65} top={30} />
<SquiggleWave left={15} scale={0.65} top={30} />
<SquiggleWave left={40} scale={0.65} top={30} />
<SquiggleWave left={65} scale={0.65} top={30} />
<SquiggleWave left={90} scale={0.65} top={30} />
<SquiggleWave left={-15} scale={0.85} top={55} />
<SquiggleWave left={10} scale={0.85} top={55} />
<SquiggleWave left={35} scale={0.85} top={55} />
<SquiggleWave left={60} scale={0.85} top={55} />
<SquiggleWave left={85} scale={0.85} top={55} />
<SquiggleWave left={-20} scale={1} top={85} />
<SquiggleWave left={5} scale={1} top={85} />
<SquiggleWave left={30} scale={1} top={85} />
<SquiggleWave left={55} scale={1} top={85} />
<SquiggleWave left={80} scale={1} top={85} />
<div class:list={["squiggles", unmasked && "squiggles-unmasked"]}>
<SquiggleWavesBackdrop />
</div>
<slot />
<slot name="waves" />
</div>

<style>
.deepBlueSea {
.deep-blue-sea {
overflow: hidden;
position: relative;
text-align: center;
}

.deep-blue-sea-bottom {
background: linear-gradient(
180deg,
var(--colorHeroShadow) 0%,
#156283 100%
);
overflow: hidden;
position: relative;
text-align: center;
}

.deep-blue-sea-top {
background: linear-gradient(180deg, #104f69 0%, var(--colorHeroShadow) 90%);
}

.squiggles {
bottom: 0;
left: 0;
mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
position: absolute;
right: 0;
top: 0;
user-select: none;
}

.squiggles:not(.squiggles-unmasked) {
mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
}

.squiggle {
position: absolute;
}
Expand Down
147 changes: 8 additions & 139 deletions src/components/HeroName.astro
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
import { Image } from "astro:assets";
import squiggleLogo from "~/assets/squiggle-logo.svg";
import Heading from "./Heading.astro";
import HeroNameDetails from "./HeroNameDetails.astro";
import HeroNameHeading from "./HeroNameHeading.astro";
interface Props {
align: "center" | "left";
Expand All @@ -12,35 +10,21 @@ interface Props {
size?: "normal" | "small";
}
const { class: className, ...rest } = Astro.props;
const { class: className, align, color, level, size, ...rest } = Astro.props;
---

<div
class:list={[
"hero-name",
Astro.props.align === "left" ? "hero-name-left" : "hero-name-center",
Astro.props.color === "inverted"
? "hero-name-inverted"
: "hero-name-inherited",
Astro.props.size === "small" ? "hero-name-small" : "hero-name-normal",
align === "left" ? "hero-name-left" : "hero-name-center",
color === "inverted" ? "hero-name-inverted" : "hero-name-inherited",
size === "small" ? "hero-name-small" : "hero-name-normal",
className,
]}
{...rest}
>
<Heading class="hero-heading" level={Astro.props.level}>
<span class="heading-text">
<span class="word">
<span class="word-contents">Squiggle</span>
<Image alt="" class="squiggle" src={squiggleLogo} />
</span><span class="word"><span class="word-contents">Conf</span></span>
</span>
</Heading>

<p class="details">
<span class="together">October 3-4, 2024</span>
<span class="dot">·</span>
<span class="together">Boston New England Aquarium</span>
</p>
<HeroNameHeading align={align} color={color} level={level} size={size} />
<HeroNameDetails align={align} color={color} size={size} />
</div>

<style>
Expand All @@ -51,133 +35,18 @@ const { class: className, ...rest } = Astro.props;
text-align: center;
}

.hero-name.hero-name-inverted {
--colorHeadingText: var(--colorOffWhite);
--colorShadow: rgba(0, 0, 0, 0.35);
}

.hero-name.hero-name-inherited {
--colorHeadingText: inherit;
--colorShadow: rgba(240, 240, 255, 0.35);
}

html.dark .hero-name {
--colorShadow: transparent;
}

.hero-name.hero-name-normal {
--fontSizeHeroHeading: var(--fontSizeHero);
--fontSizeDetails: var(--fontSizeH3);
--marginDetails: 2rem;
}

.hero-name.hero-name-small {
--fontSizeHeroHeading: var(--fontSizeHeroSmall);
--fontSizeDetails: var(--fontSizeH4);
--marginDetails: 0.75rem;
}

.hero-heading {
box-sizing: border-box;
display: inline-flex;
color: var(--colorHeadingText);
flex-direction: column;
font-size: var(--fontSizeHeroHeading);
overflow: hidden;
padding: 0.75rem 0 0.5rem;
position: relative;
}

.hero-name-center .hero-heading {
align-items: center;
}

.word {
display: inline-block;
position: relative;
}

.word + .word {
margin-top: 1rem;
}

.squiggle {
bottom: -0.5rem;
left: 0;
position: absolute;
user-select: none;
width: 100%;
}

.heading-text {
position: relative;
text-shadow: 0 3px 7px var(--colorShadow);
z-index: 1;
}

.details {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
font-weight: 700;
font-size: var(--fontSizeDetails);
font-family: var(--fontFamilyHeading);
letter-spacing: var(--letterSpacingHeading);
text-shadow: 0 3px 7px var(--colorShadow);
}

.hero-name-center .details {
text-align: center;
}

.hero-name-inverted .details {
color: #cae6ff;
}

.together {
display: inline-block;
}

.dot {
display: none;
}

.word-contents {
position: relative;
z-index: 1;
}

@media (min-width: 700px) {
.details {
margin-top: var(--marginDetails);
}

.word + .word {
margin-top: 0;
}
}

@media (min-width: 1017px) {
.details {
flex-direction: row;
}

.word + .word {
margin-top: 0;
}

.word-contents {
position: relative;
}

.hero-name-left {
align-items: flex-start;
text-align: left;
}

.dot {
display: initial;
}
}
</style>
91 changes: 91 additions & 0 deletions src/components/HeroNameDetails.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
interface Props {
align: "center" | "left";
color: "inherit" | "inverted";
class?: string;
direction?: "horizontal" | "vertical";
size?: "large" | "normal" | "small";
}
const {
align,
class: className,
color,
direction,
size,
...rest
} = Astro.props;
---

<p
class:list={[
"details",
className,
align === "center" && "details-center",
color === "inverted" && "details-inverted",
direction === "vertical" ? "details-vertical" : "details-horizontal",
`details-${size}`,
]}
{...rest}
>
<span class="together">October 3-4, 2024</span>
<span class="dot">·</span>
<span class="together">Boston New England Aquarium</span>
</p>

<style>
.details {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
font-weight: 700;
font-size: var(--fontSizeDetails);
font-family: var(--fontFamilyHeading);
letter-spacing: var(--letterSpacingHeading);
text-shadow: 0 3px 7px var(--colorShadow);
}

.details-large {
--fontSizeDetails: 3rem;
--marginDetails: 1.5rem;
}

.details-normal {
--fontSizeDetails: var(--fontSizeH3);
--marginDetails: 2rem;
}

.details-small {
--fontSizeDetails: var(--fontSizeH4);
--marginDetails: 0.75rem;
}

.details-center {
text-align: center;
}

.details-inverted {
color: #cae6ff;
}

.dot {
display: none;
}

@media (min-width: 700px) {
.details {
margin-top: var(--marginDetails);
}
}

@media (min-width: 1017px) {
.details-horizontal {
flex-direction: row;
}

.details-horizontal .dot {
display: initial;
}
}
</style>
Loading

0 comments on commit b6f3e5e

Please sign in to comment.