From 375c0d2544b20124a8cf497819006e01cd217225 Mon Sep 17 00:00:00 2001
From: clarkzjw <i@jinwei.me>
Date: Wed, 1 Mar 2023 19:14:59 -0800
Subject: host photos.json on cloudflare r2

---
 assets/new.scss | 679 --------------------------------------------------------
 1 file changed, 679 deletions(-)
 delete mode 100644 assets/new.scss

(limited to 'assets/new.scss')

diff --git a/assets/new.scss b/assets/new.scss
deleted file mode 100644
index 73c4ed8..0000000
--- a/assets/new.scss
+++ /dev/null
@@ -1,679 +0,0 @@
----
----
-
-: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;
-}
-- 
cgit v1.2.3