From 375c0d2544b20124a8cf497819006e01cd217225 Mon Sep 17 00:00:00 2001 From: clarkzjw Date: Wed, 1 Mar 2023 19:14:59 -0800 Subject: host photos.json on cloudflare r2 --- assets/icon.png | Bin 25823 -> 0 bytes assets/new.scss | 679 -------------------------------------------- assets/site.js | 32 --- assets/syntax.css | 225 --------------- assets/valid-rss-rogers.png | Bin 3712 -> 0 bytes 5 files changed, 936 deletions(-) delete mode 100644 assets/icon.png delete mode 100644 assets/new.scss delete mode 100644 assets/site.js delete mode 100644 assets/syntax.css delete mode 100644 assets/valid-rss-rogers.png (limited to 'assets') diff --git a/assets/icon.png b/assets/icon.png deleted file mode 100644 index f182cc1..0000000 Binary files a/assets/icon.png and /dev/null differ 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; -} diff --git a/assets/site.js b/assets/site.js deleted file mode 100644 index 4e72511..0000000 --- a/assets/site.js +++ /dev/null @@ -1,32 +0,0 @@ -function settime() { - const timestamp = document.querySelector('[data-timestamp-text]') - if (!timestamp || !('Intl' in window)) return - - const options = { - timeZone: "Asia/Taipei", - timeStyle: "short", - hour12: false - } - - // https://gist.github.com/muan/e7414b6241f088090acd916ed965540e - let time = new Intl.DateTimeFormat(navigator.language || "zh-TW", options).format(new Date()) - - // https://bugs.chromium.org/p/chromium/issues/detail?id=1262801 - if (time.match(/^24:/)) time = time.replace('24:', '00:') - - // Setting interpolated string instead of just the time because - // if there's no JS there should be no mentions of current time - const text = timestamp.getAttribute('data-timestamp-text').replace('{time}', time) - timestamp.innerHTML = text.replace(':', ':') - - const now = new Date() - const sec = now.getSeconds() - const secondIsEven = sec % 2 === 0 - const colon = document.querySelector('[data-colon]') - if (colon) colon.style.animationDelay = `${(secondIsEven ? 0 : 1000) - now.getMilliseconds()}ms` - - const delay = 60000 - ((sec * 1000) + now.getMilliseconds()) - setTimeout(settime, delay) -} - -settime() diff --git a/assets/syntax.css b/assets/syntax.css deleted file mode 100644 index de3ac90..0000000 --- a/assets/syntax.css +++ /dev/null @@ -1,225 +0,0 @@ - -pre, code { - font-family: 'Menlo', monospace; -} - -code { - font-size: 0.85em; -} - -pre code { - font-size: 0.9em; -} - -:root { - --syntaxBackground: #ffffff; - --hll: #ffffcc; - --c: #999988; - --err: #a61717; - --errBackground: #e3d2d2; - --k: #000000; - --o: #000000; - --cm: #999988; - --cp: #999999; - --c1: #999988; - --cs: #999999; - --gd: #000000; - --ge: #000000; - --gr: #aa0000; - --gh: #999999; - --gi: #000000; - --go: #888888; - --gp: #555555; - --gu: #aaaaaa; - --gt: #aa0000; - --kc: #000000; - --kd: #000000; - --kn: #000000; - --kp: #000000; - --kr: #000000; - --kt: #445588; - --m: #009999; - --s: #d01040; - --na: #008080; - --nb: #0086B3; - --nc: #445588; - --no: #008080; - --nd: #3c5d5d; - --ni: #800080; - --ne: #990000; - --nf: #990000; - --nl: #990000; - --nn: #555555; - --nt: #000080; - --nv: #008080; - --ow: #000000; - --w: #bbbbbb; - --mf: #009999; - --mh: #009999; - --mi: #009999; - --mo: #009999; - --sb: #d01040; - --sc: #d01040; - --sd: #d01040; - --s2: #d01040; - --se: #d01040; - --sh: #d01040; - --si: #d01040; - --sx: #d01040; - --sr: #009926; - --s1: #d01040; - --ss: #990073; - --bp: #999999; - --vc: #008080; - --vg: #008080; - --vi: #008080; - --il: #009999; -} - -@media (prefers-color-scheme: dark) { - :root { - --syntaxBackground: #121615; - --hll: #002b36; - --c: #586e75; - --err: #e3d2d2; - --errBackground: #a61717; - --k: #859900; - --o: #859900; - --cm: #586e75; - --c1: #586e75; - --gd: #ffdddd; - --ge: #2aa198; - --gh: #cb4b16; - --gi: #ddffdd; - --gu: #cb4b16; - --m: #74b9b9; - --s: #9faf74; - --kc: #cb4b16; - --kd: #2aa198; - --kn: #2aa198; - --kp: #2aa198; - --kr: #2aa198; - --nb: #b58900; - --no: #cb4b16; - --ni: #cb4b16; - --ne: #cb4b16; - --nf: #cb4b16; - --nl: #cb4b16; - --nt: #7aa1ad; - --ow: #2aa198; - --sb: #586e75; - --sc: #586e75; - --sd: #586e75; - --s2: #586e75; - --se: #586e75; - --sh: #586e75; - --si: #586e75; - --sx: #586e75; - } -} - -div.highlight { - overflow: hidden; - position: relative; - margin: 0; - background-color: var(--syntaxBackground); - padding: .6em 1em; - border-radius: 6px; - tab-size: 2; -} - -.highlight .gutter { - padding-right: 1em; - color: #aaa; - border-right: 3px solid var(--syntaxBackground); -} - -.highlight .code { - padding-left: 1em; -} - -.highlight pre { - overflow: auto; - margin-top: 0; - margin-bottom: 0; -} - -code { - background: var(--syntaxBackground); - padding: .2em .6em; - border-radius: 4px; - vertical-align: middle; -} - -p code { - vertical-align: inherit; -} - -pre code { - padding: 0; - word-wrap: initial; - background: transparent; -} - -.hll { background-color: var(--hll) } -.c { color: var(--c); font-style: italic } /* Comment */ -.err { color: var(--err); background-color: var(--errBackground) } /* Error */ -.k { color: var(--k); font-weight: bold } /* Keyword */ -.o { color: var(--o); font-weight: bold } /* Operator */ -.cm { color: var(--cm); font-style: italic } /* Comment.Multiline */ -.cp { color: var(--cp); font-weight: bold; font-style: italic } /* Comment.Preproc */ -.c1 { color: var(--c1); font-style: italic } /* Comment.Single */ -.cs { color: var(--cs); font-weight: bold; font-style: italic } /* Comment.Special */ -.gd { color: var(--k); background-color: var(--gd) } /* Generic.Deleted */ -.ge { color: var(--ge); font-style: italic } /* Generic.Emph */ -.gr { color: var(--gr) } /* Generic.Error */ -.gh { color: var(--gh) } /* Generic.Heading */ -.gi { color: var(--k); background-color: var(--gi) } /* Generic.Inserted */ -.go { color: var(--go) } /* Generic.Output */ -.gp { color: var(--gp) } /* Generic.Prompt */ -.gs { font-weight: bold } /* Generic.Strong */ -.gu { color: var(--gu) } /* Generic.Subheading */ -.gt { color: var(--gt) } /* Generic.Traceback */ -.kc { color: var(--kc); font-weight: bold } /* Keyword.Constant */ -.kd { color: var(--kd); font-weight: bold } /* Keyword.Declaration */ -.kn { color: var(--kn); font-weight: bold } /* Keyword.Namespace */ -.kp { color: var(--kp); font-weight: bold } /* Keyword.Pseudo */ -.kr { color: var(--kr); font-weight: bold } /* Keyword.Reserved */ -.kt { color: var(--kt); font-weight: bold } /* Keyword.Type */ -.m { color: var(--m) } /* Literal.Number */ -.s { color: var(--s) } /* Literal.String */ -.na { color: var(--na) } /* Name.Attribute */ -.nb { color: var(--nb) } /* Name.Builtin */ -.nc { color: var(--nc); font-weight: bold } /* Name.Class */ -.no { color: var(--no) } /* Name.Constant */ -.nd { color: var(--nd); font-weight: bold } /* Name.Decorator */ -.ni { color: var(--ni) } /* Name.Entity */ -.ne { color: var(--ne); font-weight: bold } /* Name.Exception */ -.nf { color: var(--nf); font-weight: bold } /* Name.Function */ -.nl { color: var(--nl); font-weight: bold } /* Name.Label */ -.nn { color: var(--nn) } /* Name.Namespace */ -.nt { color: var(--nt) } /* Name.Tag */ -.nv { color: var(--nv) } /* Name.Variable */ -.ow { color: var(--ow); font-weight: bold } /* Operator.Word */ -.w { color: var(--w) } /* Text.Whitespace */ -.mf { color: var(--mf) } /* Literal.Number.Float */ -.mh { color: var(--mh) } /* Literal.Number.Hex */ -.mi { color: var(--mi) } /* Literal.Number.Integer */ -.mo { color: var(--mo) } /* Literal.Number.Oct */ -.sb { color: var(--sb) } /* Literal.String.Backtick */ -.sc { color: var(--sc) } /* Literal.String.Char */ -.sd { color: var(--sd) } /* Literal.String.Doc */ -.s2 { color: var(--s2) } /* Literal.String.Double */ -.se { color: var(--se) } /* Literal.String.Escape */ -.sh { color: var(--sh) } /* Literal.String.Heredoc */ -.si { color: var(--si) } /* Literal.String.Interpol */ -.sx { color: var(--sx) } /* Literal.String.Other */ -.sr { color: var(--sr) } /* Literal.String.Regex */ -.s1 { color: var(--s1) } /* Literal.String.Single */ -.ss { color: var(--ss) } /* Literal.String.Symbol */ -.bp { color: var(--bp) } /* Name.Builtin.Pseudo */ -.vc { color: var(--vc) } /* Name.Variable.Class */ -.vg { color: var(--vg) } /* Name.Variable.Global */ -.vi { color: var(--vi) } /* Name.Variable.Instance */ -.il { color: var(--il) } /* Literal.Number.Integer.Long */ - diff --git a/assets/valid-rss-rogers.png b/assets/valid-rss-rogers.png deleted file mode 100644 index 8ce6d12..0000000 Binary files a/assets/valid-rss-rogers.png and /dev/null differ -- cgit v1.2.3