diff --git a/assets/style.css b/assets/style.css index 93a983f..c6664d6 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,44 +1,292 @@ -:root{--bg:#f4f4f2;--fg:#1c1d20;--mu:#666a72;--ac:#1c1d20;color-scheme:light} -@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17181b;--fg:#e7e8ea;--mu:#9a9ea6;--ac:#e7e8ea;color-scheme:dark}} -:root[data-theme="dark"]{--bg:#17181b;--fg:#e7e8ea;--mu:#9a9ea6;--ac:#e7e8ea;color-scheme:dark} -*{box-sizing:border-box} -body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 ui-monospace,"JetBrains Mono","Fira Code",SFMono-Regular,Menlo,Consolas,monospace;transition:background .2s,color .2s} -a{color:inherit} -:focus-visible{outline:2px solid var(--ac);outline-offset:3px} -.wrap{max-width:1040px;margin:0 auto;padding:40px 20px 64px} -h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 10px;letter-spacing:-.02em} -h3{font-size:24px;letter-spacing:-.01em;margin:0 0 16px} -.lead{color:var(--mu);max-width:100ch;margin:0 0 36px} -.theme .lead{color:var(--fg);opacity:.85} -.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:14px} -.top h1{margin:0;font-size:28px;display:flex;align-items:center;gap:14px} -.logo{width:44px;height:44px} -.top + .lead{margin-top:-12px} -.top button{width:38px;height:38px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);transition:background .15s,transform .15s} -.top button:hover{background:color-mix(in srgb,var(--fg) 18%,transparent)} -.top button:active{transform:scale(.92)} -.top button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} -.sun{display:none} -:root[data-theme="dark"] .sun{display:block} -:root[data-theme="dark"] .moon{display:none} -@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sun{display:block}:root:not([data-theme="light"]) .moon{display:none}} -.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px} -.card{display:flex;flex-direction:column;text-decoration:none;border-radius:10px;padding:20px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);transition:transform .15s} -.card:hover{transform:translateY(-3px)} -.card h2{margin:0;font-size:22px;letter-spacing:-.01em} -.card p{flex:1;margin:4px 0 16px;font-size:13px;opacity:.75} -.code{font-size:13px;line-height:1.6;padding:12px 14px;border-radius:6px;margin-bottom:16px;white-space:pre;overflow:hidden} -.strip{display:flex;height:34px;border-radius:6px;overflow:hidden} -.strip i{flex:1} -.foot{margin-top:48px;color:var(--mu);font-size:13px;max-width:70ch} -.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0 0 56px} -.sw button{font:inherit;text-align:left;border:0;border-radius:8px;padding:56px 12px 12px;cursor:pointer;display:block;width:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 20%,transparent)} -.sw b{display:block;font-size:14px} -.sw span{font-size:13px;opacity:.85} -.rows{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent)} -.rows li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 20%,transparent);flex-wrap:wrap} -.rows .p{width:110px;font-weight:700} -.rows a{color:var(--ac)} -.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000;color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s} -.toast.on{opacity:1} -@media (prefers-reduced-motion:reduce){*{transition:none!important}} +:root { + --bg: #f4f4f2; + --fg: #1c1d20; + --mu: #666a72; + --ac: #1c1d20; + color-scheme: light +} + +@media (prefers-color-scheme:dark) { + :root:not([data-theme="light"]) { + --bg: #17181b; + --fg: #e7e8ea; + --mu: #9a9ea6; + --ac: #e7e8ea; + color-scheme: dark + } +} + +:root[data-theme="dark"] { + --bg: #17181b; + --fg: #e7e8ea; + --mu: #9a9ea6; + --ac: #e7e8ea; + color-scheme: dark +} + +* { + box-sizing: border-box +} + +body { + margin: 0; + background: var(--bg); + color: var(--fg); + font: 16px/1.55 ui-monospace, "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Consolas, monospace; + transition: background .2s, color .2s +} + +a { + color: inherit +} + +:focus-visible { + outline: 2px solid var(--ac); + outline-offset: 3px +} + +.wrap { + max-width: 1040px; + margin: 0 auto; + padding: 40px 20px 64px +} + +h1 { + font-size: clamp(28px, 5vw, 40px); + line-height: 1.15; + margin: 0 0 10px; + letter-spacing: -.02em +} + +h3 { + font-size: 24px; + letter-spacing: -.01em; + margin: 0 0 16px +} + +.lead { + color: var(--mu); + max-width: 100ch; + margin: 0 0 36px +} + +.theme .lead { + color: var(--fg); + opacity: .85 +} + +.top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; + font-size: 14px +} + +.top h1 { + margin: 0; + font-size: 28px; + display: flex; + align-items: center; + gap: 14px +} + +.logo { + width: 44px; + height: 44px +} + +.top+.lead { + margin-top: -12px +} + +.top button { + width: 38px; + height: 38px; + padding: 0; + border: 0; + border-radius: 50%; + display: grid; + place-items: center; + cursor: pointer; + color: var(--fg); + background: color-mix(in srgb, var(--fg) 10%, transparent); + transition: background .15s, transform .15s +} + +.top button:hover { + background: color-mix(in srgb, var(--fg) 18%, transparent) +} + +.top button:active { + transform: scale(.92) +} + +.top button svg { + display: block; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round +} + +.sun { + display: none +} + +:root[data-theme="dark"] .sun { + display: block +} + +:root[data-theme="dark"] .moon { + display: none +} + +@media (prefers-color-scheme:dark) { + :root:not([data-theme="light"]) .sun { + display: block + } + + :root:not([data-theme="light"]) .moon { + display: none + } +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + gap: 20px +} + +.card { + display: flex; + flex-direction: column; + text-decoration: none; + border-radius: 10px; + padding: 20px; + border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); + transition: transform .15s +} + +.card:hover { + transform: translateY(-3px) +} + +.card h2 { + margin: 0; + font-size: 22px; + letter-spacing: -.01em +} + +.card p { + flex: 1; + margin: 4px 0 16px; + font-size: 13px; + opacity: .75 +} + +.code { + font-size: 13px; + line-height: 1.6; + padding: 12px 14px; + border-radius: 6px; + margin-bottom: 16px; + white-space: pre; + overflow: hidden +} + +.strip { + display: flex; + height: 34px; + border-radius: 6px; + overflow: hidden +} + +.strip i { + flex: 1 +} + +.foot { + margin-top: 48px; + color: var(--mu); + font-size: 13px; + max-width: 70ch +} + +.sw { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 12px; + margin: 0 0 56px +} + +.sw button { + font: inherit; + text-align: left; + border: 0; + border-radius: 8px; + padding: 56px 12px 12px; + cursor: pointer; + display: block; + width: 100%; + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent) +} + +.sw b { + display: block; + font-size: 14px +} + +.sw span { + font-size: 13px; + opacity: .85 +} + +.rows { + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid color-mix(in srgb, var(--fg) 20%, transparent) +} + +.rows li { + display: flex; + gap: 16px; + padding: 12px 0; + border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); + flex-wrap: wrap +} + +.rows .p { + width: 110px; + font-weight: 700 +} + +.rows a { + color: var(--ac) +} + +.toast { + position: fixed; + left: 50%; + bottom: 24px; + transform: translateX(-50%); + background: #000; + color: #fff; + padding: 8px 16px; + border-radius: 6px; + font-size: 13px; + opacity: 0; + pointer-events: none; + transition: opacity .2s +} + +.toast.on { + opacity: 1 +} + +@media (prefers-reduced-motion:reduce) { + * { + transition: none !important + } +}