mmm​.s‑ol.nu

pleasant ideas with interfaces
an error occured while rendering this view:
:root {
  --white: #ffffff;
  --gray-bright: #eeeeee;
  --gray-dark: #303336;
  --gray-darker: #1d1f21;
  --gray-neutral: #b9bdc1;
  --gray-success: #bdddc1;
  --gray-fail: #ddbdc1;
  --margin-wide: 2rem; }
  @media only screen and (max-width: 425px) {
    :root {
      --margin-wide: 0.5rem; } }

* {
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body, html, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

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

h1 {
  font-size: 1.6em; }

h2 {
  font-size: 1.4em; }

h3 {
  font-size: 1.17em; }

h4, h5, h6 {
  font-size: 1em; }

input, select, button {
  color: initial; }
  input:disabled, select:disabled, button:disabled {
    color: graytext; }

tt, code, kbd, samp {
  font-family: monospace; }

code {
  font-size: 0.8em; }

b, strong {
  font-weight: bold; }

em, i {
  font-style: italic; }

hr {
  clear: both; }

ul {
  margin: 0;
  padding-inline-start: 2em; }

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }

sub {
  top: 0.4em; }

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #eeeeee;
  font-family: sans-serif;
  min-height: 100vh; }

a {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: filter 500ms, text-decoration-color 500ms; }
  a:hover {
    filter: invert(40%);
    text-decoration-color: currentColor; }

::selection {
  background: #303336;
  color: #eeeeee;
  padding: 1em; }

/*

vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)

*/
/*background color*/
.hljs {
  background: #1d1f21;
  border-radius: 6px;
  padding: 0.2em 0.5em;
  white-space: nowrap; }

pre > .hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  white-space: pre-wrap;
  margin: 0 2em; }

/*selection color*/
.hljs::selection,
.hljs span::selection {
  background: #373b41; }

.hljs::-moz-selection,
.hljs span::-moz-selection {
  background: #373b41; }

/*foreground color*/
.hljs {
  color: #c5c8c6; }

/*color: fg_yellow*/
.hljs-title,
.hljs-name {
  color: #f0c674; }

/*color: fg_comment*/
.hljs-comment,
.hljs-meta,
.hljs-meta .hljs-keyword {
  color: #707880; }

/*color: fg_red*/
.hljs-number,
.hljs-symbol,
.hljs-literal,
.hljs-deletion,
.hljs-link {
  color: #cc6666; }

/*color: fg_green*/
.hljs-string,
.hljs-doctag,
.hljs-addition,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #b5bd68; }

/*color: fg_purple*/
.hljs-attribute,
.hljs-code,
.hljs-selector-id {
  color: #b294bb; }

/*color: fg_blue*/
.hljs-keyword,
.hljs-selector-tag,
.hljs-bullet,
.hljs-tag {
  color: #81a2be; }

/*color: fg_aqua*/
.hljs-subst,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #8abeb7; }

/*color: fg_orange*/
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-quote,
.hljs-section,
.hljs-selector-class {
  color: #de935f; }

.hljs-emphasis {
  font-style: italic; }

.hljs-strong {
  font-weight: bold; }

/*
  vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
*/
/*background color*/
.CodeMirror.cm-s-hybrid {
  color: #c5c8c6;
  background: #1d1f21;
  height: auto;
  flex: 1;
  /*selection color*/
  /*foreground color*/
  /*color: fg_yellow*/
  /*color: fg_comment*/
  /*color: fg_red*/
  /*color: fg_green*/
  /*color: fg_purple*/
  /*color: fg_blue*/
  /*color: fg_aqua*/
  /*color: fg_orange*/ }
  .CodeMirror.cm-s-hybrid .CodeMirror-selected,
  .CodeMirror.cm-s-hybrid .CodeMirror-line::selection,
  .CodeMirror.cm-s-hybrid .CodeMirror-line > span::selection,
  .CodeMirror.cm-s-hybrid .CodeMirror-line > span > span::selection {
    background: #373b41; }
  .CodeMirror.cm-s-hybrid .CodeMirror-cursor {
    border-color: #c5c8c6; }
  .CodeMirror.cm-s-hybrid .cm-keyword {
    color: #f0c674; }
  .CodeMirror.cm-s-hybrid .cm-comment,
  .CodeMirror.cm-s-hybrid .cm-meta {
    color: #707880; }
  .CodeMirror.cm-s-hybrid .cm-number,
  .CodeMirror.cm-s-hybrid .cm-atom {
    color: #cc6666; }
  .CodeMirror.cm-s-hybrid .cm-string,
  .CodeMirror.cm-s-hybrid .cm-string-2,
  .CodeMirror.cm-s-hybrid .cm-operator {
    color: #b5bd68; }
  .CodeMirror.cm-s-hybrid .cm-attribute,
  .CodeMirror.cm-s-hybrid .cm-propery {
    color: #b294bb; }
  .CodeMirror.cm-s-hybrid .cm-tag,
  .CodeMirror.cm-s-hybrid .cm-qualifier {
    color: #81a2be; }
  .CodeMirror.cm-s-hybrid .cm-link,
  .CodeMirror.cm-s-hybrid .cm-header,
  .CodeMirror.cm-s-hybrid .cm-hr {
    color: #8abeb7; }
  .CodeMirror.cm-s-hybrid .cm-builtin {
    color: #de935f; }

header > div {
  font-family: 'Source Sans Pro', sans-serif;
  padding: 1rem 2rem;
  text-align: right;
  color: #eeeeee;
  background: #303336; }
  header > div h1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    line-height: 5rem;
    font-size: 4rem;
    font-weight: 200; }
    header > div h1 > span {
      margin-left: auto; }
    header > div h1 .bold {
      font-weight: 400; }
    header > div h1 > a {
      height: 5rem; }
    @media only screen and (max-width: 425px) {
      header > div h1 {
        font-size: 2rem;
        line-height: 5rem; } }
    header > div h1 .sun {
      height: 100%;
      stroke: currentColor;
      fill: currentColor; }
      header > div h1 .sun .out, header > div h1 .sun .in {
        animation: spin 2s;
        animation-iteration-count: 1;
        transform: scale(1); }
      header > div h1 .sun .in {
        animation: size 2s; }
      header > div h1 .sun.spin .circle {
        animation: none; }

header aside {
  margin: 0;
  padding: 0 2rem;
  color: #eeeeee;
  background: #1d1f21;
  line-height: 3em; }
  header aside > a {
    margin-right: 2em; }

@keyframes spin {
  0% {
    transform: rotate3d(0.5, 1, 0, 0turn); }
  100% {
    transform: rotate3d(0.5, 1, 0, 1turn); } }

@keyframes size {
  0%, 100% {
    transform: scale(1); }
  40%, 60% {
    transform: scale(1.8); } }

footer {
  display: flex;
  padding: 1rem 2rem;
  height: 1rem;
  position: sticky;
  bottom: 0;
  color: #eeeeee;
  background: #303336; }
  @media only screen and (min-width: 426px) and (max-width: 767px) {
    footer {
      position: initial; } }
  @media only screen and (max-width: 425px) {
    footer {
      position: initial; } }
  @media print {
    footer {
      position: absolute;
      display: none; } }
  footer .icons {
    flex: 1;
    display: flex;
    justify-content: flex-end; }
    footer .icons .iconlink {
      filter: invert(0.7); }
      footer .icons .iconlink:hover {
        filter: invert(1); }
      footer .icons .iconlink > img {
        height: 1em;
        margin-left: 0.5em;
        vertical-align: middle; }

.browser {
  display: flex;
  flex: 1;
  border-top: 0.2rem solid #eeeeee; }

.view {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  max-width: calc(100vw - 1rem); }
  .view.inspector {
    top: 0;
    position: sticky;
    max-height: calc(100vh - 3rem);
    color: #c5c8c6;
    border-style: solid;
    border-width: 0 0 0 0.6rem;
    border-radius: 0 6px 6px 0;
    border-color: #303336;
    background: #303336; }
    .view.inspector nav {
      background: inherit; }
    .view.inspector .subnav {
      display: flex;
      flex: 0;
      background: #1d1f21;
      border-bottom: 2px solid #303336;
      padding: 0.5em; }
    .view.inspector .content {
      margin: 0;
      padding: 0;
      display: flex;
      align-self: stretch;
      background: #1d1f21; }
      .view.inspector .content > * {
        display: block;
        margin: 0;
        padding: 1em;
        border-radius: 0;
        border: 0;
        flex: 1; }
    .view.inspector .children {
      margin: 0;
      padding: 1em;
      align-self: stretch;
      background: #1d1f21; }
  .view nav {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #eeeeee;
    z-index: 1000; }
    @media print {
      .view nav {
        position: relative;
        display: none; } }
    .view nav > span:first-of-type {
      flex: 1 0 auto; }
    .view nav > * {
      margin: 1em;
      white-space: nowrap; }
    .view nav.thin > * {
      margin: 0.5em 1em; }
    @media only screen and (max-width: 425px) {
      .view nav > .inspect-btn {
        display: none; } }
    .view nav .tight {
      margin-left: 0; }
  .view .error-wrap {
    flex: 0 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    color: #1d1f21;
    background: #ddbdc1; }
    .view .error-wrap.empty {
      display: none; }
    .view .error-wrap > span {
      display: inline-block;
      margin-bottom: 0.5em;
      font-weight: bold;
      color: #f00; }
    .view .error-wrap > pre {
      margin: 0; }
  .view .content {
    flex: 1 0 auto;
    overflow: auto;
    padding: 1em 2em;
    margin: 0 1em;
    align-self: flex-start;
    min-width: 30vw;
    background: #ffffff;
    position: relative; }

.content {
  opacity: 1;
  transition: opacity 150ms; }
  body.loading .content {
    opacity: 0; }

.content img, .content video {
  width: inherit;
  height: inherit; }

.content ul, .content ol {
  break-before: avoid-page;
  break-inside: avoid-page; }

.content .wide.markdown,
.content .wide .markdown {
  max-width: max-content; }

.content .markdown {
  position: relative;
  max-width: 640px;
  text-align: justify; }
  .content .markdown > blockquote {
    border-style: solid;
    border-width: 0 0 0 0.6rem;
    border-radius: 0 6px 6px 0;
    line-height: normal;
    margin: 1rem var(--margin-wide);
    padding: 1rem;
    background: #eeeeee;
    border-color: #b9bdc1; }

.content p {
  orphans: 6;
  widows: 6; }

.content .markdown p, .content .markdown a,
.content .markdown > p p,
.content .markdown > p a,
.content .markdown > p > a p,
.content .markdown > p > a a {
  max-width: 100%; }

.content .markdown > img, .content .markdown > video,
.content .markdown > p > img,
.content .markdown > p > video,
.content .markdown > p > a > img,
.content .markdown > p > a > video {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  padding: 0 2em;
  box-sizing: border-box; }

.content .markdown a, .content .markdown p,
.content .markdown > p a,
.content .markdown > p p,
.content .markdown > p > a a,
.content .markdown > p > a p {
  max-width: 100%; }

.content .markdown h2 + p,
.content .markdown h3 + p,
.content .markdown h4 + p,
.content .markdown h5 + p,
.content .markdown h6 + p {
  margin-top: 0.2em; }

.content .markdown > ul {
  margin-block-end: 1em;
  text-align: none; }

.content .embed {
  display: block;
  width: inherit;
  height: inherit;
  max-width: inherit;
  break-inside: avoid-page;
  line-height: normal; }
  .content .embed .description {
    text-align: center; }
  .content .embed.inline {
    display: inline-block; }
  .content .embed.desc {
    display: inline-block;
    padding: 0.5em;
    margin: 0.2em;
    background: #eeeeee; }
  .content .embed > *:not(.description) {
    max-width: 100%; }

.content pre, .content code {
  text-align: initial; }

.content pre > code {
  border-style: solid;
  border-width: 0 0 0 0.6rem;
  border-radius: 0 6px 6px 0;
  border-color: #303336;
  display: block;
  margin: 0 var(--margin-wide);
  padding: 1em;
  white-space: pre-wrap;
  break-inside: avoid-page;
  overflow-x: auto;
  line-height: normal;
  background: #1d1f21;
  color: #c5c8c6; }

.content pre.dual-code {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem; }
  .content pre.dual-code > code {
    border-style: solid;
    border-width: 0 0.3rem 0 0;
    border-radius: 6px 0 0 6px;
    flex: 1;
    margin: 0; }
  .content pre.dual-code > code + code {
    border-style: solid;
    border-width: 0 0 0 0.3rem;
    border-radius: 0 6px 6px 0; }

.content .example, .content .well {
  border-style: solid;
  border-width: 0 0 0 0.6rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem var(--margin-wide);
  padding: 1rem;
  line-height: normal;
  background: #eeeeee;
  border-color: #b9bdc1;
  break-inside: avoid-page; }

.content .well-warning {
  border-color: #ddbdc1; }

.content .spacious h1, .content .spacious h2, .content .spacious h3 {
  margin-top: 1.7em; }

.content .spacious h1 + h2,
.content .spacious h2 + h3 {
  margin-top: 0; }

:root {
  --sidenote-width: 14rem; }

.sidenote-container {
  margin-right: 15rem; }
  @media only screen and (min-width: 426px) and (max-width: 767px) {
    .sidenote-container {
      margin: auto; } }
  .sidenote-container .sidenote-container {
    margin-right: initial;
    margin: initial; }
  .sidenote-container .sidenote {
    position: absolute;
    box-sizing: border-box;
    width: 14rem;
    right: -16rem;
    padding: 0 1rem;
    color: #303336;
    border-top: 1px solid #303336;
    word-break: break-word;
    font-size: 0.8em;
    line-height: 1.1;
    text-align: initial;
    break-inside: avoid-page; }
    .sidenote-container .sidenote .hook {
      position: absolute;
      top: -4rem;
      width: 0;
      height: 0; }
      @media print {
        .sidenote-container .sidenote .hook {
          top: 0; } }
    .sidenote-container .sidenote .ref {
      display: block;
      position: absolute;
      width: 1rem;
      margin-left: -1.2rem;
      text-align: right; }
    .sidenote-container .sidenote > .markdown > p:first-child {
      margin-top: 0; }
    .sidenote-container .sidenote a {
      display: inline; }
    @media only screen and (min-width: 426px) and (max-width: 767px) {
      .sidenote-container .sidenote {
        width: initial;
        position: initial;
        right: initial;
        border-bottom: 1px solid #303336;
        margin: 0.5rem 0; } }

.canvas_app {
  position: relative;
  display: inline-block; }
  .canvas_app .overlay {
    position: absolute;
    padding: 1rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 300ms; }
    .canvas_app .overlay:hover {
      opacity: 1; }
    .canvas_app .overlay > * {
      margin: 0.5em; }
    .canvas_app .overlay a {
      display: block;
      color: #eeeeee;
      font-family: inherit; }

.print-only {
  display: none; }
  @media print {
    .print-only {
      display: block; } }

@media print {
  .screen-only {
    display: none; } }

@media print {
  h1, h2, h3, h4, h5 {
    break-after: avoid-page; }
    h1 + *, h2 + *, h3 + *, h4 + *, h5 + * {
      break-before: avoid-page; }
  .view {
    flex: 1 0 auto; }
    .view .content {
      flex: 1 0 auto; }
  body {
    background: #ffffff; } }

.print-ownpage {
  break-before: page;
  break-after: page; }

@page {
  size: a4;
  margin: 2.5cm 0 2.5cm; }