Format CSS for consistency

For larger screens constrain viewing width and growth of font-size, and margins to approximately corresponding sizes of the original layout. Prevent things from getting too large.

public_html/css/hpr.css

@@ -12,27 +12,46 @@ https://creativecommons.org/publicdomain/
  *		-- https://matthewjamestaylor.com/responsive-font-size
  *	- CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
  *		-- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
-*/ 
+*/
 
-html { 
-	margin: 0; 
-	padding: 0; 
+html {
+	margin: 0;
+	padding: 0;
 	display: block;
 }
 
-body { 
+body {
 	display: block;
-	background: #dfdfdf; 
+	background: #dfdfdf;
 	font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
-	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem); 
+	font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
 	margin: 0;
 	padding: 0;
 }
 
-div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
-  font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
-  color: #4D4D4D; /* HPR Grey */
-  background: white;
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+img,
+form,
+fieldset,
+input,
+textarea,
+blockquote {
+	font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
+	color: #4D4D4D; /* HPR Grey */
+	background: white;
 }
 
 h1 {
@@ -86,13 +105,13 @@ hr {
 }
 
 audio {
-	padding: .7em 0em .5em 0em; 
-	clear: both; 
-	position: relative; 
-	z-index:auto;
+	padding: .7em 0em .5em 0em;
+	clear: both;
+	position: relative;
+	z-index: auto;
 }
 
-.audcredit { 
+.audcredit {
 	font-size: 75%;
 	margin-bottom: 1em;
 }
@@ -105,278 +124,371 @@ p.meta span label {
 	font-weight: bold;
 }
 
-article > p,
-#maincontent > p {
+article>p,
+#maincontent>p {
 	line-height: 1.45;
 }
 
-article#previous_five_weeks > * {
+article#previous_five_weeks>* {
 	line-height: 1.35;
 	margin: 0;
 	padding: 0;
 }
 
-article#previous_five_weeks > h3 {
+article#previous_five_weeks>h3 {
 	margin: 1.5rem 0 0.5rem 0;
 }
 
 #container {
-	width: 100%;
-	max-width: 58em;
-	margin: auto;
+	max-width: 58rem;
+	margin: 0.25rem;
+	padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */
+	padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem);
 	overflow: hidden;
-	padding: .5em;
-	border: thin solid;
 	background: white;
+	border: thin solid #4D4D4D;
 }
 
 .shadow {
-  -moz-box-shadow:    2px 3px 6px 3px #675958;
-  -webkit-box-shadow: 2px 3px 6px 3px #675958;
-  box-shadow:         2px 3px 6px 3px #675958;}
-
-#hprlogo { 
-  display: block; 
-  position: relative; 
-  top: 0; 
-  left: 0; 
-  border: 0; 
-  margin: 0.75em;
-  float:left;
-}
-
-#hpr_banner { 
-  display: block; 
-  position: relative;
-  border: 0; 
-  margin: 0.75em;
-  float: left;
-}
-
-#hpr_banner h1 {margin: -.25em 0em -.5em 0em;}
-#hpr_banner h2 {font-size: 100%; font-weight: lighter; }
-#hpr_banner h3 {font-size: 90%; font-weight: lighter; }
-
-#accessible_menu {
-  font-size: small;
-}
-
-/* The main navigation menu */
-.menu {
-  background: #4D4D4D; /* HPR Grey */
-  text-align: Left;
-  clear:both; /* Forces the menu to appear after the HPR Header block */
-  padding: 0em 0em;
-  margin: 0em 0em;
-}
-
-.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
-  display: none;
-}
-
-#main_menu li a {display: block;}
-
-.menu ul li { padding: .25em 0em;}
-
-}
-
-.menu ul { /* The menu bar background across screen */
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  padding: 0 10px; /* Keeps sub menus to the left */
-  list-style: none;
-  position: relative;
-  margin: 0;
-  display: inline-table;
-}
-
-.menu ul:after { /* Forces the dropdown to be a block with non float */
-  content: ""; 
-  clear: both; 
-  display: block;
-}
-
-.menu ul li {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  float: left;
-  padding: .5em 1em;
-}
-
-.menu ul li a {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  display: block; 
-  text-decoration: none;
-}
-    
-.menu ul ul {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  padding: 0;
-  position: absolute; 
-  top: 100%;
-}
-
-.menu ul ul li {
-  background: #4D4D4D; /* HPR Grey */
-  color: white;
-  float: none; 
-  position: relative;
-}
-    
-.menu ul ul ul {
-  position: absolute; 
-  left: 100%; 
-  top:0;
-}
-
-
-hr {
-  background: #4D4D4D;  /* HPR Grey */
-  border: 0;
-  height: 0.25em;
-}
-
-/* The multi colum footer layout */
-
-#footer_page {
-  width:100%;
-}
-
-.column {
-  width:12%;
-  background-color: white;
-  color: #4D4D4D; /* HPR Grey */
-  float:left;
-  margin:0 10px;
-  display: block;
-}
-
-.column li {
-  list-style:none;
-  padding: .25em 0em;
-  font-size: 85%;
+	-moz-box-shadow:    2px 3px 6px 3px #675958;
+	-webkit-box-shadow: 2px 3px 6px 3px #675958;
+	box-shadow:         2px 3px 6px 3px #675958;
 }
 
 .thick_bar {
-  width:100%;
-  background-color: #4D4D4D; /* HPR Grey */
-  color: white;
-  float:left;   
-  clear: both;
-  height:1.5em;
-  padding: .5em 0em .5em 0em;
-  font-size: 1em;
-  margin: 1em 0em 1em 0em;
+	background-color: #4D4D4D;
+	color: white;
+	padding: 0.5rem;
+	margin: 1rem 0 1rem 0;
 }
 
-#more_info {margin: auto;}
-nav.column { display: block; padding: 0em 1em 0em 1em;}
-#copyright {
-  font-size: small;
-  width:100%;
-  float:left;   
+img#hprlogo {
+	max-width: 20vw;
+	padding-right: clamp(0.75rem, -0.25rem + 3vw, 1.5rem);
+	float: left;
+	margin-top: 1rem;
+	margin-bottom: clamp(0.75rem, -0.25rem + 2vw, 1.5rem);
 }
 
-article, #copyright p {
-  padding: 0 10px;
+#hpr_banner {
+	/* display: inline-block; */
+	border: 0;
+	margin: 0 0 0rem 0;
+	padding: 0;
 }
 
-audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
-.audcredit { font-size: 75%;margin-bottom: 1em;}
-h1.showtitle { font-size: 125%;}
-
-/* Full Index Page styling */
-#index_full h2.title {
-	font-weight: lighter;
-	margin-bottom: -.5em;
-	padding: .5em 0em 0em 0em; 
-	font-size: 110%;}
-
-#index_full p.meta {font-size: 85%;}
-
-#small {
-  font-size: small;
+#hpr_banner p {
+	margin: 0 0 0.5rem 0;
 }
 
-p.author { font-size: 85%;}
-p.shownotes { padding: .5em;}
-#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
-/* link styling */
-a:link {text-decoration: none;}
-
-table {
-    width:100%;
-}
-table, th, td {
-    border-collapse: collapse;
-    padding: 2px;
-    text-align: left;
-}
-table#t01, table#t01 th, table#t01 td {
-    border: 1px solid black;
-}
-table#t01 th, table#t01 td {
-    padding: 5px;
-    text-align: left;
-}
-table#t01 tr:nth-child(even) {
-    background-color: #eee;
-}
-table#t01 tr:nth-child(odd) {
-   background-color:#fff;
-}
-table#t01 th	{
-    background-color: #4D4D4D;
-    color: white;
+#hpr_banner h1#sitename {
+	font-size: clamp(1.44rem, -1rem + 3vw, 2rem);
+	letter-spacing: 0.06rem;
+	margin: 0;
+	padding: 0;
 }
 
-pre { /* Add background, border and scrollbar to <pre> */
-    background: #eee;
-    border: 1px solid #ddd;
-    overflow: auto;
-    clear: both;
+#hpr_banner h2 {
+	font-size: clamp(0.74rem, -1rem + 2vw, 1rem);
+	font-weight: 510;
+	margin: 0 0 1rem 0;
+	padding: 0;
 }
 
-table.hosts {
-	background: white
+#hpr_banner h3 {
+	font-size: 1rem;
+	font-weight: normal;
+	margin: 0 0 0.5rem 0;
+	padding: 0;
+}
+
+header>hr {
+	clear: both;
+}
+
+#accessible_menu {
+	font-size: smaller;
+}
+
+/* The main navigation menu */
+header>nav.menu {
+	display: block;
+	background-color: #4D4D4D; /* HPR Grey */
+	text-align: Left;
+	clear: both; /* Forces the menu to appear after the HPR Header block */
+	padding: 0;
+	margin: 0;
+}
+
+header>nav.menu ul {
+	margin: 0;
+	padding: 0.5rem;
+	background-color: inherit;
+	color: white;
+}
+
+header>nav.menu ul li {
+	display: inline-block;
+	background-color: inherit;
+	color: inherit;
+	line-height: 1.5;
+	margin: 0;
+	padding: 0;
+	padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
+}
+
+header>nav.menu ul li a {
+	color: white;
+	text-decoration: none;
+	display: block;
+	padding: 0.25rem 0;
+}
+
+header>nav.menu ul li a:hover {
+	border-bottom: thin solid white;
+	padding: 0.15rem 0;
+	-webkit-transition: 0.3s ease-in-out color;
+	-moz-transition: 0.3s ease-in-out color;
+	transition: 0.3s ease-in-out color;
+}
+
+header>nav.menu ul li a:visited {
+	color: #EDEDED;
+}
+
+a:active,
+header>nav.menu ul li a:active {
+	color: red;
+}
+
+pre {
+	/* Add background, border and scrollbar to <pre> */
+	background: #eee;
+	border: 1px solid #ddd;
+	overflow: auto;
+	clear: both;
+	padding: 0.5rem
+}
+
+pre code {
+	padding-right: 0.5rem;
+	font-size: 0.85rem;
+	line-height: 1;
 }
-table.hosts tr:nth-child(even) { background-color:#cccccc; }
-table.hosts tr:nth-child(odd) { background-color:white; }
-table.hosts tr td img { vertical-align:middle }
 
 pre.comment {
 	white-space: pre-wrap;
-	padding: 2px;
 	line-height: 1.2rem;
 }
 
-h3.title { margin: 1.25rem 0 0.75rem 0 }
-p.meta { margin: 0.25rem 0 }
-p.summary { margin: 0.25rem 0 }
-p.listen-in { margin-top: 0 }
+table.hosts {
+	font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem);
+	width: 100%;
+	background: white;
+	margin: 0 auto;
+	border-collapse: collapse;
+	display: inline-table;
 
-@media only screen and (max-width: 680px) { 
-	#container {width: 95%;}
-	img#hprlogo {float: left; max-width: 85px; padding: .35em;}
-	.column {width: 15%;}
-	h1 {font-size: 140%;}
-	h2 {font-size: 120%;}
-	h3 {font-size: 100%;}
-	nav.column { display: block; padding: 0em .25em 0em .25em;}
-	#footer_page li {font-size: 85%; padding: .5em .25em .5em .25em;}
-	footer p {font-size: 75%;}
-	audio {float: none; }
 }
 
-@media only screen and (max-width: 479px) { 
-	body {background: #ffffff; color: #4D4D4D; font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */}
-	li {font-size: 100%; padding: .75em 0em .75em 0em; margin-left: -.25em;}
-	img#hprlogo {float: left; max-width: 65px; padding: .35em;}
-	.column {width: auto;}
-	h1#sitename { clear: both;}
-	a:link {text-decoration: none;}
-	audio {padding: .7em 0em .5em 0em; width: 95%; max-width: 300px;}
-	.audcredit { font-size: 65%; margin-bottom: 1em;}
+table.hosts tr:nth-child(even) {
+	background-color: #cccccc;
+	border-bottom: thick solid white;
 }
+
+table.hosts tr:nth-child(odd) {
+	background-color: white;
+	border-bottom: thick solid white;
+}
+
+table.hosts tr td img {
+	vertical-align: middle;
+	max-height: 80px;
+}
+
+table.hosts th:first-child,
+table.hosts td:first-child {
+	min-width: 60px;
+	max-width: 80px;
+	text-align: left;
+}
+
+table.hosts th:nth-child(2),
+table.hosts td:nth-child(2) {
+	text-align: left;
+	padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
+}
+
+table.hosts th:nth-child(3),
+table.hosts td:nth-child(3),
+table.hosts th:nth-child(4),
+table.hosts td:nth-child(4) {
+	width: 10%;
+	padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
+}
+
+body>div>footer {
+	margin-top: 2rem;
+}
+
+footer #more_info nav.column {
+	clear: both;
+	font-size: 0.9rem;
+	margin-left: 0.5rem;
+}
+
+footer #more_info nav.column ul li {
+	float: left;
+	margin-right: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+footer #more_info nav.column h2 {
+	font-size: 1.35rem;
+	margin-top: 0.5rem;
+}
+
+footer h1.thick_bar {
+	clear: left;
+	font-size: 1.15rem;
+}
+
+footer #copyright {
+	font-size: smaller;
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+
+fieldset>table,
+fieldset>table thead,
+fieldset>table tbody,
+fieldset>table tr,
+fieldset>table th,
+fieldset>table td,
+fieldset>table td input,
+fieldset>table td textarea {
+	display: block;
+	font-size: 1rem;
+}
+
+fieldset>table {
+	width: calc(100vw + -16vw + -1rem);
+	max-width: 100%;
+}
+
+fieldset>table td input,
+fieldset>table td textarea {
+	width: calc(100vw + -16vw + -1.5rem);
+	max-width: 100%;
+	border: thin solid #DFDFDF;
+	margin-bottom: 0.5rem;
+	padding: 0.5rem;
+}
+
+fieldset>table td select {
+	margin-bottom: 0.5rem;
+	padding: 0.25rem;
+}
+
+fieldset>table td input[type="radio"] {
+	display: initial;
+	width: initial;
+	margin-bottom: 0.5rem;
+}
+
+fieldset>input {
+	background: #4D4D4D;
+	color: white;
+	font-weight: 600;
+	padding: 0.5rem;
+	border: thin solid #DFDFDF;
+	border-radius: 0.2rem;
+}
+
+@media only screen and (min-width: 58rem) {
+	#container {
+		margin: 0.5rem auto;
+	}
+
+	.shadow {
+		-moz-box-shadow:    1px 2px 5px 2px #675958;
+		-webkit-box-shadow: 1px 2px 5px 2px #675958;
+		box-shadow:         1px 2px 5px 2px #675958;
+	}
+
+	img#hprlogo {
+		margin-bottom: 1.5rem;
+	}
+
+	#hpr_banner {
+		float: left;
+	}
+
+	#hpr_banner h1#sitename {
+		font-size: 2rem;
+	}
+
+	#hpr_banner h2 {
+		font-size: 1rem;
+	}
+
+	header>hr {
+		clear: right;
+	}
+
+	footer #more_info nav.column {
+		clear: none;
+		float: left;
+		width: 19.5%;
+		margin-left: 0;
+	}
+
+	footer #more_info nav.column:first-child {
+		margin-left: 0.5rem;
+	}
+
+	footer #more_info nav.column ul li {
+		float: none;
+		margin-bottom: 0.5rem;
+	}
+
+	fieldset>table,
+	fieldset>table thead,
+	fieldset>table tbody,
+	fieldset>table tr,
+	fieldset>table th,
+	fieldset>table td,
+	fieldset>table td input,
+	fieldset>table td textarea {
+		display: revert;
+		width: revert;
+	}
+
+	fieldset>table tr {
+		vertical-align: baseline;
+	}
+
+	fieldset>table tr:nth-child(3) {
+		vertical-align: top;
+	}
+
+	fieldset>table tr:nth-child(3) td:first-child {
+		padding-top: 0.5rem;
+	}
+
+	fieldset>table tr:nth-last-child(3) td:first-child {
+		padding-top: 1rem;
+	}
+
+	fieldset>table tr:nth-last-child(2) {
+		vertical-align: top;
+	}
+
+	fieldset>table tr:nth-last-child(2) td:first-child {
+		padding-top: 0.75rem;
+	}
+
+	fieldset>table td input[type="radio"] {
+		margin-top: 1.5rem;
+	}
+}