doc.scss

// file: doc.scss
// document layout rules
// This is part of the micro css implementation.

@use "base";
@use "card";

body.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;
    container-name: main;
    container-type: inline-size;
    background-color: var(--content-back);
    padding: var(--layout-gap);
  }

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

}


h2 {
  clear: both;
}

// Tables

table {
  empty-cells: show;
  border-collapse: collapse;
  border-left: solid 1px #203050;
  border-right: solid 1px #203050;
  margin-top: 0.4em;
  margin-bottom: 0.4em;

  thead tr {
    background-color: #203050;

    th {
      vertical-align: top;
      padding: 0.2em 0.6em;
      color: white;
      font-weight: bold;
    }
  }

  td {
    vertical-align: top;
    padding: 0.2em 0.6em;
    border-bottom: 1px solid #203050;
  }
}


img[title='w200'] {
  width: 200px;
}

img[title='w400'] {
  width: 400px;
}

img[title='w600'] {
  width: 600px;
}

.warning {
  margin: 0.2rem;
  padding: 0.4rem;
  border-radius: 0.4rem;
}


// mark links to external sites

a[href^='http']::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  margin-left: 0.25em;
  background-size: 1em;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.689 4v4.918h13.114l-17.049 17.05 3.279 3.606 17.377-17.05v12.787H44V4z' /%3E%3Cpath d='M33 22.99V40H8V15h17v-4l-21 .001V44h33V22.952z' /%3E%3C/svg%3E");
}


// formatted code blocks

@media print {
  html,
  body {
    font-size: 0.66em;
    background-color: white;
  }

  .short {
    border: 1px solid silver;
  }
}