zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

further redesign work

Browse Source 
logo font switch to always in my heart
font size increased for logo and motto
pride borders replaced with pride hearts
in header
This commit is contained in:
zepp 2025-02-27 02:36:44 -05:00
parent 4a000745de
commit 7159bc529c
10 changed files with 42 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/alwaysinmyheart.woff2 Normal file
View File

Binary file not shown.

BIN
public/pacifico.woff2
View File

Binary file not shown.

23
src/components/Footer.astro
View File

@ -1,12 +1,6 @@
---
const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const disabilityPrideBlack = "#595959";
const disabilityPrideRed = "#cf7280";
const disabilityPrideYellow = "#eede77";
const disabilityPrideWhite = "#e8e8e8";
const disabilityPrideBlue = "#7bc2e0";
const disabilityPrideGreen = "#3bb07d";
---
<footer>
@ -15,7 +9,7 @@ const disabilityPrideGreen = "#3bb07d";
</span>
</footer>
<style define:vars={{backgroundColor, backgroundColorNightMode, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
<style define:vars={{backgroundColor, backgroundColorNightMode}}>
footer {
background-color: var(--backgroundColor);
grid-row: 3/4;
@ -27,21 +21,6 @@ const disabilityPrideGreen = "#3bb07d";
gap: 0.75rem;
height: 10vh;
width: 100vw;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(
to right,
var(--disabilityPrideBlack) 0 35%,
var(--disabilityPrideRed) 35% 41%,
var(--disabilityPrideYellow) 41% 47%,
var(--disabilityPrideWhite) 47% 53%,
var(--disabilityPrideBlue) 53% 59%,
var(--disabilityPrideGreen) 59% 65%,
var(--disabilityPrideBlack) 65% 71%
);
font-family: system-ui;
font-size: 1.3rem;
letter-spacing: 0.05rem;

51
src/components/Header.astro
View File

@ -1,35 +1,35 @@
---
import Image from "astro/components/Image.astro";
import redHeartFlat from "../images/red_heart_flat.svg";
import redHeartFlat from "../images/Solid_red.svg";
import transPrideFlag from "../images/transgender-pride-flag.svg";
import biPrideFlag from "../images/Bisexual_Pride_Flag.svg";
import disabilityPrideFlag from "../images/Visually_Safe_Disability_Pride_Flag.svg";
const pageTitle = "emma's place";
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 id="top">
<span class="logo">
{pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" />
{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" 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}}>
<style define:vars={{backgroundColor, backgroundColorNightMode}}>
@font-face {
font-family: lato-regular;
src: url("/lato-regular.woff2");
}
@font-face {
font-family: pacifico;
src: url("/pacifico.woff2");
font-family: alwaysinmyheart;
src: url("/alwaysinmyheart.woff2");
}
header {
@ -43,36 +43,33 @@ const biPrideBlue = "#0038a8";
gap: 0.75rem;
height: 10vh;
width: 100vw;
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-bottom: 0.5rem;
}
.logo {
font-family: pacifico;
font-size: 1.35rem;
font-family: alwaysinmyheart;
font-size: 2.75rem;
letter-spacing: 0.1rem;
}
.motto {
font-family: lato-regular;
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
.header-heart {
height: 24px;
width: 24px;
vertical-align: sub;
.header-heart-svg {
height: 48px;
width: 48px;
margin: 0 0.1rem;
aspect-ratio: 1;
object-fit: cover;
mask:
radial-gradient(at 70% 31%,#000 29%,#0000 30%),
radial-gradient(at 30% 31%,#000 29%,#0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
clip-path: polygon(-41% 0,50% 95%, 141% 0);
vertical-align: text-bottom;
}
@media (prefers-color-scheme: dark) {

6
src/images/Bisexual_Pride_Flag.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 25 15">
<path fill="#0038a8" d="M0 0h25v15H0z"/>
<path fill="#9b4f96" d="M0 0h25v9H0z"/>
<path fill="#d60270" d="M0 0h25v6H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

3
src/images/Solid_red.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
<path d="M0,0h1v1H0" fill="#f00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 100 B

1
src/images/Visually_Safe_Disability_Pride_Flag.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 105.83333 79.374999"><g stroke-miterlimit="10" stroke-width=".351404"><path fill="#595959" stroke="#595959" d="M.17570207.1757243h105.47906v79.023575H.17570207z" data-name="Rectángulo 1"/><path fill="#cf7280" stroke="#cf7280" d="M.17570216 26.278054 38.639541 54.808757l.204448.151657L71.521741 79.19926h12.502784L.17570216 16.444015Z" data-name="Trazado 1"/><path fill="#eede77" stroke="#eede77" d="M.17570216 6.3746566V16.444015L84.024525 79.19926h13.047761z" data-name="Trazado 2"/><path fill="#e8e8e8" stroke="#e8e8e8" d="M5.7344491.17570207H.17570216V6.3746566L97.072286 79.19926h8.582474v-3.986289z" data-name="Trazado 3"/><path fill="#7bc2e0" stroke="#7bc2e0" d="M5.7344491.17570207H19.172482L105.58796 65.224394l.0668 9.988577z" data-name="Trazado 4"/><path fill="#3bb07d" stroke="#3bb07d" d="M19.172482.17570207h13.128625L105.65476 55.309561l-.0668 9.914833z" data-name="Trazado 5"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/images/red_heart.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 503 B

6
src/images/red_heart_flat.svg
View File

@ -1,6 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.99987 6.00001C10.6646 3.66763 14.4999 6.50001 15.9999 8.50001C17.4999 6.5 21.3351 3.66763 25.9999 6.00001C31.9999 8.99999 30.4998 16.5 25.9998 21C23.8041 23.1958 19.9371 27.0628 17.1087 29.2137C16.4552 29.7106 15.5614 29.6884 14.9226 29.1728C12.3299 27.08 8.16491 23.165 5.99987 21C1.49986 16.5 -0.000126839 8.99999 5.99987 6.00001Z" fill="#F8312F"/>
<path d="M15.9998 8.49998V11.5492C17.2695 8.86501 20.4252 5.28051 25.6578 5.83746C21.1482 3.80623 17.463 6.54908 15.9998 8.49998Z" fill="#CA0B4A"/>
<path d="M11.9456 5.53691C10.2614 4.95005 8.22499 4.88745 5.99987 6.00001C-0.000126839 8.99999 1.49986 16.5 5.99987 21C8.16491 23.165 12.3299 27.08 14.9226 29.1728C15.5614 29.6884 16.4552 29.7106 17.1087 29.2137C17.3629 29.0204 17.6255 28.8132 17.8945 28.5946C15.0398 26.4524 11.0335 23.0762 8.85898 21.1325C3.90218 16.702 2.24993 9.31788 8.85898 6.36425C9.93279 5.88435 10.9667 5.62654 11.9456 5.53691Z" fill="#CA0B4A"/>
<ellipse cx="23.4771" cy="12.5937" rx="2.83554" ry="4.78125" transform="rotate(30 23.4771 12.5937)" fill="#F37366"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

6
src/images/transgender-pride-flag.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480">
<rect fill="#5BCEFA" width="800" height="480" />
<rect fill="#F5A9B8" width="800" height="288" y="96" />
<rect fill="#FFF" width="800" height="96" y="192" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 273 B