@layer fonts, base, header, footer, images, switcher, phone; @import url(../fonts/junicodevf/junicodevf.css) layer(fonts); @layer base { * { box-sizing: border-box; } } @layer base.cols { :root, ::selection { --text-color: hsl(350deg 40% 15%); --accent-color: hsl(80deg 50% 35%); --shadow-color: hsl(from var(--text-color) h 20% 3% / 20%); --shadow: 3px 2px 0 var(--shadow-color); --shadow2: -2px 0 0 hsl(from var(--text-color) h 20% 7% / 15%); } :root { background: url(classy-fabric.png), linear-gradient(to bottom in oklch, hsl(55deg 55% 70%), hsl(80deg 30% 50%)); background-blend-mode: multiply; color: var(--text-color); accent-color: var(--accent-color); } ::selection { background: hsl(from var(--accent-color) h s calc(l * 0.75)); color: hsl(60deg 10% 90%); } body { background: url(beige-paper.png), hsl(40deg 80% 80%); background-blend-mode: multiply; border: 10px solid currentcolor; box-shadow: var(--shadow), var(--shadow2); } } @layer base.fonts { :root { font-family: JunicodeVF, serif; --base-features: "ccmp", "calt", "liga", "loca", "rlig", "kern", "mark", "mkmk", "ss09", "cv69" 6; /* nice */ font-feature-settings: var(--base-features); font-variation-settings: "ENLA" 25; font-stretch: 125%; font-weight: 450; } } @layer base.layout { :root { --protrude: 8rem; min-height: 100vh; } body { max-width: 50rem; margin: 1rem auto 2rem; padding: 1rem; } section, footer { clear: both; } footer { text-align: center; padding: 1em 0 0.75em; } } @layer base.other { a { color: inherit; text-decoration: underline; text-decoration-color: hsl(from currentcolor h s l / 0.6); text-underline-offset: 0.125em; } dfn { font-weight: 700; font-style: italic; } .amp { font-size: 75%; font-weight: 550; } small { font-stretch: 100%; } } @layer base.headings { h1, h2, h3, h4, h5, h6 { font-stretch: 75%; font-feature-settings: var(--base-features), "cv02" 1, "cv08" 1, "cv10" 1, "cv12" 10, "cv14" 6, "cv15" 4, "cv16" 1, "cv24" 5, "cv38" 2, "cv48" 1; font-variation-settings: "ENLA" 0; small { font-stretch: 65%; } } h2 { margin: 0 0 0.5rem; font-size: 225%; font-weight: 500; &::before { content: '•'; font-size: 80%; font-feature-settings: "ornm" 2; } } } @layer header { header { display: grid; grid-template: "l header r" / 1fr auto 1fr; gap: 1ex; margin: 0.25em auto 0.5em; font-size: 400%; align-items: center; } header h1 { font-size: inherit; grid-area: header; margin: 0; font-weight: 400; text-align: center; justify-self: center; } header { &::before, &::after { content: '•'; font-size: 65%; } &::before { grid-area: l; font-feature-settings: "ornm" 7; justify-self: end; } &::after { grid-area: r; font-feature-settings: "ornm" 8; justify-self: start; } } } @layer footer { footer { font-feature-settings: "ornm" 6; a { text-decoration: none; } font-size: 250%; } } @layer images { #char-img-holder { display: grid; grid-template: "i"; align-items: center; > * { grid-area: i; } /* for the narrow layout */ max-width: 480px; margin: auto; } .mainfig { max-width: 100%; } .bordered { box-shadow: var(--shadow), var(--shadow2); border: 10px solid currentcolor; } #char-pic { filter: drop-shadow(var(--shadow)); } figure img { width: 100%; } @media (width >= 70rem) { .mainfig { width: 480px; float: right; margin: 0 calc(0px - var(--protrude)) 1em 1em; img { width: 100%; } } section:nth-of-type(even) .mainfig { rotate: -1deg; } section:nth-of-type(odd) .mainfig { rotate: 1.5deg; } #char-pic { rotate: 0deg; } } } @layer switcher { #pic1, #pic2 { transition: all ease 200ms 175ms; } :root:has(#switch:checked) #pic1, :root:not(:has(#switch:checked)) #pic2 { opacity: 0; transition-delay: 0ms; pointer-events: none; } #switch { appearance: none; position: absolute; } #char-pic label { display: block; width: min-content; margin: 0 auto 1em; text-align: center; padding: 2px 8px 0; background: hsl(40deg 25% 95% / 65%); border: 1px solid currentcolor; font-weight: bold; cursor: pointer; } } @layer phone { @media (width <= 50em) { * { background-blend-mode: unset; filter: none; } :root { background: none; } body { border: 0; margin: 0; } header { margin-left: 0.5em; margin-right: 0.5em; } } }