:root { --tone-primary-text-hue: 175;--tone-primary-text-saturation: 84%;--tone-primary-text-lightness: 48%;--tone-primary-text-lightness-mod: 1;--tone-primary-background-hue: 173;--tone-primary-background-saturation: 29%;--tone-primary-background-lightness: 22%;--tone-primary-background-lightness-mod: 1;--tone-primary-border-hue: 174;--tone-primary-border-saturation: 13%;--tone-primary-border-lightness: 47%;--tone-primary-border-lightness-mod: 1;--tone-secondary-text-hue: 167;--tone-secondary-text-saturation: 13%;--tone-secondary-text-lightness: 72%;--tone-secondary-text-lightness-mod: -1;--tone-secondary-background-hue: 176;--tone-secondary-background-saturation: 13%;--tone-secondary-background-lightness: 22%;--tone-secondary-background-lightness-mod: 1;--tone-secondary-border-hue: 174;--tone-secondary-border-saturation: 13%;--tone-secondary-border-lightness: 47%;--tone-secondary-border-lightness-mod: 1;--tone-light-text-hue: 40;--tone-light-text-saturation: 6%;--tone-light-text-lightness: 10%;--tone-light-text-lightness-mod: 1;--tone-light-background-hue: 206;--tone-light-background-saturation: 15%;--tone-light-background-lightness: 68%;--tone-light-background-lightness-mod: -1;--tone-light-border-hue: 21;--tone-light-border-saturation: 6%;--tone-light-border-lightness: 45%;--tone-light-border-lightness-mod: 1;--tone-dark-text-hue: 205;--tone-dark-text-saturation: 13%;--tone-dark-text-lightness: 82%;--tone-dark-text-lightness-mod: -1;--tone-dark-background-hue: 34;--tone-dark-background-saturation: 7%;--tone-dark-background-lightness: 20%;--tone-dark-background-lightness-mod: 1;--tone-dark-border-hue: 23;--tone-dark-border-saturation: 6%;--tone-dark-border-lightness: 45%;--tone-dark-border-lightness-mod: 1;--tone-link-text-hue: 216;--tone-link-text-saturation: 98%;--tone-link-text-lightness: 80%;--tone-link-text-lightness-mod: -1;--tone-link-background-hue: 216;--tone-link-background-saturation: 15%;--tone-link-background-lightness: 47%;--tone-link-background-lightness-mod: 1;--tone-link-border-hue: 210;--tone-link-border-saturation: 3%;--tone-link-border-lightness: 44%;--tone-link-border-lightness-mod: 1 } .tone-primary, .tone-primary-text { --tone-text-hue: var(--tone-primary-text-hue); --tone-text-saturation: var(--tone-primary-text-saturation); --tone-text-lightness: var(--tone-primary-text-lightness); --tone-text-lightness-mod: var(--tone-primary-text-lightness-mod); } .tone-primary, .tone-primary-background { --tone-background-hue: var(--tone-primary-background-hue); --tone-background-saturation: var(--tone-primary-background-saturation); --tone-background-lightness: var(--tone-primary-background-lightness); --tone-background-lightness-mod: var(--tone-primary-background-lightness-mod); } .tone-primary, .tone-primary-border { --tone-border-hue: var(--tone-primary-border-hue); --tone-border-saturation: var(--tone-primary-border-saturation); --tone-border-lightness: var(--tone-primary-border-lightness); --tone-border-lightness-mod: var(--tone-primary-border-lightness-mod); } .tone-secondary, .tone-secondary-text { --tone-text-hue: var(--tone-secondary-text-hue); --tone-text-saturation: var(--tone-secondary-text-saturation); --tone-text-lightness: var(--tone-secondary-text-lightness); --tone-text-lightness-mod: var(--tone-secondary-text-lightness-mod); } .tone-secondary, .tone-secondary-background { --tone-background-hue: var(--tone-secondary-background-hue); --tone-background-saturation: var(--tone-secondary-background-saturation); --tone-background-lightness: var(--tone-secondary-background-lightness); --tone-background-lightness-mod: var(--tone-secondary-background-lightness-mod); } .tone-secondary, .tone-secondary-border { --tone-border-hue: var(--tone-secondary-border-hue); --tone-border-saturation: var(--tone-secondary-border-saturation); --tone-border-lightness: var(--tone-secondary-border-lightness); --tone-border-lightness-mod: var(--tone-secondary-border-lightness-mod); } .tone-light, .tone-light-text { --tone-text-hue: var(--tone-light-text-hue); --tone-text-saturation: var(--tone-light-text-saturation); --tone-text-lightness: var(--tone-light-text-lightness); --tone-text-lightness-mod: var(--tone-light-text-lightness-mod); } .tone-light, .tone-light-background { --tone-background-hue: var(--tone-light-background-hue); --tone-background-saturation: var(--tone-light-background-saturation); --tone-background-lightness: var(--tone-light-background-lightness); --tone-background-lightness-mod: var(--tone-light-background-lightness-mod); } .tone-light, .tone-light-border { --tone-border-hue: var(--tone-light-border-hue); --tone-border-saturation: var(--tone-light-border-saturation); --tone-border-lightness: var(--tone-light-border-lightness); --tone-border-lightness-mod: var(--tone-light-border-lightness-mod); } .tone-dark, .tone-dark-text { --tone-text-hue: var(--tone-dark-text-hue); --tone-text-saturation: var(--tone-dark-text-saturation); --tone-text-lightness: var(--tone-dark-text-lightness); --tone-text-lightness-mod: var(--tone-dark-text-lightness-mod); } .tone-dark, .tone-dark-background { --tone-background-hue: var(--tone-dark-background-hue); --tone-background-saturation: var(--tone-dark-background-saturation); --tone-background-lightness: var(--tone-dark-background-lightness); --tone-background-lightness-mod: var(--tone-dark-background-lightness-mod); } .tone-dark, .tone-dark-border { --tone-border-hue: var(--tone-dark-border-hue); --tone-border-saturation: var(--tone-dark-border-saturation); --tone-border-lightness: var(--tone-dark-border-lightness); --tone-border-lightness-mod: var(--tone-dark-border-lightness-mod); } .tone-link, .tone-link-text { --tone-text-hue: var(--tone-link-text-hue); --tone-text-saturation: var(--tone-link-text-saturation); --tone-text-lightness: var(--tone-link-text-lightness); --tone-text-lightness-mod: var(--tone-link-text-lightness-mod); } .tone-link, .tone-link-background { --tone-background-hue: var(--tone-link-background-hue); --tone-background-saturation: var(--tone-link-background-saturation); --tone-background-lightness: var(--tone-link-background-lightness); --tone-background-lightness-mod: var(--tone-link-background-lightness-mod); } .tone-link, .tone-link-border { --tone-border-hue: var(--tone-link-border-hue); --tone-border-saturation: var(--tone-link-border-saturation); --tone-border-lightness: var(--tone-link-border-lightness); --tone-border-lightness-mod: var(--tone-link-border-lightness-mod); } :root { --gutter: 1rem; } * { box-sizing: border-box; padding: 0; margin: 0; } a { --color: hsl(var(--tone-link-text-hue) var(--tone-link-text-saturation) var(--tone-link-text-lightness)); color: hsl(var(--tone-link-text-hue) var(--tone-link-text-saturation) var(--tone-link-text-lightness)); text-decoration: none; transition: .5s; line-height: 1; outline: 0; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } a:hover { --color: hsl(var(--tone-link-text-hue), var(--tone-link-text-saturation), calc(var(--tone-link-text-lightness) + (7.5% * var(--tone-link-text-lightness-mod)))); color: hsl(var(--tone-link-text-hue), var(--tone-link-text-saturation), calc(var(--tone-link-text-lightness) + (7.5% * var(--tone-link-text-lightness-mod)))); } svg, img { display: inline-block; max-height: 100%; max-width: 100%; height: auto; width: auto; } .segment-button-alignment-left, .alignment-left { text-align: left; } .segment-button-alignment-center, .alignment-center { text-align: center; } .segment-button-alignment-right, .alignment-right { text-align: right; } .zone { flex-direction: column; gap: var(--gutter); display: flex; } .segment-button a { background-color: hsl(var(--tone-background-hue), var(--tone-background-saturation), var(--tone-background-lightness)); color: hsl(var(--tone-text-hue), var(--tone-text-saturation), var(--tone-text-lightness)); display: inline-block; padding: .5rem 1rem; } .segment-button a:hover { background-color: hsl(var(--tone-background-hue), var(--tone-background-saturation), calc(var(--tone-background-lightness) + (7.5% * var(--tone-background-lightness-mod)))); color: hsl(var(--tone-text-hue), var(--tone-text-saturation), calc(var(--tone-text-lightness) + (7.5% * var(--tone-text-lightness-mod)))); } .segment-row { display: flex; gap: var(--gutter); } .segment-row-alignment-center { justify-content: center; } .segment-row-alignment-right { justify-content: right; } .segment-gallery { margin-bottom: calc(var(--gutter) * -1); column-gap: var(--gutter); column-width: 17.5rem; } .segment-gallery > * { margin-bottom: var(--gutter); } .segment-block { background-color: hsl(var(--tone-background-hue), var(--tone-background-saturation), var(--tone-background-lightness)); border: solid 1px hsl(var(--tone-border-hue), var(--tone-border-saturation), var(--tone-border-lightness)); color: hsl(var(--tone-text-hue), var(--tone-text-saturation), var(--tone-text-lightness)); } .segment-image img { display: block; } .segment-block > .segment:not(.segment-image) { padding: calc(var(--gutter) / 2) var(--gutter); } :root { --page-width: 800px; } html { background-color: #363330; font-family: Roboto, Helvetica Neue, Arial, sans-serif; color: rgb(204, 211, 217); } body { flex-direction: column; min-height: 100vh; display: flex; } main { background-color: #454340; max-width: calc(var(--page-width) + 2rem); padding: .5rem 1rem; width: 100%; margin: 0 auto; flex-grow: 1; } header, footer { background-color: #514c48; flex-direction: row; display: flex; } header { padding: 0 max(.5rem, calc((100vw - var(--page-width)) / 2)); border-bottom: 1px solid #7a726c; } footer { padding: .5rem max(.5rem, calc((100vw - var(--page-width)) / 2)); border-top: 1px solid #7a726c; gap: 1rem; } header .logo { max-height: 3rem; width: 17.5rem; padding-top: .5rem; padding-bottom: .5rem; } header nav { flex-grow: 1; width: 100%; } header nav ol { display: flex; flex-direction: row; list-style: none; } header nav a { padding: 1rem; display: block; } header nav a.active { background-color: #363330; } header nav a:hover { background-color: #454340; } figcaption { text-align: center; } .segment-text p:not(:last-child) { margin-bottom: var(--gutter); } .segment-block { flex-direction: column; display:flex; } ul, ol { padding-left: 1rem; } #zone-container-1ee3c681-1d2d-6a66-a8a2-52540089d689 { flex-direction: column; display: flex; gap: 1rem; } #zone-container-1ee3c681-1d2d-6a66-a8a2-52540089d689 .zone-main { grid-area: main; }#zone-container-1eef5e52-9a40-65b6-95bb-52540089d689 { flex-direction: column; display: flex; gap: 1rem; } #zone-container-1eef5e52-9a40-65b6-95bb-52540089d689 .zone-main { grid-area: main; }#zone-container-1eef5e52-9a40-65b6-95bb-52540089d689 .zone-sidebar { grid-area: sidebar; }@media all and (min-width: 960px) { #zone-container-1eef5e52-9a40-65b6-95bb-52540089d689 { grid-template-columns: 1fr 15rem; grid-template-rows: 1fr; grid-template-areas: "main sidebar"; display: grid; gap: 1rem; } }