From e0a69eb031316ae145f1c40319bceb8ec520ad44 Mon Sep 17 00:00:00 2001 From: clarkzjw Date: Tue, 28 Feb 2023 21:54:53 -0800 Subject: init project structure --- .well-known/webfinger | 0 404.html | 20 ++ CNAME | 1 + Gemfile | 4 + Gemfile.lock | 260 +++++++++++++++++ _config.yml | 10 + _data/photos.json | 0 _includes/line.html | 3 + _layouts/default.html | 37 +++ _layouts/redirect.html | 1 + assets/icon.png | Bin 0 -> 25823 bytes assets/new.scss | 679 ++++++++++++++++++++++++++++++++++++++++++++ assets/site.js | 32 +++ assets/syntax.css | 225 +++++++++++++++ assets/valid-rss-rogers.png | Bin 0 -> 3712 bytes feeds/photos.xml | 31 ++ index.html | 73 +++++ package.json | 3 + start | 2 + 19 files changed, 1381 insertions(+) create mode 100644 .well-known/webfinger create mode 100644 404.html create mode 100644 CNAME create mode 100644 Gemfile create mode 100644 Gemfile.lock create mode 100644 _config.yml create mode 100644 _data/photos.json create mode 100644 _includes/line.html create mode 100644 _layouts/default.html create mode 100644 _layouts/redirect.html create mode 100644 assets/icon.png create mode 100644 assets/new.scss create mode 100644 assets/site.js create mode 100644 assets/syntax.css create mode 100644 assets/valid-rss-rogers.png create mode 100644 feeds/photos.xml create mode 100644 index.html create mode 100644 package.json create mode 100755 start diff --git a/.well-known/webfinger b/.well-known/webfinger new file mode 100644 index 0000000..e69de29 diff --git a/404.html b/404.html new file mode 100644 index 0000000..3b25d38 --- /dev/null +++ b/404.html @@ -0,0 +1,20 @@ + + + + + + + + 404 + + +

+ 404| +

+ ← +

+ + + + diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..fbffb78 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +pixel.jinwei.me diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..d770067 --- /dev/null +++ b/Gemfile @@ -0,0 +1,4 @@ +source 'https://rubygems.org' + +gem "webrick" +gem 'github-pages', group: :jekyll_plugins diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..a4ee6d5 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,260 @@ +GEM + remote: https://rubygems.org/ + specs: + activesupport (7.0.4.2) + concurrent-ruby (~> 1.0, >= 1.0.2) + i18n (>= 1.6, < 2) + minitest (>= 5.1) + tzinfo (~> 2.0) + addressable (2.8.1) + public_suffix (>= 2.0.2, < 6.0) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.11.1) + colorator (1.1.0) + commonmarker (0.23.8) + concurrent-ruby (1.2.2) + dnsruby (1.61.9) + simpleidn (~> 0.1) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + ethon (0.16.0) + ffi (>= 1.15.0) + eventmachine (1.2.7) + execjs (2.8.1) + faraday (2.7.4) + faraday-net_http (>= 2.0, < 3.1) + ruby2_keywords (>= 0.0.4) + faraday-net_http (3.0.2) + ffi (1.15.5) + forwardable-extended (2.6.0) + gemoji (3.0.1) + github-pages (228) + github-pages-health-check (= 1.17.9) + jekyll (= 3.9.3) + jekyll-avatar (= 0.7.0) + jekyll-coffeescript (= 1.1.1) + jekyll-commonmark-ghpages (= 0.4.0) + jekyll-default-layout (= 0.1.4) + jekyll-feed (= 0.15.1) + jekyll-gist (= 1.5.0) + jekyll-github-metadata (= 2.13.0) + jekyll-include-cache (= 0.2.1) + jekyll-mentions (= 1.6.0) + jekyll-optional-front-matter (= 0.3.2) + jekyll-paginate (= 1.1.0) + jekyll-readme-index (= 0.3.0) + jekyll-redirect-from (= 0.16.0) + jekyll-relative-links (= 0.6.1) + jekyll-remote-theme (= 0.4.3) + jekyll-sass-converter (= 1.5.2) + jekyll-seo-tag (= 2.8.0) + jekyll-sitemap (= 1.4.0) + jekyll-swiss (= 1.0.0) + jekyll-theme-architect (= 0.2.0) + jekyll-theme-cayman (= 0.2.0) + jekyll-theme-dinky (= 0.2.0) + jekyll-theme-hacker (= 0.2.0) + jekyll-theme-leap-day (= 0.2.0) + jekyll-theme-merlot (= 0.2.0) + jekyll-theme-midnight (= 0.2.0) + jekyll-theme-minimal (= 0.2.0) + jekyll-theme-modernist (= 0.2.0) + jekyll-theme-primer (= 0.6.0) + jekyll-theme-slate (= 0.2.0) + jekyll-theme-tactile (= 0.2.0) + jekyll-theme-time-machine (= 0.2.0) + jekyll-titles-from-headings (= 0.5.3) + jemoji (= 0.12.0) + kramdown (= 2.3.2) + kramdown-parser-gfm (= 1.1.0) + liquid (= 4.0.4) + mercenary (~> 0.3) + minima (= 2.5.1) + nokogiri (>= 1.13.6, < 2.0) + rouge (= 3.26.0) + terminal-table (~> 1.4) + github-pages-health-check (1.17.9) + addressable (~> 2.3) + dnsruby (~> 1.60) + octokit (~> 4.0) + public_suffix (>= 3.0, < 5.0) + typhoeus (~> 1.3) + html-pipeline (2.14.3) + activesupport (>= 2) + nokogiri (>= 1.4) + http_parser.rb (0.8.0) + i18n (1.12.0) + concurrent-ruby (~> 1.0) + jekyll (3.9.3) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (>= 0.7, < 2) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 2.0) + kramdown (>= 1.17, < 3) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (>= 1.7, < 4) + safe_yaml (~> 1.0) + jekyll-avatar (0.7.0) + jekyll (>= 3.0, < 5.0) + jekyll-coffeescript (1.1.1) + coffee-script (~> 2.2) + coffee-script-source (~> 1.11.1) + jekyll-commonmark (1.4.0) + commonmarker (~> 0.22) + jekyll-commonmark-ghpages (0.4.0) + commonmarker (~> 0.23.7) + jekyll (~> 3.9.0) + jekyll-commonmark (~> 1.4.0) + rouge (>= 2.0, < 5.0) + jekyll-default-layout (0.1.4) + jekyll (~> 3.0) + jekyll-feed (0.15.1) + jekyll (>= 3.7, < 5.0) + jekyll-gist (1.5.0) + octokit (~> 4.2) + jekyll-github-metadata (2.13.0) + jekyll (>= 3.4, < 5.0) + octokit (~> 4.0, != 4.4.0) + jekyll-include-cache (0.2.1) + jekyll (>= 3.7, < 5.0) + jekyll-mentions (1.6.0) + html-pipeline (~> 2.3) + jekyll (>= 3.7, < 5.0) + jekyll-optional-front-matter (0.3.2) + jekyll (>= 3.0, < 5.0) + jekyll-paginate (1.1.0) + jekyll-readme-index (0.3.0) + jekyll (>= 3.0, < 5.0) + jekyll-redirect-from (0.16.0) + jekyll (>= 3.3, < 5.0) + jekyll-relative-links (0.6.1) + jekyll (>= 3.3, < 5.0) + jekyll-remote-theme (0.4.3) + addressable (~> 2.0) + jekyll (>= 3.5, < 5.0) + jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) + rubyzip (>= 1.3.0, < 3.0) + jekyll-sass-converter (1.5.2) + sass (~> 3.4) + jekyll-seo-tag (2.8.0) + jekyll (>= 3.8, < 5.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-swiss (1.0.0) + jekyll-theme-architect (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-cayman (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-dinky (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-hacker (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-leap-day (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-merlot (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-midnight (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-minimal (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-modernist (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-primer (0.6.0) + jekyll (> 3.5, < 5.0) + jekyll-github-metadata (~> 2.9) + jekyll-seo-tag (~> 2.0) + jekyll-theme-slate (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-tactile (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-theme-time-machine (0.2.0) + jekyll (> 3.5, < 5.0) + jekyll-seo-tag (~> 2.0) + jekyll-titles-from-headings (0.5.3) + jekyll (>= 3.3, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + jemoji (0.12.0) + gemoji (~> 3.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0, < 5.0) + kramdown (2.3.2) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.8.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.3.6) + minima (2.5.1) + jekyll (>= 3.5, < 5.0) + jekyll-feed (~> 0.9) + jekyll-seo-tag (~> 2.1) + minitest (5.17.0) + nokogiri (1.14.2-x86_64-linux) + racc (~> 1.4) + octokit (4.25.1) + faraday (>= 1, < 3) + sawyer (~> 0.9) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (4.0.7) + racc (1.6.2) + rb-fsevent (0.11.2) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.2.5) + rouge (3.26.0) + ruby2_keywords (0.0.5) + rubyzip (2.3.2) + safe_yaml (1.0.5) + sass (3.7.4) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + sawyer (0.9.2) + addressable (>= 2.3.5) + faraday (>= 0.17.3, < 3) + simpleidn (0.2.1) + unf (~> 0.1.4) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + typhoeus (1.4.0) + ethon (>= 0.9.0) + tzinfo (2.0.6) + concurrent-ruby (~> 1.0) + unf (0.1.4) + unf_ext + unf_ext (0.0.8.2) + unicode-display_width (1.8.0) + webrick (1.8.1) + +PLATFORMS + x86_64-linux + +DEPENDENCIES + github-pages + webrick + +BUNDLED WITH + 2.4.6 diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..345b52e --- /dev/null +++ b/_config.yml @@ -0,0 +1,10 @@ +title: Clarkzjw +description: Clarkzjw's Photo Blog +url: https://pixel.jinwei.me +permalink: /posts/:title +timezone: America/Vancouver +kramdown: + hard_wrap: true +sass: + sass_dir: assets + style: :compressed diff --git a/_data/photos.json b/_data/photos.json new file mode 100644 index 0000000..e69de29 diff --git a/_includes/line.html b/_includes/line.html new file mode 100644 index 0000000..86b7116 --- /dev/null +++ b/_includes/line.html @@ -0,0 +1,3 @@ +

diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..168424f --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,37 @@ + + + + + + + + + + Photos + + + + + + + +

+ {{ page.title }} +

+ {{ content }} +

+ + + {% if page.root %} + + {% endif %} + + diff --git a/_layouts/redirect.html b/_layouts/redirect.html new file mode 100644 index 0000000..3e2238f --- /dev/null +++ b/_layouts/redirect.html @@ -0,0 +1 @@ + diff --git a/assets/icon.png b/assets/icon.png new file mode 100644 index 0000000..f182cc1 Binary files /dev/null and b/assets/icon.png differ diff --git a/assets/new.scss b/assets/new.scss new file mode 100644 index 0000000..73c4ed8 --- /dev/null +++ b/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; +} diff --git a/assets/site.js b/assets/site.js new file mode 100644 index 0000000..4e72511 --- /dev/null +++ b/assets/site.js @@ -0,0 +1,32 @@ +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 new file mode 100644 index 0000000..de3ac90 --- /dev/null +++ b/assets/syntax.css @@ -0,0 +1,225 @@ + +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 new file mode 100644 index 0000000..8ce6d12 Binary files /dev/null and b/assets/valid-rss-rogers.png differ diff --git a/feeds/photos.xml b/feeds/photos.xml new file mode 100644 index 0000000..c89ec48 --- /dev/null +++ b/feeds/photos.xml @@ -0,0 +1,31 @@ +--- +permalink: /photos.xml +--- + +{% capture srcbase %}src="{{site.url}}/{% endcapture %} + + + @clarkzjw's photos + Photos + {% assign photos = site.data.photos | slice: 0, 10 %} + {{ photos.first.createdAt | date_to_rfc822 }} + + {{ site.url }}/photos.xml + {% for photo in photos limit:10 %} + + {{ photo.caption | markdownify | strip_html | xml_escape }} + + {% capture content %} + +

+ + {% endcapture %} + {{ content | xml_escape }}{{ openheart | xml_escape }} + + {{ photo.createdAt | date_to_rfc822 }} + {{ site.url }}/photos#P{{ photo.guid }} + {{ site.url }}/photos#P{{ photo.guid }} + + {% endfor %} + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8071de9 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ +--- +layout: default +title: Photos +--- + + + + + + + + + + + + + + + + + + +

+ +{% assign photos = site.data.photos %} +{% for photo in photos %} +

+{% endfor %} + +

+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..3dbc1ca --- /dev/null +++ b/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +} diff --git a/start b/start new file mode 100755 index 0000000..e6bda98 --- /dev/null +++ b/start @@ -0,0 +1,2 @@ +bundle +bundle exec jekyll server -w --future -- cgit v1.2.3