silicate-guide/assets/css/main.scss

:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

html {
  background-blend-mode: hard-light;
  background:
    fixed linear-gradient(
      135deg,
      rgba(255, 198, 99, .1) 0%,
      rgba(130, 130, 130, 0) 25%,
      rgba(130, 130, 130, 0) 75%,
      rgba(77, 67, 102, .05) 100%
    ),
    center top fixed url('/silicate_bg.png');
}

body {
  color: black;
  border: 2px solid grey;
  font-family: sans-serif;
  line-height: 1.5;
  margin: 1rem auto;
  max-width: 900px;
  padding: 1rem 3rem;
  border-radius: 5px;

  backdrop-filter: blur(6px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
}

header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem;
  text-align: center;

  #banner {
    display: block;
    background-blend-mode: hard-light;
    margin: 0.5rem;
    padding: .5rem;
    color: white;
    font-family: sans-serif;
    clip-path: polygon(
      1rem 0,
      calc(100% - 1rem) 0,
      100% calc(100% - 1rem),
      calc(100% - 1rem) 100%,
      1rem 100%,
      0 1rem
    );

    background:
      conic-gradient(from -85deg at 100% 20%, #c6f3f420 90deg, #f9eadb00 90deg),
      conic-gradient(from 0deg at 0% 40%, #c6f3f420 70deg, #f9eadb00 70deg),
      conic-gradient(from 0deg at 0% 100%, #c6f3f408 40deg, #f9eadb00 40deg),
      conic-gradient(from -90deg at 10% 100%, #dbe5f908 70deg, #f9eadb00 70deg),
      conic-gradient(from -90deg at 30% 100%, #f9eadb08 15deg, #f9eadb00 15deg),
      conic-gradient(from -90deg at 25% 100%, #f9eadb08 10deg, #f9eadb00 10deg),
      radial-gradient(circle at 40% 40%, #a9fcfc3b, #FFFFFF00),
      #2a2a48;
  }

  p {
    margin: 0;
  }

  h1 {
    margin: 0rem 1rem;
    margin-bottom: .5rem;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.8rem;
    border-image: linear-gradient(to left,rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 20%, rgba(75, 227, 206, 1) 35%, rgba(248, 235, 63, 1) 40%, rgba(242, 152, 69, 1) 45%, rgba(165, 92, 212, 1) 50%, rgba(242, 152, 69, 1) 55%, rgba(248, 235, 63, 1) 60%, rgba(75, 227, 206, 1) 65%, rgba(212, 212, 212, 0) 80%, rgba(212, 212, 212, 0) 100%) 1 / 0 0 3px;
  }

  nav ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin: 0 1rem;
    }
  }
}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

a {
  color: #00e;
  text-decoration: none;
}

ol {
  list-style: none;

  ol {
    border-left: #00000033 solid 2px;
    margin-left: 1rem;
  }
}

.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;

  * {
    border: solid .2rem;
    border-radius: 5px;
    margin: .5rem;
    padding: .5rem 0;
    font-weight: bold;
    background-color: #00000060;
    backdrop-filter: blur(30px) saturate(250%);
    color: white;
  }

  .next {
    grid-column-start: 2;
  }

  a:hover {
    color: white;
  }
}

blockquote {
  margin: 2rem 1rem;
  padding: .1rem 0 .1rem 2rem;
  border-left: #AAA  3px solid;
  position: relative;
  font-style: italic;
  font-size: 110%;

  &::before {
    content: '”';
    position: absolute;
    font-size: 60px;
    top: -25px;
    left: 0.8rem;
    color: #AAA
  }
}

hr {
  color: white;
}

h1 {
  text-align: center;
}

pre {
  overflow-x: scroll;

  code {
    box-shadow: unset;
    border: unset;
    background-color: unset;
    font-size: 100%;
  }
}

code, pre {
  background-color: #FFFFFF55;
  box-shadow: 0 0 3px -2px black;
  border: 1px grey solid;
  padding: 0 .1rem;
  font-size: 110%;
  backdrop-filter: blur(12px) saturate(180%);
}

.subtitle {
  text-align: center;
  margin-top: -1rem;
  font-size: 75%;
}

a {
  color: #4928e6;
  transition: color .7s ease-out;

  &:hover{
    color: #c238ca;
    transition: color .5s cubic-bezier(.19,1,.22,1);
  }

  &:not([href]), &[href=""]{
    color: grey;
    text-decoration: line-through;
  }
}

main img {
    max-width: 100%;
    border: solid black 1px;
}

.warning {
    color: orangered;
    border: solid 2px orangered;
    background-color: lightyellow;

    padding: 0.5rem;

    text-align: center;

    p {
        margin: 0.5rem 0;
    }
}