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: 615px) {
  body {
    margin: 0;
  }

  header {
    display: block;
  }
}

@media (max-width: 615px) {
  body {
    margin: 0;
  }

  header {
    display: none;
  }
}

@media (min-width: 730px) and (max-width: 799px) {
  body {
    margin: 0 0;
    min-width: 100%
  }

  header {
    display: block;
  }
}

@media (min-width: 1000px) and (max-width: 1299px) {
  body {
    margin: 0 10%;
    min-width: 80%
  }

  li > p {
    width: 70%;
  }

  header {
    display: block;
  }
}

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

  li > p {
    width: 60%;
  }

  header {
    display: block;
  }
}

:root {
  --bg: #F2F4F8;
  --alt-bg: #dde1e6;
  --fg: #161616;
  --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;
    --link: #33b1ff;
    --visited-link: #be95ff; 
    --highlight: #33b1ff;
    --gray: #393939;
  }
}

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

header {
  padding-top: 10px;
  position: -webkit-sticky;
  position: sticky;
  background-color: var(--bg);
  top: 0;
  transform: translateX(-10px);
  display: absolute;
  width: calc(100% + 20px);
  z-index: 100000;

  h1 {
    background: var(--bg);
    padding-left: 10px;
    display: inline;
    font-size: 26px;
  }
}

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

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

tr.rowhighlight {
  background-color: var(--fg);
}

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

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

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

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

code, pre {
  background: var(--alt-bg)
}

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

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

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

captioned-image {
  max-width: 33%;
  display: flex;
  flex-direction: column;

  > img {
    height: auto;
  }

  > * {
    width: 100%;
    border: 5px solid var(--alt-bg);
    background: var(--alt-bg);
  }

  > p {
    text-align: center;
    position: relative;
    top: -20px;
  }

  margin-right: 15px;
}

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 {
  display: flex;
  flex-direction: column;

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

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

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

flex-grid-item {
    flex: 1 0 200px; /* Flex grow, flex shrink, flex basis */
    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}
  captioned-image {min-width: 100%; margin-right: 0;}
  text-column {display: inline-block}
  image-column-container {flex-direction: column;}
}