badblocks/personal-site
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename content slot to main, remove h1 from header for better
Some checks failed
Build And Deploy / build-and-deploy (push) Has been cancelled
Details

Browse source 
accessibility, and unify SVG fill color to #fff

Update BaseLayout to use a header <p> for the website title, rename the
main slot/id to
"main", and update all pages to match. Add CSS rule svg { fill:
currentColor }
and size header > p the same as h1. Fix a minor comment typo.
This commit is contained in:
badblocks 2026-03-22 13:56:24 -07:00
parent 75a413621d
commit da4925753d
No known key found for this signature in database
8 changed files with 22 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/mit.svg
View file

@ -1,11 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img">
<defs> <title>MIT License</title>
<style> <desc>MIT License logo</desc>
path { <path fill="#fff" d="M689.414 457.075l57.233-.196.837 243.787-57.233.197zM306.561 329.641h57.235v242.948h-57.235zm127.337-.775l57.235-.13.838 371.125-57.235.13zm-255.515-.064h57.237v371.963h-57.237z"/>
fill: #ffffff; <path fill="#fff" d="M512.005 0C228.872 0-1.475 229.68-1.48 511.996c-.002 282.316 230.343 512 513.474 512.004 283.133 0 513.482-229.68 513.484-511.996v-.008C1025.477 229.684 795.134.004 512.005 0zM963.56 512v.004c-.002 248.172-202.573 450.075-451.563 450.075-248.992-.004-451.559-201.91-451.555-450.083.003-248.172 202.573-450.075 451.563-450.075 248.986.004 451.553 201.907 451.555 450.075z"/>
} <path fill="#fff" d="M678.541 396.794l.233-57.234 206.924.84-.232 57.233zm-116.467 60.183h57.235v242.949h-57.235zm-.834-127.872l57.231-.602.837 79.582-57.232.602z"/>
</style>
</defs>
<path d="M689.414 457.075l57.233-.196.837 243.787-57.233.197zM306.561 329.641h57.235v242.948h-57.235zm127.337-.775l57.235-.13.838 371.125-57.235.13zm-255.515-.064h57.237v371.963h-57.237z"/><path d="M512.005 0C228.872 0-1.475 229.68-1.48 511.996c-.002 282.316 230.343 512 513.474 512.004 283.133 0 513.482-229.68 513.484-511.996v-.008C1025.477 229.684 795.134.004 512.005 0zM963.56 512v.004c-.002 248.172-202.573 450.075-451.563 450.075-248.992-.004-451.559-201.91-451.555-450.083.003-248.172 202.573-450.075 451.563-450.075 248.986.004 451.553 201.907 451.555 450.075z"/>
<path d="M678.541 396.794l.233-57.234 206.924.84-.232 57.233zm-116.467 60.183h57.235v242.949h-57.235zm-.834-127.872l57.231-.602.837 79.582-57.232.602z"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 901 B

After

Width:  |  Height:  |  Size: 913 B

Before After
Before After

9
public/theme.css
View file

@ -4,7 +4,8 @@ h1.giga {
h1.mega { h1.mega {
font-size: var(--pt-canon); font-size: var(--pt-canon);
} }
h1 { h1,
header > p {
font-size: var(--pt-double-great-primer); font-size: var(--pt-double-great-primer);
} }
h2 { h2 {
@ -417,7 +418,7 @@ textarea,
display: grid; display: grid;
} }
.textarea-wrapper::after { .textarea-wrapper::after {
content: attr(data-replicated-value) " "; /* Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " "; /* Needed to prevent jumpy behavior */
visibility: hidden; visibility: hidden;
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -463,6 +464,10 @@ input[type="reset"]:active:enabled {
background-color: var(--color-accent-bright); background-color: var(--color-accent-bright);
} }
svg {
fill: currentColor;
}
/*input[type="checkbox"], /*input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
appearance: none; appearance: none;

10
src/layouts/BaseLayout.astro
View file

@ -18,8 +18,8 @@
</head> </head>
<body> <body>
<iframe hidden="" name="htmz" onload="window.htmz(this)"></iframe> <iframe hidden="" name="htmz" onload="window.htmz(this)"></iframe>
<header> <header id="header">
<h1>badblocks.dev</h1> <p>badblocks.dev</p>
<nav> <nav>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
@ -28,12 +28,12 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main id="content"> <main id="main">
<slot name="content" /> <slot name="main" />
</main> </main>
<footer> <footer>
<p> <p>
<a href="https://opensource.org/license/mit" target="_blank"> <a href="/license">
<img src="/mit.svg" title="MIT Licensed" alt="MIT License Logo" width="24" height="24" role="img"> <img src="/mit.svg" title="MIT Licensed" alt="MIT License Logo" width="24" height="24" role="img">
</a> </a>
<br> <br>

2
src/pages/article.astro
View file

@ -29,7 +29,7 @@ import Layout from "@layouts/BaseLayout.astro";
justify-self: center; justify-self: center;
} }
</style> </style>
<Fragment slot="content"> <Fragment slot="main">
<h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1>
<p> <p>
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,

2
src/pages/contact.astro
View file

@ -146,7 +146,7 @@ const msgValue = pickValue("msg");
} }
</style> </style>
</Fragment> </Fragment>
<Fragment slot="content"> <Fragment slot="main">
<h2>Contact</h2> <h2>Contact</h2>
{ {
(nextAction != "complete" && ( (nextAction != "complete" && (

2
src/pages/index.astro
View file

@ -4,7 +4,7 @@ import Layout from "@layouts/BaseLayout.astro";
<Layout> <Layout>
<title slot="head">Home</title> <title slot="head">Home</title>
<Fragment slot="content"> <Fragment slot="main">
<article id="hero"> <article id="hero">
<h2>Under Construction</h2> <h2>Under Construction</h2>
<p>Pardon the dust!</p> <p>Pardon the dust!</p>

2
src/pages/parallax.astro
View file

@ -130,7 +130,7 @@ import Layout from "@layouts/BaseLayout.astro";
} }
} }
</style> </style>
<Fragment slot="content"> <Fragment slot="main">
<article id="hero" x-data="{ theme: 'winternight'}"> <article id="hero" x-data="{ theme: 'winternight'}">
<div class="parallax-container" :class="'parallax-theme-' + theme"> <div class="parallax-container" :class="'parallax-theme-' + theme">
<div class="layer layer-0"></div> <div class="layer layer-0"></div>

2
src/pages/tools.astro
View file

@ -13,7 +13,7 @@ import Layout from "@layouts/BaseLayout.astro";
margin: 2rem auto 0; margin: 2rem auto 0;
} }
</style> </style>
<Fragment slot="content"> <Fragment slot="main">
<section class="tools" id="tools"> <section class="tools" id="tools">
<h2>Tools</h2> <h2>Tools</h2>
<div class="tools-grid"> <div class="tools-grid">