folderweb/app/default/styles/base.css

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

/* VARIABLES */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --color-primary: #4a90e2;
  --color-primary: oklch(0.65 0.15 250);
  --color-secondary: #2c5aa0;
  --color-secondary: oklch(0.50 0.12 250);
  --color-light: #f0f4f8;
  --color-light: oklch(0.97 0.01 250);
  --color-grey: #404040;
  --color-grey: oklch(0.37 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 { max-width: 100%; height: auto; }
h1 { color: var(--color-primary); 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;
}
a {
    color: var(--color-primary);
    text-decoration: none;
    &:hover { color: var(--color-secondary) }
}

.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(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
  > * {
    grid-column: 2;
  }
}

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

/* 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%;
        color: var(--color-primary);
      }
    }

    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;
        li {
          margin-left:0.4rem;
          margin-top:0.4rem;
        }
      }
    }
  }
}

/* MAIN */
main {
  grid-area: main;
  background-color: var(--color-light);
  padding-bottom: 2rem;

  aside { margin-top: 1.3em }
  article {
    .intro {
      font-size: 1.2rem;
      line-height: 1.35em;
    }
  }
  .button {
    margin-top: 1.3rem;
    justify-self: start;
  }
}

/* BUTTONS */
.button {
  display: inline-block;
  text-decoration: none;
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  background-color: transparent;
  color: var(--color-grey);
  outline: 0.08rem var(--color-grey) solid;

  &:hover {
    background-color: var(--color-grey);
    color: white;
    outline: none;
  }

  &:active, &.active {
    background-color: var(--color-primary);
    color: white;
    outline: none;
  }

  &:focus {
    background-color: var(--color-primary);
    color: white;
    outline: none;
  }

  &.inverted {
    background-color: transparent;
    color: white;
    outline: 0.08rem white solid;

    &:hover {
      background-color: white;
      color: var(--color-primary);
      outline: none;
    }

    &:active, &.active {
      background-color: var(--color-light);
      color: var(--color-primary);
      outline: none;
    }

    &:focus {
      color: white;
      background-color: var(--color-grey);
      outline: none;
    }
}

  &.bigger {
    font-size: 1.2em;
    padding: calc(0.35rem * 1.2) calc(1rem * 1.2);
    border-radius: calc(1rem * 1.2);
  }
}

/* FOOTER  */

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