meow

2 files changed, 930 insertions, 345 deletions

diff --git a/web/css.md b/web/css.md
index 8f5eb38..75f39c9 100644
--- a/web/css.md
+++ b/web/css.md
@@ -1,234 +1,843 @@
 ---
 layout: web
-title: A Brief Reference for Modern CSS
+title: "Modern CSS: a reference"
 ---
 
-# A Brief Reference for Modern CSS
+# Modern CSS: a reference
 
-I like CSS. I really, really like CSS. I greatly enjoy just... fucking about with it, producing [pretty websites](https://toki.la) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf).
+I like CSS. I really like CSS! I greatly enjoy just... messing about with it, producing [pretty websites](https://toki.la) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf) and everything in around and between.
 
-But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely on references. Property names are remarkably unintuitive. And CSS is complicated! There's a lot to keep in your head, and it's ever changing - ever improving, I would say, but ever changing nonetheless. So I figured writing my *own* reference might help.
+But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely a reference. Property names are *remarkably* unintuitive. And CSS is complicated! There's a lot to keep in your head. And it's ever changing - ever improving, I would argue, but ever changing nonetheless. So I figured writing my own reference might help.
 
-So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me.
+So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to [MDN](https://developer.mozilla.org/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me.
 
 https://css-tricks.com/whats-new-since-css3/
 
-## Layout
+## Selectors
+- [selectors](https://developer.mozilla.org/Web/CSS/CSS_selectors)
+- [nesting](https://developer.mozilla.org/Web/CSS/CSS_nesting)
 
-### flow
+`foo {...}`: a **type selector** matches all elements of the type `foo`.
 
-### absolute
+`.foo {...}`: a **class selector** matches all elements of the class `foo`.
 
-### flexbox
+`#foo {...}`: an **identifier selector** matches a single element by its unique id `foo`.
 
-### grid
+`foo[attr] {...}`: an **attribute selector** matches an element `foo` that has the attribute `attr`.
 
-## Media Queries
+`foo, bar {...}`: the **selector list** matches both the elements `foo` and `bar`.
 
-## Selectors
+`foo bar {...}`: the **descendant combinator** matches some element `bar` that is a descendant of `foo`. A descendant of `foo` is any element that is nested within it, at any level in the tree.
 
-**attributes** go on elements...
+`foo { bar {...}}`: **nesting syntax**
 
-**identifiers** can be selected with `#`.
+`foo { &bar {...}}`: a **nesting selector**
 
-**classes** can be selected with `.`.
+`foo > bar {...}`: the **child combinator** matches some element `bar` if `bar` is a direct child of `foo`. A child element is an
 
-### combinators
+- :first-child, :last-child, :only-child, :nth-child(), nth-last-child()
+- :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :nth-last-of-type()
 
-### nested queries
+`:empty {...}`: the **empty pseudo-class** selects an element that does not have any children.
 
-Queries can be nested!!!!!1!!
-
-### pseudo-classes
-
-### pseudo-elements
-
-## Elements
-
-Many elements have default styles provided by the browser. These are accessible at ... in Firefox, and ... in Chrome.
-resource://gre-resources/html.css
-
-### body and friends
-
-```css
-body {
-  display: block;
-  margin: 8px;
-}
-```
-
-```css
-html, main, header, footer, div,
-section, nav, article, aside, blockquote {
-  display: block;
-}
-```
-
-### formatting
-
-```css
-b, strong {
-  font-weight: bolder;
-}
-```
-
-```css
-i, em {
-  font-style: italic;
-}
-```
-
-```css
-u {
-  text-decoration: underline;
-}
-```
-
-```css
-s {
-  text-decoration: line-through;
-}
-```
-
-```css
-q:before {
-  content: open-quote;
-}
-
-q:after {
-  content: close-quote;
-}
-```
-
-```css
-small {
-  font-size: smaller;
-}
-```
-
-```css
-sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-```
-
-```css
-sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-```
-
-```css
-code {
-  font-family: -moz-fixed;
-}
-```
-
-### paragraphs
-
-```css
-p {
-  display: block;
-  margin-block: 1em;
-}
-```
-
-```css
-pre {
-  display: block;
-  font-family: -moz-fixed;
-  white-space: pre;
-  margin-block: 1em;
-}
-```
-
-### headers
-
-```css
-h1, h2, h3, h4, h5, h6 {
-  display: block;
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2em;
-  margin-block: .67em;
-}
-
-h2 {
-  font-size: 1.5em;
-  margin-block: .83em;
-}
-
-h3 {
-  font-size: 1.17em;
-  margin-block: 1em;
-}
-
-h4 {
-  font-size: 1.00em;
-  margin-block: 1.33em;
-}
-
-h5 {
-  font-size: 0.83em;
-  margin-block: 1.67em;
-}
-
-h6 {
-  font-size: 0.67em;
-  margin-block: 2.33em;
-}
-```
-
-`h1`s nested within an `article`, `aside`, `nav`, or `section` behave somewhat strangely, acting as a smaller header depending on the level of nesting.
+`foo + bar {...}`: the **next-sibling combinator** selects all elements `bar` that are the (direct) next sibling `bar` of some elements `foo`.
 
-### lists
+`foo ~ bar {...}`: the **subsequent-sibling combinator** selects all elements `bar` that are a subsequent sibling of some elements `foo`.
+
+`:has(...) {...}`:
+The child, next-sibling, and subsequent-sibling combinators - with the exception of `:empty` - all match a *child element*. It is often desired to match the *parent element* instead: some element that *has*,
+
+`:not(...) {...}`:
+
+`:is(...) {...}`:
+The `:is` pseudo-class takes a list of selectors, and selects any element matchable by one or more
 
-```css
-li {
-  display: list-item;
-  text-align: match-parent;
-}
-```
-
-```css
-ul, menu {
-  display: block;
-  counter-reset: list-item;
-  margin-block: 1em;
-  padding-inline-start: 40px;
-  list-style-type: disc;
-}
-```
-
-```css
-ol {
-  display: block;
-  counter-reset: list-item;
-  margin-block: 1em;
-  padding-inline-start: 40px;
-  list-style-type: decimal;
-}
-```
-
-Nested lists have no top or bottom margins. The `list-style-type` of unordered lists changes with depth: from a `disc`, to a `circle`, to a `square`.
-
-### meta
-
-```css
-head, link, meta, title, style, script {
-  display: none;
-}
-```
-
-___ are invisible.
+`:where()`
 
 ## Properties
 
-There are a *lot* of properties, of various elements, and things.
+`property: inherit | initial | revert | revert-layer | unset;`
+
+- all
+- will-change
+- `touch-action: auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | pinch-zoom | manipulation;`
+
+## Variables
+- [cascading variables](https://developer.mozilla.org/Web/CSS/CSS_cascading_variables)
+
+CSS custom properties (or variables)...
+
+- `--*: ...;`
+- var()
+- @property
+
+## Layouts
+
+- display
+
+### the box model
+- [box model](https://developer.mozilla.org/Web/CSS/CSS_box_model)
+- [box sizing](https://developer.mozilla.org/Web/CSS/CSS_box_sizing)
+- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)
+
+- width
+  - min-width
+  - max-width
+- height
+  - min-height
+  - max-height
+- `visibility: visible | hidden | collapse;`
+- `content-visibility: visible | hidden | auto;`
+- `box-sizing: border-box | content-box;`
+- justify-items
+- justify-self
+- vertical-align
+- aspect-ratio
+- `resize: none | horizontal | vertical | both | block | inline;`
+- padding
+  - padding-block
+  - padding-block-end
+  - padding-block-start
+  - padding-bottom
+  - padding-inline
+  - padding-inline-end
+  - padding-inline-start
+  - padding-left
+  - padding-right
+  - padding-top
+- margin
+  - margin-block
+  - margin-block-end
+  - margin-block-start
+  - margin-bottom
+  - margin-inline
+  - margin-inline-end
+  - margin-inline-start
+  - margin-left
+  - margin-right
+  - margin-top
+- min-block-size
+- max-block-size
+- min-inline-size
+- max-inline-size
+- contain-intrinsic-block-size
+- contain-intrinsic-height
+- contain-intrinsic-inline-size
+- contain-intrinsic-size
+- contain-intrinsic-width
+
+- @container
+- container
+  - container-name
+  - container-type
 
-`property left right center up` or whatever
-this seems consistent and i don't know it
+### flow
+- [flow layout](https://developer.mozilla.org/Web/CSS/CSS_flow_layout)
+- [display](https://developer.mozilla.org/Web/CSS/CSS_display)
+
+### flex
+- [flexible box layout](https://developer.mozilla.org/Web/CSS/CSS_flexible_box_layout)
+- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)
+
+- flex
+  - flex-basis
+  - flex-direction
+  - flex-flow
+  - flex-grow
+  - flex-shrink
+  - flex-wrap
+- align-items
+- align-self
+- align-content
+- justify-content
+- place-items
+- place-content
+- place-self
+- order
+
+### grid
+- [grid](https://developer.mozilla.org/Web/CSS/CSS_grid_layout)
+
+- grid
+  - grid-area
+  - grid-auto-flow
+  - grid-auto-rows
+  - grid-auto-columns
+  - grid-column
+    - grid-column-start
+    - grid-column-end
+  - grid-row
+    - grid-row-start
+    - grid-row-end
+  - grid-template
+    - grid-template-areas
+    - grid-template-columns
+    - grid-template-rows
+- gap
+  - row-gap
+  - column-gap
+
+### positioning
+- [positioned layout](https://developer.mozilla.org/Web/CSS/CSS_positioned_layout)
+
+- `position: static | relative | absolute | fixed | sticky;`
+  - `top: auto | <length> | <percentage>;`
+  - `right: auto | <length> | <percentage>;`
+  - `bottom: auto | <length> | <percentage>;`
+  - `left: auto | <length> | <percentage>;`
+- `z-index: auto | <integer>;`
+- `float: none | left | right | inline-start | inline-end;`
+- contain
+- inset
+  - inset-block
+  - inset-block-end
+  - inset-block-start
+  - inset-inline
+  - inset-inline-end
+  - inset-inline-start
+- clear
+- ? transform
+
+### column
+- [multi-column layout](https://developer.mozilla.org/Web/CSS/CSS_multi-column_layout)
+
+- ? break-before, break-after, break-inside
+- ? column-gap
+- column-fill
+- column-span
+- column-rule
+  - column-rule-color
+  - column-rule-style
+  - column-rule-width
+- columns
+  - column-count
+  - column-width
+
+### page
+- [paged media](https://developer.mozilla.org/Web/CSS/CSS_paged_media)
+- [fragmentation](https://developer.mozilla.org/Web/CSS/CSS_fragmentation)
+
+- box-decoration-break
+- break-before
+- break-after
+- break-inside
+- page
+- orphans
+- widows
+- :first, :left, :right
+
+### table
+- [table](https://developer.mozilla.org/Web/CSS/CSS_table)
+
+- table-layout
+- caption-side
+- empty-cells
+- border-collapse
+- border-spacing
+
+## Media Queries
+
+- @media
+
+## Units and Math
+
+- abs()
+- acos()
+- asin()
+- atan()
+- atan2()
+- cos()
+- exp()
+- hypot()
+- log()
+- mod()
+- max()
+- min()
+- pow()
+- rem()
+- round()
+- sign()
+- sin()
+- sqrt()
+- tan()
+
+## Assorted Properties
+
+### backgrounds and borders
+- [backgrounds and borders](https://developer.mozilla.org/Web/CSS/CSS_backgrounds_and_borders)
+
+- background
+  - background-attachment
+  - background-blend-mode
+  - background-clip
+  - background-color
+  - background-image
+  - background-origin
+  - background-position
+    - background-position-x
+    - background-position-y
+  - background-repeat
+  - background-size
+- border
+  - border-block
+    - border-block-color
+    - border-block-end
+      - border-block-end-color
+      - border-block-end-style
+      - border-block-end-width
+  - border-block-start
+    - border-block-start-color
+    - border-block-start-style
+    - border-block-start-width
+  - border-block-style
+  - border-block-width
+  - border-bottom
+    - border-bottom-color
+    - border-bottom-left-radius
+    - border-bottom-right-radius
+    - border-bottom-style
+    - border-bottom-width
+  - border-color
+  - border-end-end-radius
+  - border-end-start-radius
+  - border-image
+    - border-image-outset
+    - border-image-repeat
+    - border-image-slice
+    - border-image-source
+    - border-image-width
+  - border-inline
+    - border-inline-color
+    - border-inline-end
+      - border-inline-end-color
+      - border-inline-end-style
+      - border-inline-end-width
+    - border-inline-start
+      - border-inline-start-color
+      - border-inline-start-style
+      - border-inline-start-width
+    - border-inline-style
+    - border-inline-width
+  - border-left
+    - border-left-color
+    - border-left-style
+    - border-left-width
+  - border-radius
+  - border-right
+    - border-right-color
+    - border-right-style
+    - border-right-width
+  - border-start-end-radius
+  - border-start-start-radius
+  - border-style
+  - border-top
+    - border-top-color
+    - border-top-left-radius
+    - border-top-right-radius
+    - border-top-style
+    - border-top-width
+  - border-width
+- outline
+  - outline-color
+  - outline-offset
+  - outline-style
+  - outline-width
+- box-shadow
+
+### overflow and scrolling
+- [overflow](https://developer.mozilla.org/Web/CSS/CSS_overflow)
+- [overscroll behavior](https://developer.mozilla.org/Web/CSS/CSS_overscroll_behavior)
+- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_scroll_snap)
+- [scrollbars styling](https://developer.mozilla.org/Web/CSS/CSS_scrollbars_styling)
+
+- overflow
+  - overflow-anchor (unsure??)
+  - overflow-block
+  - overflow-clip-margin
+  - overflow-inline
+  - overflow-x
+  - overflow-y
+- text-overflow
+- scroll-margin
+  - scroll-margin-block
+  - scroll-margin-block-end
+  - scroll-margin-block-start
+  - scroll-margin-bottom
+  - scroll-margin-inline
+  - scroll-margin-inline-end
+  - scroll-margin-inline-start
+  - scroll-margin-left
+  - scroll-margin-right
+  - scroll-margin-top
+- scroll-padding
+  - scroll-padding-block
+  - scroll-padding-block-end
+  - scroll-padding-block-start
+  - scroll-padding-bottom
+  - scroll-padding-inline
+  - scroll-padding-inline-end
+  - scroll-padding-inline-start
+  - scroll-padding-left
+  - scroll-padding-right
+  - scroll-padding-top
+- scroll-snap-align
+- scroll-snap-stop
+- scroll-snap-type
+- scrollbar-color
+- scrollbar-gutter
+- scrollbar-width
+- scroll-behavior
+- overscroll-behavior
+  - overscroll-behavior-block
+  - overscroll-behavior-inline
+  - overscroll-behavior-x
+  - overscroll-behavior-y
+
+### text
+- [text](https://developer.mozilla.org/Web/CSS/CSS_text)
+- [text decoration](https://developer.mozilla.org/Web/CSS/CSS_text_decoration)
+
+- text-align
+- text-align-last
+- text-anchor
+- text-decoration
+  - text-decoration-color
+  - text-decoration-line
+  - text-decoration-skip-ink
+  - text-decoration-style
+  - text-decoration-thickness
+- text-emphasis
+  - text-emphasis-color
+  - text-emphasis-position
+  - text-emphasis-style
+- text-indent
+- text-justify
+- text-rendering
+- text-shadow
+- text-transform
+- text-underline-offset
+- text-underline-position
+- text-wrap
+  - text-wrap-mode
+  - text-wrap-style
+- line-height
+- hanging-punctuation
+- `hyphenate-character: auto | <string>;`
+- hyphenate-limit-chars
+- hyphens
+- letter-spacing
+- tab-size
+- line-break
+- `overflow-wrap: normal | break-word | anywhere;`
+- white-space
+- white-space-collapse
+- word-break
+- word-spacing
+- quotes
+- `user-select: auto | none | text | all;`
+- cursor
+
+### fonts
+- [fonts](https://developer.mozilla.org/Web/CSS/CSS_fonts)
+- [font loading](https://developer.mozilla.org/Web/CSS/CSS_font_loading)
+
+- font
+  - font-family
+  - font-feature-settings
+  - font-kerning
+  - font-language-override
+  - font-optical-sizing
+  - font-palette
+  - font-size
+  - font-size-adjust
+  - font-stretch
+  - font-style
+  - font-synthesis
+    - font-synthesis-position
+    - font-synthesis-small-caps
+    - font-synthesis-style
+    - font-synthesis-weight
+  - font-variant
+    - font-variant-alternates
+    - font-variant-caps
+    - font-variant-east-asian
+    - font-variant-emoji
+    - font-variant-ligatures
+    - font-variant-numeric
+    - font-variant-position
+  - font-variation-settings
+  - font-weight
+- @font-face
+- @font-feature-values
+- @font-palette-values
+
+### lists
+- [lists and counters](https://developer.mozilla.org/Web/CSS/CSS_lists_and_counters)
+- [counter styles](https://developer.mozilla.org/Web/CSS/CSS_counter_styles)
+
+- list-style
+  - list-style-image
+  - list-style-position
+  - list-style-type
+- counter-increment
+- counter-reset
+- counter-set
+
+### colour
+- [colors](https://developer.mozilla.org/Web/CSS/CSS_colors)
+- [color adjustment](https://developer.mozilla.org/Web/CSS/CSS_color_adjustment)
+
+- color
+- opacity
+- color-scheme
+- accent-color
+- caret-color
+- print-color-adjust
+- forced-color-adjust
+- rgb()
+- hsl()
+- hwb()
+- lab()
+- lch()
+- oklab()
+- oklch()
+- color()
+- color-contrast() Experimental
+- color-mix()
+- device-cmyk()
+- light-dark()
+- @color-profile
+
+### images
+- [images](https://developer.mozilla.org/Web/CSS/CSS_images)
+
+- image-orientation
+- image-rendering
+- object-fit
+- object-position
+- linear-gradient()
+- radial-gradient()
+- conic-gradient()
+- repeating-linear-gradient()
+- repeating-radial-gradient()
+- repeating-conic-gradient()
+- element() Experimental
+- image()
+- cross-fade()
+
+### masking, filters, compositing, and blending
+- [masking](https://developer.mozilla.org/Web/CSS/CSS_masking)
+- [filter effects](https://developer.mozilla.org/Web/CSS/CSS_filter_effects)
+- [compositing and blending](https://developer.mozilla.org/Web/CSS/CSS_compositing_and_blending)
+
+- filter
+- backdrop-filter
+- clip
+- clip-path
+- clip-rule
+- mask
+  - mask-border
+    - mask-border-mode
+    - mask-border-outset
+    - mask-border-repeat
+    - mask-border-slice
+    - mask-border-source
+    - mask-border-width
+  - mask-clip
+  - mask-composite
+  - mask-image
+  - mask-mode
+  - mask-origin
+  - mask-position
+  - mask-repeat
+  - mask-size
+  - mask-type
+- isolation
+- mix-blend-mode
+- blur()
+- brightness()
+- contrast()
+- drop-shadow()
+- grayscale()
+- hue-rotate()
+- invert()
+- opacity()
+- saturate()
+- sepia()
+
+### transformations
+- [transforms](https://developer.mozilla.org/Web/CSS/CSS_transforms)
+
+- backface-visibility
+- perspective
+- perspective-origin
+- rotate
+- scale
+- transform
+  - transform-box
+  - transform-origin
+  - transform-style
+- zoom
+- translate
+- matrix()
+- matrix3d()
+- perspective()
+- rotate()
+- rotate3d()
+- rotateX()
+- rotateY()
+- rotateZ()
+- scale()
+- scale3d()
+- scaleX()
+- scaleY()
+- scaleZ()
+- skew()
+- skewX()
+- skewY()
+- translate()
+- translate3d()
+- translateX()
+- translateY()
+- translateZ()
+
+### animations
+- [animations](https://developer.mozilla.org/Web/CSS/CSS_animations)
+- [transitions](https://developer.mozilla.org/Web/CSS/CSS_transitions)
+- [motion path](https://developer.mozilla.org/Web/CSS/CSS_motion_path)
+
+- animation
+- animation-composition
+- animation-delay
+- animation-direction
+- animation-duration
+- animation-fill-mode
+- animation-iteration-count
+- animation-name
+- animation-play-state
+- animation-range Experimental
+- animation-range-end Experimental
+- animation-range-start Experimental
+- animation-timeline Experimental
+- animation-timing-function
+- transition
+- transition-behavior
+- transition-delay
+- transition-duration
+- transition-property
+- transition-timing-function
+- offset
+- offset-anchor
+- offset-distance
+- offset-path
+- offset-position
+- offset-rotate
+- @keyframes
+
+### shapes
+- [shapes](https://developer.mozilla.org/Web/CSS/CSS_shapes)
+
+- shape-image-threshold
+- shape-margin
+- shape-outside
+- shape-rendering
+- paint-order
+- circle()
+- ellipse()
+- inset()
+- path()
+- polygon()
+- rect()
+- shape() Experimental
+- xywh()
+
+### svgs
+
+- x
+- y
+- cx
+- cy
+- d
+- x
+- y
+- r
+- rx
+- ry
+- fill
+  - fill-opacity
+  - fill-rule
+- marker
+  - marker-end
+  - marker-mid
+  - marker-start
+- pointer-events
+- stop-color
+- stop-opacity
+- stroke
+  - stroke-dasharray
+  - stroke-dashoffset
+  - stroke-linecap
+  - stroke-linejoin
+  - stroke-miterlimit
+  - stroke-opacity
+  - stroke-width
+- dominant-baseline
+- vector-effect
+- color-interpolation
+- color-interpolation-filters
+
+### mathml
+
+- math-depth
+- math-shift
+- math-style
+
+### writing modes
+- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_writing_modes)
+- [ruby layout](https://developer.mozilla.org/Web/CSS/CSS_ruby_layout)
+
+- `direction: ltr | rtl;`
+- block-size
+- inline-size
+- `writing-mode: horizontal-tb | vertical-lr | vertical-rl;`
+- `unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;`
+- `text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation;`
+- `text-combine-upright: none | all;`
+- ruby-align
+- ruby-position
+
+## Assorted Pseudo-Classes
+
+- :link, :visited
+- :local-link
+  - alternatively: `*[href*="//"]:not([href*="base-url"])`
+- :any-link
+  - useless, use `:link, :visited` or `a, area`
+- :target
+  - v useful
+
+- :active, :hover, :focus, :focus-within, :focus-visible
+
+- :checked, :default, :indeterminate
+- :in-range, :out-of-range
+- :required, :optional
+- :disabled, :enabled
+- :valid, :invalid, :user-valid, :user-invalid
+- :read-only, :read-write
+- :placeholder-shown
+- :autofill
+
+
+- :fullscreen, :picture-in-picture, :modal, :popover-open
+
+- :past, :current, :future
+- :defined
+- :lang(), :dir()
+- :host, :host(), :host-context()
+- :root
+- :scope
+- :state()
+
+## Assorted Pseudo-Elements
+- [pseudo-elements](https://developer.mozilla.org/Web/CSS/CSS_pseudo-elements)
+
+- content
+- ::before
+- ::after
+- ::marker
+- ::backdrop
+- ::cue
+- ::file-selector-button
+- ::first-letter
+- ::first-line
+- ::grammar-error
+- ::highlight()
+- ::part()
+- ::placeholder
+- ::selection
+- ::slotted()
+- ::spelling-error
+- ::target-text
+
+## Assorted At-Rules
+
+- @charset
+- @counter-style
+- @import
+- @layer
+- @namespace
+- @page
+- @scope
+- @supports
+
+## Assorted Functions
+
+- calc()
+- url()
+
+- attr()
+- clamp()
+- counter()
+- counters()
+- env()
+- fit-content()
+- image-set()
+- layer()
+- minmax()
+- paint()
+- ray()
+- repeat()
+- symbols()
+
+## Assorted Types
+- `<absolute-size>`
+- `<alpha-value>`
+- `<angle>`
+- `<angle-percentage>`
+- `<basic-shape>`
+- `<blend-mode>`
+- `<box-edge>`
+- `<calc-keyword>`
+- `<calc-sum>`
+- `<color-interpolation-method>`
+- `<color>`
+- `<custom-ident>`
+- `<dashed-ident>`
+- `<dimension>`
+- `<display-box>`
+- `<display-inside>`
+- `<display-internal>`
+- `<display-legacy>`
+- `<display-listitem>`
+- `<display-outside>`
+- `<easing-function>`
+- `<filter-function>`
+- `<flex>`
+- `<frequency>`
+- `<frequency-percentage>`
+- `<generic-family>`
+- `<gradient>`
+- `<hex-color>`
+- `<hue>`
+- `<hue-interpolation-method>`
+- `<ident>`
+- `<image>`
+- `<integer>`
+- `<length>`
+- `<length-percentage>`
+- `<line-style>`
+- `<named-color>`
+- `<number>`
+- `<overflow>`
+- `<percentage>`
+- `<position-area>` Experimental
+- `<position>`
+- `<ratio>`
+- `<relative-size>`
+- `<resolution>`
+- `<string>`
+- `<system-color>`
+- `<time>`
+- `<time-percentage>`
+- `<transform-function>`
+- `<url>`
diff --git a/web/html.md b/web/html.md
index f47a0ec..e82634d 100644
--- a/web/html.md
+++ b/web/html.md
@@ -9,119 +9,6 @@ title: A Quick Guide to Modern HTML
 
 Modern HTML is a remarkably simple and coherent standard.
 
-## Basic HTML
-
-HTML is a *markup language* used for content on the web. It is composed of *tags*, that may be *nested* within each other to form a *document tree*. It is *semantic*: every tag
-
-and many tags indeed hold no purpose other than indicating ...
-
-
-Every website you visit is composed of HTML, which alongside with styling via CSS... Modern websites are composed of somewhat atrocious amounts of
-
-Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.
-
-HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as `<img>` and `<input>` directly introduce content into the page. Other tags such as `<p>` and `</p>` surround and provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page.
-
-
-HTML is composed of *tags*. These tags are enclosed in angle brackets
-
-There are quite a few tags, but not overwhelmingly many. Here they all are.
-
-if your tag is not reserved, you can kinda just write whatever?? i like doing this
-
-There are about XX important tags. Here they all are.
-
-## Style
-
-- [`<b>`][b] or [`<strong>`][strong]: <b>bold</b> text
-- [`<i>`][i] or [`<em>`][em]: <i>italic</i> text
-- [`<u>`][u]: <u>underlined</u> text
-- [`<s>`][s]: <s>struckthrough</s> text
-- [`<q>`][q]: <q>quoted</q> text
-- [`<small>`][small]: <small>small</small> text
-- [`<sub>`][sub]: <sub>sub</sub>text
-- [`<sup>`][sup]: <sup>super</sup>text
-- [`<code>`][code]: <code>text styled like code</code>
-- [`<pre>`][pre]: <pre>preformatted text</pre>
-
-Some emphasis must be made: these tags are **semantic**. They are not for styling! You have a much more expressive form of styling with CSS!
-Given the existence of a quote key on most ASCII keyboards, this is not very useful, unless you're a stickler for Unicode quotes.
-
-
-<details>
-<summary>default styles</summary>
-
-```css
-b, strong {
-  font-weight: bolder;
-}
-```
-
-```css
-i, em {
-  font-style: italic;
-}
-```
-
-```css
-u {
-  text-decoration: underline;
-}
-```
-
-```css
-s {
-  text-decoration: line-through;
-}
-```
-
-```css
-q:before {
-  content: open-quote;
-}
-
-q:after {
-  content: close-quote;
-}
-```
-
-```css
-small {
-  font-size: smaller;
-}
-```
-
-```css
-sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-```
-
-```css
-sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-```
-
-```css
-code {
-  font-family: monospace;
-}
-```
-
-```css
-pre {
-  display: block;
-  font-family: -moz-fixed;
-  white-space: pre;
-  margin-block: 1em;
-}
-```
-
-</details>
-
 ## Semantic
 
 - [`<html>`][html]: The root of an HTML document.
@@ -220,18 +107,16 @@ wbr {
 
 </details>
 
-Aside from being block elements, they have no styling...
-
-- [`<main>`][main]
-    - There should exist at most one `<main>` element in a document.
-- [`<section>`][section]
-- [`<aside>`][aside]
-- [`<header>`][header]
-- [`<footer>`][footer]
-- [`<article>`][article]
-- [`<nav>`][nav]
-- [`<div>`][div]: the generic block container.
-- [`<span>`][span]: the generic inline container.
+- [`<main>`][main]: The main content of the body of a document.
+    - There should exist at most one visible `<main>` element in a document.
+- [`<header>`][header]: A section of a document intended for treatment as a header.
+- [`<footer>`][footer]: A section of a document intended for treatment as a footer.
+- [`<aside>`][aside]: A portion of a document only indirectly related to the main content.
+- [`<article>`][article]: A self-contained composition within a document.
+- [`<nav>`][nav]: A section of the document that provides navigation links.
+- [`<section>`][section]: A generic standalone section of the document.
+- [`<div>`][div]: The generic block container. `display: block`.
+- [`<span>`][span]: The generic inline container. `display: inline` (default).
 
 <details>
 <summary>default styles</summary>
@@ -248,18 +133,107 @@ span {
 
 </details>
 
+## Stylistic
+
+- [`<b>`][b] or [`<strong>`][strong]: <b>bold</b> text
+- [`<i>`][i] or [`<em>`][em]: <i>italic</i> text
+- [`<u>`][u]: <u>underlined</u> text
+- [`<s>`][s]: <s>struckthrough</s> text
+- [`<q>`][q]: <q>quoted</q> text
+- [`<small>`][small]: <small>small</small> text
+- [`<sub>`][sub]: <sub>sub</sub>text
+- [`<sup>`][sup]: <sup>super</sup>text
+- [`<code>`][code]: <code>text styled like code</code>
+- [`<pre>`][pre]: <pre style="display: inline; font-size: 0.8em;">preformatted text</pre>
+
+<details>
+<summary>default styles</summary>
+
+```css
+b, strong {
+  font-weight: bolder;
+}
+```
+
+```css
+i, em {
+  font-style: italic;
+}
+```
+
+```css
+u {
+  text-decoration: underline;
+}
+```
+
+```css
+s {
+  text-decoration: line-through;
+}
+```
+
+```css
+q:before {
+  content: open-quote;
+}
+
+q:after {
+  content: close-quote;
+}
+```
+
+```css
+small {
+  font-size: smaller;
+}
+```
+
+```css
+sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+```
+
+```css
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+```
+
+```css
+code {
+  font-family: monospace;
+}
+```
+
+```css
+pre {
+  display: block;
+  font-family: -moz-fixed;
+  white-space: pre;
+  margin-block: 1em;
+}
+```
+
+</details>
+
 ## Metadata
 
 Several HTML elements provide *metadata* about the document in question. They are invisible and removed from the render tree (`display: none`), and only serve to provide information to the browser.
 
-- [`<head>`][head]: the document metadata container.
+- [`<head>`][head]: The document metadata container.
   - There should exist one and only one `<head>` element in a document.
-- [`<title>`][title]: the title of the document to be displayed.
-- [`<base href="" target="">`][base]: the base URL for all relative URLs to use.
+- [`<title/>`][title]: The title of the document to be displayed.
+- [`<base href="" target=""/>`][base]: the base URL for all relative URLs to use.
   - There should exist no more than one `<base>` element in a document.
-- [`<link ...>`][link]: establishes relationships between the current document and other external resources.
-  - This is used for a variety of purposes: site icons, external stylesheets, canonical "next" documents, ...
-- [`<meta ...>`][meta]: generic metadata.
+- [`<link .../>`][link]: Establishes relationships between the current document and other external resources.
+  - This is used for a variety of purposes: site icons, external stylesheets, ...
+- [`<meta .../>`][meta]: Generic metadata.
+- [`<style ...>`][style]: Generic metadata.
+- [`<script ...>`][script]: Generic metadata.
 
 <details>
 <summary>default styles</summary>
@@ -335,14 +309,6 @@ HTML supports *ordered* and *unordered* lists.
 - [`<ol type="a" start=1 reversed>`][ol]: An *ordered* list. Displayed as a numbered list by default.
 - [`<li value=1>`][li]: A *list element*. Nested within either `<ul>` or `<ol>`.
 
-Both ordered and unordered lists should have only `<li>`s as their directly nested elements.
-
-On ordered lists, the `type` attribute indicates the numbering type, and can be one-of `a` (lowercase letters), `A` (uppercase letters), `i` (lowercase Roman numerals), `I` (uppercase Roman numerals), or `1` (Arabic numerals, default). The `start` attribute indicates the ordinal at which to start labeling at, and must be an Arabic numeral, even when `type` is not the default. The presence of the `reversed` attribute indicates that a list should be labelled in descending order. As usual, these properties all may be overridden with targeted CSS.
-
-Within ordered lists, the `value` attribute on an `li` indicates that the ordering should jump to the specified ordinal and continue from there. Like `start`, it takes an Arabic numeral, irrespective of ordering style.
-
-There are also a third type of lists available: *description lists*. These do not use the `<li>` element and are generally left unused. We discuss them in a future section.
-
 <details>
 <summary>default styles</summary>
 
@@ -375,6 +341,14 @@ ol {
 
 </details>
 
+Both ordered and unordered lists should have only `<li>`s as their directly nested elements.
+
+On ordered lists, the `type` attribute indicates the numbering type, and can be one-of `a` (lowercase letters), `A` (uppercase letters), `i` (lowercase Roman numerals), `I` (uppercase Roman numerals), or `1` (Arabic numerals, default). The `start` attribute indicates the ordinal at which to start labeling at, and must be an Arabic numeral, even when `type` is not the default. The presence of the `reversed` attribute indicates that a list should be labelled in descending order. As usual, these properties all may be overridden with targeted CSS.
+
+Within ordered lists, the `value` attribute on an `li` indicates that the ordering should jump to the specified ordinal and continue from there. Like `start`, it takes an Arabic numeral, irrespective of ordering style.
+
+There are also a third type of lists available: *description lists*. These do not use the `<li>` element and are generally left unused. We discuss them in a future section.
+
 ## Hypertext
 
 - [`<form ...>`][form]: A section that can perform interactive HTTP requests.
@@ -590,6 +564,8 @@ These elements are *really* useless. You shouldn't bother knowing them. They're
 [base]: https://developer.mozilla.org/HTML/Element/base
 [link]: https://developer.mozilla.org/HTML/Element/link
 [meta]: https://developer.mozilla.org/HTML/Element/meta
+[style]: https://developer.mozilla.org/HTML/Element/style
+[script]: https://developer.mozilla.org/HTML/Element/script
 [a]: https://developer.mozilla.org/HTML/Element/a
 [img]: https://developer.mozilla.org/HTML/Element/img
 [audio]: https://developer.mozilla.org/HTML/Element/audio