oasis/src/assets/style.css

:root {
  /*
   * according to https://www.color-blindness.com/color-name-hue/
   *
   * amber
   * chartreuse
   * free-speech-green (lime)
   * aqua
   * blue
   * electric-indigo
   * hot-magenta
   */
  --red: var(--base08);
  --orange: var(--base09);
  --yellow: var(--base0A);
  --green: var(--base0B);
  --cyan: var(--base0C);
  --blue: var(--base0D);
  --violet: var(--base0E);
  --magenta: var(--base0F);

  /* convenience */
  --bg: var(--base00);
  --bg-status: var(--base01);
  --bg-selection: var(--base02);
  --fg-alt: var(--base03);
  --fg-status: var(--base04);
  --fg: var(--base05);
  --fg-light: var(--base06);
  --bg-light: var(--base07);

  /* rhythm */
  --rhythm: 1.5rem;
  --small: 1rem;
  --smaller: 0.5rem;
  --measure: 36rem;

  /* size */
  --thin: 0.0625rem;
  --medium: 0.25rem;
  --thick: var(--smaller);
  --common-radius: var(--medium);
}

* {
  scrollbar-color: var(--fg-status) var(--bg);
}

::selection {
  background-color: var(--bg-selection);
  color: var(--fg-light);
}

html {
  display: flex;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  justify-content: center;
  font-size: 12pt;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
}

/* https://www.desmos.com/calculator/3elcf5cwhn */
h1 { font-size: 133%; } /*     4 / 3 */
h2 { font-size: 115%; } /*     8 / 7 */
h3 { font-size: 105%; } /*   16 / 15 */
h4 { font-size: 103%; } /*   32 / 31 */
h5 { font-size: 101%; } /*   64 / 63 */
h6 { font-size: 100%; } /* 128 / 127 */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--small) 0;
}

ul,
ol {
  padding-left: var(--rhythm);
}

a {
  color: var(--blue);
}

button {
  cursor: pointer;
  background: var(--fg);
  color: var(--bg);
  border: var(--thin) solid var(--fg);
  padding: var(--smaller) var(--small);
  border-radius: var(--common-radius);
}

select,
input {
  background: var(--bg);
  color: var(--fg);
  border: var(--thin) solid var(--bg-selection);
  padding: var(--smaller);
  margin-right: var(--small);
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--common-radius);
}

pre {
  overflow-x: auto;
  background-color: var(--bg);
  padding: var(--smaller);
  font-size: 92%;
  border-radius: var(--common-radius);
  border: var(--thin) solid var(--bg-status);
}

.message code {
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 0.125em 0.25em;
  margin: 0;
  font-size: 85%;
  background-color: var(--bg);
  border-radius: var(--common-radius);
  border: var(--thin) solid var(--bg-status);
}

.message pre code {
  color: inherit;
  padding: 0;
  margin: 0;
  font-size: 100%;
  background-color: initial;
  border: initial;
  border-radius: initial;
}

.message blockquote {
  margin-left: 0;
  border-left: var(--thick) solid var(--bg-status);
  padding-left: var(--small);
}

.profile > img,
.profile > h1 {
  display: inline-block;
}

.profile > img {
  width: 4rem;
  height: 4rem;
  margin-right: var(--small);
  border-radius: var(--common-radius);
}

.private {
  border-left: var(--medium) solid var(--violet);
}

.message img,
.message video {
  max-width: 100%;
  max-height: 100vh;
  border: var(--thin) solid var(--bg-status);
  border-radius: var(--common-radius);
}

.message.thread-target {
  border: var(--thin) solid var(--blue);
  box-shadow: 0 0 var(--medium) var(--blue);
}

.message audio {
  width: 100%;
}

.message > :first-child {
  margin-top: 0;
  padding-top: 0;
}

.content > :last-child {
  margin-bottom: 0;
}

@media screen {
  html {
    min-height: 100%;
    color: var(--fg);
    background-color: var(--bg-status);
  }

  body {
    width: 100%;
    max-width: var(--measure);
    margin: 0;
  }
}

nav {
  margin: var(--small) 0;
}

nav > ul > li > a {
  color: var(--fg);
  text-decoration: none;
  font-weight: bold;
}

nav > ul > li > a.current {
  text-decoration: underline;
}

section {
  padding: var(--small);
  border-radius: var(--common-radius);
  margin: var(--thick) 0;
  box-shadow: 0 var(--thin) var(--thin) rgba(0, 0, 0, 0.33);
  word-wrap: break-word;
  background: var(--bg);
}

.message > header.metadata {
  height: var(--rhythm);
  display: flex;
  margin-bottom: var(--small);
}

.message > header > a > .avatar {
  width: var(--rhythm);
  height: var(--rhythm);
  border-radius: var(--common-radius);
  margin-right: var(--smaller);
}

textarea {
  background-color: var(--bg);
  box-sizing: border-box;
  display: block;
  font-size: var(--small);
  padding: var(--small);
  resize: vertical;
  width: 100%;
  margin: var(--small) 0;
  height: 12rem;
  border: var(--thin) solid var(--bg-selection);
  border-radius: var(--common-radius);
  color: var(--fg);
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
}

.message > footer > a,
.message > footer > form > button {
  color: var(--fg);
  font-weight: bold;
}

.message > header > .text > .author {
  font-weight: bold;
}

.message > header > .text > .author > a {
  color: var(--fg-light);
  text-decoration: none;
}

/*
 * HACK: centered-footer
 *
 * When someone likes a message we want to submit the form and then redirect
 * them back to the original page. Unfortunately when you link to anchor tags
 * that scrolls the browser so that they're at the *top* of the page, not the
 * center of the page. In our view we have an empty div with an appropriate
 * anchor tag, so here we use CSS to center it on the screen.
 *
 * The code below creates padding-top that takes up 50% of the height of the
 * viewport and then gets rid of it with negative margin. This has no effect
 * on the display of the item, but means that when we link to the anchor tag
 * it centers this empty element vertically on the screen.
 *
 * We also use `pointer-events: none` to ensure that this invisible div doesn't
 * capture cursor events (clicks, drags, etc) on surrounding elements, because
 * otherwise we could have a problem where someone clicks above the invisible
 * div but the browser things they're clicking the gigantic amount of padding.
 */
.message > .centered-footer {
  padding-top: 50vh;
  margin-top: -50vh;
  pointer-events: none;
}

.message > footer {
  display: flex;
  justify-content: space-between;
  margin-top: var(--small);
}

.message > footer > * {
  text-decoration: none;
}

.message > footer > form > button.liked {
  color: var(--red);
}

label {
  display: block;
  margin: 0;
}

.message > footer > form > button {
  display: inline-block;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

nav > ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

nav > ul > li {
  list-style: none;
}

.profile {
  margin-top: var(--rhythm);
  display: flex;
  margin-bottom: var(--rhythm);
}

progress {
  display: block;
  width: 100%;
}

progress::-moz-progress-bar,
progress::-webkit-progress-value,
progress {
  background: var(--blue);
  border-color: var(--blue);
}

/* content warning! */
summary {
  padding: var(--small) var(--smaller);
  background-color: var(--bg-status);
  margin: 0;
  cursor: pointer;
  color: var(--fg-status);
  border: var(--thin) solid var(--bg-selection);
}

.md-mention {
  -moz-user-select: all;
  -ms-user-select: all;
  -webkit-user-select: all;
  user-select: all;
  background: none;
  font-size: 50%;
}

table {
  width: 100%;
  table-layout: fixed;
}

td,
th {
  padding: var(--smaller);
  outline: var(--thin) solid var(--bg-status);
}

th {
  text-align: left;
  background-color: var(--bg-status);
}

input[type="search"] {
  width: 100%;
  margin: var(--small) 0;
}

hr {
  border: var(--thin) solid var(--fg-alt);
}