// VARIABLES AND IMPORTS
// ---------------------------------------------------------------------------

$clr-bg: #0d0f13;
$clr-fg: #fffdfb;

$clr-red: #f58c81;
$clr-blood-orange: #f48e74;
$clr-orange: #e09f47;
$clr-yellow: #a9b852;
$clr-green: #54c794;
$clr-cyan: #00c4d7;
$clr-blue: #6eb2fd;
$clr-purple: #b69cf6;
$clr-magenta: #e58cc5;
$clr-list:
  1 $clr-purple,
  2 $clr-blue,
  3 $clr-green,
  4 $clr-yellow,
  5 $clr-orange,
  6 $clr-red,
  7 $clr-magenta;

$clr-primary: $clr-purple;

$gradient-background:
  url("/assets/images/noise.png"),
  radial-gradient(circle at center, $clr-bg, transparent),
  radial-gradient(circle at bottom left, $clr-blue, transparent),
  radial-gradient(circle at top right, $clr-purple 0%, transparent),
  radial-gradient(circle at top center, $clr-magenta 0%, transparent),
  radial-gradient(circle at center, $clr-bg, $clr-bg);

$gap: 1rem;
$max-width: 50rem;
$mobile: 980px;

@import "syntax";

// MIXINS
// ---------------------------------------------------------------------------

@mixin phone-only {
  @media (max-width: $mobile) {
    @content;
  }
}

@mixin std-block {
  display: block;
  margin: 0;
}

// GLOBAL RESET & TYPOGRAPHY
// ---------------------------------------------------------------------------

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  transition: 0.1s ease-in-out;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-optical-sizing: auto;
  text-transform: lowercase;

  scrollbar-color: $clr-primary $clr-bg;
}

html {
  font-size: 16px;
}

// 1rem base

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $gap;
  padding: 5rem $gap $gap;
  overflow-x: hidden;
  color: $clr-fg;
  background: $gradient-background;
  background-attachment: fixed;
}

// LAYOUT WRAPPER
// ---------------------------------------------------------------------------

body > * {
  // every top-level section
  display: flex;
  flex-direction: column;
  gap: $gap;
  width: 100%;
  max-width: $max-width;
  padding: 1.5rem 2.5rem;
  background: $clr-bg;
  outline: 0.2rem solid $clr-bg;
  outline-offset: 0.2rem;
}

@include phone-only {
  body {
    padding: 0;
    gap: 0.2rem;
  }

  body > * {
    outline: 0;
  }
}

// NAVIGATION
// ---------------------------------------------------------------------------

nav {
  position: fixed;
  transform: translateX(28rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $gap;
  padding: 1rem 2rem;
  width: 0rem;

  svg {
    width: 2rem;
    height: 2rem;
    fill: $clr-fg;
  }

  a {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    text-decoration: none;
    color: $clr-fg;
  }

  hr {
    width: 100%;
  }
}

@include phone-only {
  nav {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    a {
      writing-mode: horizontal-tb;
    }

    hr {
      display: none;
    }
  }
}

// TYPOGRAPHIC ELEMENTS
// ---------------------------------------------------------------------------

p,
ul,
span {
  font-size: 1.2rem;
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include std-block;
  padding-top: 0.5rem;
  font-size: 1.75rem;
}

// auto-generate heading prefixes
@each $num, $color in $clr-list {
  h#{$num}::before {
    $hashes: "";

    @for $_ from 1 through $num {
      $hashes: $hashes + "#";
    }

    content: "#{$hashes} ";
    color: $color;
  }
}

// LISTS
// ---------------------------------------------------------------------------

ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;

  li::before {
    content: "~";
    padding: 0 0.25rem 0 0.5rem;
    color: $clr-primary;
  }
}

// rainbow list items
@each $num, $color in $clr-list {
  ul li:nth-child(n + #{$num})::before {
    color: $color;
  }
}

// LINKS & MISC
// ---------------------------------------------------------------------------

a {
  color: $clr-primary;

  &:hover {
    filter: brightness(0.75);
  }
}

hr {
  $c: oklch(from $clr-fg 0.45 c h);
  background: $c;
  border-color: $c;
}

img {
  user-select: none;
}

address {
  opacity: 0.5;
  text-align: right;
  margin-top: -2.1lh;
  margin-bottom: 0.5rem;
}

footer {
  gap: 0;

  > * {
    text-align: center;
    font-size: 1rem;
    opacity: 0.5;
  }
}

// CODE BLOCKS
// ---------------------------------------------------------------------------

div.sourceCode {
  padding: 0.2rem;
  overflow: hidden;
  font-family: "Atkinson Hyperlegible Mono", monospace;
  background-color: black;
  background: $gradient-background;
  background-attachment: scroll;

  outline: 0.2rem solid $clr-bg;
  outline-offset: 0.2rem;

  > * {
    background: $clr-bg;
    background-attachment: fixed;
    padding: 1.2rem;
    overflow: auto;
  }

  * {
    font-family: "Atkinson Hyperlegible Mono", monospace;
    text-transform: none;
    font-size: 1.05rem;
  }
}