/* Based on: CSS Reset by Eric Meyer - Released under Public Domain http://meyerweb.com/eric/tools/css/reset/ with new HTML 5 elements added */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } /* remember to set this! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } *, *:before, *:after { box-sizing: border-box; } /* Mobile-first, grid'n'flex-friendly CSS stylesheet for http://www.peasepottage.info/ by Jeremy Bojczuk, Lab 99 Web Design (http://www.lab99.com/), May 2023, tweaked May 2025 UNIVERSAL STYLES (applicable to all visual browsers, including pre-HTML5, pre-grid, and pre-flexbox browsers, and to devices of all screen sizes) For non-HTML5 browsers: div#pp-inner centres the content and limits its width to a readable 700px. Within #pp-inner, the following elements require separate float-based styling: - p#site-name - ul#nav-ul - nav#breadcrumbs-nav (not all pages include breadcrumbs) - p#plug-p - dl#footer-dl For modern browsers, floats are replaced by flex and grid alternatives, as appropriate, with this basic structure: #pp-inner expanded to 100% width body (grid container): - header - nav - main (flex container): - #breadcrumbs-nav - article (grid container on some pages) - aside#aside-plug footer (grid container): - #footer-dl */ html { height: 100%; width: 100%; --background-colour-footer: #2c802c; /* medium green */ --background-colour-main: #cde0fc; /* pale blue */ --background-colour-minor: #e0ecff; /* paler blue */ --border-minor: #8faede; /* medium blue */ --border-nav: #fc0; /* yellow */ --font-family-main: system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; --font-family-print: georgia, serif; --footer-dl-colour: #1f591f; /* dark green */ --heading-colour: #003380; /* dark blue */ --link-colour: #901010; /* red */ --text-colour: #000; /* black */ } @-ms-viewport { width: device-width; } /* IE10 hack */ @viewport { width: device-width; zoom: 1; } /* to replace HTML meta tag in due course */ @font-face { /* for Lab 99 footer link & optional plug */ font-family: "montserrat"; font-style: normal; font-weight: 400; src: url("fonts/montserrat-v13-latin-regular.eot"); src: local("Montserrat Regular"), local("Montserrat-Regular"), url("fonts/montserrat-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("fonts/montserrat-v13-latin-regular.woff2") format("woff2"), url("fonts/montserrat-v13-latin-regular.woff") format("woff"), url("fonts/montserrat-v13-latin-regular.ttf") format("truetype"), url("fonts/montserrat-v13-latin-regular.svg#Montserrat") format("svg"); } /* eot: 22.4 kB; woff2: 19.2 kB; woff: 23.5 kB; ttf: 46.4 kB; svg: 53.7 kB */ /* main elements */ body { background: #fff; background: var(--background-colour-main); color: #000; color: var(--text-colour); font-family: var(--font-family-main); font-size: 100%; font-size: calc(15px + 0.390625vw); line-height: 1.7; text-align: left; width: 100%; } /* color:#000 & font-size:100% for old browsers; flexible font-size: https://matthewjamestaylor.com/responsive-font-size */ #pp-inner { display: block; margin: 0 auto; max-width: 700px; position: relative; width: 96%; } #pp-intro { float: left; margin: 0 0 0.5em 0; width: 100%; } #home-quotes, #home-features, #home-facts, #business-links, #facility-links, #government-links, #pp-history, #pp-name, #pp-early, #pp-later, #pp-modern, #pp-also { float: left; width: 100%; } /* headings (h4 & h5 not needed at time of writing, but included just in case) */ h1 { color: var(--heading-colour); font-size: 180%; font-weight: bold; line-height: 1.3; margin: 0.5em 0; text-wrap: balance; } h2, h3, h4, h5 { color: var(--heading-colour); font-weight: normal; line-height: 1.3; margin: 1em 0 0 0; text-wrap: balance; } h2 { font-size: 160%; } #name-h2 { margin: 0; } /* h2 immediately after h1 on history page; same with #early-h2 in wider layouts (line 554-ish) */ #toc-h2 { margin: 0.7em 0 0 0; } /* table of contents box on e.g. famous & service station pages */ h3 { font-size: 130%; } h4 { font-size: 110%; } h5 { color: var(--text-colour); font-weight: bold; } /* paragraphs and lists */ p { margin: 0.8em 0 0 0; } ul { list-style: disc; padding: 0.6em 0 0 1.5em; } ol { list-style: decimal; padding: 0.5em 0 0 1.7em; } li { line-height: 1.6; padding: 0.2em 0; } li::marker { color: var(--heading-colour); } /* coloured dots and numbers! */ dl { margin: 0 0 1em 0; width: 100%; } /* default dl, dt & dd styles apply to contact details on individual directory pages */ dt { font-weight: bold; margin: 0.5em 0 0 0; } dd { padding: 0 0 0 1em; } /* links */ a:link { color: var(--link-colour); text-decoration: underline; text-decoration: underline solid var(--text-colour) 1px; text-underline-offset: 0.25em; word-break: break-word;} a:visited { color: var(--heading-colour); } a:hover { background: #fff; border-bottom: 1px solid var(--link-colour); border-top: 1px solid var(--link-colour); color: var(--text-colour); text-decoration: none; } a:focus { background: #fff; outline: 3px solid #000; outline-offset: 0.25rem; } a:focus-visible { box-shadow: 0 0 0 6px white; outline: 9px double black; z-index: 100; } /* keyboard focus (see https://www.sarasoueidan.com/blog/focus-indicators/) */ a:active { background: var(--border-nav); color: #000; } /* links to images indicated by a camera icon */ a[href$="jpg"]:link, a[href$="jpg"]:visited, a[href$="png"]:link, a[href$="png"]:visited { background: transparent url(images/camera-icon-20x12-04.png) 100% 65% no-repeat; padding-right: 26px; } a[href$="jpg"]:hover, a[href$="png"]:hover { background: #fff url(images/camera-icon-20x12-04.png) 100% 65% no-repeat; padding-right: 26px; } /* images (max available width for images on 2025 layout is c.850px; classes need to be added to: wide images immediately below h1, which has margin-bottom; to small images floated right immediately below h1; and to small images within text, floated left or right) */ img { background: var(--background-colour-minor); border: 3px solid #fff; float: right; height: auto; margin: 1.5em 0; max-width: 100%; } /* default margins apply to full-size images within text */ .img-small { margin: 1.2em 0 1.5em 1.5em; max-width: auto; } /* applies to 250-300px-wide images within text */ .img-small-alt { float: left; margin: 1.2em 2em 1.5em 0; max-width: auto; } /* ditto but floated left; column of text to right requires a bit more right-margin on img */ .img-small-top { margin: 0.5em 0 1.5em 1.5em; max-width: auto; } /* applies to 250-300px-wide images immediately after h1; this class is added automatically to article-images */ .img-small-top-alt { float: left; margin: 0.5em 2em 1.5em 0; max-width: auto; } /* ditto but floated left; copared to img-small, margin-top reduced, margin-right increased */ .img-top { margin-top: 0; } /* .img-top: full-width img immediately after h1 */ #single-image { margin: 0; } /* on static gallery pages */ /* image containers */ .img-box, figure, picture { float: left; margin: 0 0 1.5em 0; width: 100%; } /* .img-box is an option for pre-html5 broswers */ figcaption { font-style: italic; margin: 0.8em 0 1em 0; } .caption { float: left; width: 100%; } /* enclosed by figcaption; to stop text flying away in old browsers that don't recoginise figcaption */ /* minor elements - not all needed at time of writing, but included just in case */ abbr { border-bottom: 1px dotted var(--text-colour); cursor: help; speak: spell-out; text-decoration: none; } b, strong { font-weight: bold; } cite, em, i { font-style: italic; } .strike { text-decoration: line-through; } .small-caps { font-variant: small-caps; } blockquote { background: var(--background-colour-minor); border: 1px solid #fff; border-left: 5px solid var(--border-minor); margin: 1em 0; padding: 0 0.5em 0.8em 1em; } .more-arrows { font-size: 130%; font-weight: bold; height: 30px; line-height: 30px; padding-left: 0.3em; } .update { background: var(--background-colour-minor); border: 1px solid var(--heading-colour); display: block; margin: 0 0 1em 0; padding: 0 1em 0.5em 1em; } /* same style as noscript */ /* skipnav link */ #skipnav { position: absolute; right: 0px; top: 0px; } #skipnav-a:link, #skipnav-a:visited { border: 2px solid transparent; color: transparent; padding: 0.2em 0.6em; text-decoration: none; } #skipnav-a:hover, #skipnav-a:focus { background: #fff; border: 2px solid #000; color: #000; text-decoration: underline; } /* site name */ #site-name { background: url(images/favicon-32x32.png) 0 5% no-repeat; color: var(--heading-colour); float: left; font-size: 170%; font-weight: bold; line-height: 1; margin: 0.5em 0 0 0; padding: 0 0 0 50px; text-transform: uppercase; width: 100%; } #name-span { color: #000; font-size: 60%; } /* navigation */ #nav-ul { float: left; list-style: none; margin: 0.2em 0 0.5em 0; padding: 0; text-align: center; width: 100%; } .nav-li { float: left; line-height: 170%; padding: 0; } .nav-a:link, .nav-a:visited { background: #fff; border: 2px solid var(--border-nav); box-sizing: border-box; color: var(--link-colour); display: block; float: right; font-size: 95%; line-height: 1.5; margin: 0.3em 0.3em 0 0; padding: 0.1em 0.3em; text-decoration: none; width: auto; } .nav-a:hover { background: var(--heading-colour); color: #fff; } .nav-a:focus { border: 2px solid #fff; } .nav-a:active { border: 2px solid var(--heading-colour); } body.index #nav-index-a, body.index #nav-index-a:hover, body.location #nav-location-a, body.location #nav-location-a:hover, body.history #nav-history-a, body.history #nav-history-a:hover, body.recipe #nav-recipe-a, body.recipe #nav-recipe-a:hover, body.gallery #nav-gallery-a, body.gallery #nav-gallery-a:hover, body.directory #nav-directory-a, body.directory #nav-directory-a:hover, body.famous #nav-famous-a, body.famous #nav-famous-a:hover, body.news #nav-news-a, body.news #nav-news-a:hover { background: #fff; border: 2px solid var(--heading-colour); color: var(--heading-colour); cursor: default; } .mob-chop { display: none; } /* also in 'return' links on individual gallery and directory pages; reinstated for wider screens, below */ /* breadcrumbs */ #breadcrumbs-nav { background: var(--background-colour-minor); border-bottom: 1px solid var(--border-minor); border-top: 1px solid var(--border-minor); float: left; font-size: 95%; font-style: italic; line-height: 1.3; margin: 0 0 1em 0; padding: 0.3em 0.5em; width: 100%; } /* line-height & margin for old browsers only */ #breadcrumbs-p { display: inline-block; float: left; line-height: 1.3; list-style: none; margin: 0 0.5em 0 0; } #breadcrumbs-ol { display: inline-block; list-style: none; padding: 0; } .breadcrumbs-li { display: inline-block; line-height: 1.3; padding: 0; } .bc-separator { font-weight: bold; padding: 0 0.5em; } /* plug */ #pp-plug { float: left; width: 100%; } #plug-a { background: var(--background-colour-minor) url(images/lab99-home-700x120.png) 50% 0 no-repeat; border: 3px solid #fff; color: var(--text-colour); display: block; float: left; height: auto; margin: 3em 0 0 0; overflow: hidden; padding: 120px 0.5em 1.5em 0.5em; text-align: center; text-decoration: none; width: 100% } #plug-a:hover { background-color: #fff; border: 3px solid var(--link-colour); color: var(--link-colour); } #plug-h2 { font: 150%/1.3 "montserrat", var(--font-family-main); } .plug-p { font: 120%/1.4 "montserrat", var(--font-family-main); } .plug-ul { font: 120%/1.4 "montserrat", var(--font-family-main); list-style: none; padding: 0.6em 0 0 0; } /* footer */ footer { width: 100%; } #footer-dl { border-top: 5px solid var(--heading-colour); float: left; margin: 2em 0 0 0; padding: 1em; width: 100%; } .contact #dt-contact, .contact #dd-contact, .sitemap #dt-map, .sitemap #dd-map { display: none; } /* contact form */ form { width: 100%; } legend { visibility: hidden; } .form-p { float: left; margin: 1em 0 0 0; width: 100%; } input, textarea { background: #fff; border: 5px solid var(--border-minor); color: var(--text-colour); font-size: 110%; font-family: inherit; line-height: 1.6; margin: 0.2em 0 0 0; padding: 0.4em 1em; width: 100%; } textarea { height: 10em; } label { float: left; padding: 0.4em 0; text-align: left; width: 100%; } input:hover, textarea:hover { border: 5px solid var(--heading-colour); color: var(--heading-colour); } input:focus, textarea:focus { background: #fff; color: var(--heading-colour); outline: 3px solid var(--heading-colour); outline-offset: 0.25rem; } input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 6px white; outline: 9px double black; z-index: 100; } input:user-invalid { border-color: red; } /* if the email field does not contain the correct email format */ input:user-valid { border-color: var(--border-minor); } /* normal colour if the correct email format is entered */ input.comSubmit { font-weight: bold; margin: 0 0 0 1em; width: auto; } input.comSubmit:hover { background: var(--heading-colour); color: #fff; } input#phone, input#mail { margin: 0; padding: 0; } .comThanks, .comError { background: #fff; border: 2px solid var(--heading-colour); color: var(--heading-colour); float: left; font-weight: bold; list-style: none; padding: 0.5em 1em; width: auto; } /* map: location and individual directory pages */ #map { float: left; margin: 1em 0 1.5em 0; width: 100%; } /* div#map to be replaced by map-box custom element eventually, perhaps */ #map-img { float: left; margin: 0 0 0.5em 0; } #map-p { float: left; font-size: 90%; margin: 0; width: 100%; } /* 'return to main page' link on individual directory & image pages */ #return-a { background: #fff; border: 3px solid var(--border-nav); color: var(--link-colour); display: block; float: left; margin: 1em 0 0 0; padding: 0.3em 1em; text-decoration: none; } #return-a:hover { background: #fff; border: 3px solid var(--heading-colour); color: var(--heading-colour); } /* table of contents: famous page & service station article */ #toc-nav { background: var(--background-colour-minor); border-bottom: 1px solid var(--border-minor); border-top: 1px solid var(--border-minor); display: block; margin: 1.5em 0 0 0; padding: 0 1em 1.6em 1em; } /* gallery pages */ .gallery-ul { float: left; padding: 1em 0; width: 100%; } .gallery-li { display: inline; float: left; margin: 0 1em 1em 0; } .gallery-li a { background: #fff; border: 2px solid var(--border-nav); display: block; height: 100px; width: 100px; } .gallery-li a:hover { background: none; border-bottom: none; border-top: none; border: 2px solid var(--heading-colour); display: block; } .gallery-li img { border: 0; display: inline; float: left; margin: 0; padding: 4px; } #prev-next-ul { border-top: 1px solid #fff; float: left; list-style: none; padding: 0.5em 0 0.5em 0; width: 100%; } #prev-pic-li { float: left; padding: 0; } #next-pic-li { float: right; padding: 0; } .prev-next-a:link, .prev-next-a:visited { background: #fff; border: 2px solid var(--border-nav); color: var(--link-colour); display: block; font-size: 95%; padding: 0.1em 0.5em; text-decoration: none; width: auto; } .prev-next-a:hover { background: #fff; border: 2px solid var(--heading-colour); color: var(--heading-colour); } .prev-next-a:focus { background: var(--heading-colour); color: #fff; outline: 5px solid #fff; } .prev-next-a:active { background: var(--heading-colour); border: 2px solid var(--border-nav); color: #fff; } #gallery-link-p { border-bottom: 1px solid #fff; float: left; padding: 0 0 1em 0; width: 100%; } /* reinstate default settings (i.e. no camera icon) for gallery images */ .gallery-a[href$="jpg"]:link, .gallery-a[href$="jpg"]:visited, .gallery-a[href$="jpg"]:hover, .gallery-a[href$="png"]:link, .gallery-a[href$="png"]:visited, .gallery-a[href$="png"]:hover { background: none; background-image: none; padding-right: 0; } /* noscript: pages with images opening in an overlay */ noscript { background: var(--background-colour-minor); border: 1px solid var(--heading-colour); display: block; margin: 0 0 1em 0; padding: 0 1em 0.5em 1em; } .gallery-noscript { margin: 1em 0; } #icon { background: url(images/camera-icon-20x12-04.png) 100% 50% no-repeat; padding-right: 26px; } /* table (bus timetables: not currently in use) table { float: left; margin: 1em 0 1.5em 0; text-align: center; width: 100%; } th, td { border-bottom: 1px solid #fff; padding: 0.6em 0.1em; } th { background: var(--background-colour-minor); font-weight: bold; } caption { color: var(--heading-colour); font: 130%/160% var(--font-family); padding: 0.5em 0; } thead { background: var(--background-colour-minor); border-top: 1px solid #fff; } tbody tr:last-of-type { border-bottom: 3px solid #fff; } tbody tr:hover { background: #fff; } tbody tr.pottage { background: var(--background-colour-minor); } tbody tr.pottage:hover { background: #fff; } */ /* ======================= ======================= FEATURE & MEDIA QUERIES (enhancements for newer browsers, non-basic mobile phones, and larger devices) ======================= ======================= */ @supports (display: grid) { /* to weed out older browsers, including those which don't implement grid properly */ /* ==================== OVER-RIDE FLOATS - I (single-column layout for newer browsers: mobiles and tablets) ==================== */ #aside-plug { margin: 0 0 3em 0; } /* to create space for the 'poles' image to continue down to the 'grass' image */ #return-a, #plug-a, input, textarea, img { border-radius: 5px; } main, #map, .img-box, figure, picture, #toc-nav { display: flex; flex-direction: column; } /* thead { border-top-left-radius: 5px; border-top-right-radius: 5px; } not currently in use */ /* body grid */ body { background: var(--background-colour-main) url(images/grad-01.png) 0 0 repeat-x; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". inner ." "footer footer footer"; } #pp-inner { grid-area: inner; margin: 0; max-width: 700px; width: 100%; } footer { grid-area: footer; } /* #inner grid */ header { grid-area: header; } #primary-nav { grid-area: nav; } main { grid-area: main; padding: 0 0 3em 0; } #aside-plug { grid-area: plug; } #plug-a { margin: 0; } #pp-inner { display: grid; grid-template-columns: 100%; grid-template-areas: "header" "nav" "main" "plug"; } /* navigation */ #nav-ul { display: flex; flex-flow: row wrap; } .nav-li { display: flex; flex-direction: row; } .nav-a { border-radius: 3px; } /* breadcrumbs */ #breadcrumbs-nav, #breadcrummbs-ol { display: flex; flex-direction: row; margin: 0; } /* footer */ footer { background: var(--background-colour-footer) url(images/grass-126x20-01.png) 0 0 repeat-x; border-bottom: 5px solid var(--footer-dl-colour); margin: -20px 0 0 0; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". footer-dl ."; } #dt-goto { grid-area: dt-1; } #dd-goto { grid-area: dd-1; } #dt-map { grid-area: dt-2; } #dd-map { grid-area: dd-2; } #dt-contact { grid-area: dt-3; } #dd-contact { grid-area: dd-3; } #dt-by { grid-area: dt-4; } #dd-by { grid-area: dd-4; } #footer-dl { border-top: none; grid-area: footer-dl; padding: 0.5em 0; display: grid; grid-template-columns: 40% 60%; grid-template-areas: "dt-1 dd-1" "dt-2 dd-2" "dt-3 dd-3" "dt-4 dd-4"; } .footer-dt { background: var(--footer-dl-colour); border-top-left-radius: 5px; border-bottom-left-radius: 5px; color: #fff; font-weight: normal; margin: 0.2em 0; padding: 0.6em 1em 0.6em 0; text-align: right; } .footer-dd { background: var(--footer-dl-colour); border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin: 0.2em 0; padding: 0.6em 0; } .footer-a:link, .footer-a:visited { background: none; color: var(--background-colour-main); display: block; text-decoration: none; } .footer-a:hover { background: none; border-bottom: none; border-top: none; color: var(--border-nav); text-decoration: underline 1px; } .footer-a:focus { background: #fff; color: #000; outline: 1px solid #000; } #up-arrow { padding: 0 0 0 0.6em; } /* contact form */ form, fieldset { display: flex; flex-direction: column; } /* gallery pages */ .gallery-ul, .gallery-li { display: flex; flex-flow: row wrap; } .gallery-li img { border-radius: none; } .gallery-li a, a.prev-next-a { border-radius: 3px; } figure { justify-content: flex-start; } /* 'flex-start' moves single image to left edge of flex container */ #prev-next-ul { display: flex; flex-direction: row; justify-content: space-between; } /* with only two itmes, 'space-between' pushes them to opposite edges of flex container */ #gallery-link-p { display: flex; flex-direction: row; justify-content: center; margin: 0; } /* =================== INDIVIDUAL CONTACTS =================== */ @media all and (min-width: 350px) { /* directory page contact details */ #contact-dl { display: grid; grid-template-columns: 30% 70%; grid-template-areas: "dt-5 dd-5" "dt-6 dd-6" "dt-7 dd-7" "dt-8 dd-8"; } #dt-website { grid-area: dt-5; } #dd-website { grid-area: dd-5; } #dt-email { grid-area: dt-6; } #dd-email { grid-area: dd-6; } #dt-phone { grid-area: dt-7; } #dd-phone { grid-area: dd-7; } #dt-address { grid-area: dt-8; } #dd-address { grid-area: dd-8; } #contact-dl { background-color: rgba(255, 255, 255, 0.5); margin: 1em 0 1.5em 0; padding: 0; } .contact-dt { border-bottom: 3px solid var(--background-colour-main); margin: 0; padding: 0.3em 1em 0.3em 0; text-align: right; } .contact-dd { border-bottom: 3px solid var(--background-colour-main);padding: 0.3em 0; } } /* end of individual directory pages contact details */ /* ===================== OVER-RIDE FLOATS - II 700px width single column) ===================== */ @media all and (min-width: 740px) { html { border-top: 1px solid var(--heading-colour); scrollbar-color: var(--heading-colour) #fff; } ::-webkit-scrollbar { background: #fff; border-left: 1px solid var(--border-nav); border-right: 1px solid var(--border-nav); } ::-webkit-scrollbar-thumb { background: var(--heading-colour); } body { grid-template-columns: 1fr 700px 1fr; } footer { grid-template-columns: 1fr 700px 1fr; font-size: 95%; } #site-name { text-shadow: 1px 1px 1px #fff; } #breadcrumbs-nav { font-size: 90%; } blockquote { border-top-right-radius: 7px; border-bottom-right-radius: 7px; } img { border-radius: 5px; } #toc-nav { border-radius: 7px; padding: 0 2em 1.6em 2em; } /* navigation */ #nav-ul { justify-content: space-between; margin: 0.5em 0; } .nav-a:link { flex-grow: 1; font-size: 100%; margin: 0; padding: 0.1em 0.4em; } /* plug */ #plug-a { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; } #plug-a:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); } /* footer */ #lab99-a { background: url(images/lab99-logo-24x24-03.png) 0 50% no-repeat; font-family: "montserrat", var(--font-family-main); padding-left: 32px; } /* contact form */ input:hover, textarea:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); } .comSubmit:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px #000; } /* directory page contact details */ #contact-dl { grid-template-columns: 25% 75%; } .contact-dt { padding: 0.3em 2em 0.3em 0; } } /* end of over-riding floats II */ /* ======================= FIRST TWO-COLUMN LAYOUT (960 px wide) ======================= */ @media all and (min-width: 1000px) { /* main structural elements */ body { grid-template-columns: 1fr 960px 1fr; } #pp-inner { max-width: 100%; width: 100%; grid-template-columns: 28% 8% 64%; grid-template-areas: "header header header" "nav . main" "nav . main" "nav . plug"; } main { background: transparent; margin: -3rem 0 0 0; } #breadcrumbs-nav { border: 1px solid var(--border-minor); border-radius: 5px; font-size: 95%; margin: 1em 0 0 120px; padding: 0.3em 1em; width: auto; } h1 { border-bottom: 2px solid var(--border-minor); margin: 1em 0 1em 0; padding: 0 0 0.2em 0; } #home-h1, #error-h1, #thanks-h1 { margin-left: 80px; } /* on pages without breadcrumbs */ #pp-intro { margin: 0; } #toc-nav { border: 1px solid var(--border-minor); border-radius: 5px; } noscript { border-radius: 5px; } /* skipnav link */ #skipnav { right: 50%; } /* site name */ #site-name { background: url(images/vegas-350x211.png) no-repeat 0 0; font-size: 240%; height: 210px; margin: 0; padding: 0.8em 0 0 0; text-align: right; text-shadow: 1px 1px 1px #fff; width: 100%; } /* navigation */ #primary-nav { background: url(images/poles08.png) 0 0 repeat-y; padding: 30px 0 0 0; } #nav-ul { flex-direction: column; margin: 0; } .nav-li { margin: 0; } .nav-a:link { border: 3px solid var(--border-nav); border-radius: 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); margin: 0.8em 0 0 0; padding: 0.4em 0.2em; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); width: 100%; } .nav-a:focus { border: 3px solid #fff; } .nav-a:active { border: 3px solid var(--heading-colour); } body.index #nav-index-a, body.index #nav-index-a:hover, body.location #nav-location-a, body.location #nav-location-a:hover, body.history #nav-history-a, body.history #nav-history-a:hover, body.recipe #nav-recipe-a, body.recipe #nav-recipe-a:hover, body.gallery #nav-gallery-a, body.gallery #nav-gallery-a:hover, body.directory #nav-directory-a, body.directory #nav-directory-a:hover, body.famous #nav-famous-a, body.famous #nav-famous-a:hover, body.news #nav-news-a, body.news #nav-news-a:hover { background: #fff; border: 3px solid var(--heading-colour); } .mob-chop { display: inline; } /* to restore full text in nav menu and in 'return' links on individual gallery and directory pages */ /* plug */ #plug-a { background: var(--background-colour-minor) url(images/pottage-sign-250x300.jpg) 0 50% no-repeat; border: 3px solid #fff; box-shadow: 1px 1px 10px #666; padding: 0 1em 1.7em 0; text-align: left; } #plug-a:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); color: var(--link-colour); } #plug-h2, .plug-p, .plug-ul { margin-left: 260px; padding-left: 30px; } /* footer */ footer { grid-template-columns: 1fr 960px 1fr; } #footer-dl { line-height: 150%; grid-template-columns: 28% 8% 9em 15em 1fr; grid-template-areas: ". . dt-1 dd-1 ." ". . dt-2 dd-2 ." ". . dt-3 dd-3 ." ". . dt-4 dd-4 ."; } } /* end of min-width: 960px - first two-column layout */ /* ============================= 1160px WIDE TWO-COLUMN LAYOUT ============================= */ @media all and (min-width: 1200px) { body { grid-template-columns: 1fr 1160px 1fr; } #name-span { letter-spacing: 0.1em; } #pp-inner { grid-template-columns: 27% 9% 64%; } footer { grid-template-columns: 1fr 1160px 1fr; } noscript { grid-area: noscript; } /* navigation (border was 3px, now 4px) */ .nav-a:link, .nav-a:visited { border: 4px solid var(--border-nav); } .nav-a:hover { border: 4px solid var(--border-nav); } .nav-a:focus { border: 4px solid #fff; } .nav-a:active { border: 4px solid var(--heading-colour); } body.index #nav-index-a, body.index #nav-index-a:hover, body.location #nav-location-a, body.location #nav-location-a:hover, body.history #nav-history-a, body.history #nav-history-a:hover, body.recipe #nav-recipe-a, body.recipe #nav-recipe-a:hover, body.gallery #nav-gallery-a, body.gallery #nav-gallery-a:hover, body.directory #nav-directory-a, body.directory #nav-directory-a:hover, body.famous #nav-famous-a, body.famous #nav-famous-a:hover, body.news #nav-news-a, body.news #nav-news-a:hover { border: 4px solid var(--heading-colour); } /* home page article grid */ #home-intro { grid-area: intro; } #home-quotes { grid-area: quotes; } #home-features { grid-area: features; } #home-facts { grid-area: facts; } #article-home { display: grid; grid-template-columns: 47% 6% 47%; grid-template-areas: "noscript noscript noscript" "intro intro intro" "quotes quotes quotes" "features . facts"; } /* history page article grid */ #history-h1 { grid-area: history-h1; } #pp-name { grid-area: name; } #pp-early { grid-area: early; } #pp-later { grid-area: later; } #pp-modern { grid-area: modern; } #pp-also { grid-area: also; } #article-history { display: grid; grid-template-columns: 47% 6% 47%; grid-template-areas: "history-h1 history-h1 history-h1" "noscript noscript noscript" "early . name" ". . name" "also . name" ". . name" "later later later" "modern modern modern"; } #early-h2 { margin: 0; } /* h2 immediately after h1 on history page; see also #name-h2 in one-column layout, on line 88-ish */ #pp-also { background: var(--background-colour-minor); border: 1px solid var(--border-minor); margin: 1em 0 0 0; padding: 0 1em 1.5em 1em; width: 100%; } #pp-also-h2 { margin: 0.6em 0 0 0; } /* directory page article grid */ #directory-intro { grid-area: intro; } #business-links { grid-area: businesses; } #facility-links { grid-area: facilities; } #government-links { grid-area: government; } #article-directory { display: grid; grid-template-columns: 47% 6% 47%; grid-template-areas: "intro intro intro" "businesses . facilities" "businesses . government" "businesses . ."; } /* directory page contact details */ #contact-dl { grid-template-columns: 20% 80%; } /* site map page */ .sitemap-ul { column-gap: 5%; column-width: 330px; } } /* end of 1160px-wide layout */ /* ============================= 1300px WIDE TWO-COLUMN LAYOUT ============================= */ @media all and (min-width: 1340px) { body, footer { grid-template-columns: 1fr 1300px 1fr; } #site-name { padding: 0.6em 0 0 0; } /* minor adjustment - now slightly nearer top of screen */ } /* end of 1300px-wide layout */ /* ============ PRINT LAYOUT ============ */ @media print { @page { margin: 1.5cm 2cm; } body, main { background: #fff; border: none; color: #000; font: 12pt/1.7 var(--font-family-print); } #pp-inner { border-top: none; margin: 0 auto; width: 100%; } #primary-nav, #breadcrumbs-nav, #aside-plug, footer, #prev-next-ul, #gallery-link, #return-a, #toc-nav, noscript, .no-print { display: none; } a:link, a:visited { background: none; color: #000; text-decoration: none; } a[href$="jpg"]:link, a[href$="jpg"]:visited, a[href$="png"]:link, a[href$="png"]:visited { background: none; padding: 0; } #site-name, #name-span { background: none; color: #000; font-size: 1.3rem; font-weight: normal; height: auto; line-height: 1.3; margin: 1em 0 0.5em 0; padding: 0; text-align: left; } h1 { border: none; color: #000; font: bold 180%/1.4 var(--font-family-print); padding: 0.4em 0; width: 100%; } #home-h1, #error-h1, #thanks-h1 { margin-left: 0; } h2 { background: #fff; border: none; color: #000; font: bold 140%/1.4 var(--font-family-print); padding: 0; break-after: avoid; width: 100%; } h3 { color: #000; font: bold 110%/1.4 var(--font-family-print); break-after: avoid; width: 100%; } p { orphans: 2; widows: 2; } li::marker { color: #000; } dl { margin: 0.3em 0; padding: 0; width: 100%; } dt { font-variant: small-caps; padding: 0.8em 0 0 0; width: 100%; } dd { padding: 0; width: 100%; } #contact-dl { background-color: #fff; display: block; margin: 0.3em 0; } .contact-dt { border-bottom: none; padding: 0.8em 0 0 0; text-align: left; } .contact-dd { border-bottom: none; padding: 0; } abbr { border: none; } blockquote { background: #fff; border-left: 2px dashed #000; padding: 0 0 0 5%; } table { background: #fff; float: left; padding: 0; text-align: left; width: 99%; } caption { color: #000; } th, tr.headrow:hover { background: #fff; color: #000; } td { border: none; width: auto; } a.print-url::after { content: " (" attr(href) ")"; } * { background-image: none important!; } /* just in case browsers decide to put them in! */ } /* end of print styles */ } /* end of @supports (display: grid) */