luv

Workshop wiki

style.lisp

wiki/style.lisp

system luv-wiki · 35 definitions · on GitHub

The site's stylesheet, as style definitions compiled by css.lisp.

Groups follow the page from the outside in: palette, frame, type, the wiki's own elements, then the dexp code boxes and their layout roles, whose selectors are the roles dexp.lisp assigns. Under the CSS syntax 0.85rem is a quantity and --ink a reference; bare symbols are CSS words and lists are Lisp, so the palette, the mark colours, and the definition-kind colours below are computed from tables, and the layout rows every box shares are functions.

in-package#:luv.wiki.style
named-readtables:in-readtableluv.css:syntax

Palette and shared values

defparameter*palette*'
paperwhite"#111517"
inkblack"#c2cbd0"
muted"#667078""#8b969d"
rule"#ded8ce""#2f383d"
status-bgblack"#d7d2c4"
status-inkivory"#111719"
accent"#9a3248""#de6e7c"
code-bg"#f4f1ea""#171c1f"
mark-next--accent--accent
mark-todo--muted--muted
mark-wait"#8a7a1c""#d9c65a"
mark-done"#3d7a3d""#7ac47a"
mark-idea"#5a4d8a""#a99ad9"
"Each custom colour property with its light and dark values."
defunpalette
scheme

The palette's declarations for scheme, :light or :dark.

loopfor
namelightdark
in*palette*collect
custom-propertyname
ecasescheme
:lightlight
:darkdark
defungutter

The horizontal page gutter.

clamp1rem4vw3rem
defunhairline

The one-pixel rule between things.

list1px'solid--rule
defundisplay-font
weightsize/line-height

The font shorthand for the display face.

listweightsize/line-height--display-font

Layout rows shared by the dexp boxes

defunflowing-row

A row whose items flow and wrap, aligned on their baselines.

declarations:displayflex:flex-wrapwrap:align-itemsbaseline:column-gap0.5em:min-width0
defunstacked-rows

A grid of rows, each as wide as its content.

declarations:displaygrid:grid-template-columns
minmax0:max-content
defunsubgrid-row

A row of a two-column table, its cells aligned with the table's columns.

declarations:displaygrid:grid-template-columnssubgrid:grid-columnspan2:align-itemsbaseline

The sheet

define-stylepalette"Colours and faces, light and dark."
":root":color-schemelightdark
palette:light
:--display-font
font-stack"Public Sans":helvetica:arial:sans-serif
:--body-font--display-font:--mono-font
font-stack:ui-monospace"SF Mono":menlo:consolas:monospace
:media"(prefers-color-scheme: dark)"
":root"
palette:dark
define-stylepage"The document: box model, root type, links."
"*""*::before""*::after"
:box-sizingborder-box
"html":color--ink:background--paper:font-family--body-font:font-size17px:line-height1.45:text-rendering"optimizeLegibility":-webkit-text-size-adjust100%
"body":margin0:min-height100vh
"a":color--accent:text-decorationnone
"&:hover":text-decorationunderline
define-stylelibrary"The library band: eyebrow, site name, and the three doors."
".library":displaygrid:grid-template-columns
minmax10rem0.5fr
minmax01.5fr
:gap1rem:align-itemscenter:padding0.85rem:border-bottom:background
color-mix--paper94%--accent
".eyebrow":margin000.1rem:color--muted:font
display-font7000.72rem/1
:text-transformuppercase:letter-spacing0.06em
".library h1":margin0:font
display-font7001.25rem/1.1
:letter-spacing-0.02em
"a":colorinherit
".doors":displaygrid:grid-template-columns:gap0.65rem
".door":displaygrid:gap0.1rem:min-width0:padding0.65rem0.75rem:colorinherit:text-decorationnone:border:border-radius8px:background--paper
"&:hover""&:focus-visible"
:border-color
color-mix--accent70%--rule
:text-decorationnone:outlinenone
"&.selected":border-color--accent:box-shadowinset0001px--accent
".door-title":font
display-font7000.95rem/1.2
".door-meta":color--muted:font
display-font5000.82rem/1.2
:min-width0:overflow-wrapbreak-word
define-stylestatus-bar"The status bar, as a Glk grid window: black, monospace, bold."
".status":displayflex:justify-contentspace-between:gap1rem:padding0.3rem:font7000.9rem/1.5--mono-font:color--status-ink:background--status-bg:positionsticky:top0:z-index1
"a":colorinherit
".status-left"".status-right"
:min-width0:overflowhidden:text-overflowellipsis:white-spacenowrap
".crumbs":displayinline
".crumb-sep":margin00.45em:opacity0.55
"a.crumb":opacity0.75
"&:hover":opacity1:text-decorationunderline
".crumb.current":opacity1
define-stylemain-column

The main column; wide pages fill the viewport but their prose keeps a readable measure.

"main":max-width66ch:padding
clamp1.5rem4vw3.25rem
2.75rem:margin0auto
"body.wide main":max-widthnone:margin0
"body.wide main > p""body.wide main > h1""body.wide article.source-body > p""body.wide article.source-body > h1"
:max-width66ch
".site-footer":max-width66ch:margin0auto:padding1rem3rem:border-top:font
display-font5000.82rem/1.4
:color--muted
define-styletype"Headings, paragraphs, figures and their IDs, mentions, marks."
"h1""h2""h3""h4"
:font-family--display-font:line-height1.16:font-weight800
"h1":font-size2.2rem:letter-spacing-0.06em:margin0.5rem01.5rem
"h2":font-size1.3rem:letter-spacing-0.04em:margin2.6rem00.75rem
"h3":font-size1.1rem:letter-spacing-0.02em:margin2rem00.5rem:font-weight700
"p":margin001.1rem:hyphensmanual:text-alignjustify:text-align-laststart
"section.figure":scroll-margin-top1rem
"section:target > h2""section:target > h3""section:target > h4"
:background--code-bg:outline0.4remsolid--code-bg
"a.figure-id":margin-left0.6rem:font-family--mono-font:font-size0.7em:color--muted:opacity0:transitionopacity0.15s
"h2:hover a.figure-id""h3:hover a.figure-id""h4:hover a.figure-id""section:target > h2 a.figure-id""section:target > h3 a.figure-id"
:opacity1
".mention":font-family--mono-font:font-weight700:font-size0.82em
"&.dangling":color--muted:text-decorationline-through
".unresolved-link":border-bottom1pxdotted--muted
".mark":font-family--mono-font:font-size0.6em:font-weight700:letter-spacing0.08em:padding0.15em0.45em:border-radius0.2em:vertical-alignmiddle:color--paper:background--mark-todo

Each other status colours its own mark.

loopforstatusin'
nextwaitdoneidea
collect
rule
formatnil".mark-~(~A~)"status
:background
var
formatnil"mark-~(~A~)"status
"p.backlinks":font-size0.85rem:color--muted:margin-top1rem
define-styletext-blocks"Code, tables, lists, images."
"code""pre"
:font-family--mono-font:font-size0.85em
"code":backgroundnone:padding0:color
color-mix--ink80%--accent
"pre":background--code-bg:padding0.8rem1rem:overflow-xauto:line-height1.4
"code":padding0:backgroundnone
"table":border-collapsecollapse:margin1rem0:font-size0.92em
"th""td"
:text-alignleft:vertical-aligntop:padding0.3rem0.8rem0.3rem0:border-bottom
"th":font-weightnormal:color--muted
"ul""ol"
:padding-left1.4rem
"li":margin0.25rem0
"ul.figure-list":list-stylenone:padding-left0
"li.level-2":padding-left1.5rem
"figure.image""figure.capture"
:margin1.5rem0
"figure.image img""figure.capture img""figure.capture video""img.inline"
:max-width100%:heightauto:border-radius0.4rem
define-styledexp-boxes

Lisp source as dexp boxes: every list is a box whose side borders are its parentheses; a list without body forms flows and wraps, one with body forms is a grid of rows (see the stacked group).

".lisp":--paren
color-mix--ink30%:transparent
:font-family--display-font:font-size0.9rem:line-height1.55:margin1rem0:padding0.6rem0.8rem:background--code-bg:border-radius0.4rem:overflow-xauto
"& > *":displayblock:margin0.4rem0
"& > .comment":displayblock
".list":row-gap0.05em:padding00.4em:border0solid--paren:border-width01.5px:border-radius0.55em
"& > .list":margin0.05em0
".body":flex-basis100%
".operator"".list > .list.body > .operator"".list > .list > .operator"
:color--accent
".symbol"

A name broken at a hyphen reads as two names; the box scrolls instead.

:white-spacenowrap
".package":opacity0.55
".keyword":color--mark-idea
".string":color
color-mix--ink60%--mark-done
:white-spacepre-wrap:overflow-wrapanywhere
".number"".character"
:color--mark-wait
".comment":flex-basis100%:color--muted:font-styleitalic:white-spacepre-wrap
".prefixed"".conditional"
:displayinline-flex:align-itemsbaseline:gap0.15em:min-width0
".prefix":color--muted:font-weightbold
".conditional > .list"".conditional > .skipped"
:border-styledashed
".skipped":color--muted:white-spacepre-wrap
".body.prefixed"".body.conditional"
:displayflex
define-stylecode-references"Code references and lisp: definition blocks."
"details.definition":margin0.6rem0
"& > summary":cursorpointer:font-size0.9rem:color--muted
".kind":color--accent
".name":color--ink
"a.source":margin-left0.5rem:font-size0.8rem
"& > .lisp":margin-top0.4rem
".code-references > p.backlinks":margin-bottom0.2rem
define-stylesource-browser"Source browser: definition links, whole-file pages, source metadata."
".lisp a.definition-link":colorinherit
"&:hover":color--accent:text-decorationnone
".lisp.source":backgroundnone:padding0
"& > .toplevel":padding0:margin1.1rem0:scroll-margin-top1rem
"&:target":box-shadow-0.6rem00-0.4rem--accent
"& > .comment.prose":border-leftnone:padding-left0:max-width44rem
"h1.source-title":font-size1.8rem:letter-spacing-0.04em
"p.source-meta":color--muted:font-size0.9rem
define-stylesource-sidebar

Source pages on wide screens: the sidebar of systems and files on the left, sticky under the status bar, the file itself as the main column.

"body.source-page main":displaygrid:grid-template-columns15rem
minmax01fr
:column-gap
clamp1.5rem3vw3rem
:align-itemsstart
"article.source-body":min-width0
".source-nav":positionsticky:top2.4rem:max-height
calc
list100vh
quote-
2.9rem
:overflow-yauto:padding-right0.75rem:margin-top0.55rem:font
display-font5000.82rem/1.45
:border-right:scrollbar-widththin
".source-nav-title":margin000.6rem:font
display-font7000.72rem/1.4
:text-transformuppercase:letter-spacing0.06em
"a":color--muted
"&:hover":color--accent:text-decorationnone
"details.source-system":margin0
"& > summary":displayflex:align-itemsbaseline:gap0.5em:padding0.15rem0:cursorpointer:list-stylenone:color
color-mix--ink85%--muted
"&::-webkit-details-marker":displaynone
"&::before":content
quoted"›"
:displayinline-block:width0.7em:color--muted:transitiontransform0.12s
".system":font-weight700:overflow-wrapanywhere
".count":color--muted:font-size0.85em
"&:hover .system":color--accent
"&[open] > summary::before":transform
rotate90deg
"& > ul":list-stylenone:margin0.1rem00.5rem:padding0000.7em:border-left2pxsolid--rule
"& > ul > li":padding0.05rem00.05rem0.5em:margin-left-2px:border-left2pxsolidtransparent
"a":color--ink:overflow-wrapanywhere
"a .directory":color--muted
"a:hover":color--accent:text-decorationnone
"&.current":border-left-color--accent
"a":color--accent:font-weight700
defparameter*definition-kind-colours*'
--mark-ideadefclassdefstructdefine-condition
--accentdefgeneric
--mark-waitdefmacro
--mark-donedefvardefparameterdefconstant
"The colour of a definition kind's badge in the definitions index."
defunkind-rules

A rule per colour of *DEFINITION-KIND-COLOURS* for the kinds it paints.

loopfor
colour.kinds
in*definition-kind-colours*collect
make-rule
loopforkindinkindscollect
formatnil"li.definition-entry .kind-~(~A~)"kind
list:colorcolour
define-styledefinitions-index"Definitions index: kind badge · name · signature · line."
"nav.definitions":margin1rem02rem:padding0.6rem0.9rem:background--code-bg:border-radius0.4rem
"ul":list-stylenone:padding-left0:margin0:displaygrid:grid-template-columnsmax-content
minmax01fr
:column-gap0.7em:row-gap0.15rem:align-itemsbaseline
"li.definition-entry":displaycontents:font-family--display-font:font-size0.85rem:line-height1.45
".kind":font-size0.78em:color--muted:white-spacenowrap:text-alignright
"li.method-entry .kind":opacity0.6
"li.method-entry a.name":padding-left1.2em
"li.definition-entry a.name":color--ink:overflow-wrapanywhere
"&:hover":color--accent
"li.definition-entry .signature":margin-left0.3em:color--muted:font-size0.9em:overflow-wrapanywhere
"details.definition > summary .kind":color--accent
define-stylesource-index"Source index: files expand to their definitions in place; the systems table."
"details.source-file":margin0.25rem0
"& > summary":cursorpointer:font-size0.9rem
".count"".system"
:margin-left0.6em:color--muted:font-size0.8em
"table.systems":width100%:margin1rem02rem:font-size0.88rem:line-height1.35
"th":font
display-font7000.72rem/1.4
:text-transformuppercase:letter-spacing0.06em:color--muted:padding0.3rem0.9rem0.3rem0:border-bottom
"td":padding0.35rem0.9rem0.35rem0:border-bottom:vertical-aligntop
"tr:target td":background
color-mix--paper94%--accent
"td.system-name":font-weight700:white-spacenowrap
"td.system-description":max-width28rem:color
color-mix--ink80%--muted
"td.system-depends":max-width16rem:color--muted
"td.system-files":min-width18rem
"details.source-file":margin0
"& > summary":font-size0.88rem:line-height1.5
"nav.definitions":margin0.3rem00.6rem0.9rem:padding0.4rem0.7rem
"details.source-file > summary .directory":color--muted
"details.source-file > summary .file":color--accent:font-weight600
"details.source-file > nav.definitions":margin0.4rem00.8rem1.2rem
"a.github":color--muted:text-decorationnone
define-stylecode-prose"Docstrings and comments as prose inside the boxes."
".lisp .prose":flex-basis100%:white-spacenormal:font-family--body-font:text-alignstart:font-size0.95em:line-height1.45:max-width40rem
"p":margin0.15em00.35em
"p:last-child""ul:last-child"
:margin-bottom0.1em
"ul""ol"
:margin0.2em0:padding-left1.2rem
"code":font-family--mono-font:font-size0.85em
".lisp .string.prose":color
color-mix--ink75%--mark-done
:padding-left0.6em:border-left2pxsolid
color-mix--mark-done40%:transparent
".lisp .comment.prose":color--muted:font-styleitalic:padding-left0.6em:border-left2pxsolid--rule
"code":font-stylenormal
".lisp .prose code.symbol":font-family--display-font:font-size0.95em:font-stylenormal:backgroundnone:padding0:color--ink
".lisp .prose a.definition-link code.symbol":color--accent
define-stylestacked

A list with body forms is a grid of rows: the .head row, then one row per body form, so the box hugs its widest row instead of stretching to its parent (#993QQQ).

".lisp .list.stacked":widthfit-content:max-width100%
"& > .head"
"& > .body":flex-basisauto:max-width100%
"& > .list.body":widthfit-content
define-styleclauses

COND, CASE, HANDLER-CASE and other clause forms are tables (#4175NC): each clause a row with its key or test in the first column and its body forms stacked in the second, aligned across the clauses.

".lisp .list.clauses":grid-template-columns
minmax01fr
:column-gap0.7em
"& > .head""& > .comment"
:grid-columnspan2
"& > .stacked-clause":widthauto
"& > .head"
"& > .rest":row-gap0.05em:min-width0
"& > .rest > .body":flex-basisauto:max-width100%
"& > .rest > .list.body":widthfit-content
define-stylelayouts

Layouts: binding grids, clauses, loop rows. The selectors are the roles dexp.lisp assigns.

".lisp .list.bindings":displaygrid:grid-template-columnsmax-content
minmax01fr
:column-gap0.6em:row-gap0.1em:align-itemsbaseline
"& > .list.clause":column-gap0.6em
"& > .symbol""& > .comment"
:grid-columnspan2
".lisp .rest"
".lisp .list.clause:not(.bindings > *)":displayflex
".lisp .break":flex-basis100%:height0
".lisp .row-start":color--accent
define-stylepairs

Keyword/value pairs stay together; in body position each pair is a row with keys loosely aligned. A SETF with several pairs is a place/value table: each pair a subgrid row of its two-column box.

".lisp .pair":displayinline-flex:align-itemsbaseline:column-gap0.5em:min-width0
"&.body":displayflex:flex-basis100%
"& > .symbol:first-child":min-width8em
".lisp .list.pairs":grid-template-columnsmax-content
minmax01fr
:column-gap0.6em
"& > .head""& > .comment"
:grid-columnspan2
"& > .pair.body"
"& > .symbol:first-child":min-width0
define-stylenarrow-screens"Narrow screens: one column, smaller title, ragged prose."
:media"screen and (max-width: 90ch)"
".library"".doors"
:grid-template-columns
minmax01fr
"h1":font-size1.65rem
"p":text-alignstart
"body.source-page main":displayblock
".source-nav":displaynone

The trail keeps its ends: the first crumb and the current page.

"a.crumb:not(:first-of-type)""a.crumb:not(:first-of-type) + .crumb-sep"
:displaynone
".status:has(.crumb-sep) .status-right":displaynone
define-stylefigure-cards"Figure and definition cards shown beside mentions."
".figure-popover":positionabsolute:margin0:padding0:border:border-radius8px:background--paper:color--ink:box-shadow08px28px
rgba0000.16
:font4000.92rem/1.4--body-font:overflowhidden:insetauto
"&:popover-open":displayblock
".figure-card .card-title"".figure-popover .card-title"
:displayblock:padding0.65rem0.85rem0.15rem:font
display-font7001rem/1.25
:letter-spacing-0.02em:color--ink
".figure-popover .card-title:hover":color--accent:text-decorationnone
".figure-popover .card-title .mark":font-size0.55em:vertical-align0.15em
".figure-popover .card-meta":displayblock:padding00.85rem0.5rem:color--muted:font
display-font5000.8rem/1.3
:border-bottom
".figure-popover .card-id":font-family--mono-font:font-weight700
".figure-popover .card-excerpt":margin0:padding0.6rem0.85rem0.75rem:text-alignstart:hyphensauto:color
color-mix--ink88%--paper
define-stylemath-and-diagrams"Math and diagrams."
".math.display":margin1rem0:overflow-xauto:text-aligncenter
"pre.mermaid":backgroundnone:padding0.5rem0:text-aligncenter:font0.85rem/1.4--mono-font:color--muted
"svg":max-width100%:heightauto
"p""span"
:text-aligncenter:margin0
define-styledefinition-cards"Definition cards."
".figure-popover .card-kind":color--accent:font-weight500
".figure-popover .card-lambda-list":displayblock:padding00.85rem0.35rem:backgroundnone:color--muted:font-size0.8rem:overflow-wrapanywhere
define-stylesystems-table"Systems table: file entries and their popover buttons; the systems graph."
".file-entry":displayflex:align-itemsbaseline:gap0.5em:line-height1.5
".directory":color--muted
".file":color--accent:font-weight600
"button.count":font
display-font6000.72rem/1.4
:color--muted:backgroundnone:border:border-radius999px:padding00.5em:cursorpointer
"&:hover":border-color--accent:color--accent
".figure-popover nav.definitions":margin0:padding0.5rem0.85rem0.7rem:backgroundnone:max-height60vh:overflow-yauto
"pre.mermaid.system-graph":margin0.5rem01.5rem:text-alignstart
"svg":max-width100%:heightauto
"p.graph-note":color--muted:font-size0.85rem:margin-bottom0.2rem
define-stylepages-table"The Pages table."
"table.pages":width100%:margin1rem02rem:font-size0.9rem
"td":padding0.45rem1rem0.45rem0:border-bottom:vertical-aligntop
"td.page-title":width18rem:font-weight700
"a":color--ink
"td.page-headings a.heading":displayinline-block:margin00.9em0.15em0:color--ink
"&.level-2":color--muted:font-size0.92em
"&:hover":color--accent:text-decorationnone
".mark":font-size0.65em
define-stylework-table"The Work page: marks by status."
"section.work-status":margin1.5rem02rem
"& > h2":font-size1rem:margin000.4rem
".mark":font-size0.75em
".status-meaning":font-weight400:color--muted
"table.work":width100%:font-size0.9rem
"td":padding0.4rem1rem0.4rem0:border-bottom:vertical-aligntop
"td.work-title":width22rem:font-weight600
"a":color--ink
"&:hover":color--accent:text-decorationnone
".work-page":displayblock:font-weight400:font-size0.8rem:color--muted
"td.work-intent":color
color-mix--ink80%--muted