/* ========================================================================== The Bench: shared tokens, fonts, paper and tape. A filing cabinet in cyanotype blue. The ground is a Prussian blueprint grid, the folders are warm stationery stock, and one signal orange is kept for stamps and anything you're meant to press. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@500;800&family=Cedarville+Cursive&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Instrument+Serif:ital@0;1&display=swap"); /* Fallback faces tuned to the web fonts' metrics, so nothing jumps when they arrive. */ @font-face { font-family: "Courier Prime Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 100%; } @font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 88%; } :root { /* materials */ --paper: #f3eee2; --paper-shade: #e5ddca; --kraft: #b08a5e; --graphite: #24262b; --graphite-2: #585a5f; --graphite-3: #8b8c8e; --rust: #c8502a; --tape: #e9d98f; /* masking tape */ --signal: #ff5a2c; /* stamps and calls to action, nothing else */ --ink-blue: #1f3f86; /* fountain pen, for handwriting */ /* the room is a cutting mat; its colour comes from (see below) */ --ground: var(--mat); --ground-2: var(--mat-light); --ground-line: rgb(var(--mat-ink) / .07); --ground-ink: rgb(208 222 242 / .62); --ground-text: #e9eef6; /* folder stock: tools.json picks one per tool with "color" */ --f-manila: #dcb66d; --f-salmon: #e9927c; --f-sage: #a3c19a; --f-kraft: #bb8b5b; --f-butter: #eed88a; --f-slate: #8fa3b8; --f-rose: #d9a0b0; --f-indigo: #8e9ccb; --f-signal: #ff5a2c; /* type */ --stencil: "Big Shoulders Stencil Display", Impact, sans-serif; --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif; --mono: "Courier Prime", "Courier Prime Fallback", ui-monospace, monospace; --hand: "Cedarville Cursive", "Snell Roundhand", cursive; /* light comes from the top-left; every shadow agrees */ --shadow-rest: drop-shadow(2px 3px 1.5px rgb(4 10 20 / .35)) drop-shadow(6px 10px 10px rgb(4 10 20 / .3)); --shadow-lift: drop-shadow(4px 7px 3px rgb(30 24 14 / .22)) drop-shadow(16px 26px 22px rgb(30 24 14 / .26)); --paper-shadow: 1px 2px 1px rgb(4 10 20 / .3), 6px 12px 22px rgb(4 10 20 / .35); --ease-settle: cubic-bezier(.3, 1.4, .5, 1); /* tiny overshoot */ /* rubber-stamp ink: a speckled mask so stamps look pressed, not printed */ --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.85'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); /* a hand-drawn pencil loop, used as the focus ring and for chosen options */ --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M30 20 C80 2 170 6 188 42 C204 78 150 114 92 114 C34 114 2 88 10 56 C16 30 60 12 118 12 C150 12 176 20 184 30' fill='none' stroke='%232b2a27' stroke-width='2.2' stroke-linecap='round' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } /* cutting-mat colours: shared/mat.js sets */ :root, [data-mat="blue"] { --mat: #0d1a2c; --mat-light: #132540; --mat-dark: #0b1626; --mat-ink: 168 196 236; } [data-mat="green"] { --mat: #20483a; --mat-light: #2a5a48; --mat-dark: #1a3c30; --mat-ink: 214 236 206; } [data-mat="black"] { --mat: #161719; --mat-light: #222326; --mat-dark: #101113; --mat-ink: 214 214 208; } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--mono); color: var(--graphite); background-color: var(--ground); /* blueprint grid: a fine 24px mesh inside a 120px one */ background-image: linear-gradient(var(--ground-line) 1px, transparent 1px), linear-gradient(90deg, var(--ground-line) 1px, transparent 1px), linear-gradient(rgb(168 196 236 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(168 196 236 / .035) 1px, transparent 1px), radial-gradient(120% 80% at 30% 0%, var(--ground-2), transparent 70%); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%; background-attachment: fixed; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { display: block; } /* Cross-document morph: the stencilled number on the catalogue card slides into the plate. Ignored where unsupported. */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.3, .8, .3, 1); } /* stamps */ .ink { -webkit-mask: var(--ink-mask) 0 0 / 180px; mask: var(--ink-mask) 0 0 / 180px; } /* --- paper ------------------------------------------------------------ */ .paper { color: var(--graphite); background-color: var(--paper); background-image: url("/assets/desk/paper.png"); background-blend-mode: multiply; box-shadow: var(--paper-shadow); } /* --- masking tape: labels and buttons --------------------------------- */ .tape { --tilt: -1.5deg; display: inline-block; font: 400 13px/1 var(--mono); letter-spacing: .04em; text-transform: lowercase; color: var(--graphite); text-decoration: none; background: var(--tape); padding: 7px 12px 6px; border: 0; cursor: pointer; rotate: var(--tilt); /* torn ends */ clip-path: polygon(2% 0, 98% 4%, 100% 30%, 97% 55%, 100% 80%, 98% 100%, 1% 96%, 3% 70%, 0 45%, 2% 20%); opacity: .92; transition: translate .15s, rotate .15s, background .15s; } .tape:nth-child(2n) { --tilt: 1deg; } .tape:nth-child(3n) { --tilt: -.5deg; } .tape:hover, .tape:focus-visible { translate: 0 -2px; rotate: 0deg; background: #efdd9c; outline: none; } .tape:focus-visible { text-decoration: underline wavy var(--graphite-2) 1px; text-underline-offset: 3px; } /* --- how things rank: every tool page follows this ---------------------- 1. primary .tape.primary signal orange. The one action that makes the result (export; the cyanotype's develop). At most one live at a time. 2. secondary .tape yellow tape. Other actions: new picture, replay, reset. 3. options .picker/.pick a labelled row of typed choices; the chosen one is ringed in pencil. 4. readouts .readout plain facts about the current state (sizes, counts). Never a button. Anything you can't press yet is .tape:disabled, faded and flat, never hidden without reason. */ .tape.primary { background: var(--signal); opacity: 1; box-shadow: 1px 2px 0 rgb(4 10 20 / .18); } .tape.primary:hover, .tape.primary:focus-visible { background: #ff7650; } .tape:disabled { opacity: .4; cursor: not-allowed; translate: none; rotate: var(--tilt); box-shadow: none; } .picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; } .picker-label { width: 100%; text-align: center; margin: 0 0 4px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(233 238 246 / .55); } .pick { position: relative; font: 13px var(--mono); padding: 6px 8px; background: none; border: 0; cursor: pointer; color: rgb(233 238 246 / .78); transition: color .15s; } .pick:hover { color: #fff; } .pick:focus-visible { color: #fff; outline: 1px dashed rgb(233 238 246 / .6); outline-offset: 2px; } .pick[aria-pressed="true"], .pick.active { color: #fff; } .pick[aria-pressed="true"]::after, .pick.active::after { content: ""; position: absolute; inset: -5px -10px; pointer-events: none; filter: invert(1); background: var(--scribble) center / 100% 100% no-repeat; } .readout { font: 12px/1.3 var(--mono); letter-spacing: .04em; color: rgb(233 238 246 / .7); } /* --- pencil-circle focus ring (replaces the default blue) ------------- */ .pencil-ring { position: relative; } .pencil-ring:focus { outline: none; } .pencil-ring:focus-visible::after { content: ""; position: absolute; inset: -14px -18px; pointer-events: none; background: var(--scribble) center / 100% 100% no-repeat; } /* ========================================================================== Tool shell (shared/shell.js): the plate on the left, the working area on the right. ========================================================================== */ body.shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; transition: grid-template-columns .35s ease; } body.shell.plate-closed { grid-template-columns: 0 minmax(0, 1fr); } .plate { grid-row: 1 / 3; grid-column: 1; align-self: start; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 24px 28px 26px; z-index: 2; scrollbar-width: thin; } .plate-closed .plate { visibility: hidden; } /* the way out: an orange strip of tape, the one thing on the plate you're meant to press */ .plate-back.tape { align-self: flex-start; --tilt: -2deg; padding: 9px 14px 8px; font-size: 13px; background: var(--signal); opacity: 1; box-shadow: 1px 2px 0 rgb(4 10 20 / .18); } .plate-back.tape:hover, .plate-back.tape:focus-visible { background: #ff7650; } .plate-no { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 0; font-size: 13px; letter-spacing: .1em; border-bottom: 1px solid var(--graphite-3); padding-bottom: 8px; } .plate-no span { font-size: 11px; letter-spacing: .04em; color: var(--graphite-2); } .plate-no-big { margin: 22px 0 10px; font: 800 132px/.8 var(--stencil); letter-spacing: -.02em; color: color-mix(in srgb, var(--c) 78%, black); width: max-content; } .plate-name { font: 400 44px/1 var(--serif); margin: 0 0 10px; letter-spacing: -.01em; } .plate-summary { font: italic 18px/1.35 var(--serif); margin: 0; color: var(--graphite-2); } /* each section opens with a dashed rule, like the lines on a file card */ .plate h2 { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-2); margin: 26px 0 12px; padding-top: 18px; border-top: 1px dashed rgb(43 42 39 / .3); } .plate-materials { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.75; } .plate-materials li::before { content: "ยท "; color: var(--graphite-3); } .plate-notes { font: 16px/1.5 var(--serif); margin: 0; } .plate-log { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.5; } .plate-log li + li { margin-top: 12px; } .plate-log time { display: block; margin-bottom: 2px; color: var(--graphite-2); font-size: 11px; } .plate-foot { margin: auto 0 0; padding-top: 32px; font-size: 11px; color: var(--graphite-3); } .plate-toggle { position: fixed; top: 22px; left: 340px; z-index: 3; transition: left .35s ease; width: 26px; height: 40px; border: 0; cursor: pointer; padding: 0 0 0 4px; font: 700 16px var(--mono); color: var(--graphite); background: var(--tape); opacity: .9; clip-path: polygon(0 0, 100% 6%, 96% 50%, 100% 94%, 0 100%); } .plate-closed .plate-toggle { left: 0; } .toolbar { grid-column: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 22px 28px 0 48px; } .toolbar[hidden] { display: none; } .toolbar .tape:disabled { opacity: .6; cursor: progress; } body.shell > main { grid-column: 2; grid-row: 2; min-width: 0; padding: 20px 28px 40px 48px; } /* a tool that isn't finished yet: a workshop work order */ .otb { position: relative; display: grid; place-items: center; min-height: 72vh; padding: 40px 0; } .otb-no { position: absolute; top: 50%; left: 50%; translate: -50% -54%; pointer-events: none; white-space: nowrap; font: 800 clamp(200px, 38vw, 480px)/.8 var(--stencil); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 55%, transparent); } .otb-card { position: relative; width: min(460px, 100%); rotate: -1.2deg; } .otb-card::before { content: ""; position: absolute; top: -12px; left: 40%; width: 90px; height: 24px; rotate: 3deg; background: var(--tape); opacity: .88; z-index: 1; } .otb-band { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 24px 12px; background: var(--c) url("/assets/desk/paper.png"); background-blend-mode: multiply; font: 800 22px/1 var(--stencil); letter-spacing: .12em; text-transform: uppercase; } .otb-band span:last-child { font-size: 30px; letter-spacing: .02em; } .otb-rows { margin: 0; padding: 14px 24px 4px; } .otb-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--graphite-3); font-size: 13px; } .otb-rows dt { color: var(--graphite-2); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; } .otb-rows dd { margin: 0; text-align: right; } .otb-text { margin: 0; padding: 16px 24px 6px; font: 19px/1.45 var(--serif); } .otb-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px 20px; font-size: 12px; color: var(--graphite-2); } .otb-foot a { color: var(--graphite); } .otb-stamp { display: block; width: max-content; margin: 4px 24px 22px auto; rotate: -5deg; padding: 7px 14px 5px; border: 3px solid var(--signal); color: var(--signal); font: 800 24px/1 var(--stencil); letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 760px) { .otb { min-height: 60vh; } } @media (max-width: 900px) { body.shell { display: block; } /* phones and small tablets: the plate shrinks to a header; the full file lives in the archive */ .plate { position: static; height: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: end; padding: 18px 16px 20px; } .plate-back, .plate-no { grid-column: 1 / -1; } .plate-back.tape { justify-self: start; } .plate-no { margin-top: 16px; } .plate-no-big { grid-row: span 2; font-size: 76px; margin: 14px 0 0; } .plate-name { font-size: 34px; margin: 0; } .plate-summary { margin: 4px 0 0; font-size: 16px; } .plate h2, .plate-materials, .plate-notes, .plate-log, .plate-foot { display: none; } .plate-toggle { display: none; } .toolbar { padding: 16px 16px 0; justify-content: flex-start; flex-wrap: wrap; } body.shell > main { padding: 16px; } } @media (prefers-reduced-motion: reduce) { body.shell, .plate-toggle { transition: none; } } /* ========================================================================== Export panel (shared/export.js) ========================================================================== */ dialog.export { border: 0; padding: 0; width: min(800px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: var(--graphite); scrollbar-width: thin; } dialog.export::backdrop { background: rgb(4 10 20 / .62); animation: ex-dim .26s ease-out; } dialog.export.closing::backdrop { opacity: 0; transition: opacity .18s; } @keyframes ex-dim { from { opacity: 0; } } .ex-head { padding: 22px 28px 16px; border-bottom: 1px solid var(--graphite-3); } .ex-kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-2); } .ex-head h2 { font: 400 32px/1 var(--serif); margin: 0; } .ex-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 20px 28px 8px; align-items: start; } .ex-body:has(.ex-preview[hidden]) { grid-template-columns: minmax(0, 1fr); } .ex-preview[hidden] { display: none; } .ex-frame { position: relative; width: max-content; max-width: 100%; margin: 6px auto 0; overflow: hidden; box-shadow: var(--paper-shadow); } .ex-frame canvas { display: block; max-width: 100%; height: auto; } .ex-crop { position: absolute; cursor: grab; touch-action: none; outline: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgb(12 14 18 / .55); } .ex-crop:active { cursor: grabbing; } .ex-crop span { /* rule-of-thirds guides */ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgb(255 255 255 / .45) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .45) 0 calc(66.66% + .5px), transparent 0), linear-gradient(transparent calc(33.33% - .5px), rgb(255 255 255 / .45) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .45) 0 calc(66.66% + .5px), transparent 0); } .ex-crop[hidden], .ex-hint[hidden] { display: none; } .ex-hint { margin: 10px 0 0; text-align: center; font: italic 15px var(--serif); color: var(--graphite-2); } .ex-rows { display: flex; flex-direction: column; } .ex-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 0; border-bottom: 1px dashed rgb(43 42 39 / .25); } .ex-row:last-child { border-bottom: 0; } .ex-row[hidden] { display: none; } .ex-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-2); } .ex-chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; } .ex-chip { font: 12px/1 var(--mono); padding: 7px 10px; border: 1px solid rgb(43 42 39 / .3); border-radius: 2px; background: transparent; color: var(--graphite); cursor: pointer; transition: border-color .15s, background .15s; } .ex-chip:hover { border-color: var(--graphite); } .ex-chip[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: var(--paper); } .ex-chip:focus-visible, .export input:focus-visible { outline: 1px dashed var(--graphite-2); outline-offset: 3px; } .ex-w { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--graphite-2); } .export input[type=number], .export input[type=text] { font: 13px var(--mono); color: var(--graphite); background: transparent; border: 0; border-bottom: 1px solid var(--graphite); padding: 4px 0; border-radius: 0; } .export input[type=number] { width: 80px; } .ex-file { grid-column: 2 / -1; display: flex; align-items: baseline; } .ex-file input { flex: 1; min-width: 0; } .ex-ext { font-size: 13px; color: var(--graphite-2); } .export input[type=range] { width: 100%; appearance: none; background: none; margin: 0; cursor: pointer; } .export input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--graphite); } .export input[type=range]::-moz-range-track { height: 1px; background: var(--graphite); } .export input[type=range]::-webkit-slider-thumb { appearance: none; width: 8px; height: 16px; margin-top: -8px; background: var(--ink-blue); } .export input[type=range]::-moz-range-thumb { width: 8px; height: 16px; border: 0; border-radius: 0; background: var(--ink-blue); } .ex-qv { font-size: 12px; min-width: 3.5ch; text-align: right; } .export input[type=checkbox] { justify-self: start; accent-color: var(--ink-blue); width: 16px; height: 16px; margin: 0; } .ex-row small { font-size: 11px; color: var(--graphite-2); } .ex-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 28px 22px; border-top: 1px solid var(--graphite-3); margin-top: 10px; } .ex-sum { margin: 0 auto 0 0; font-size: 13px; } .ex-cancel { font: 13px var(--mono); background: none; border: 0; padding: 6px 4px; color: var(--graphite-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .ex-cancel:hover, .ex-cancel:focus-visible { color: var(--graphite); } .ex-go { font-size: 14px; padding: 9px 16px 8px; } @media (max-width: 680px) { .ex-head, .ex-body, .ex-foot { padding-left: 18px; padding-right: 18px; } .ex-body { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ex-row { grid-template-columns: minmax(0, 1fr) auto; } .ex-row > .ex-label { grid-column: 1 / -1; } .ex-chips, .ex-w, .ex-file { grid-column: 1 / -1; } .ex-sum { width: 100%; } } /* ========================================================================== Tool page parts. A tool page is one centred column: the work (.frame) on top, a paper .strip of controls under it at the same width, then .pickers. The frame is sized from the window's height (via --ar, its aspect ratio) so the whole set fits on one screen with no dead space around it. ========================================================================== */ .column { --ar: 1.333; --w: min(100%, 1000px, calc((100vh - 400px) * var(--ar))); min-height: calc(100vh - 110px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .column > .frame, .column > .strip { width: var(--w); min-width: min(100%, 560px); } .frame { position: relative; aspect-ratio: var(--ar); box-shadow: var(--paper-shadow); } .strip { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; margin-top: 16px; padding: 16px 22px; rotate: .2deg; } .strip [hidden] { display: none; } .strip .tape { font-size: 13px; } .strip .tape.primary { flex: none; font-size: 15px; padding: 10px 18px 9px; } .knob { flex: 1 1 100px; display: flex; flex-direction: column; gap: 10px; font-size: 11px; letter-spacing: .06em; color: var(--graphite-2); } .knob output { color: var(--graphite); margin-left: 4px; } .knob input[type=range] { width: 100%; appearance: none; background: none; margin: 0; cursor: pointer; } .knob input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--graphite); } .knob input[type=range]::-moz-range-track { height: 1px; background: var(--graphite); } .knob input[type=range]::-webkit-slider-thumb { appearance: none; width: 8px; height: 16px; margin-top: -8px; background: var(--ink-blue); } .knob input[type=range]::-moz-range-thumb { width: 8px; height: 16px; border: 0; border-radius: 0; background: var(--ink-blue); } .knob input[type=text] { font: 13px var(--mono); color: var(--graphite); background: transparent; border: 0; border-bottom: 1px solid var(--graphite); padding: 3px 0; border-radius: 0; width: 100%; } .knob input:focus-visible, .check input:focus-visible { outline: 1px dashed var(--graphite-2); outline-offset: 4px; } .checks { display: flex; flex-direction: column; gap: 8px; flex: none; } .check { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--graphite-2); cursor: pointer; } .check input { accent-color: var(--ink-blue); width: 14px; height: 14px; margin: 0; } .pickers { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 48px; } .column > .readout { margin: 12px 0 0; text-align: center; } /* the empty state inside a frame: what to feed it */ .feed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--ground-text); } .feed span { font: italic 24px/1.25 var(--serif); } .feed small { font: 11px var(--mono); letter-spacing: .06em; color: rgb(233 238 246 / .6); } .feed .sources { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .feed .link { font: 12px var(--mono); background: none; border: 0; padding: 4px; color: rgb(233 238 246 / .8); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .feed .link:hover { color: #fff; } @media (max-width: 640px) { .column { justify-content: flex-start; min-height: 0; } .column > .frame, .column > .strip { min-width: 0; width: 100%; } .strip { rotate: 0deg; padding: 14px 16px; } }