Simpatico Kata: CSS

The basics:

1. Documents flow in the direction of the writing mode.
1. Elements flow in block and inline directions.
1. The block and inline directions are based on the writing mode.
1. Relatively positioned elements have a reserved space in the document flow while absolutely positioned elements are pulled out of it.
1. Screens are measured in viewport units.
1. Parent elements are measured in container units.
1. Em and rem units evaluate relative to their elemental and root contexts.
1. Setting z-index creates a new stacking context for managing the way elements visually overlap one another.
1. The Cascade organizes selectors in [prioritized layers](https://css-tricks.com/the-c-in-css-the-cascade/) that can be re-organized into customized Cascade Layers.
1. Selectors are evaluated by a specificity score.
1. The applied style when two selectors match is the one that appears lowest in the Cascade when they share the same origin.
1. If one property is invalid, the next matched property in a matching selector is used.
1. [width looks up the tree while height looks down the tree.](https://geoffgraham.me/width-looks-outward-height-looks-inward/)
1. Specific properties can be declared based on whether or not a browser @supports it.
1. An element can be selected if it :is() a certain selector, is :not() a certain selector, :has() another element, or :where() it meets a certain condition.

Lots of CSS packages exist out there, like from the US Government.

css

html {
  font-family: Palatino, Georgia, Lucida Bright, Book Antiqua, serif;
  font-size: 16px;
  line-height: 1.5rem;
}

code, pre, samp, kbd {
  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
  font-size: 0.833rem;
}

kbd { font-weight: bold; }
h1, h2, h3, h4, h5, h6, th { font-weight: normal; }

/* Minor third */
h1 { font-size: 2.488em; }
h2 { font-size: 2.074em; }
h3 { font-size: 1.728em; }
h4 { font-size: 1.44em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }
small { font-size: 0.833em; }

h1, h2, h3 { line-height: 3rem; }

p, ul, ol, dl, table, blockquote, pre, h1, h2, h3, h4, h5, h6 {
  margin: 1.5rem 0 0;
}
ul ul, ol ol, ul ol, ol ul { margin: 0; }

hr {
  margin: 0;
  border: none;
  padding: 1.5rem 0 0;
}

/* Accounting for borders */
table {
  line-height: calc(1.5rem - 1px);
  margin-bottom: -1px;
}
pre {
  margin-top: calc(1.5rem - 1px);
  margin-bottom: -1px;
}

/* Colors */

body { color: #222; }
code, pre, samp, kbd { color: #111; }
a, header nav a:visited, a code { color: #00e; }
a:visited, a:visited code { color: #60b; }
mark { color: inherit; }

code, pre, samp, thead, tfoot { background-color: rgba(0, 0, 0, 0.05); }
mark { background-color: #fe0; }

main aside, blockquote, ins { border: solid rgba(0, 0, 0, 0.05); }
pre, code, samp { border: solid rgba(0, 0, 0, 0.1); }
th, td { border: solid #dbdbdb; }

/* Layout */

body { margin: 1.5rem 1ch; }

body > header { text-align: center; }

main, body > footer {
  display: block; /* Just in case */
  max-width: 78ch;
  margin: auto;
}

main figure, main aside {
  float: right;
  margin: 1.5rem 0 0 1ch;
}

main aside {
  max-width: 26ch;
  border-width: 0 0 0 0.5ch;
  padding: 0 0 0 0.5ch;
}

/* Copy blocks */

blockquote {
  margin-right: 3ch;
  margin-left: 1.5ch;
  border-width: 0 0 0 0.5ch;
  padding: 0 0 0 1ch;
}

pre {
  border-width: 1px;
  border-radius: 2px;
  padding: 0 0.5ch;
  overflow-x: auto;
}
pre code {
  border: none;
  padding: 0;
  background-color: transparent;
  white-space: inherit;
}

img { max-width: 100%; }

/* Lists */

ul, ol, dd { padding: 0 0 0 3ch; }
dd { margin: 0; }

ul > li { list-style-type: disc; }
li ul > li { list-style-type: circle; }
li li ul > li { list-style-type: square; }

ol > li { list-style-type: decimal; }
li ol > li { list-style-type: lower-roman; }
li li ol > li { list-style-type: lower-alpha; }

nav ul {
  padding: 0;
  list-style-type: none;
}
nav ul li {
  display: inline;
  padding-left: 1ch;
  white-space: nowrap;
}
nav ul li:first-child { padding-left: 0; }

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

th, td {
  border-width: 1px;
  padding: 0 0.5ch;
}

/* Copy inline */

a { text-decoration: none; }

sup, sub {
  font-size: 0.75em;
  line-height: 1em;
}

ins {
  border-width: 1px;
  padding: 1px;
  text-decoration: none;
}

mark {
  padding: 1px;
}

code, samp {
  border-width: 1px;
  border-radius: 2px;
  padding: 0.1em 0.2em;
  white-space: nowrap;
}

Here is a minimal set of styles for authoring:

css

html {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img, svg {
  max-width: 100%;
  height: auto;
  border: 1px solid black;
}

pre{
  color: #78A960;
  background-color: #1e1f20;
  overflow-x: auto;
}
code{
  color: #78A960;
}


@media (prefers-color-scheme: dark) {
  html{
    color: #ffca28;
    background-color: #1e1f20;
  }

  a {
    color: aliceblue;
  }

  a:link{
    color: aliceblue;
  }

  a:visited{
    color: #1f7199;
  }

  pre{
    color: #78A960;
  }

}

Flexbox

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ TODO

Grid

See https://css-tricks.com/snippets/css/complete-guide-grid/ TODO

Minimap

Although it still only works for Firefox as of 2023, this minimap idea is still a good one. Also, see the codepen