barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #36 from barrett-ruth/feat/death-formatting

Browse source 
improve death stlying
This commit is contained in:
Barrett Ruth 2025-12-30 15:58:57 -06:00 • committed by GitHub
commit 10cfafce65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/pages/death.astro
View file

@ -1,24 +1,20 @@
--- ---
import BaseLayout from "../layouts/BaseLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
const title = "my father"; const title = "my father";
--- ---
<BaseLayout title={title} useHeader={false}> <BaseLayout title={title} useHeader={false}>
<div class="death-container"> <div class="death-container">
<img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" /> <img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" />
<div id="tribute-text" class="tribute"> <div id="tribute-text" class="tribute">
rip philip matthew ruth<br /> rip philip matthew ruth<br />
february 8, 1967 – c. december 2, 2025 february 8, 1967 – c. december 2, 2025
</div> </div>
<div class="credit"> <div class="credit">
gary wray<br /> gary wray<br />
<em>waiting in line</em>, 2021 <em>waiting in line</em>, 2021
</div> </div>
</div> </div>
<style> <style>
html, html,
body { body {
@ -28,37 +24,45 @@ const title = "my father";
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: black; background: black;
color: white !important;
} }
.death-container { .death-container {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr 1fr;
} }
img { img {
grid-row: 1 / -1;
grid-column: 1 / -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
.tribute { .tribute {
position: fixed; grid-row: 2;
bottom: 1.5rem; grid-column: 2;
right: 1.5rem; justify-self: end;
font-size: 3em; align-self: end;
padding: 1.5rem;
font-size: clamp(1.5rem, 4vmin, 3em);
z-index: 10; z-index: 10;
text-align: right; text-align: right;
color: white;
} }
.credit { .credit {
position: fixed; grid-row: 2;
bottom: 1.5rem; grid-column: 1;
left: 1.5rem; justify-self: start;
align-self: end;
padding: 1.5rem;
z-index: 10; z-index: 10;
font-size: 2em; font-size: clamp(1.2rem, 3vmin, 2em);
text-align: left; text-align: left;
color: white;
} }
</style> </style>
</BaseLayout> </BaseLayout>