base.scss

// file: base.scss
// colors, dark mode, sizes, page level layout
// This is part of the micro css implementation.

@use "sass:color";

// ===== Colors =====
// hue of 220 is signature of this style

$u-hue: 220;
$u-background: #c2c3c5;
$u-background-darkmode: #111111;
$u-text: #111111; // any text
$u-text-darkmode: #eeeeee; // any text

$u-primary: hsl(220deg 80% 30%); // active objects
$u-primary-text: white;

$u-border-color: #555555;
$u-border-color-active: hsl(220deg 100% 30%);

$u-disabled: gray; // disabled objects
$u-heading: $u-primary; // any headlines
$u-connect: #00cc00; // connectivity / net

// $u-on: lighten(green, 10%);
$u-on: color.adjust(green, $lightness: 10%);
$u-off: red;


$u-padding-text: 4px;
$u-padding-block: calc(2 * $u-padding-text);

$u-border-size: 1px;
$u-border: $u-border-size solid $u-border-color;
$u-border-none: $u-border-size solid transparent;
$u-border-active: $u-border-size solid $u-border-color-active;

$u-navbar: $u-primary;
$u-navbar-text: white;


// ===== Content Box Sizes =====

$u-white-space: 1rem;
$u-gutter: calc($u-white-space / 2);
$u-gutter2: calc($u-white-space / 4);

$u-btn-radius: calc($u-padding-block / 2);
$u-output-border: $u-border-none;


// ===== global Layout =====

$u-card-border: none;
$u-card-radius: $u-padding-block;


// ===== font =====

$u-font-sans-serif: arial, ui-sans-serif, sans-serif;

// ===== main =====

:root {
  --color: #{$u-text};
  --back: #{$u-background};

  --card-back: white;
  --card-head: #{hsl($u-hue, 20%, 85%)};
  --card-head-active: #{hsl($u-hue, 80%, 70%)};
  --focus: #{hsl($u-hue, 50%, 50%)};
  --code: rgb(255 255 185);

  --sidebar-width: 200px;
  --content-width: 800px;
  --layout-gap: 0.5em;
  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
  --content-back: #f8f8f8;


  color-scheme: dark light;

  @media (prefers-color-scheme: dark) {
    --color: #{$u-text-darkmode};
    --back: #{$u-background-darkmode};
    --card-back: #{color.adjust($u-background-darkmode, $lightness: 15%)};
    --card-head: #{hsl($u-hue, 20%, 30%)};
    --card-head-active: #{hsl($u-hue, 80%, 30%)};
  }
}

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: $u-font-sans-serif;
  font-size: 1em;
  color: var(--color);
  background-color: var(--back);

  &.sitelayout {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "header" "main" "sidebar" "footer";
    gap: var(--layout-gap);
    max-width: var(--doc-body-width);
    margin: 0 auto;

    &:has(aside) {
      grid-template-columns: auto var(--sidebar-width);
      grid-template-areas: "header header" "main sidebar" "footer footer";

      @media (width <= 1000px) {
        grid-template-areas: "header" "main" "sidebar" "footer";
      }
    }
  }

  header {
    grid-area: header;

    /* background-color: #f0f0f0; */
    display: flex;

    @media print {
      display: none !important;
    }

    >* {
      align-self: flex-end;
      display: inline-block;
    }

    >*:not(:first-child) {
      margin-left: var(--layout-gap);
    }

    >.logo {
      font-size: 160%;
      font-weight: bold;
    }

    a {
      text-decoration: none;
      width: 12ch;
      text-align: center;
      padding: 0.2ch 1ch;
      transition: box-shadow 0.3s ease-in-out;

      &:hover {
        box-shadow: 0 5px 12px rgb(0 0 0 / 30%);
      }
    }
  }

  aside  {
    grid-area: sidebar;
    background-color: lime;
    padding: var(--layout-gap);

    @media print {
      display: none !important;
    }
  }

  main {
    grid-area: main;
    background-color: var(--content-back);
    padding: var(--layout-gap);
  }

  footer {
    grid-area: footer;
    background-color: lightblue;
    padding: var(--layout-gap);
  }

}

@media (width > 800px) {
  body {
    padding: 2 * $u-padding-text;
  }
}

/* apply a natural box layout model to all elements, but allowing components to change */
*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  max-width: 600px;
  height: auto;
}

// use-cases of svg icons

svg {
  color: currentcolor;

  &.button {
    width: 2em;
    height: 2em;

    .object {
      fill: $u-primary;
      fill-opacity: 1;
    }

    .connect {
      fill: $u-connect;
      fill-opacity: 1;
    }
  }

  &.icon {
    user-select: none;
  }
}


// ===== Text containers =====
p,
pre,
code,
h2,
h3,
h4 {
  margin: 0;
  min-height: 1rem;

  >img,
  >svg {
    // assume image in text containers to be inline icons
    height: 1em;
    height: auto;

    &:first-child {
      margin-right: 0.2em;
    }
  }

  +p,
  +pre,
  +code,
  +h2,
  +h3,
  +h4 {
    margin-top: $u-gutter;
  }

}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

// h1 Page title is always inside u-header
h2,
h3,
h4 {
  text-wrap: balance;
  font-family: $u-font-sans-serif;
  font-weight: bold;
}

// Chapter
h2 {
  font-size: 1.6em;
  min-height: 1.6em;
}

// Topic
h3 {
  font-size: 1.25em;
  min-height: 1.25em;
}

// Subtitle
h4 {
  font-size: 1em;
  min-height: 1em;
}

code,
.code,
code.hljs,
pre>code {
  background-color: var(--code);
  color: $u-text;
  font-size: 1rem;
  font-family: 'Courier New', Courier, monospace;

  @media print {
    border: 1px solid $u-text;
  }
}

p>code {
  padding-left: 2 * $u-padding-text;
  padding-right: $u-padding-text;
}

pre>code {
  display: block;
  border-radius: $u-card-radius;
  padding: $u-padding-text;
}

// form elements

label,
input,
input+span,
input::placeholder,
select,
output,
button {
  display: inline-block;
  font-size: inherit;
  margin: 0;
  border: $u-border-none;
  padding: 0.1em 0.2em;
  color: currentcolor;
}

input[type='color'] {
  padding: 0;
  border: 0;
}

input::placeholder {
  padding-top: 0.4em;
  font-size: 0.8em;
}

label {
  cursor: pointer;
  height: 1.6em;

  >img,
  >.icon {
    // vertical-align: middle;
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
  }
}

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

input,
select {
  width: 22ch;
  border-radius: 0.2em;
}

select {
  padding-left: 0;
}

select:invalid,
input:invalid {
  border-color: #ff5555;
}

input[type='checkbox'],
input[type='radio'] {
  width: 2ch;
  vertical-align: baseline;
}

// ===== Native dialogs and focus Object

dialog::backdrop {
  background-color: rgb(200 200 200 / 70%);
}

dialog {
  position: relative;
  padding: 1rem;
  background-color: canvas;
  border: 0;

  .u-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 1.6rem;
    width: 1.6rem;
    background-color: red;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 12L36 36M36 12L12 36' stroke='white' stroke-width='8' stroke-linecap='round' /></svg>");
    z-index: 1 !important;
    user-select: none;
    cursor: pointer;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>");
  }
}

// ===== Page Layout =====

nav {
  position: fixed;
  min-height: 100%;
  width: 24ch;
  z-index: 1;
  left: -24ch;
  transition: all 0.2s;
  padding: 1rem 0.2rem 0.2rem;
  background-color: var(--card-back);

  &.inpage {
    position: absolute;
  }

  &.open {
    left: 0;
  }

  &.inpage.open+main {
    margin-left: 24ch;

    @media print {
      margin-left: 0;
    }
  }

  a,
  a:hover {
    text-decoration: none;
  }

  @media print {
    display: none;
  }
}

main {
  transition: margin-left 0.2s;
}

// The header in the micro css is used to display the primary icon of the device and title.

.u-header {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: $u-gutter;

  .icon {
    margin-right: $u-gutter;
    width: 2.6rem;
    height: 2.6rem;
    vertical-align: top;
  }

  h1 {
    margin: 0;
    font-size: 2.4rem;
    font-family: $u-font-sans-serif;
    font-weight: bold;
  }
}

// u-navbar is a horizontal always visible menu just below the header.

.u-navbar {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: $u-gutter;
  padding: 2 * $u-padding-text 4 * $u-padding-text;
  background-color: $u-navbar;
  color: $u-navbar-text;

  >.gap {
    flex-grow: 2;
  }

  >a {
    text-decoration: none;
    font-size: 1.25em;
    min-width: 2em;
    padding: 0 $u-gutter2;

    &:hover {
      border-color: var(--focus);
      background-color: var(--focus);
    }
  }

  >img,
  >svg {
    padding: 0;
    min-width: 1.4em !important;
    width: 1.4em !important;
    height: 1.4em !important;
  }

  >*:not(:first-child) {
    margin-left: $u-gutter2;
  }

  @media print {
    display: none;
  }
}

.error,
.warning,
.invalid {
  border: 2px solid #ff1111 !important;
  background-color: #ffcccc !important;
  color: $u-text;
}

.valid {
  border: 2px solid #00cc00 !important;
  background-color: #ccffcc !important;
  color: $u-text;
}

.noprint {
  @media print {
    display: none !important;
  }
}