HPR/hpr_generator
8
1
Fork 4
Code Issues 30 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update card flex layout and coloring

Browse Source 
Use the secondary background color in the card header and shadows.
This commit is contained in:
Roan Horning
2025-07-30 21:51:03 -04:00
parent 115d831c94
commit 6acaf1b28c
1 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
public_html/css/hpr.css
View File

@@ -43,6 +43,9 @@ https://creativecommons.org/publicdomain/
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem); --font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
--shadow-secondary-color: hsl(0, 0%, 30.2%);
--shadow-cards: var(--shadow-secondary-color);
/* screen breakpoints */ /* screen breakpoints */
--for-phone-only: 599px; --for-phone-only: 599px;
--for-tablet-portrait-up: 600px; --for-tablet-portrait-up: 600px;
@@ -250,8 +253,8 @@ article > p,
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1.0rem; gap: 1.0rem;
justify-content: space-between; justify-content: space-around;
justify-items: space-between; justify-items: space-around;
} }
#podcast_lane > .lane, #podcast_lane > .lane,
@@ -260,23 +263,39 @@ article > p,
justify-content: flex-start; justify-content: flex-start;
} }
.lane > article { .lane > article {
padding: 1.0rem;
/* Add shadows to create the "card" effect */ /* Add shadows to create the "card" effect */
border-top: thin solid hsl(190deg 48% 49% / 0.2); border-top: thin solid var(--shadow-cards);
border-left: thin solid hsl(190deg 48% 49% / 0.2); border-left: thin solid var(--shadow-cards);
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: box-shadow:
1px 2px 2px hsl(190deg 48% 49% / 0.2), 1px 2px 2px var(--shadow-cards),
2px 4px 4px hsl(190deg 48% 49% / 0.2); 2px 4px 4px var(--shadow-cards);
transition: 0.3s; transition: 0.3s;
width: max-content; flex: 1 0 100%;
flex: 1 0 50%; overflow-x: scroll;
overflow-y: scroll; padding-bottom: 1rem;
} }
.lane > article:hover { .lane > article:hover {
box-shadow: box-shadow:
4px 8px 8px hsl(190deg 48% 49% / 0.2), 4px 8px 8px var(--shadow-cards),
8px 16px 16px hsl(190deg 48% 49% / 0.2); 8px 16px 16px var(--shadow-cards);
}
.lane > article > * {
margin-left: 1rem;
margin-right: 1rem;
}
.lane > article > header {
background: var(--background-secondary);
padding: 1.5rem 1rem 1rem 1rem;
margin: 0;
font-weight: bold;
font-size: 1.45rem;
}
.lane > article > header a {
color: var(--link-secondary);
}
.lane > article > header a:hover {
color: var(--link-secondary-hover);
} }
a.lane-button { a.lane-button {
display: flex; display: flex;
@@ -402,6 +421,7 @@ fieldset > input {
body > header { body > header {
background-size: 200pt, cover; background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top; background-position: left 128pt top -12pt, left top;
justify-content: space-between;
} }
#tag_line { #tag_line {
text-align: center; text-align: center;
@@ -474,10 +494,19 @@ fieldset > input {
padding: 0.25rem 2rem; padding: 0.25rem 2rem;
} }
.lane > article { .lane > article {
flex-basis: 30%; max-height: 40vw;
/* max-width: 30%; */ overflow-y: scroll
}
.lane > article:nth-last-child(2),
.lane > article:last-child {
} }
#latest_lane.lane section > ul { #latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem; margin: 0.5rem 3rem 0 1rem;
} }
} }
@media (min-width: 900px) {
.lane > article {
flex-basis: 32%;
max-width: 32%;
}