natalie-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: #0f62fe;
  --visited-link: #673ab7; 
  --highlight: #0f62fe;
  --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;
}

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

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;
  padding-bottom: 10px;
}

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 {
  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
        }
      }
    }
  }
}

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

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

  > 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;

  > img {
    height: auto;
    padding: 10px;
    padding-bottom: 0;
  }

  > 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;
}

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);
}

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

.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};
}