/* Main layout */ body { --main-min-size: 100vh; margin: 0; display: grid; grid-template-columns: [left] minmax(0, 1fr) [right] auto; grid-template-rows: [nav] auto [main] minmax(var(--main-min-size), auto) [virtual] 100vh; } html { /* Leave a bunch of space at the top when scrolling to elements. I'm honestly not sure why this is needed on and not the scrolled-to element... */ scroll-padding-top: 10vh; } .sidebar-sticky { grid-column: right; grid-row: main; } aside.sidebar { position: sticky; top: 0px; max-width: 50rem; height: 100vh; padding: 0.8rem; display: flex; } main { grid-column: left; grid-row: main; min-width: 0; } footer.pink-space { grid-column: 1 / -1; grid-row: virtual; } /* Narrower layout: sidebar is pushed to the top */ @media (max-width: 1280px) { body { --main-min-size: 0; } .sidebar-sticky { grid-column: left; grid-row: nav; display: flex; justify-content: center; } aside.sidebar { position: relative; height: auto; padding: 0; } } /* Set up typography */ :root { --font-normal: "RecVar-Crit", "RecVar-Full", sans-serif; --font-italic: "RecVar-Full", "RecVar-Crit", sans-serif; --font-code: "RecVar-Full", monospace; --font-title: "RecVar-Title", "Arial Black", sans-serif; } html { font-size: 62.5%; } body { font-size: 1.6rem; } body, pre, code, kbd, button, select, input, dfn { font-family: var(--font-normal); line-height: 1.5; text-size-adjust: none; font-style: normal; --recursive-slnt: 0; } pre, code, kbd, button, select, input { font-size: inherit; } :root { font-weight: 450; --recursive-mono: 0; --recursive-crsv: 0.5; font-style: normal; --recursive-slnt: 0; } *, *:before, *:after { font-variation-settings: "MONO" var(--recursive-mono), "CRSV" var(--recursive-crsv), "slnt" var(--recursive-slnt); font-feature-settings: "ss03", "ss04", "ss05", "ss06", "ss08"; font-synthesis: none; /* Chrome: synthesises italics on top of using the font's built-in italic (????) */ } h1 { font-weight: 900; font-size: 4.8rem; } h2 { font-weight: 850; font-size: 3.2rem; } h3 { font-weight: 850; font-size: 2.4rem; } h4 { font-weight: 800; font-size: 1.6rem; } code { font-family: var(--font-code); --recursive-mono: 0.5; } pre, pre code, kbd, th-literate-program { font-family: var(--font-code); --recursive-mono: 1; font-weight: 450; tab-size: 4; } strong code { font-weight: 800; } b, strong { font-weight: 700; } i, em { --recursive-crsv: 1; --recursive-slnt: -15; /* required for Chrome */ font-family: var(--font-italic); font-style: italic; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* Other classes for controlling typography */ .nowrap { white-space: nowrap; } /* Lay out elements a bit more compactly */ p, pre { margin: 0 0; } h1, h2, h3, h4, h5, h6 { margin: 0.4rem 0; } /* Make code examples a little prettier by giving them visual separation from the rest of the page */ code, th-literate-program { padding: 0.3rem 0.4rem; background-color: var(--shaded-background); border-radius: 0.4rem; } kbd { padding: 0.3rem 0.6rem; border: 0.1rem solid var(--border-1); border-radius: 0.4rem; } pre, th-literate-program { padding: 0.8rem 1.2rem; margin: 1.2rem 0; background-color: var(--shaded-background); border-radius: 0.4em; transition: background-color var(--transition-duration); } @media (prefers-color-scheme: light) { pre, th-literate-program { background-color: transparent; border: 0.1rem solid var(--border-1); } } pre > code, th-literate-program > code { padding: 0; background: none; border-radius: 0; } /* And don't let code examples fly off and overflow the window */ pre, th-literate-program { min-width: 0; width: auto; overflow: auto; } /* Images */ img { /* Prevent images from causing horizontal scrolling */ max-width: 100%; height: auto; } img.pic { border-radius: 0.6rem; margin: 0.8rem 0; } img.emoji { max-width: 1.3125em; max-height: 1.3125em; vertical-align: text-bottom; object-fit: contain; } img { /* Hints for tweaking rendering */ &[src*="+pixel"] { image-rendering: pixelated; border-radius: 0; } &[src*="+illust"] { border-radius: 0; } /* TODO: These could be autogenerated! */ &[src*="+width72"] { width: 7.2rem; height: auto; } &[src*="+width160"] { width: 16rem; height: auto; } &[src*="+width640"] { width: 64rem; height: auto; } &[src*="+width752"] { width: 75.2rem; height: auto; } /* Resources for use in JavaScript. */ &.resource { display: none; } } /* Fix the default blue and ugly purple links normally have */ a { color: var(--link-color); } a:visited { color: var(--link-color-visited); } a.secret { color: var(--text-color); text-decoration: none; } /* Links to headings should be invisible by default, only appearing on hover. */ h1, h2, h3, h4, h5, h6 { & > a { color: var(--text-color); text-decoration: none; &:visited { color: var(--text-color); } &:hover { text-decoration: underline; } } } @media (hover: none) { h1, h2, h3, h4, h5, h6 { & > a { text-decoration: underline; } } } /* Make blockquotes a bit prettier */ blockquote { margin: 0; padding: 0.4rem 1.2rem; margin: 0.4rem 0; border-left: 0.4rem solid var(--border-1); } /* And tables. */ table { margin: 0.8rem 0; } table, th, td { border: 0.1rem solid var(--border-2); border-collapse: collapse; padding: 0.4rem 1rem; } th { background-color: var(--shaded-background); font-weight: 700; } /* Horizontal rules */ hr { width: 100%; border: none; border-top: 0.1rem solid var(--border-1); margin-top: 2em; margin-bottom: 2em; } /* Push buttons */ button.push { padding: 0.2rem 1.2rem; border: 1px solid var(--border-2); background-color: color-mix(in oklab, var(--background-color), white 25%); color: var(--text-color); box-shadow: 0 1px 2px var(--border-1), inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.05); border-radius: 0.75lh; transition: background-color var(--transition-duration) var(--ease-out-quintic), box-shadow var(--transition-duration) var(--ease-out-quintic), transform var(--transition-duration) var(--ease-out-quintic); &:hover { box-shadow: 0 4px 6px var(--border-1), inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.1); transform: translateY(-2px); } &:active { background-color: color-mix( in oklab, var(--background-color), var(--shading-base) 5% ); box-shadow: 0 0 2px var(--border-1), inset 0 1px 2px rgb(from var(--shading-base) r g b / 0.1); transform: translateY(0); transition: none; } } /* Feeds */ section.feed { display: flex; flex-direction: column; /* Titles */ & h2 { & a { color: var(--text-color); text-decoration: underline; &:visited { color: color-mix( in srgb, var(--background-color), var(--text-color) 60% ); } } } & h1 { font-weight: 800; font-size: 125%; padding-top: 1.2rem; padding-bottom: 1.2rem; } & h2 { font-weight: 600; font-size: 100%; padding: 0; } /* Articles */ & article { display: flex; flex-direction: column; padding-bottom: 1.2rem; line-height: 1.4; & .info { display: flex; flex-direction: row; flex-wrap: wrap; font-size: 87.5%; & > *:not(:first-child)::before { content: "·"; padding: 0 0.4rem; } } & .categories { display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; & > *:not(:first-child) { padding-left: 1ch; } & a, & a:visited { color: var(--text-color); } } } } /* Page sidebar */ aside.sidebar { overflow: clip; & > a { display: block; height: min-content; margin-top: auto; } } header.floof { margin-top: auto; position: relative; & > img { display: block; min-width: 0; object-fit: cover; object-position: 33% 0; } & > h1 { position: absolute; top: 3rem; left: 3rem; display: flex; flex-direction: column; line-height: 1; width: min-content; font-family: var(--font-title); font-weight: 900; font-size: 5.6rem; text-align: right; transform: skew(-5deg, -5deg); & .rikis { width: max-content; background-color: var(--text-color); color: var(--background-color); padding: 0.1em; --shadow-color: var(--accent-pink); /* import math print("box-shadow:") x = 0 max_x = 16 while x < max_x: print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),") x += 0.5 */ /* prettier-ignore */ box-shadow: 0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0), 0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875), 1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375), 1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625), 2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875), 2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375), 3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125), 3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125), 4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875), 4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875), 5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875), 5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625), 6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625), 6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375), 7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625), 7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125), 8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125), 8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875), 9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375), 9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625), 10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375), 10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375), 11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125), 11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125), 12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625), 12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875), 13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875), 13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625) ; } & .fluffy-little-house { display: flex; flex-direction: column; background-color: var(--background-color); width: min-content; align-self: end; padding-left: 0.8rem; padding-right: 0.8rem; padding-top: 0.4rem; z-index: -1; color: var(--text-color); & .adjectives { font-weight: 800; font-size: 1.6rem; padding-top: 0.6rem; } & .house { margin-top: -0.2em; font-size: 3.6rem; } } } } /* Navigation header (contains page title & breadcrumbs) */ h1.page-title { font-weight: 900; line-height: 1.2; padding-top: 0.5lh; padding-bottom: 0.5lh; } @media (max-width: 700px) { h1.page-title { font-size: 4rem; } } /* Style the footer */ footer { width: 100%; max-width: 90ch; padding: 1.6rem 0.8rem; display: flex; flex-direction: row; & > .left { flex-grow: 1; } & > .right { flex-shrink: 0; } & #footer-icon { display: block; & > svg { display: block; color: var(--text-color); opacity: 40%; } } & #open-command-line { width: 3.2rem; height: 3.2rem; background: none; border: none; padding: 0; background-image: var(--icon-cmd); background-repeat: no-repeat; background-position: 50% 50%; opacity: 50%; transition: var(--transition-duration) opacity; &:hover { opacity: 100%; } &:active { opacity: 75%; } } } footer.pink-space { display: block; max-width: none; position: relative; & .copyright { position: absolute; right: 0; top: 0; opacity: 70%; padding: 1.6rem; & a, & a:visited { color: var(--text-color); } } & .jinkou { position: absolute; left: 0; bottom: 0; opacity: 70%; padding: 1.6rem; & a, & a:visited { color: var(--text-color); } } & pre.meow { position: absolute; right: 0; bottom: 0; width: min-content; background: none; border: none; font-weight: 700; line-height: 1.3; font-size: 75%; opacity: 25%; user-select: none; } }