/* This file follows the rest of the website as far as possible in being licensed under the Unlicense,
 * but as some styling was adapted from MIT-licensed code the buzzword styling may not be copyright-free.
 */

/* effectively unitless screen width, really in pixels but CSS doesn't know that */
@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}
:root {
  --w: tan(atan2(var(--_w),1px));
}

body {
  margin: 5% auto;
  background: #EEE;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 75%;
  text-wrap: balance; /* not too widely supported, but not critical either */
}

a:hover {
  color: #55DCFC;
}

.indent {
  margin-left: 20px;
}

.badge-collection {
  margin-top: 7px;
  margin-bottom: 3px;
}

hr {
  margin: 0px 10.5% 5px 10.5%;
}

.counterStream {
  display: inline;
  width: 100%;
  height: auto;
  vertical-align: baseline;
  border: none;
  /* keep out of viewport for a bit
   * it would work without it, but the whole trick is that the lazyloaded iframe (which won't ever finish loading)
   * only gets loaded once the browser is done with the rest.
   * the favicon won't change *back* into a spinner, so we trick the browser into thinking our page loaded
   */
  position: absolute;
  left: -9999px;
  animation: slide-in 0s forwards;
  animation-delay: 1.2s;
}

@keyframes slide-in {
  to {
    position: static;
    left: 0;
  }
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  text-wrap: balance;
  background: #EEE;
}

@property --_rnd_lines {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
@property --_rnd_badges {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

/* calculate dynamic spacing, take text wrap into account */
/* assumes average character width of 8px */
.footer-spacer {
  /* force rounding using integer property with unitless data
   * technically _rnd_lines should round down (-0.5), but this was adjusted to account for imperfect line wrapping
   */
  --_rnd_lines: calc(164 * 8 / var(--w) + 0.2);
  /* (badge_count * badge_width) + (badge_count-1 * whitespace_width) */
  --_rnd_badges: calc((7 * 88 + 6 * 4) / var(--w) - 0.5);
  margin-bottom: calc(
    /* 79.4px size with only one line text/badges
     * 25px added for each wrapped line
     * 31px added for each extra row of badges
     */
    79.4px + (var(--_rnd_lines) * 25px) + (var(--_rnd_badges) * 31px)
  );
}

.badge {
  transition: .2s;
}
.badge:hover{
  transform: scale(1.4);
}

/* Buzzword styling adapted from 11ty.dev, where it is MIT-licensed
 * Usage: <span class="buzzword">Software-as-a-Service</span>
 */
.buzzword:focus,
.buzzword:hover {
  position: relative;
}
.buzzword:focus:after,
.buzzword:hover:after {
  content: "Buzzword alert!!!";
  position: absolute;
  left: calc(40% - 6px);
  top: 33%;
  max-width: 8em;
  color: red;
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(-10deg) translate(-25%,-125%);
  text-shadow: 1px 1px 5px rgba(0,0,0,.6);
  line-height: 1.2;
}
/* This comment marks the end of the possibly (depends on definition of "substantial portion") MIT-licensed code, these parts are under the Unlicense again */
.buzzword {
  cursor: pointer;
  text-decoration: underline;
  color: LinkText;
}
.buzzword:hover:after {
  animation: color_change 0.45s infinite alternate;
}
@keyframes color_change {
  from { font-size: 100%; }
  to { font-size: 120%; }
}

/* Code Block with line numbers in plain CSS.
 * Wraps lines longer than 80 characters.
 * Usage: <div class="codeblock">
 *          <span></span>Line 1
 *          <span></span>Another Line
 *        </div>
 * You can also use <div class="codeblock" style='--lang: "LanguageName"'>
 * to specify the language. Syntax highlighting is not provided.
 */

@counter-style lineno-padded {
  system: numeric;
  symbols: "00" "01" "02" "03" "04" "05" "06" "07" "08" "09";
  range: 0 9;
}
.codeblock::before {
  content: var(--lang);
  float: right;
  background: #989898;
  margin-top: -7px;
  padding: 2px 6px;
  border-radius: 0 4px 0 8px;
}

.codeblock {
  background-color: #BBB;
  border-left: calc(2ch + 7px) solid #989898;
  border-radius: 6px;
  font-family: monospace;
  padding: 7px 0 7px 7px;
  margin: 10px;
  max-width: 81ch;
  text-wrap: break;
  counter-reset: lineno;
  span {
    white-space: pre-wrap;
    counter-increment: lineno;
  }
  span::before {
    content: counter(lineno, lineno-padded);
    padding-right: 10px;
    text-align: left;
    margin-left: calc((2ch + 10px) * -1);
  }
}

/* Style the <code> tag to look like the code block above
 */
code {
  background-color: #BBB;
  border-radius: 4px;
  font-family: monospace;
  padding: 1px 5px;
}