webbed-site/style.css

@font-face {
  font-family: 'MapleMono';
  src: url('/font/MapleMono.ttf') format('truetype');
}

@font-face {
  font-family: 'MapleMonoItalic';
  src: url('/font/MapleMonoItalic.ttf') format('truetype');
}

@media (max-width: 1400px) {
  body {
    margin: 0%;
    width: 100%
  }
}

@media (min-width: 1400px) {
  body { 
    margin: 0 20%;
    width: 60%;
  }
}

* {
  font-family: 'MapleMono';
  font-size: 16.5px;
  text-wrap: wrap;
}

:root {
  --bg: #F2F4F8;
  --alt-bg: #dde1e6;
  --fg: #161616;
  --hl: #33b1ff; 
  --link: #0154EF;
  --visited-link: #673ab7; 
  --highlight: #0154EF;
  --gray: #525252;
  background: var(--bg);
  background-image: radial-gradient(var(--gray) 2px, var(--alt-bg) 2px);
  background-size: 1vw 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.-punctuation-bracket {color: #ff7eb6}
.-function-macro {color: #08bdba}
.SpecialChar {color: #37474f}
.-punctuation-special {color: #ff7eb6}
.-variable {color: #37474f}
.-string-escape {color: #ffab91}
.-function {font-weight: bold; color: #673ab7}
.-punctuation-bracket {color: #ff7eb6}
.-keyword-function {color: #ff7eb6}
.Number {color: #ffab91}
.-variable {color: #37474f}
.-variable-builtin {color: #37474f}
.-keyword {color: #ee5396}
.Operator {color: #ee5396}
.-constant-builtin {color: #08bdba}
.-function-builtin {color: #673ab7}
.Type {color: #ee5396}
.-function {font-weight: bold; color: #673ab7}
.String {color: #be95ff}
.Comment {font-style: italic; color: #161616}
.Boolean {color: #ee5396}
.-keyword-operator {color: #ff7eb6}
.-punctuation-delimiter {color: #ff7eb6}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --alt-bg: #262626;
    --fg: #f2f4f8;
    --hl: #0f62fe;
    --link: #33b1ff;
    --visited-link: #be95ff; 
    --highlight: #33b1ff;
    --gray: #202020;
  }

  .-punctuation-bracket {color: #3ddbd9}
  .-function-macro {color: #08bdba}
  .SpecialChar {color: #d0d0d0}
  .-punctuation-special {color: #3ddbd9}
  .-variable {color: #d0d0d0}
  .-string-escape {color: #82cfff}
  .-function {font-weight: bold; color: #ff7eb6}
  .-punctuation-bracket {color: #3ddbd9}
  .-keyword-function {color: #3ddbd9}
  .Number {color: #82cfff}
  .-variable {color: #d0d0d0}
  .-variable-builtin {color: #d0d0d0}
  .-keyword {color: #78a9ff}
  .Operator {color: #78a9ff}
  .-constant-builtin {color: #08bdba}
  .-function-builtin {color: #ff7eb6}
  .Type {color: #78a9ff}
  .-function {font-weight: bold; color: #ff7eb6}
  .String {color: #be95ff}
  .Comment {font-style: italic; color: #525252}
  .Boolean {color: #78a9ff}
  .-keyword-operator {color: #3ddbd9}
  .-punctuation-delimiter {color: #3ddbd9}
}

.rainbow-text {
  animation:rainbow-text 5s ease-in-out infinite
}
@keyframes rainbow-text {
 0% {
  color:red
 }
 20% {
  color:orange
 }
 40% {
  color:green
 }
 60% {
  color:blue
 }
 80% {
  color:purple
 }
 to {
  color:red
 }
}

body {
  text-wrap: wrap;
  max-width: 100%;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  overflow: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 33px;
  font-weight: normal;
}

h2 {
  font-size: 22px;
  font-family: 'MapleMonoItalic';
  font-weight: normal;
}

h3 {
  font-size: 18px;
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

header {
  padding-top: 10px;
  position: -webkit-sticky;
  position: sticky;
  background-color: var(--bg);
  top: 0;
  width: 100%;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  overflow: clip;

  > nav {
    border-bottom: 1px solid var(--fg);
    width: 100%;

    > ul {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      list-style-type: none;

      > li {
        padding: 10px;

        > h1 {
          display: inline
        }
      }
    }
  }
}

footer {
  background-color: var(--alt-bg);
  border-bottom: none;
  margin: 15px;
  padding: 5px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 20fr 1fr; /* icky hack */
  grid-template-rows: min-content min-content;

  div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  a {
    margin: 0 !important;
    display: flex;
    float: right;
    width: 88px;
    height: 31px;
  }
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--alt-bg);
  box-shadow: 10px 10px var(--gray);
  margin: 15px 30px;
  padding: 20px;

  > details[open] {
    summary {
      padding-bottom: 5px;
    }
  }

  > p {
    margin: 5px 0;
  }

  > h1, h2, h3 {
    margin: 10px 0;
  }

  &.ignore-section {
    background: var(--bg);
    box-shadow: none;
    margin: 0;
    padding: 5px 10px;
  }
}

form {
  background: var(--alt-bg);
  display: flex;
  flex-direction: column;
  width: 50%; 
  padding: 20px;
  margin: 15px 0;
  box-shadow: 10px 10px var(--gray);

  > button {
    margin: 10px;
    padding: 10px;
    border: none;
    color: var(--fg);
    background: var(--bg);
    
    &:hover {
      background: var(--hl);
    }
  }

  > input {
    color: var(--fg);
    margin: 10px;
    border: none;
    background: var(--bg);
  
    &:focus {
      outline: none;
    }
  }
}

figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 125%;
  background: var(--bg);
  margin: 0;
  margin-bottom: 15px;

  > a {
    padding: 10px;
    padding-bottom: 0;

    > img {
      height: auto;
      width: 100%;
    }
  }

  > figcaption {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 5px;
    margin: 0;
  }
}

table {
  width: auto;
  border-collapse: collapse;
}

th, td {
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
}

th:first-child, td:first-child {
  width: 20%;
}

th:last-child, td:last-child {
  width: 20%;
}

iframe {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

blockquote {
  border-left: 10px solid var(--gray);
  margin: 4px 16px;
  padding-left: 10px;
}

summary {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

code, pre {
  background: var(--bg);
  margin: 10px;
  padding: 5px;
  overflow: clip;
}

xmp {
  margin: 20px;
}

a {
  color: var(--link);
  width: fit-content
}

a ~ a, li:has(a), a ~ span > a {
  margin: 4px 0;
}

a:visited {
  color: var(--visited-link);
}

video {
  width: 95%;
  border: 10px solid var(--bg);
  margin: 10px auto;
  display: block
}

sup {
  font-size: smaller;
  line-height: 0;
}

footnote {
  font-size: 13px;
  margin-top: 20px;
  display: flex;
}

.post {
  background: var(--alt-bg);
  box-shadow: 10px 10px var(--gray);
  margin: 30px;
  padding: 20px;
}

.italic {
  font-family: 'MapleMonoItalic' !important; 
}

.captioned-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
  background: var(--bg);
  margin-bottom: 15px;
  margin-right: 10px;

  > img {
    height: auto;
    padding: 10px;
  }

  > p {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 5px;
    margin: 0;
  }
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

::selection {
  background: var(--highlight)
}

image-column-container {
  min-width: 100%;
  display: flex;
  flex-direction: row;
}

image-container {
  display: flex;
  margin-right: 5px;
  flex: 1;
  width: 33%;
  height: auto;
}

flex-column {
  width: 100%;
  display: flex;
  flex-direction: column;

  > captioned-image {
    max-width: 100%;
  }
}

image-column img {
  width: 100%;
  height: auto;
}

text-column {
  max-width: 66%
}

flex-grid {
    display: flex;
    flex-wrap: wrap;
}

flex-grid-item {
    flex: 1 0 200px;
    margin: 5px;
    overflow: hidden;
    position: relative;
}

flex-grid-item > img {
    max-width: 110%;
    height: auto;
    display: block;
}

@media (max-width: 700px) {
  image-container {display: inline-block; min-width: 100% !important}
  div.captioned-image {min-width: 100%; margin-right: 0;}
  text-column {display: inline-block; max-width: 100%;}
  image-column-container {flex-direction: column;}
  header > nav > ul > li > h1 { display: none};
}