/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} @font-face { font-family: "Caveat-Bold"; font-display: swap; src: url("/fonts/caveat-bold.woff2?h=m1DOfptW") format("woff2"); } @font-face { font-family: "Hammersmith One"; font-display: swap; src: url("/fonts/hammersmith_one.woff2?h=VGQlU4JT") format("woff2"); } @font-face { font-family: "Afacad"; font-display: swap; src: url("/fonts/afacad.woff2?h=KPKTU7ml") format("woff2"); } /* Use sane border-box model for all boxes. Otherwise, e.g. section-body is larger than its parent (main). */ *, *:before, *:after { box-sizing: border-box; } :root { --main-width: min(94%, 756px); --main-offset: calc(50% - var(--main-width)/2); /* the distance of the main text from the left border */ --nav-bar-height: 38px; --h2-font-size: 3rem; --h3-font-size: 1.7rem; --h4-font-size: 1.5rem; --h5-font-size: 1.3rem; --h6-font-size: 1rem; --grey-8: #fcfbf8; --grey-7: #eeedeb; --grey-6: #e2e1dc; --grey-5: #918d87; --grey-4: #77746e; --grey-1: #424140; --grey-0: #333333; --beige-4: #e7dfd8; --beige-3: #b7a99e; --beige-2: #8b7d71; --beige-1: #654f3a; --beige-0: #281f15; --bright-yellow: #e5d9bd; --bright-blue: #bed3e3; --bright-red: #e3c4c3; --button-icon-height: 60px; --blue-button-off: #34445e; --blue-button-on: #2c3a50; --green-button-off: #345e57; --green-button-on: #2c4f49; --modal-backdrop: rgba(0,0,0,0.8); } html { scroll-behavior: smooth; } /* Note: Default root font size is 16px. */ body { min-height: 100vh; line-height: 1.7; font-family: Afacad, Helvetica, Arial, sans-serif; font-size: 18px; color: var(--beige-0); background-color: var(--beige-4); } main { display: block; position: relative; width: 100%; min-height: 100vh; /* same as */ } section { width: 100%; /* min-height: 100vh; */ padding: calc(var(--nav-bar-height) + 18px) 0; &.yellow { background-color: var(--bright-yellow); } &.red { background-color: var(--bright-red); } &.blue { background-color: var(--bright-blue); } &.dark { background-color: var(--grey-0); } &.footer { color: var(--grey-8); background-color: var(--grey-0); & a { color: var(--grey-5); } } } section-body { display: block; width: var(--main-width); margin: 0 auto; border-radius: 8px; background-color: var(--grey-8); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } section-body { padding: 18px 24px 38px 24px; } @media (width >= 445px) { section-body { padding: 18px 56px 38px 56px; } } flow-block { /* keeps content as a block and doesn't flow it around an image */ display: table; width: fit-content; } section-body, .clearfix::after { content: ""; clear: both; display: table; } details { margin: 6px 0; } summary { /* We have some

elements with floating spans inside (to have some text stick to the right). By default, this * breaks on small screens, where the

just overflows. Setting `contain: layout` solves the problem. Using * `display: flow-root` would also work but seems to remove the small arrow marker from the summary. * * https://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside */ contain: layout; cursor: pointer; font-size: 1.25rem; background-color: var(--grey-7); padding: 0 0 0 18px; border-radius: 8px; margin-bottom: 4px; * { display: inline; } } #logo { width: 120px; height: 120px; position: absolute; z-index: 1; top: calc(var(--nav-bar-height) + 8px); left: 8px; } @media (width >= 750px) { #logo { width: 160px; height: 160px; z-index: 3; /* so logo appears over nav-bar */ top: calc(var(--nav-bar-height) / 2); } } @media (width >= 1040px) { #logo { width: 200px; height: 200px; left: calc(var(--main-offset) - 130px); } } /* ============ Headings & Paragraphs ============ */ p, .p { display: block; margin: 1rem 0; } details > p { margin: .5rem 0; } h2, h3, h4, h5, h6 { font-family: "Hammersmith One", Georgia, Garamond, "Times New Roman", Times, serif; margin: 18px 0 8px 0; font-weight: 600; } h2 { font-family: "Caveat-Bold", Georgia, Garamond, "Times New Roman", Times, serif; text-align: center; font-size: var(--h2-font-size); line-height: 1.2; margin: 18px 0 36px 0; } h3 { font-size: var(--h3-font-size); line-height: 1.2; } h4 { font-size: var(--h4-font-size); line-height: 1.3; } h5 { font-size: var(--h5-font-size); line-height: 1.3; } h6 { font-size: var(--h6-font-size); line-height: 1.4; } /* ============ Other ============ */ img { object-fit: cover; /* preserve aspect ratio of images */ height: auto; } button { padding: 0 0 0 0; } .button { position: relative; display: inline-flex; align-items: center; height: var(--button-icon-height); padding: 0 0 0 0; border: none; outline: none; cursor: pointer; background-color: var(--blue-button-off); color: #fff; font-size: 20px; font-weight: bold; font-variant: small-caps; text-align: center; text-decoration: none; &:hover { background-color: var(--blue-button-on); } &:active { background-color: var(--blue-button-on); top: 2px; } &.green { background-color: var(--green-button-off); &:hover { background-color: var(--green-button-on); } &:active { background-color: var(--green-button-on); top: 2px; } } &> .icon { width: 30px; padding: 15px 15px 15px 15px; flex: 0 0 var(--button-icon-height); background: rgba(0,0,0,0.15); } } .two-col { display: grid; grid-template-columns: max-content auto; column-gap: 1em; > l { justify-self: end; } } /* ============ Modals ============ */ modal { &> input { display: none; &:checked { &~ label > modal-backdrop { display: block; } &~ .modal-popup { display: block; } } } &> label > modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 4; background: var(--modal-backdrop); } } dialog::backdrop { background: var(--modal-backdrop); } .modal-popup-style { max-width: 756px; padding: 38px 56px 38px 56px; border-radius: 8px; border-style: none; background-color: var(--grey-8); } .modal-close { cursor: pointer; line-height: 1; width: 1lh; height: 1lh; text-align: center; font-size: x-large; font-weight: bold; background-color: var(--blue-button-off); color: #fff; border-radius: 50%; border: none; position: absolute; left: 100%; top: 0%; transform: translate(calc(-100% - 24px), 24px); &:after { display: inline-block; content: "×"; vertical-align: bottom; transform: translateY(-2.5px); } &:hover { background-color: var(--blue-button-on); } } .modal-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; } /* ============ (Hamburger) Menu ============ */ #nav-bar { display: flex; justify-content: center; position: fixed; z-index: 2; margin-top: 0; width: 100%; height: var(--nav-bar-height); background-color: var(--grey-8); padding: 0; border-style: none none solid none; border-bottom-width: 2px; border-color: var(--grey-6); } #menu-items { background-color: inherit; font-family: "Hammersmith One", Georgia, Garamond, "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; font-variant: small-caps; &> a { text-decoration: none; margin: 0 8px 0 8px; &:link, &:visited { color: var(--beige-0); } } } #menu-button { display: none; /* hide on desktop */ } @media (width < 750px) { /* switch to hamburger menu for mobile */ #menu-items { position: fixed; top: var(--nav-bar-height); width: 100%; height: calc(100% - var(--nav-bar-height)); transform: translateX(100%); transition: transform 200ms ease-in; display: flex; flex-direction: column; font-size: 28px; &> a { text-align: center; align-content: center; margin: 0; height: 2em; } /* center links in pop-up menu */ } #menu-button { --menu-button-height: 24px; --menu-button-width: 32px; --menu-button-padding: calc((var(--nav-bar-height) - var(--menu-button-height)) / 2); --menu-button-bounding-box: calc(var(--menu-button-width) + 2 * var(--menu-button-padding)); display: grid; position: fixed; width: var(--menu-button-bounding-box); height: var(--nav-bar-height); padding: var(--menu-button-padding); /* `right: 0` doesn't work. Apparently, for popovers, it must be `left` that's specified. */ left: calc(100% - var(--menu-button-bounding-box)); background-color: transparent; border: none; &:hover { background-color: rgba(255, 255, 255, .2); } row-gap: 24%; &>span { background-color: var(--beige-0); border-radius: 20px; transition: transform 200ms ease-in-out; } &>#menu-top { transform-origin: 0% 0%; } &>#menu-bot { transform-origin: 0% 100%; } &:popover-open { &> #menu-top { transform: translateX(7px) rotate(45deg) scale(.93); } &> #menu-mid { transform: scaleY(0); } &> #menu-bot { transform: translateX(7px) rotate(-45deg) scale(.93); } &+ #menu-items { transform: translateX(0); } } } }