bkc.css

:root {
  /* size of the aside panel */
  --split-size: clamp(40vw, 550px, 50vw);
  /* main doc font size */
  --font-size: clamp(16px, calc((100vw - var(--split-size))/43), 23px);
  /* size of the aside PRE font */
  --aside-font-size: min(20px, calc(2 * (clamp(40vw, 550px, 50vw) - 40px) / 84));
  /* size of the aside arrow */
  --arrow-size: 0.75vw;

  /* auto: remaining size of the page */
  --main-size: calc(100vw - var(--split-size));
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.75em;
  background-color: #F4EFE7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rock Salt', sans-serif;
  color: #181923;
  line-height: 1.25em;
}

h1 {
  font-size: 1.25em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
  color: #181923;
}


h2 {
  font-size: 3em;
  margin: 2em 0 0 0;
}

h3 {
  font-size: 1.75em;
  margin: 2em 0 1em 0;
}

.author {
  text-align: right;
  line-height: 1.25em;
  margin: 1em 0 4em 0;
}

#home {
  max-width: 980px;
  margin: 50px auto;
  text-align: center;
  color: #181923;
}

#home h1 {
  font-size: 2.625em;
}

#home #display {
  margin-top: 60px;
}

#home .entry {
  width: calc((min(980px, 100vw) - 100px)/3);
  min-height: calc((min(980px, 100vw) - 100px)/3);
  min-width: 200px;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
  background-color: #FFF;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
  border-radius: 6px;
  font-family: 'Rock Salt', sans-serif;
  display: inline-grid;
}

#home .entry a {
  color: #000;
  text-decoration: none;
}

#home .entry img {
  width: 100%;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 20px;
}

#home footer {
  margin-top: 120px;
}

#home footer img {
  margin: 0 5px;
}

footer p {
  margin: 0;
  line-height: 1.5em;
}

footer b.larrow:first-letter, footer b.rarrow:first-letter, footer b.uarrow:first-letter {
  letter-spacing: -0.6em;
  vertical-align: -0.1em;
  text-decoration: #F4EFE7 underline;
}

footer b.rarrow {
  transform: scale(-1, 1);
}

footer b.uarrow {
  transform: rotate(90deg);
}


footer b.larrow, footer b.rarrow, footer b.uarrow {
  display: inline-block;
  letter-spacing: -0.2em;
  text-decoration: none;
}

#bkc {
  height: 100vh;
}

main {
  max-width: 63ch;
  color: #333;
  padding: 3.125em 3.125em 1em 3.125em;
  margin-left: var(--split-size);
}

main footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  font-size: 0.75em;
  overflow: auto;
  min-height: 50vh;
  text-align: right;
  box-sizing: border-box;
}

main footer span {
  display: block;
  clear: both;
  text-align: center;
  font-family: 'Rock Salt', cursive;
  font-size: 1.375em;
  margin-bottom: 3.125em;
}

main video {
  border: 1px solid #181923;
  box-sizing: border-box;
  width: 100%;
}

#home footer img, main footer img {
  display: inline-block;
  vertical-align: baseline;
}

a {
  color: #666;
  text-decoration: underline #666;
  transition: background-color 0.2s;
}

a:hover {
  color: #181923;
  text-decoration: underline #181923;
}

main img.svg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

main code, main pre {
  font-family: 'Inconsolata', monospace;
  color: #000;
}

main p code {
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  tab-size: 2;
  hyphens: none;
}

main pre {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  display: none;
  background-color: #181923;
  color: #EEE;
  font-size: calc(2 * (min(100vw, 63ch) - 2ch) / 84);
  padding: 2em 1ch;
  line-height: 1.25em;
  white-space: pre;
  counter-reset: code-line;
  list-style: none;
  border-radius: 6px;
}

main pre li {
  height: 1.25em;
  position: relative;
  width: 84ch;
}

main pre li:before {
  counter-increment: code-line;
  content: counter(code-line);
  color: #3A3F58;
  width: 3ch;
  display: inline-block;
  text-align: right;
  margin-right: 1ch;
}

main div.merged {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

main div.merged p {
  display: inline;
  transition: background-color 0.25s linear;
}

main div.merged p ~ p {
  margin-left: 1ch;
}

main .ruler.focused {
  opacity: 0.1;
}

main div.merged p.focused {
  background-color: rgba(0,0,0,0.05);
  padding: 2px 10px 2px 1ch;
  margin: -3px -11px -3px -1px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.2);
}

main div.merged p.focused:first-child {
  padding: 2px 10px 2px 10px;
  margin: -3px -11px -3px -11px !important;
}

main .ruler {
  position: relative;
  float: left;
  border-radius: 8px;
  clear: left;
  left: -3.2ch;
  z-index: 0;
  margin-right: -40px;
  width: 1.2ch;
  background-color: #000;
  opacity: 0;
}

main .ruler:nth-of-type(1), main .ruler:nth-last-of-type(1) {
  opacity: 0 !important;
}

/*main .ruler:after {
  content: "";
  background-color: #181923;
  width: 0.5em;
  height: 0.5em;
  opacity: 1;
  left: calc(-3.125em + 30px + 0.75em);
  position: absolute;
  border-radius: 35%;
}

main .ruler:nth-of-type(1):after {
  display: none;
}
*/

canvas-demo {
  display: block;
  max-width: 100%;
}

aside {
  position: fixed;
  width: var(--split-size);
  box-sizing: border-box;
  height: 100vh;
  background-color: #181923;
  color: #EEE;
  font-family: 'Inconsolata', monospace;
  font-size: var(--aside-font-size);
  line-height: 1.1em;
  white-space: pre;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow: auto;
  top: 0;
  left: 0;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 100;
  overscroll-behavior: contain;
}

aside::after {
  content: "";
  position: fixed;
  left: var(--split-size);
  top: calc(50% - var(--arrow-size));
  width: 0;
  height: 0;
  border-top: var(--arrow-size) solid transparent;
  border-bottom: var(--arrow-size) solid transparent;
  border-left: var(--arrow-size) solid #181923;
  z-index: 100;
}

aside::-webkit-scrollbar {
  display: none;
}

aside ol {
  counter-reset: code-line;
  list-style: none;
  width: 84ch;
  padding: 50vh 0;
  margin: auto;
  top: 0;
  max-width: calc(var(--split-size) - 50px);
  transition: height 0.5s ease-in-out, top 0.5s ease-in-out, padding 0.25s ease-in-out;
  display: block;
  position: relative;
  overflow: hidden;
  will-change: scroll-position, contents, top;
}

aside li {
  transition: all 0.5s ease-in-out;
  height: 1.1em;
  overflow: visible;
  position: relative;
  will-change: opacity, left, top;
}

aside li:before {
  counter-increment: code-line;
  content: counter(code-line);
  color: #3A3F58;
  width: 3ch;
  display: inline-block;
  text-align: right;
  margin-right: 1ch;
  transition: all 0s ease-in-out 0.5s;
  opacity: 1.0;
  user-select: none;
}

aside li.dead {
  transition: all 0.5s ease-in-out;
  transform: translate(-100%, 0);
  opacity: 0;
  height: 0;
}

aside li.dead:before {
  counter-increment: none;
}

aside li.born {
  transition: all 0.5s ease-in-out;
  transform: translate(100%, 0);
  opacity: 0;
  height: 0;
}

aside li.born:before {
  opacity: 0;
}


aside li.hidden {
  height: 0;
  opacity: 0;
  user-select: none;
}

aside li.spacer {
  margin-bottom: 3em;
}

aside li.spacer::after {
  height: 3em;
  line-height: 2em;
  margin: 0.5em 0;
  width: 3ch;
  text-align: right;
  content: "⋮";
  display: block;
  color: #3A3F58;
  user-select: none;
}

@keyframes lens_hide {
  from {
    opacity: 1;
    height: 1.1em;
  }

  50% {
    height: 1.1em;
    opacity: 0;
  }

  to {
    height: 0;
    opacity: 0;
  }
}

@keyframes lens_show {
  from {
    opacity: 0;
    height: 0;
  }

  50% {
    opacity: 0;
    height: 1.1em;
  }

  to {
    opacity: 1;
    height: 1.1em;
  }
}


aside *::selection {
  color: #959DCB !important;
  background-color: #343851 !important;
}

aside .low {
  filter: opacity(0.5) contrast(0.5);
}

aside .outlens {
  filter: opacity(0.1) contrast(0.1);
}

aside.scrolled .outlens, aside.scrolled .low {
  filter: opacity(0.6) contrast(0.75) !important;
}

main svg[display=true] {
  object-fit: contain;
  display: block;
  width: 100%;
  font-size: clamp(0.68em, 1.4vw, 1em);
}

@media only screen and (max-width: 860px) {
  main {
    margin: 0 auto;
  }
  main pre {
    display: block;
  }
  aside {
    display: none;
  }
  main .ruler {
    opacity: 0 !important;
  }
}

#polyfillWarning {
  border-radius: 2px;
  background-color: #F4D4CD;
  border: 1px solid #C90000;
  padding: 1.2em 1.2em;
  box-sizing: border-box;
  font-size: 0.75em;
  line-height: 1.2em;
  color: #200;
  margin-bottom: 50px;
}

#polyfillWarning p {
  margin: 0;
}

.github {
  width: 1em;
  height: 1em;
  vertical-align: baseline;
}

aside #ed {
  position: fixed;
  bottom: 15px;
  right: calc(100vw - var(--split-size) + 15px);
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  opacity: 0.5;
  background-image: url("assets/edit.webp");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: right bottom;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.5s ease-in-out, opacity 0.25s ease-in-out;
  z-index: 10000;
  outline: none !important;
}

aside #ed_opts {
  outline: none !important;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.0;
  width: 100%;
  height: 100%;
  transition: all 0.25s ease-in-out 0s;
}

aside #ed:hover {
  width: 175px;
  opacity: 1.0;
}

aside #ed:hover #ed_opts {
  opacity: 1.0;
  transition: all 0.25s ease-in-out 0.25s;
}

aside #ed, aside #ed_opts, aside #ed_jsfiddle, aside #ed_codepen {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

aside #ed_jsfiddle, aside #ed_codepen {
  cursor: pointer;
  width: 48px;
  height: 48px;
  position: absolute;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  background-color: #000;
  transition: opacity 0.25s linear;
  border: 1px solid #FFF;
  opacity: 0.33;
}
aside #ed #ed_jsfiddle {
  top: 0;
  left: 25px;
  background-image: url("assets/jsfiddle.webp");
}

aside #ed #ed_codepen {
  top: 0;
  left: 90px;
  background-image: url("assets/codepen.webp");
}
aside #ed_jsfiddle:hover, aside #ed_codepen:hover {
  opacity: 1;
}

/* Syntax highlight */
pre code { color: #959dcb; }
pre code ::selection, pre code::selection { background-color:#32374d;color:#959dcb}
.token.script.language-javascript { color: #a6accd; }
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #676e95; }
.token.attr-name, .token.namespace, .token.deleted { color: #bb80b3; }
.token.function, .token.function-name { color: #82aaff; }
.token.unit, .token.url, .token.parameter, .token.boolean, .token.number { color: #f78c6c; }
.token.color, .token.hexcode, .token.builtin, .token.property, .token.class, .token.class-name, .token.constant, .token.symbol { color: #ffcb6b; }
.token.id, .token.selector, .token.important, .token.atrule, .token.keyword { color: #c792ea; }
.token.pseudo-class, .token.pseudo-element, .token.inserted, .token.attribute, .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #c3e88d; }
.token.punctuation, .token.operator, .token.entity, .token.url { color: #89ddff; }
.token.tag { color: #f07178; }
.token.deleted { color: #ff5370; }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }