meow

1 files changed, 234 insertions, 0 deletions

diff --git a/web/css.md b/web/css.md
new file mode 100644
index 0000000..14367bc
--- /dev/null
+++ b/web/css.md
@@ -0,0 +1,234 @@
+---
+layout: web
+title: A Brief Reference for Modern CSS
+---
+
+# A Brief Reference for Modern CSS
+
+I like CSS. I really, really like CSS. I greatly enjoy just... fucking about with it, producing [pretty websites](https://apropos.codes) (egotistical, i know!) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf).
+
+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.
+
+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.
+
+https://css-tricks.com/whats-new-since-css3/
+
+## Layout
+
+### flow
+
+### absolute
+
+### flexbox
+
+### grid
+
+## Media Queries
+
+## Selectors
+
+**attributes** go on elements...
+
+**identifiers** can be selected with `#`.
+
+**classes** can be selected with `.`.
+
+### combinators
+
+### nested queries
+
+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.
+
+### lists
+
+```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.
+
+## Properties
+
+There are a *lot* of properties, of various elements, and things.
+
+`property left right center up` or whatever
+this seems consistent and i don't know it