Migrate to handy-scroll@2

Amphiluke · Sep 1, 2024 · d054cf6 · d054cf6
1 parent 8b4ddf4
commit d054cf6
Show file tree

Hide file tree

Showing 16 changed files with 871 additions and 1,356 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+git-tag-version=false
diff --git a/css/main.css b/css/main.css
@@ -1 +1,227 @@
-@charset "UTF-8";/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;color:#80663f}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.handy-scroll{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div:before{content:"\A0"}.handy-scroll,.handy-scroll div{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden{bottom:9999px}.handy-scroll-hidden div:before{content:"\A0\A0"}.handy-scroll-viewport{position:relative}.handy-scroll-body{overflow:auto}.handy-scroll-viewport .handy-scroll{left:0;position:absolute}.handy-scroll-hoverable .handy-scroll{opacity:0;transition:opacity .5s .3s}.handy-scroll-hoverable:hover .handy-scroll{opacity:1}html{-webkit-text-size-adjust:100%;background:url(../img/twin-pines.jpg) 100% 100%/contain no-repeat,url(../img/texture.jpg) #e4cca6;color:#4d3d26;font:18px/1.4 Georgia,"Times New Roman",serif}body{margin:1em auto;max-width:960px}::selection{background:#6f5837;color:#e4cca6}::-moz-selection{background:#6f5837;color:#e4cca6}h1,h2,h3,h4,h5{font-variant:small-caps}a:hover{color:#a28150}button{background:0 0;border:1px solid;border-radius:3px;color:#4d3d26;cursor:pointer;padding:.3em 1em}.hidden{display:none}.small{font-size:80%}.hs-code{background:rgba(255,255,255,.5);border-radius:5px;color:rgba(77,61,38,.3);font-size:.8em;max-width:100%;overflow:auto;padding:5px 20px;tab-size:4;transition:color .5s .75s}.hs-code:hover{color:rgba(77,61,38,.75)}.hs-code .hs-highlight{background:#ecdcc1;color:#4d3d26}header{text-align:center}header h1{margin-bottom:0}header p{font-size:.85em;margin:0}header p::before{content:"📜";display:block;font-size:3em;transform:rotate(-44deg)}main{background:rgba(255,255,255,.25);border-radius:10px;box-shadow:0 0 13px 20px rgba(255,255,255,.25);display:block;margin:60px 30px 30px;padding:10px 20px}.handscrolls{font-size:0;line-height:0;overflow:auto}.handscrolls img{vertical-align:top}.handscrolls img:not(.active){left:-50000px;position:absolute;top:-50000px}.handscrolls-ctrl{display:flex;padding:0 .5em .5em;position:-webkit-sticky;position:sticky;text-shadow:1px 1px 1px #e4cca6,-1px -1px 1px #e4cca6,1px -1px 1px #e4cca6,-1px 1px 1px #e4cca6;top:0}.handscrolls-nav{flex-grow:1}.handscrolls-nav span{border-bottom:1px dashed;cursor:pointer}.handscrolls-nav span.active{border-bottom-color:transparent;cursor:default}.handscrolls-toggle{cursor:pointer;flex-shrink:0;padding-left:1em}.handscrolls-toggle::before{color:#b00;content:"Disable"}.handscrolls-toggle.disabled::before{color:#070;content:"Enable"}.hs-popup{background:#e4cca6;box-shadow:0 0 0 100vw rgba(0,0,0,.75);height:550px;left:50%;margin-left:-350px;padding:10px;position:fixed;text-align:center;top:20px;width:700px;z-index:1}.hs-popup.hs-popup-hidden{box-shadow:none;left:-99999px;top:-99999px}.hs-popup-close{background:linear-gradient(0deg,transparent,transparent 45%,#b00 0,#b00 55%,transparent 0),linear-gradient(90deg,transparent,transparent 45%,#b00 0,#b00 55%,transparent 0);cursor:pointer;font-size:13px;height:20px;left:10px;position:absolute;top:10px;transform:rotate(45deg);width:20px}.hs-popup h4{margin:.5em 0}.hs-popup .handy-scroll-body{overscroll-behavior:contain;height:550px;width:100%}.hs-popup .handy-scroll:not(.handy-scroll-hidden){bottom:10px;left:10px}.hs-qingming{font-size:0;line-height:0;overflow:auto;width:100%}.hs-qingming img{vertical-align:top}#hs-open-popup{color:#80663f;cursor:pointer}#hs-open-popup:hover{color:#a28150}#is-unobtrusive{accent-color:#6f5837}#is-unobtrusive~b::after{content:"off"}#is-unobtrusive:checked~b::after{content:"on"}footer{font-size:.7em;padding:5em 50px 0}footer aside{font-style:italic;padding:1.5em 0 .5em;text-shadow:1px 1px 1px #e4cca6,-1px -1px 1px #e4cca6,1px -1px 1px #e4cca6,-1px 1px 1px #e4cca6}footer aside ::-moz-selection{text-shadow:none}footer aside ::selection{text-shadow:none}footer ul{padding-left:1.5em}@media (max-width:719px),(max-height:569px){.hs-popup{box-shadow:none;box-sizing:border-box;height:100%;left:0;margin:0;top:0;width:100%}.handy-scroll-body{max-height:100%}}@media (max-width:499px){main{box-shadow:0 0 4px 5px rgba(255,255,255,.3);border-radius:5px;margin:60px 10px 10px;padding:5px 10px}footer{padding-left:10px;padding-right:10px}}
+@charset "UTF-8";
+
+@import "../node_modules/normalize.css/normalize.css";
+
+:root {
+  --bg-color: #e4cca6;
+  --text-color: #4d3d26;
+  --link-color: hsl(from var(--text-color) h s calc(l + 15));
+  --link-hover-color: hsl(from var(--link-color) h s calc(l + 10));
+}
+
+html {
+  background: url(../img/twin-pines.jpg) 100% 100% / contain no-repeat, var(--bg-color) url(../img/texture.jpg);
+  color: var(--text-color);
+  font: 18px / 1.4 Georgia, "Times New Roman", serif;
+}
+
+body {
+  margin: 1em auto;
+  max-width: 960px;
+}
+
+::selection {
+  background: hsl(from var(--text-color) h s calc(l + 50));
+}
+
+::-moz-selection {
+  background: hsl(from var(--text-color) h s calc(l + 50));
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-variant: small-caps;
+}
+
+a {
+  color: var(--link-color);
+  text-underline-offset: 0.15em;
+
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.small {
+  font-size: 80%;
+}
+
+header {
+  text-align: center;
+
+  & h1 {
+    font-size: 3em;
+    margin-bottom: 0;
+  }
+
+  & p {
+    margin: 0;
+
+    &::before {
+      content: "📜";
+      display: block;
+      font-size: 3em;
+      transform: rotate(-44deg); /* using -45deg results in disappearing of the icon on Mac & iOS! */
+    }
+  }
+}
+
+main {
+  background: rgba(255 255 255 / 0.25);
+  border-radius: 10px;
+  box-shadow: 0 0 13px 20px rgba(255 255 255 / 0.25);
+  margin: 60px 30px 30px;
+  padding: 10px 20px;
+}
+
+.handscrolls {
+  font-size: 0;
+  line-height: 0;
+  overflow: auto;
+
+  & img {
+    left: -50000px;
+    position: absolute;
+    top: -50000px;
+    vertical-align: top;
+  }
+}
+
+.handscrolls-nav {
+  padding: 0 0.5em 0.5em;
+  position: sticky;
+  text-shadow: 1px 1px 1px var(--bg-color), -1px -1px 1px var(--bg-color), 1px -1px 1px var(--bg-color), -1px 1px 1px var(--bg-color);
+  top: 0;
+
+  & label {
+    border-bottom: 1px dashed;
+    cursor: pointer;
+    font-weight: 900;
+
+    &:has(:checked) {
+      border-bottom-color: transparent;
+      cursor: default;
+    }
+  }
+
+  & input {
+    display: none;
+  }
+}
+
+.demo-handscrolls {
+  &:has([value="1"]:checked) img:nth-child(1),
+  &:has([value="2"]:checked) img:nth-child(2),
+  &:has([value="3"]:checked) img:nth-child(3) {
+    position: static;
+  }
+}
+
+.hs-popup {
+  background: var(--bg-color);
+  border: none;
+  box-sizing: border-box;
+  color: var(--text-color);
+  height: min(550px, 100vh - 20px);
+  padding: 10px;
+  text-align: center;
+  width: min(700px, 100vw - 20px);
+
+  &::backdrop {
+    background: rgba(0 0 0 / 0.75);
+  }
+
+  .hs-popup-close {
+    background: linear-gradient(45deg, transparent 45%, #b00 0, #b00 55%, transparent 0), linear-gradient(-45deg, transparent 45%, #b00 0, #b00 55%, transparent 0);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 20px;
+    left: 10px;
+    outline-color: #b00;
+    outline-offset: 3px;
+    padding: 0;
+    position: absolute;
+    top: 10px;
+    width: 20px;
+  }
+
+  & h4 {
+    margin: 0.5em 0;
+  }
+
+  .hs-viewport {
+    height: 100%;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+}
+
+.hs-qingming {
+  font-size: 0;
+  line-height: 0;
+  overflow: auto;
+  width: 100%;
+
+  & img {
+    vertical-align: top;
+  }
+}
+
+#hs-open-popup {
+  color: var(--link-color);
+  cursor: pointer;
+  text-decoration: underline dotted;
+  text-underline-offset: 0.25em;
+
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+handy-scroll[owner="qingming-fest"] {
+  margin-top: -17px;
+}
+
+footer {
+  font-size: 0.7em;
+  padding: 5em 50px 0;
+
+  & aside {
+    font-style: italic;
+    padding: 1.5em 0 0.5em;
+    text-shadow: 1px 1px 1px var(--bg-color), -1px -1px 1px var(--bg-color), 1px -1px 1px var(--bg-color), -1px 1px 1px var(--bg-color);
+  }
+
+  & aside ::-moz-selection {
+    text-shadow: none;
+  }
+
+  & aside ::selection {
+    text-shadow: none;
+  }
+
+  & ul {
+    padding-left: 1.5em;
+  }
+}
+
+@media (max-width: 499px) {
+  main {
+    box-shadow: 0 0 4px 5px rgba(255 255 255 / 0.3);
+    border-radius: 5px;
+    margin: 60px 10px 10px;
+    padding: 5px 10px;
+  }
+
+  footer {
+    padding-inline: 10px;
+  }
+}