zepp
ce4cdfb0a1
adjust height and width to 24px adjust vertical-align to sub to align with text in header
82 lines
2.0 KiB
Plaintext
82 lines
2.0 KiB
Plaintext
---
|
|
import Image from "astro/components/Image.astro";
|
|
import redHeartFlat from "../images/red_heart_flat.svg";
|
|
|
|
const pageTitle = "emma's place";
|
|
const motto = "a celebration of self-expression through the personal web";
|
|
|
|
const backgroundColor = "#ffd4de";
|
|
const backgroundColorNightMode = "#240046";
|
|
const biPridePink = "#d60270";
|
|
const biPridePurple = "#9b4f96";
|
|
const biPrideBlue = "#0038a8";
|
|
---
|
|
|
|
<header>
|
|
<span class="logo">
|
|
{pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" />
|
|
</span>
|
|
<span class="motto">
|
|
{motto}
|
|
</span>
|
|
</header>
|
|
|
|
<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor, backgroundColorNightMode}}>
|
|
@font-face {
|
|
font-family: lato-regular;
|
|
src: url("/lato-regular.woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: pacifico;
|
|
src: url("/pacifico.woff2");
|
|
}
|
|
|
|
header {
|
|
background-color: var(--backgroundColor);
|
|
grid-row: 1/2;
|
|
grid-column: 1/3;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
height: 6vh;
|
|
width: 80vw;
|
|
border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
border-bottom: 10px solid;
|
|
border-image-slice: 1;
|
|
border-width: 5px;
|
|
border-image-source: linear-gradient(
|
|
to right,
|
|
var(--biPridePink) 0 33%,
|
|
var(--biPridePurple) 33% 66%,
|
|
var(--biPrideBlue) 66%
|
|
);
|
|
font-size: 1.4rem;
|
|
margin-top: 0.43rem;
|
|
}
|
|
|
|
.logo {
|
|
font-family: pacifico;
|
|
font-size: 1.35rem;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
|
|
.motto {
|
|
font-family: lato-regular;
|
|
letter-spacing: 0.05rem;
|
|
}
|
|
|
|
.header-heart {
|
|
height: 24px;
|
|
width: 24px;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
header {
|
|
background-color: var(--backgroundColorNightMode);
|
|
}
|
|
</style> |