diff --git a/hub/css/bebas/BebasNeue.otf b/hub/css/bebas/BebasNeue.otf new file mode 100644 index 0000000..214e007 Binary files /dev/null and b/hub/css/bebas/BebasNeue.otf differ diff --git a/hub/css/bebas/BebasNeue.woff b/hub/css/bebas/BebasNeue.woff new file mode 100644 index 0000000..ff28949 Binary files /dev/null and b/hub/css/bebas/BebasNeue.woff differ diff --git a/hub/css/bebas/BebasNeue.woff2 b/hub/css/bebas/BebasNeue.woff2 new file mode 100644 index 0000000..1e9e13c Binary files /dev/null and b/hub/css/bebas/BebasNeue.woff2 differ diff --git a/hub/css/bebas/BebasNeueLight.otf b/hub/css/bebas/BebasNeueLight.otf new file mode 100644 index 0000000..01429c4 Binary files /dev/null and b/hub/css/bebas/BebasNeueLight.otf differ diff --git a/hub/css/bebas/OFL.txt b/hub/css/bebas/OFL.txt new file mode 100644 index 0000000..2df4406 --- /dev/null +++ b/hub/css/bebas/OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/hub/css/hpr.css b/hub/css/hpr.css new file mode 100644 index 0000000..de9e50f --- /dev/null +++ b/hub/css/hpr.css @@ -0,0 +1,830 @@ +@charset "utf-8"; +/* Website design Copyright Ken Fallon - Released into the public domain/ + +https://creativecommons.org/publicdomain/ + +*/ +/* + * See the following for the modern CSS responsive design techniques used in this file: + * - MDN web docs: Responsive design + * -- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design + * - Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint) + * -- https://matthewjamestaylor.com/responsive-font-size + * - CSS-Tricks: Linearly Scale font-size with CSS c + * #welcome > p { + * font-size: 1.25rem; + * font-weight: 450; + * }lamp() Based on the Viewport + * -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ +*/ + +@font-face { + font-family: "BebasNeue"; + src: + local("BEBAS NEUE"), + url("/css/bebas/BebasNeue.woff2") format("woff2"), + url("/css/bebas/BebasNeue.woff") format("woff"), + url("/css/bebas/BebasNeue.otf") format("opentype"); +} +@font-face { + font-family: "PatrickHand"; + src: + local("Patrick Hand"), + url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"), + url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"), + url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype"); +} +:root { + --background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */; + --text-primary: #4d4d4d; /* HPR Grey */ + --banner-text-primary: #000000; + --banner-background-color: #40a5b9; + /* --background-secondary: #4d4d4d; */ + --background-secondary: #00003e; + --text-secondary: #dfdfdf; + --link-primary: #004852 /*#154a60*/; + --link-primary-hover: #b54c08/*#f8961e*/; + --link-secondary: #a8f8ff; + --link-secondary-hover: #f9e9c2; + --link-title-color: #00003e; + --primary-content-line-height: 1.45; + + --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; + --font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem); + --font-size-emphasis: clamp(1.1rem, 15px + 0.3vw, 1.25rem); + + --logo-font-family: var(--font-family-hpr); + --logo-font-weight: bolder; + --logo-font-size: 7.5rem; + --logo-letter-spacing: -0.65rem; + --logo-line-height: 0.75; + --logo-margin: 0 0 0.25rem 0; + + --tagline-font-family:"BebasNeue", sans-serif; + --lane-button-font-family: "PatrickHand", var(--font-family-hpr); + --lane-button-border: #80b4c0; + --input-border-primary: #4d4d4d; + + --link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); + + + --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; + --for-tablet-landscape-up: 900px; + --for-desktop-up: 1200px; + --for-big-desktop-up: 1800px; + + --default-header-x-font-weight: bold; + --default-header-x-margin: 1.25rem 0 0.75rem 0; + --default-header-1-font-size: 1.5rem; + --default-header-2-font-size: 1.45rem; + --default-header-3-font-size: 1.25rem; + --default-header-4-font-size: 1.15rem; +} + +html { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; +} +body { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-color: var(--background-primary); + color: var(--text-primary); + font-size: 1rem; /* fallback for browsers that don't support the clamp function) */ + font-size: var(--font-size-default); + font-family: var(--font-family-hpr); + margin: 0; + padding: 0; + min-height: 100vh; +} +#top_navigation { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + background-color: var(--background-secondary); + color: var(--text-secondary); + padding: 0.5rem; +} +#top_navigation > nav a { + color: var(--link-secondary); +} +#top_navigation > nav a:hover { + color: var(--link-secondary-hover); +} +#top_navigation > nav menu { + background-color: inherit; + color: inherit; + margin: 0; + padding: 0.25rem; +} +#top_navigation > nav menu li { + display: inline-block; + background-color: inherit; + color: inherit; + line-height: 1.0; + margin: 0; + padding: 0; + padding-right: var(--link-spacing-horizontal); +} +#top_navigation > nav menu li a { + padding: 0.25rem 0; +} +body > header { + padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem; + background-color: var(--banner-background-color); + 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 .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; + padding: 0.5rem; + background-image: none; +} +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; + background-color: var(--background-secondary); + color: var(--text-secondary); + padding: clamp(0.25rem, calc(100vw - var(--for-tablet-portrait-up) + 0.5rem), 0.5rem); + margin-top: 0.5rem; + 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); +} +body > footer a:hover { + color: var(--link-secondary-hover); +} +div, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +img, +form, +fieldset, +input, +textarea, +blockquote { + font-family: inherit; + color: inherit; + background: inherit; +} + +h1 { + font-size: var(--default-header-1-font-size); + margin: var(--default-header-x-margin); +} + +h2, +article * h1, +section > header:first-child { + font-size: var(--default-header-2-font-size); + margin: var(--default-header-x-margin); +} + +h3, +article * h2 { + font-size: var(--default-header-3-font-size); + margin: var(--default-header-x-margin); +} + +h4, +article * h3 { + font-size: var(--default-header-4-font-size); + margin: var(--default-header-x-margin); +} + +img { + max-width: 100%; + height: auto; +} + +dl, ul { + padding-left: 1.15rem; +} + +li { + line-height: 1.25; + margin-bottom: 0.25rem; +} +li:last-child { + margin-bottom: 0.25rem; +} + +dt, dd { + line-height: 1.25; +} + +dt { + display: list-item; + list-style-type: disc; + margin-bottom: 0.15rem; +} + +dd { + margin-bottom: 0.35rem; + margin-left: 1rem; +} + +a { + color: var(--link-primary); + text-decoration-style: dotted; + text-decoration-color: inherit; + text-decoration-thickness: .125rem; + text-underline-offset: 0.2rem; +} +a:hover { + cursor: pointer; + color: var(--link-primary-hover); +} +hr { + background: #4D4D4D; + border: 0; + height: 0.25em; +} + +audio { + padding: 0.7em 0em 0.5em 0em; + clear: both; + position: relative; + z-index: auto; +} + +.audcredit { + font-size: 75%; + margin-bottom: 1em; +} + +p.meta { + line-height: 1.25; +} + +p.meta span label { + font-weight: bold; +} +article > p, +#main_content > p, +#main_content > section > p { + line-height: var(--primary-content-line-height); +} +.lane { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1.0rem; + justify-content: space-around; +} +.lane.stack { + flex-direction: column; + justify-content: flex-start; +} +.lane.stack > * { + flex: 1 0 100%; +} +#podcast_lane > .lane, +#project_lane > .lane, +#latest_lane.lane { + justify-content: space-around; +} +.lane > article, +#welcome > p { + font-size: var(--font-size-emphasis); + font-weight: 450; +} +#hosts tr { + /* Add shadows to create the "card" effect */ + border-top: thin solid var(--shadow-cards); + border-left: thin solid var(--shadow-cards); + border-radius: 0.5rem; + box-shadow: + 1px 2px 2px var(--shadow-cards), + 2px 4px 4px var(--shadow-cards); + transition: 0.3s; + flex: 1 0 100%; + overflow-x: scroll; + padding-bottom: 1rem; +} +.lane > article:hover, +#hosts tr:hover { + box-shadow: + 4px 8px 8px var(--shadow-cards), + 8px 16px 16px var(--shadow-cards); +} +.lane > article > * { + margin-left: 1rem; + margin-right: 1rem; +} +.lane > article > header, +.lane > article > h3 { + background: var(--background-secondary); + padding: 1.5rem 1rem 1rem 1rem; + margin: 0; + font-weight: bold; + font-size: 1.45rem; + color: var(--background-primary); +} +.lane > article > header a, +.lane > article > h3 a { + color: var(--link-secondary); +} +.lane > article > header a:hover, +.lane > article > h3:hover { + color: var(--link-secondary-hover); +} +.lane.stack> * > header * { + margin-top: 0; + margin-bottom: 0; +} +.lane.stack > * > header p { + font-size: var(--default-header-4-font-size); + margin-left: 22px; +} +a.lane-button { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0.5rem var(--link-spacing-horizontal); + padding: 0.5rem 0.25rem; + border-width: 3.5px; + border-color: var(--lane-button-border); + border-style: solid; + border-radius: 10px; + text-align: center; + background-image: url("../images/lane-button-background.png"); + +} +a.lane-button p { + font-family: var(--lane-button-font-family); + text-transform: lowercase; + font-size: 1.4em; + mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png"); + mask-repeat: repeat; + mask-size: 10%; + background-clip: text; + margin: -0.25rem; + letter-spacing: 1px; + padding: 0.25rem; +} +a.lane-button:hover { + box-shadow: + 1px 2px 2px var(--link-primary-hover), + 2px 4px 4px var(--link-primary-hover); +} +a.lane-button img { + height: clamp(100px, calc(100vw - var(--for-tablet-portrait-up)), 110px); + transform: scaleX(0.9); + mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png"); + mask-repeat: repeat; + mask-size: 70%; + padding: 0.5rem; + box-sizing: border-box; +} +#podcast_lane a.lane-button:first-of-type img { + mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png"); + mask-repeat: repeat; + mask-size: 60%; + padding: 0.1rem; +} +#podcast_lane a.lane-button:first-of-type p { + font-size: 1.5rem; +} +section:nth-of-type(odd) .lane a:nth-of-type(1) { + border-radius: 20px 15px 25px 15px; +} +section:nth-of-type(odd) .lane a:nth-of-type(2) { + border-radius: 20px 15px 25px 15px; +} +section:nth-of-type(odd) .lane a:nth-of-type(3) { + border-radius: 10px 25px 15px 20px; +} +section:nth-of-type(odd) .lane a:nth-of-type(4) { + border-radius: 15px 15px 10px 20px; +} +section:nth-of-type(even) .lane a:nth-of-type(1) { + border-radius: 25px 10px 15px 15px; +} +section:nth-of-type(even) .lane a:nth-of-type(2) { + border-radius: 20px 10px 15px 10px; +} +section:nth-of-type(even) .lane a:nth-of-type(3) { + border-radius: 10px 20px 10px 15px; +} +section:nth-of-type(even) .lane a:nth-of-type(4) { + border-radius: 15px 10px 25px 30px; +} +#tag_line, +#title { + text-transform: uppercase; +} +#tag_line { + line-height: 1.1; +} +#tag_line *, +#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); +} +#title a:hover { + color: var(--link-primary-hover); +} +#title #site_acronym { + font-family: var(--logo-font-family); + font-size: var(--logo-font-size); + font-weight: var(--logo-font-weight); + letter-spacing: var(--logo-letter-spacing); + line-height: var(--logo-line-height); + margin: var(--logo-margin); + color: transparent; +} +#title #site_acronym a { + text-decoration: none; + text-shadow: 0 1px var(--link-secondary); +} +#title #site_name { + font-size: var(--default-header-2-font-size); + font-weight: bold; +} +#tag_line { + text-align: center; +} +#tag_line #tag1, +#tag_line #tag2 { + text-transform: uppercase; + font-family: var(--tagline-font-family); + font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size)); + font-weight: var(--default-header-x-font-weight); + letter-spacing: 0.05rem; +} +#tag_line #tag1 { + font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);; +} +#tag_line #tag3 { + text-align: center; + text-transform: capitalize; + font-weight: var(--default-header-x-font-weight); +} +#site_url { + font-family: "GNUTypewriter", monospace; + text-transform: none; +} +fieldset { + border: thin solid var(--input-border-primary); + border-radius: 0.2rem; +} +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, +fieldset > table td select { + display: block; + font-size: 1rem; +} +fieldset > table { + width: calc(100vw + -16vw + -1rem); + max-width: 100%; +} +input { + border: thin solid var(--input-border-primary); + border-radius: 0.2rem; + margin-bottom: 0.5rem; + padding: 0.5rem; +} +input[type="submit"] { + background-color: var(--background-secondary); + color: var(--text-secondary); + font-weight: 400; + width: fit-content; +} +input[type="submit"]:hover { + background-color: var(--link-primary-hover); + color: var(--background-primary); +} +select { + appearance: auto; + background: var(--background-primary); + color: var(--text-primary); + border: 1px solid var(--input-border-primary); + border-radius: 0.25rem; + cursor: pointer; + margin-bottom: 0.5rem; + padding: 0.5rem; +} +select:focus{ + background: var(--background-secondary); + color: var(--text-secondary); +}select:active { + background: var(--background-secondary); + color: var(--text-primary); +} +fieldset > input, +fieldset > table td input, +fieldset > table td textarea { + width: calc(100vw + -16vw + -1.5rem); + max-width: 100%; +} +fieldset > table td select { + width: calc(100vw + -16vw + -0.40rem); +} +fieldset > table td input[type="radio"] { + display: initial; + width: initial; + margin-bottom: 0.5rem; +} +#youtube { + --video-ratio: calc(390 / 640); + width: min(calc(95vw + 0px), 640px); + height: min(calc(calc(95vw + 0px) * var(--video-ratio)), 320px); +} +#upload_method pre { + max-width: 80vw; + overflow-x: scroll; +} +#search form { + flex: 1 1 100%; +} +#search fieldset { + padding-top: 1rem; +} +#search fieldset > legend { + font-weight: var(--default-header-x-font-weight); +} +#search fieldset > input { + width: 94%; +} +#search fieldset > input[type="submit"] { + width: 100%; +} +#search fieldset > p { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.no-css { + display: none; +} +#tags .date { + margin:0; + font-size: 1rem; +} +#tags #tag_initial_letter_index { + columns: 3 auto; +} +#tags #tag_initial_letter_index li { + font-weight: bold; + list-style: none; +} +#tags .tag-index { + columns: 3 calc(var(--for-tablet-landscape-up) /3 ); + column-gap: 1rem; +} +#tags .index-link { + text-align: right; +} +#comments > article > .show-meta { + font-size: smaller; +} +#hosts tr { + gap: 0; + justify-content: flex-start; +} +#hosts td { + display: inline-block; +} +#hosts td:nth-child(-n+2) { + background: var(--background-secondary); + color: var(--background-primary); +} +#hosts td:nth-child(-n+2) a { + color: var(--link-secondary); +} +#hosts td:nth-child(-n+2) a:hover { + color: var(--link-secondary-hover); +} +#hosts td:nth-child(2) { + padding: 0.25rem 0 0 8px; + width: calc(100% - 90px); +} + +#hosts td:nth-last-child(-n+2) { + padding: 0.5rem 0 0 95px; +} +#hosts td:nth-last-child(2)::before { + content: ; + content: "License: "; +} +#hosts td:nth-last-child(1)::before { + content: "Last Show: "; +} +#hosts td > img { + border-radius: 0.25rem; +} +#host { + justify-content: flex-start; + align-items: end; + gap: 0; +} +#host_id img { + border-radius: 0.25rem; +} +#host_meta { + flex: 1; + padding: 0 0 0.75rem 0; +} +#host_meta > div, +#host_meta > p { + margin: 0.25rem 0; + line-height: var(--primary-content-line-height); +} +#host_meta > div > p { + display: inline-block; + margin: 0; + padding: 0; +} +.series-description { + margin: 0; + padding: 0; + font-style: italic; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +@media (min-width: 600px) { + body > header .bounding-box { + justify-content: space-between; + } + #tag_line { + line-height: 1; + } + #title #tag1 { + font-size: 7.5rem; + letter-spacing: -0.65rem; + line-height: 0.75; + } + #tag_line #tag2 { + font-size: 1.82rem; + letter-spacing: 0.05rem; + } + #tag_line #tag1 { + font-size: 4rem; + } + #tag_line #tag3 { + font-size: 1.85rem; + letter-spacing: 0.05rem; + margin-left: 5rem; + } + #qr_code { + text-align: center; + max-width: 195px; + } + 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, + fieldset>table td select { + 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; + } + fieldset>table td select { + margin-bottom: 1.0rem; + width: 100%; + } + #search fieldset > input { + width: 55%; + } + #search fieldset > input[type="submit"] { + width: 40%; + } + body > main { + padding: 0.25rem 2rem; + } + #latest_lane.lane section > ul { + margin: 0.5rem 3rem 0 1rem; + } + #hosts tbody.lane.stack { + flex-direction: row; + justify-content: space-between; + gap: 1rem + } + #hosts tr { + flex: 1 1 45%; + max-width: 45%; + } + #host { + gap: 1rem; + } +} +@media (min-width: 900px) { + #podcast_lane > .lane, + #project_lane > .lane { + justify-content: flex-start; + gap: 2rem; + } + #latest_lane.lane section { + flex: 1; + } + #hosts tr { + flex: 1 1 30%; + max-width: 30%; + } +} diff --git a/hub/css/patrickhand/BebasNeue.woff b/hub/css/patrickhand/BebasNeue.woff new file mode 100644 index 0000000..f81d0db Binary files /dev/null and b/hub/css/patrickhand/BebasNeue.woff differ diff --git a/hub/css/patrickhand/OFL.txt b/hub/css/patrickhand/OFL.txt new file mode 100644 index 0000000..2df4406 --- /dev/null +++ b/hub/css/patrickhand/OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/hub/css/patrickhand/PatrickHand-Regular.ttf b/hub/css/patrickhand/PatrickHand-Regular.ttf new file mode 100644 index 0000000..a1b90ba Binary files /dev/null and b/hub/css/patrickhand/PatrickHand-Regular.ttf differ diff --git a/hub/css/patrickhand/PatrickHand-Regular.woff b/hub/css/patrickhand/PatrickHand-Regular.woff new file mode 100644 index 0000000..a904383 Binary files /dev/null and b/hub/css/patrickhand/PatrickHand-Regular.woff differ diff --git a/hub/css/patrickhand/PatrickHand-Regular.woff2 b/hub/css/patrickhand/PatrickHand-Regular.woff2 new file mode 100644 index 0000000..8e76102 Binary files /dev/null and b/hub/css/patrickhand/PatrickHand-Regular.woff2 differ diff --git a/hub/header.php b/hub/header.php index 631a818..1e45d14 100644 --- a/hub/header.php +++ b/hub/header.php @@ -14,7 +14,7 @@ - +