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

2
templates/page.tpl.html
View File

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