@layer base, header, footer, images, switcher, phone; @import url(../fonts/junicodevf/junicodevf.css) layer(base); @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: drop-shadow(3px 2px 0 var(--shadow-color)); --shadow2: drop-shadow(-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; filter: var(--shadow) var(--shadow2); } figure { filter: var(--shadow2); } } @layer base.fonts { :root { font-family: JunicodeVF, serif; font-feature-settings: "ccmp", "calt", "liga", "loca", "rlig", "kern", "mark", "mkmk"; 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.headings { h1, h2, h3, h4, h5, h6 { font-stretch: 75%; font-variation-settings: "ENLA" 0; } h2 { margin: 1em; position: relative; border-bottom: 3px double currentcolor; font-size: 225%; font-weight: 500; &::before { content: '•'; font-size: 80%; font-feature-settings: "ornm" 5; position: absolute; left: -1.15em; bottom: 7%; rotate: -5deg; } } } @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; } dl { margin: 0 1em; } dt { font-weight: bold; } dd { margin: 0; } @media (width >= 70rem) { dl { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; } dt { grid-column-start: 1; } dd { grid-column-start: 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 { #velzek-img-holder { display: grid; grid-template: "i"; align-items: center; > * { grid-area: i; } /* for the narrow layout */ max-width: 480px; margin: auto; } img { filter: var(--shadow2); max-width: 100%; &.bordered { border: 10px solid currentcolor; } } @media (width >= 70rem) { figure { width: 480px; float: right; margin: 0 calc(0px - var(--protrude)) 1em 1em; img { width: 100%; } } #velzek-pic { shape-outside: polygon(100% 0%, 13% 0%, 13% 25%, 0% 27%, 0% 51%, 18% 60%, 21% 100%, 100% 100%); } #ekkel-pic { rotate: -2deg; } #suveesha-pic { rotate: 3deg; } } } @layer switcher { #velzek-pic img { transition: all ease 200ms 175ms; } :root:has(#switch:checked) #clothes-pic, :root:not(:has(#switch:checked)) #armour-pic { opacity: 0; transition-delay: 0ms; pointer-events: none; } #switch { appearance: none; position: absolute; } #velzek-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; } } }