innhold/custom/styles/base.css

/* MINIMAL CSS RESET */
* { margin-bottom: 0 }

/* VARIABLES */
:root {
  --font-body: Roboto, sans-serif;
  --font-heading: "PT serif", Georgia, "Nimbus Roman", serif;
  --color-blue: #6391b5;
  --color-blue: oklch(0.6376 0.0739 242.84);
  --color-green: #009c80;
  --color-green: oklch(0.618 0.1176 173.93);
  --color-green-light: #f2fbf8;
  --color-green-light: oklch(0.9811 0.01 173.93);
  --color-grey: #404040;
  --color-grey: oklch(0.3715 0 0)
}

/* GLOBAL */
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth }
body { margin: 0; color: var(--color-grey) }
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
img { width: 100%; height: auto }
h1 { color: var(--color-green); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 1.3em;
  text-wrap: pretty
}
h4 { font-weight: 700 }
a {
  color: var(--color-green);
  text-decoration: none;
  &:hover { color: var(--color-blue) }
}

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
  height: 100%;
  width: 100%;
  justify-content: center;
  min-height: 100vh;
  align-items: stretch
}

.contain, :where(main>article, main>aside, main>section) {
  display: grid;
  grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.8rem, 1fr);
  > * { grid-column: 2 }
}

.escape { grid-column: 1 / -1 !important }

.unescape {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    & * {
        max-width: inherit;
        margin-left: inherit;
        margin-right: inherit;
    }
}

/* HEADER */
header {
  border-bottom: 3px #00000022 solid;
  grid-area: header;
  > div {
    padding-bottom: .2rem;
    display: flex;
    .logo {
      margin-right: .3rem;
      svg {
        width: 7rem;
        height: 100%;
        #symbol { fill: var(--color-blue) }
        #tekst { fill: var(--color-green) }
      }
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      ul {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        margin-top: .4rem;
        padding: 0;
        justify-content: flex-end;
        a { margin-left: .4rem; margin-top: .4rem }
      }
    }
  }
}

/* MAIN */
main {
  grid-area: main;
  background-color: var(--color-green-light);
  padding-bottom: 2rem;
  aside, form { margin-top: 1.3em }
  article {
    .cover img {
        width: 100%;
        max-height: clamp(250px, 50vh, 550px);
        object-fit: cover;
    }
    .intro { font-size: 1.2rem; line-height: 1.35em }
    .footnotes {
      margin-top: 1rem;
      hr { border: 1px var(--color-grey) dashed }
    }
  }
  .button { margin-top: 1.3rem; justify-self: start }
  
  /* BREADCRUMB */
  .breadcrumb {
    display: grid;
    grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.8rem, 1fr);
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85em;
    ol {
      grid-column: 2;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        display: inline-flex;
        align-items: center;
        &:not(:last-child)::after {
          content: '›';
          margin: 0 0.6rem;
          color: var(--color-grey);
          font-size: 1.2em;
        }
        a {
          color: var(--color-green);
          text-decoration: none;
          &:hover { color: var(--color-blue) }
        }
      }
    }
  }
}

table {
  margin-top: 1.3em;
  border-collapse: collapse;
  width: 100%;
  thead {
    tr {
      background-color: var(--color-green);
      color: white;
      th { padding: .6rem; text-align: left; font-weight: 600 }
    }
  }
  tbody {
    tr {
      &:nth-child(odd) { background-color: white }
      &:nth-child(even) { background-color: oklch(0.96 0.005 173.93) }
      td { padding: .5rem .6rem; border-bottom: 1px solid oklch(0.9 0.01 173.93) }
    }
  }
}

/* BUTTONS */
.button {
  display: inline-block;
  text-decoration: none;
  border-radius: 2rem;
  padding: .55rem 1rem;
  background-color: transparent;
  color: var(--color-grey);
  outline: .08rem var(--color-grey) solid;
  border: none;
  cursor: pointer;
  font: inherit;
  &:hover { background-color: var(--color-grey); color: white; outline: none }
  &:active, &.active { background-color: var(--color-green); color: white; outline: none }
  &:focus { background-color: var(--color-green); color: white; outline: none }
  &.inverted {
    background-color: transparent;
    color: white;
    outline: .08rem white solid;
    &:hover { background-color: white; color: var(--color-green); outline: none }
    &:active, &.active { background-color: var(--color-green-light); color: var(--color-green); outline: none }
    &:focus { color: white; background-color: var(--color-grey); outline: none }
  }
  &.bigger { font-size: 1.2em; border-radius: calc(1rem * 1.2) }
  &.huge { font-size: 1.7em; border-radius: calc(2rem * 1.2) }
  &.centered { justify-self: center }
}

/* FOOTER */
footer {
  color: var(--color-green-light);
  a {
    color: var(--color-green-light);
    &:hover { color: white; text-decoration: underline }
  }
  background-color: var(--color-green);
  grid-area: footer;
  > div {
    margin: 1rem 0;
    text-align: center;
    .generated { font-size: .6rem }
  }
}