diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 166417e..a29edc6 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -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%; + } +