inherentlee/beall-greenhouses-market
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update some hover and focus states, round them corners, add a wip banner

Browse Source
This commit is contained in:
Lee Cattarin
2025-11-18 09:16:08 -08:00
parent 3a60060f25
commit 68bf3414f7
2 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
css/main.css
View File

@ -44,6 +44,16 @@ main {
}
}
#wip {
background-color: light-dark(var(--color-dark), var(--color-light));
color: light-dark(var(--color-light), var(--color-dark));
margin: 1rem 0;
text-align: center;
padding: 1rem .5rem;
border: solid .25rem light-dark(var(--color-orange-light), var(--color-orange-dark));
border-radius: 1rem;
}
header img {
display: block;
max-height: 25vh;
@ -74,7 +84,20 @@ h2 {
a {
font-weight: bold;
text-decoration: solid underline .25rem;
text-decoration: solid underline .25rem light-dark(var(--color-orange-dark), var(--color-orange-light));
transition: text-decoration-thickness .5s;
margin: 0 .25rem;
}
a:hover {
text-decoration-thickness: .5rem;
}
a:focus {
text-decoration: none;
outline: solid .25rem light-dark(var(--color-orange-dark), var(--color-orange-light));
outline-offset: .1rem;
border-radius: .1rem;
}
#content p {
@ -90,30 +113,33 @@ a {
#artists {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-evenly;
}
.artist {
margin: .5rem 0 0 1.25rem;
}
.artist img {
max-height: 35vh;
max-width: 100%;
border-radius: 1rem;
}
@media (max-width: 650px) {
.artist {
margin-left: .625rem;
}
}
.artist img {
max-height: 35vh;
max-width: 100%;
}
@media (max-width: 650px) {
.artist img {
max-width: 100%;
}
}
.artist h3 {
text-align: center;
}
footer {
width: 95%;
margin: 0 auto;
@ -130,6 +156,10 @@ footer a {
text-decoration-color: light-dark(var(--color-orange-light), var(--color-orange-dark));
}
footer a:focus {
outline-color: light-dark(var(--color-orange-light), var(--color-orange-dark));
}
#contacts {
display: flex;
flex-wrap: wrap;

4
index.html
View File

@ -19,6 +19,8 @@
<body>
<div id="content">
<header>
<div id="wip"><p>under construction! information is incomplete and may be incorrect</p></div>
<img id="dark-logo" src="/img/dark-logo.png" alt="Linework icon depicting a sunrise or sunset with two clouds">
<img id="light-logo" src="/img/light-logo.png" alt="Linework icon depicting a sunrise or sunset with two clouds">
<h1>Solstice Market at the Beall Greenhouses</h1>
@ -28,7 +30,7 @@
<p></p>
<h2>When?</h2>
<p><time datetime="2025-12-21 10:00">Sunday, December 21st, 10am - 5pm</time>.</p>
<p><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>Where?</h2>
<p>Studios in the former cold storage facility at the old Beall Greenhouses: 18527 Beall Rd SW, Vashon, WA 98070</p>