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

Add maximum content width

Browse Source 
Help with readability of the website on large screens.
This commit is contained in:
Roan Horning
2025-08-31 23:42:44 -04:00
parent a8f4eea501
commit 7118a3da0a
2 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public_html/css/hpr.css
View File

@@ -50,6 +50,9 @@ https://creativecommons.org/publicdomain/
--shadow-main-header-color: hsl(190deg 48% 49% / 0.2); --shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
--shadow-secondary-color: hsl(0, 0%, 30.2%); --shadow-secondary-color: hsl(0, 0%, 30.2%);
--shadow-cards: var(--shadow-secondary-color); --shadow-cards: var(--shadow-secondary-color);
--content-max-width: 1080pt;
/* screen breakpoints */ /* screen breakpoints */
--for-phone-only: 599px; --for-phone-only: 599px;
--for-tablet-portrait-up: 600px; --for-tablet-portrait-up: 600px;
@@ -117,21 +120,26 @@ body {
padding: 0.25rem 0; padding: 0.25rem 0;
} }
body > header { body > header {
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-between;
padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem; padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
background-color: var(--banner-background-color); background-color: var(--banner-background-color);
background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png"); background-image: url("/images/main-header-background.png");
background-size: 59%, cover; background-size: cover;
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat;
background-position: right -15px top -20px, left top; background-position: left top;
color: var(--banner-text-primary); color: var(--banner-text-primary);
align-items: center; align-items: center;
border-top: var(--background-secondary) solid 1rem; border-top: var(--background-secondary) solid 1rem;
} }
body > header > * { body > header .bounding-box {
background: none;
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-between;
max-width: var(--content-max-width);
margin: 0 auto;
}
body > header .bounding-box > * {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1 1 auto; flex: 1 1 auto;
@@ -141,6 +149,9 @@ body > header > * {
body > main { body > main {
flex: 1 0 auto; flex: 1 0 auto;
padding: 0.25rem; padding: 0.25rem;
max-width: var(--content-max-width);
margin-left: auto;
margin-right: auto;
} }
body > footer { body > footer {
flex: 0 1 auto; flex: 0 1 auto;
@@ -151,6 +162,10 @@ body > footer {
text-align: center; text-align: center;
line-height: 1.25; line-height: 1.25;
} }
body > footer #copyright {
max-width: var(--content-max-width);
margin: 0 auto;
}
body > footer a { body > footer a {
color: var(--link-secondary); color: var(--link-secondary);
} }
@@ -372,6 +387,14 @@ a.lane-button img {
#title * { #title * {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1 1 auto;
background: none;
}
#title {
background-image: url("/images/hpr-splatter-logo.svg");
background-repeat: no-repeat;
background-size: 15rem;
background-position: left 8.5em top -2em;
} }
#title a { #title a {
color: var(--link-title-color); color: var(--link-title-color);
@@ -384,6 +407,7 @@ a.lane-button img {
letter-spacing: -0.65rem; letter-spacing: -0.65rem;
line-height: 0.75; line-height: 0.75;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
color: transparent;
} }
#title #site_acronym a { #title #site_acronym a {
text-decoration: none; text-decoration: none;
@@ -529,11 +553,13 @@ fieldset > table td input[type="radio"] {
border: 0; border: 0;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
body > header { body > header .bounding-box {
background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top;
justify-content: space-between; justify-content: space-between;
} }
#title {
/* background-size: 40%;
background-position: left 8.5em top -2em; */
}
#tag_line { #tag_line {
line-height: 1; line-height: 1;
} }

2
templates/page.tpl.html
View File

@@ -37,6 +37,7 @@
<hr class="no-css"> <hr class="no-css">
</div> </div>
<header role="banner"> <header role="banner">
<div class="bounding-box">
<hgroup id="title"> <hgroup id="title">
<h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1> <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
<p id="site_name"> <p id="site_name">
@@ -50,6 +51,7 @@
<p id="tag2">Sharing your ideas, projects, opinions since 2005</p> <p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
<p id="tag3">New episodes every weekday </p> <p id="tag3">New episodes every weekday </p>
</hgroup> </hgroup>
</div>
</header> </header>
<main id="main_content" role="main"> <main id="main_content" role="main">
<!--% INCLUDE $content %--> <!--% INCLUDE $content %-->