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-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 */
--for-phone-only: 599px;
--for-tablet-portrait-up: 600px;
@@ -250,8 +253,8 @@ article > p,
flex-direction: row;
flex-wrap: wrap;
gap: 1.0rem;
justify-content: space-between;
justify-items: space-between;
justify-content: space-around;
justify-items: space-around;
}
#podcast_lane > .lane,
@@ -260,23 +263,39 @@ article > p,
justify-content: flex-start;
}
.lane > article {
padding: 1.0rem;
/* Add shadows to create the "card" effect */
border-top: thin solid hsl(190deg 48% 49% / 0.2);
border-left: thin solid hsl(190deg 48% 49% / 0.2);
border-top: thin solid var(--shadow-cards);
border-left: thin solid var(--shadow-cards);
border-radius: 0.5rem;
box-shadow:
1px 2px 2px hsl(190deg 48% 49% / 0.2),
2px 4px 4px hsl(190deg 48% 49% / 0.2);
1px 2px 2px var(--shadow-cards),
2px 4px 4px var(--shadow-cards);
transition: 0.3s;
width: max-content;
flex: 1 0 50%;
overflow-y: scroll;
flex: 1 0 100%;
overflow-x: scroll;
padding-bottom: 1rem;
}
.lane > article:hover {
box-shadow:
4px 8px 8px hsl(190deg 48% 49% / 0.2),
8px 16px 16px hsl(190deg 48% 49% / 0.2);
4px 8px 8px var(--shadow-cards),
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 {
display: flex;
@@ -402,6 +421,7 @@ fieldset > input {
body > header {
background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top;
justify-content: space-between;
}
#tag_line {
text-align: center;
@@ -474,10 +494,19 @@ fieldset > input {
padding: 0.25rem 2rem;
}
.lane > article {
flex-basis: 30%;
/* max-width: 30%; */
max-height: 40vw;
overflow-y: scroll
}
.lane > article:nth-last-child(2),
.lane > article:last-child {
}
#latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem;
}
}
@media (min-width: 900px) {
.lane > article {
flex-basis: 32%;
max-width: 32%;
}