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 { header img {
display: block; display: block;
max-height: 25vh; max-height: 25vh;
@ -74,7 +84,20 @@ h2 {
a { a {
font-weight: bold; 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 { #content p {
@ -90,30 +113,33 @@ a {
#artists { #artists {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: space-evenly;
} }
.artist { .artist {
margin: .5rem 0 0 1.25rem; margin: .5rem 0 0 1.25rem;
} }
.artist img {
max-height: 35vh;
max-width: 100%;
border-radius: 1rem;
}
@media (max-width: 650px) { @media (max-width: 650px) {
.artist { .artist {
margin-left: .625rem; margin-left: .625rem;
} }
}
.artist img {
max-height: 35vh;
max-width: 100%;
}
@media (max-width: 650px) {
.artist img { .artist img {
max-width: 100%; max-width: 100%;
} }
} }
.artist h3 {
text-align: center;
}
footer { footer {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
@ -130,6 +156,10 @@ footer a {
text-decoration-color: light-dark(var(--color-orange-light), var(--color-orange-dark)); 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 { #contacts {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

4
index.html
View File

@ -19,6 +19,8 @@
<body> <body>
<div id="content"> <div id="content">
<header> <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="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"> <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> <h1>Solstice Market at the Beall Greenhouses</h1>
@ -28,7 +30,7 @@
<p></p> <p></p>
<h2>When?</h2> <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> <h2>Where?</h2>
<p>Studios in the former cold storage facility at the old Beall Greenhouses: 18527 Beall Rd SW, Vashon, WA 98070</p> <p>Studios in the former cold storage facility at the old Beall Greenhouses: 18527 Beall Rd SW, Vashon, WA 98070</p>