1 files changed, 679 insertions, 0 deletions

diff --git a/site/assets/new.scss b/site/assets/new.scss
new file mode 100644
index 0000000..73c4ed8
--- /dev/null
+++ b/site/assets/new.scss
@@ -0,0 +1,679 @@
+---
+---
+
+:root {
+  --backgroundColor: #fdfdfd;
+  --textColor: #303030;
+  --secondaryTextColor: #404040;
+  --mutedTextColor: #707070;
+  --subtleBackgroundColor: #f5f5f5;
+  --heartedBackgroundColor: #ffe2e2;
+  --selectionBackgroundColor: #ffc;
+  --linkColor: #2357cd;
+  --borderColor: #ccc;
+  --hrColor: #888;
+  --activeColor: #74d274;
+  --langBackgroundColor: #eeeeee;
+  --langShadowColor: transparent;
+  --logoColor: #cccccc;
+  --photoBackground: #f4f4f4;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --backgroundColor: #151615;
+    --textColor: #dbdfdf;
+    --secondaryTextColor: #cfd5d5;
+    --mutedTextColor: #b4b6b8;
+    --subtleBackgroundColor: #3a3b3b;
+    --heartedBackgroundColor: #652222;
+    --selectionBackgroundColor: #19446b;
+    --linkColor: #6eb8ff;
+    --borderColor: #414141;
+    --hrColor: #888;
+    --activeColor: #74d274;
+    --langBackgroundColor: #2c2c2c;
+    --langShadowColor: #0b0c0b33;
+    --logoColor: #555555;
+    --photoBackground: #1a1a1a;
+  }
+}
+
+body {
+  background: var(--backgroundColor);
+  color: var(--textColor);
+  line-height: 1.7em;
+  padding: 0 2.5em;
+  margin: 0;
+  font-size: 18px;
+  word-wrap: break-word;
+}
+
+body, kbd {
+  font-family: system-ui, sans-serif;
+}
+
+a {
+  color: var(--linkColor);
+}
+
+::selection {
+  background: var(--selectionBackgroundColor);
+}
+
+header {
+  padding-top: 2.5em;
+}
+
+footer {
+  padding-bottom: 2.5em;
+}
+
+main {
+  padding-top: 1em;
+  padding-bottom: 3em;
+}
+
+header,
+main,
+footer {
+  max-width: 36em;
+  margin: auto;
+}
+
+h1, h2, h3, h4, h5, h6, .font {
+  font-family: 'Readex Pro', sans-serif;
+}
+
+.plain {
+  font-family: system-ui, sans-serif
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 1.4em 0 1em 0;
+  font-weight: normal;
+}
+
+.logo {
+  width: 2em;
+
+  path {
+    stroke: var(--logoColor);
+  }
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+}
+
+.post-body  {
+  .logo-container {
+    line-height: 1em;
+    color: var(--mutedTextColor);
+  }
+  
+  .logo {
+    width: 1em;
+    margin-left: .8em;
+    margin-right: .4em;
+
+    path { 
+      stroke: var(--mutedTextColor);
+      stroke-width: 22; 
+    }
+  }
+
+  .h1 {
+    font-size: 1.5rem;
+  }
+}
+
+.h1 {
+  font-size: 1.2rem;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+.text {
+  margin-right: .4rem;
+  font-size: inherit;
+  font-weight: normal;
+  display: inline-block;
+  margin-top: 0;
+}
+
+.terminal .line {
+  padding: 0;
+  margin-bottom: 1em;
+  line-height: 1.6em;
+}
+
+.terminal {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    padding: .1rem 0;
+  }
+
+  ul {
+    margin-top: 0.5rem;
+  }
+}
+
+.hr {
+  border: 0;
+  border-left: .7rem solid var(--textColor);
+  height: .7rem;
+  margin: 3rem 0;
+}
+
+.notes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .note {
+    border-bottom: 1px solid var(--borderColor);
+    padding-bottom: 3em;
+    margin-top: 3em;
+  }
+}
+
+.targeted {
+  color: var(--activeColor);
+  margin-right: .2em;
+  display: inline;
+}
+
+.note {
+  scroll-margin: 2em;
+
+  &:last-of-type {
+    border-bottom: 0;
+  }
+
+  .targeted {
+    display: none; 
+  }
+
+  &:target .targeted {
+    display: inline;
+  }
+  p:first-child, blockquote:first-child { margin-top: 0; }
+  p:last-child, blockquote:last-child, img:last-child { margin-bottom: 0; }
+}
+
+.note-heading {
+  font-size: .8em;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  color: var(--mutedTextColor);
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+blockquote {
+  &::before {
+    content: '“';
+    font-size: 2rem;
+    position: absolute;
+    margin-left: -.5em;
+    color: var(--secondaryTextColor);
+    font-family: sans-serif;
+  }
+}
+
+img {
+  max-width: 100%;
+  margin: 1em 0;
+
+  &[width] {
+    margin: 0;
+    vertical-align: middle;
+  }
+}
+
+hr {
+  margin: 2em 0;
+  border: 0;
+  border-bottom: 1px solid var(--hrColor);
+}
+
+.pagination {
+  margin-top: 4em;
+}
+
+article {
+  font-family: system-ui, sans-serif;
+  font-size: 16px;
+}
+
+.smol {
+  font-size: .8em;
+  font-weight: normal;
+}
+
+.task-list-item-checkbox {
+  margin-right: .5em;
+  vertical-align: middle;
+}
+
+.entry-title {
+  margin: 0;
+}
+
+.entry {
+  margin-bottom: 3em;
+}
+
+.lang {
+  font-size: .8rem;
+  display: inline-flex;
+  margin-top: 2em;
+  white-space: nowrap;
+  box-shadow: 0 5px 15px var(--langShadowColor);
+
+  a[aria-current] {
+    color: var(--textColor);
+    
+    &:before {
+      content: "●";
+      color: var(--activeColor);
+    }
+  }
+
+  a {
+    background-color: var(--langBackgroundColor);
+    border-color: var(--borderColor);
+    color: var(--mutedTextColor);
+    padding: 4px 16px;
+    margin-right: 1px;
+    text-decoration: none;
+
+    &:first-child {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+
+    &:hover {
+      background: var(--langBackgroundColor);
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+
+    &:before {
+      content: "○";
+      color: var(--borderColor);
+      padding-right: 10px;
+    }
+  }
+}
+
+.styled-link {
+  margin-left: .4rem;
+  font-size: .7em;
+}
+
+time {
+  font-size: .8em;
+  color: var(--mutedTextColor);
+}
+
+.desc {
+  color: var(--mutedTextColor);
+  font-size: 0.8em;
+}
+
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.timestamp-colon {
+  animation-name: flash;
+  animation-duration:  2s;
+  animation-timing-function: step-end;
+  animation-iteration-count: infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .timestamp-colon {
+    animation-name: none;
+  }
+}
+
+.offsetthis {
+  vertical-align: super;
+  font-size: .6em;
+}
+
+.photos {
+  display: flex;
+  gap: 1em;
+  flex-wrap: nowrap;
+  overflow: auto;
+  align-items: center;
+
+  .image-link {
+    flex-shrink: 0;
+  }
+
+  img {
+    background-color: var(--photoBackground);
+  }
+}
+
+figure {
+  margin: 1em 0 3em;
+
+  img {
+    margin: 0 auto;
+    max-height: calc(100vh - 6em);
+    background-color: var(--photoBackground);
+    display: block;
+  }
+  
+  .image-link {
+    display: block;
+    width: fit-content;
+    margin: auto;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+[data-page-title="Photos"] {
+  header, main, footer {
+    max-width: 100%;
+  }
+
+  input {
+    position: absolute;
+    left: -100px;
+
+    &:checked + label path {
+      fill: var(--activeColor);
+    }
+
+    &:focus + label {
+      outline: auto;
+      outline-color: var(--activeColor);
+    }
+  }
+
+  label {
+    top: -50px;
+    left: 100px;
+    padding: .5em;
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+  }
+
+  label path {
+    fill: var(--logoColor);
+  }
+}
+
+.photos-wrapper {
+  &:focus { outline: none; }
+  scroll-behavior: smooth;
+  margin-top: -40px;
+  clear: both;
+  text-align: center;
+}
+
+.back-link {
+  text-decoration: none;
+  color: var(--textColor);
+  background-color: var(--langBackgroundColor);
+  width: 1.6em;
+  text-align: center;
+  line-height: 1.6em;
+  aspect-ratio: 1/1;
+  display: inline-block;
+  border-radius:  4em;
+}
+
+[value*="grid"]:checked ~ .photos-wrapper {
+  display: grid;
+  column-gap: 2.5em;
+  grid-template-columns: repeat(2, 1fr);
+  // https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
+  grid-template-rows: masonry;
+
+  figure {
+    margin-bottom: 0;
+  }
+
+  img {
+    max-height: none;
+    height: auto;
+  }
+}
+
+[value="grid3fr"]:checked ~ .photos-wrapper {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+[value="x-scroll"]:checked ~ .photos-wrapper {
+  display: flex;
+  overflow: auto;
+  gap: 1.5em;
+  scroll-snap-type: x mandatory;
+  scroll-snap-align: center;
+
+  figure {
+    scroll-snap-align: center;
+    margin-bottom: 0;
+    flex-shrink: 0;
+
+    &:has(.portrait) figcaption {
+      max-width: calc(100vh * 0.667 - 6em);
+      margin: auto;
+    }
+
+    &:has(.landscape) figcaption {
+      max-width: calc(100vw * 0.667 - 2em);
+      margin: auto;
+    }
+  }
+
+
+  img {
+    max-height: calc(100vh - 6em);
+    max-width: calc(100vw - 5em);
+    flex-shrink: 0;
+  }
+}
+
+figcaption {
+  padding: .5em 1em;
+
+  p {
+    margin: 0;
+  }
+}
+
+// This ensures that
+// 1. screens that are too short
+// 2. screens that are not tall enough to display the full width of a 3:2 image
+//    at height: (100v - 6em) height
+// don't get the option to use horizontal scroll.
+
+// https://github.com/web-platform-tests/wpt/pull/34865
+// @media (max-height: 540px), (max-width: calc((100vh - 6em) * 1.5)) {
+@media (max-height: 540px), (max-width: calc(100vh * 1.4)) {
+    body {
+      padding: 0 2em;
+    }
+
+    .photos-wrapper {
+      margin-left: -2em;
+      margin-right: -2em;
+
+      img {
+        max-height: none;
+
+        &.landscape {
+          height: calc(100vw / 1.5);
+        }
+        &.portrait {
+          height: calc(100vw / 0.667);
+        }
+        &.square {
+          height: 100vw;
+        }
+      }
+    }
+    
+    [name="layout"] {
+      &, + label { visibility: hidden; }
+    }
+}
+
+.stories {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  overflow: auto;
+  padding: 10px;
+  margin: -10px;
+}
+
+open-stories {
+  .count {
+    font-size: 0.8em;
+  }
+  &::part(dialog):focus {
+    outline: none;
+  }
+
+  &:not(:defined),
+  &::part(button) {
+    font-family: system-ui, sans-serif;
+    border: 1px solid var(--borderColor);
+    box-shadow: inset 0 0 0 2px var(--backgroundColor);
+    color: var(--textColor);
+    background: var(--subtleBackgroundColor);
+    padding: 1em 0;
+    text-align: center;
+    height: 76px;
+    width: 76px;
+    border-radius: 50%;
+    font-size: 0.65em;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition: all .3s;
+    text-transform: lowercase;
+    line-height: normal;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--linkColor);
+      color: var(--backgroundColor);
+      transform: scale(1.05);
+    }
+  }
+
+  
+  &:not([is-highlight])::part(button) {
+    border-color: var(--secondaryTextColor);
+  }
+  
+  &:not(.is-read):not(.is-empty):not([is-highlight])::part(button) {
+    border-color: var(--linkColor);
+  }
+
+  
+  &.is-empty::part(button) {
+    pointer-events: none;
+    opacity: 0.5;
+    overflow: hidden;
+    position: relative;
+
+    &:before {
+      display: block;
+      content: '';
+      border-left: 1px solid var(--mutedTextColor);
+      position: absolute;
+      transform: rotate(-45deg);
+      top: 0;
+      left: 0;
+      width: 150%;
+      height: 150%;
+      transform-origin: top left;
+    }
+  }
+}
+
+.monospace {
+  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;  
+  font-size: 0.9em;
+}
+
+open-heart.text-open-heart {
+  display: inline;
+  margin-left: 1em;
+  transition: all .4s;
+
+  &:not([disabled]):hover {
+    cursor: pointer;
+    color: var(--activeColor);
+  }
+
+  .on { display: none; }
+
+  &[aria-pressed="true"] {
+    border-color: var(--heartedBackgroundColor);
+    .on { display: initial; }
+    .off { display: none; }
+  }
+
+  &[count]::after {
+    content: "(" attr(count) ")";
+  }
+}
+
+kbd {
+  border: 1px solid var(--borderColor);
+  padding: 1px 4px;
+  border-radius: 3px;
+  box-shadow: 0 1px;
+  font-size: 0.9em;
+}
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: .6em;
+  margin: .6em 0;
+}