rho_n/hpr_generator_dev
1
0
Fork 0
forked from HPR/hpr_generator
Code Pull Requests Activity

Intial card layout design

Browse Source 
Format episodes, series, syndication pages with card format.
This commit is contained in:
Roan Horning
2025-07-24 22:18:56 -04:00
parent 8e2fb783b6
commit 38d81cedda
4 changed files with 65 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public_html/css/hpr.css
View File

@@ -249,9 +249,35 @@ article > p,
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
gap: 1.0rem;
justify-content: space-between;
justify-items: space-between;
}
#podcast_lane > .lane,
#project_lane > .lane,
#latest_lane.lane {
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-radius: 0.5rem;
box-shadow:
1px 2px 2px hsl(190deg 48% 49% / 0.2),
2px 4px 4px hsl(190deg 48% 49% / 0.2);
transition: 0.3s;
width: max-content;
flex: 1 0 50%;
overflow-y: scroll;
}
.lane > article:hover {
box-shadow:
4px 8px 8px hsl(190deg 48% 49% / 0.2),
8px 16px 16px hsl(190deg 48% 49% / 0.2);
}
a.lane-button {
display: flex;
flex-direction: column;
@@ -369,7 +395,10 @@ fieldset > input {
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
}
@media (min-width: 900px) {
.no-css {
display: none;
}
@media (min-width: 600px) {
body > header {
background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top;
@@ -395,9 +424,7 @@ fieldset > input {
}
#qr_code {
text-align: center;
}
#qr_code > img {
max-height: 195px;
max-width: 195px;
}
fieldset>table,
fieldset>table thead,
@@ -446,4 +473,11 @@ fieldset > input {
body > main {
padding: 0.25rem 2rem;
}
.lane > article {
flex-basis: 30%;
/* max-width: 30%; */
}
#latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem;
}
}