style.css

/**
 * ╭───────────────────────────────────────────────────────────────╮
 * │                         Color Palette                         │
 * ╰───────────────────────────────────────────────────────────────╯
**/

:root {
  color-scheme: light dark;

  /* <h2|a|code> and specific emphasis */
  --bg-accent:        #b884;
  --fg-accent-border: #4493f8aa;
  --fg-accent:        #4493f8;

  /* <kbd> and special inline content */
  --bg-key:           #8884;
  --fg-key-border:    #888;

  /* flavor menu */
  --bg-menu-head: rgba(130, 156, 175, 0.4);
  --bg-menu-cell: rgba(130, 156, 175, 0.2);
}


/**
 * ╭───────────────────────────────────────────────────────────────╮
 * │                          Main Layout                          │
 * ╰───────────────────────────────────────────────────────────────╯
**/

:root {
  --main-padding: 12px;
  --list-indent: 1.5em;
}

body {
  width: 99%;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 1em;
}

header {
  text-align: center;
}
header h1 {
  margin-top: 1em;
}
header h1+p {
  margin-bottom: 2em;
}

h2 a,
h3 a {
  display: none;
}
h2:hover a,
h3:hover a {
  display: inline;
}

form {
  padding: 0 1em;
}

form .menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1em;
  justify-content: space-between;
}

html {
  height: 100%;
  width:  100%;
  font-family: sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  max-width: 60em;
  min-height: 100%;

  line-height: 1.4em;
}

main {
  display: block; /* enable 'flex' here on a per-page basis */
  flex: fit-content;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 var(--main-padding);
}

footer {
  text-align: center;
  padding: 2em var(--main-padding);
}

h2 {
  color: var(--fg-accent);
  border-bottom: 1px inset var(--fg-accent-border);
}

h3 {
  border-bottom: 1px dotted;
}

h2, h3, footer {
  margin-top: 2em;
}

ol, ul {
  padding-left: var(--list-indent);
  margin-left: 0;
}

li {
  margin: 0.2em 0;
}

a[href] {
  color: var(--fg-accent);
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline;
}

header nav {
  text-align: left;
  padding: 0 var(--main-padding);
}
header nav a {
  padding: 0.5em 0;
  display: inline-block;
}

.big-links {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.big-links a {
  display: inline-block;
  font-size: larger;
  border: 1px solid var(--fg-accent-border);
  border-radius: 5px;
  padding: 1em;
  text-align: center;
}


/**
 * ╭───────────────────────────────────────────────────────────────╮
 * │                          Keys & Chars                         │
 * ╰───────────────────────────────────────────────────────────────╯
**/

.thumbs {
  max-width: 26em;
}

svg {
  display: block;
  margin: auto;
  max-width: 60%;
}

table { /* behaviors */
  max-width: 42em;
  margin: auto;
}
th, td {
  padding: 0.8em;
}
td svg {
  height: 80px;
  max-width: inherit;
}
td {
  text-align: left;
}

#menu tr:hover {
  background-color: var(--bg-menu-head);
  cursor: pointer;
}
tr.selected th {
  background-color: var(--bg-menu-head);
}
tr.selected td {
  background-color: var(--bg-menu-cell);
}

.left  .tucked { transform: translate(  0px, 10px); }
.left  .comfy  { transform: translate( 64px, 10px); }
.left  .reachy { transform: translate(128px, 10px); }
.right .reachy { transform: translate(220px, 10px); }
.right .comfy  { transform: translate(284px, 10px); }
.right .tucked { transform: translate(348px, 10px); }

/* XXX dirty WebKit fix */
@supports (-webkit-hyphens: none) {
  .right { transform: translate(-15px, 0); }
}

i.layer {
  background-color: var(--bg-key);
}

kbd { /* key */
  margin: 0 2px;
  font-family: serif;
  font-size: 1em;
  border: 1px outset var(--bg-key-border);
  background-color: var(--bg-key);
  padding: 2px 3px;
  text-wrap: nowrap;
}

code { /* character, digrams, trigrams */
  font-weight: bold;
  font-family: serif;
  background-color: var(--bg-accent);
  padding: 2px 4px;
  border-radius: 2px;
  text-wrap: nowrap;
}


/**
 * ╭───────────────────────────────────────────────────────────────╮
 * │                          Desktop Mode                         │
 * ╰───────────────────────────────────────────────────────────────╯
**/

@media only screen and (min-width: 768px) {
  :root {
    --main-padding: 40px;
    --list-indent: 2.5em;
  }
}