From c078f746e23dbb0244063273c0ac0a9257a8a53d Mon Sep 17 00:00:00 2001 From: KirisameSoup Date: Sun, 12 Nov 2023 23:18:40 +0800 Subject: [PATCH] Optimize + sort stuffs out --- Gemfile | 3 +- Gemfile.lock | 17 + _config.yml | 1 + _data/nav.yml | 4 +- _includes/ip.js.md | 2 +- _includes/nav.html | 20 +- _includes/weather.js.md | 4 +- _layouts/default.html | 29 +- _site/about.html | 108 +- _site/archive.html | 112 +- _site/assets/css/default/layout.css | 2 +- _site/assets/css/default/layout.css.map | 2 +- _site/assets/css/default/style.css | 2 +- _site/assets/css/default/style.css.map | 2 +- _site/assets/css/markaround.css | 1 + _site/assets/css/markaround.css.map | 1 + _site/assets/js/fallback-cssAsset.js | 5 - _site/assets/js/ip.js | 3 + _site/assets/js/weather.js | 2 +- _site/home.html | 148 +- _site/sitemap.xml | 5 +- _site/we_fuck_gfw.html | 660 +++-- _site/weblab/index.html | 128 + _site/{md-lab.html => weblab/markaround.html} | 2184 +++++++++++------ assets/css/default/layout.scss | 23 +- assets/css/default/style.scss | 247 +- .../css/markaround.scss | 175 +- assets/js/fallback-cssAsset.js | 5 - assets/js/ip.js | 5 + home.md | 4 +- we_fuck_gfw.md | 59 +- weblab/index.md | 6 + md-lab.md => weblab/markaround.md | 371 +-- 33 files changed, 2659 insertions(+), 1681 deletions(-) create mode 100644 _site/assets/css/markaround.css create mode 100644 _site/assets/css/markaround.css.map create mode 100644 _site/assets/js/ip.js create mode 100644 _site/weblab/index.html rename _site/{md-lab.html => weblab/markaround.html} (57%) rename _sass/moardown.scss => assets/css/markaround.scss (84%) create mode 100644 assets/js/ip.js create mode 100644 weblab/index.md rename md-lab.md => weblab/markaround.md (66%) diff --git a/Gemfile b/Gemfile index bcb3786..5e6a124 100644 --- a/Gemfile +++ b/Gemfile @@ -6,4 +6,5 @@ source "https://rubygems.org" gem "jekyll" gem 'jekyll-sitemap' -gem 'jekyll-seo-tag' \ No newline at end of file +gem 'jekyll-seo-tag' +gem 'jekyll-spaceship', group: :jekyll_plugins diff --git a/Gemfile.lock b/Gemfile.lock index 9988712..928fd05 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -9,9 +9,12 @@ GEM eventmachine (>= 0.12.9) http_parser.rb (~> 0) eventmachine (1.2.7) + ffi (1.16.2) ffi (1.16.2-x64-mingw-ucrt) forwardable-extended (2.6.0) + gemoji (3.0.1) google-protobuf (3.24.3-x64-mingw-ucrt) + google-protobuf (3.24.3-x86_64-linux) http_parser.rb (0.8.0) i18n (1.14.1) concurrent-ruby (~> 1.0) @@ -37,6 +40,11 @@ GEM jekyll (>= 3.8, < 5.0) jekyll-sitemap (1.4.0) jekyll (>= 3.7, < 5.0) + jekyll-spaceship (0.10.2) + gemoji (~> 3.0) + jekyll (>= 3.6, < 5.0) + nokogiri (~> 1.6) + rainbow (~> 3.0) jekyll-watch (2.2.1) listen (~> 3.0) kramdown (2.4.0) @@ -48,9 +56,15 @@ GEM rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) + nokogiri (1.15.4-x64-mingw-ucrt) + racc (~> 1.4) + nokogiri (1.15.4-x86_64-linux) + racc (~> 1.4) pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (5.0.3) + racc (1.7.3) + rainbow (3.1.1) rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) @@ -59,6 +73,8 @@ GEM safe_yaml (1.0.5) sass-embedded (1.68.0-x64-mingw-ucrt) google-protobuf (~> 3.23) + sass-embedded (1.68.0-x86_64-linux-gnu) + google-protobuf (~> 3.23) terminal-table (3.0.2) unicode-display_width (>= 1.1.1, < 3) unicode-display_width (2.4.2) @@ -72,6 +88,7 @@ DEPENDENCIES jekyll jekyll-seo-tag jekyll-sitemap + jekyll-spaceship BUNDLED WITH 2.4.20 diff --git a/_config.yml b/_config.yml index 9389001..36bc7ea 100644 --- a/_config.yml +++ b/_config.yml @@ -6,6 +6,7 @@ sass: plugins: - jekyll-sitemap - jekyll-seo-tag + - jekyll-spaceship permalink: /:categories/:title diff --git a/_data/nav.yml b/_data/nav.yml index 48d754f..eff9a6a 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -2,7 +2,7 @@ link: /home - name: 关于 link: /about -- name: Markdown 实验室 - link: /md-lab +- name: Web 实验室 + link: /weblab/ - name: 归档页面 link: /archive \ No newline at end of file diff --git a/_includes/ip.js.md b/_includes/ip.js.md index e17c0ab..64f41ce 100644 --- a/_includes/ip.js.md +++ b/_includes/ip.js.md @@ -8,6 +8,6 @@ }; } - + {% endcapture %} {{ ip | strip_newlines | normalize_whitespace }} diff --git a/_includes/nav.html b/_includes/nav.html index 1439b0a..8336a14 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,11 +1,9 @@ - +{% for item in site.data.nav %} +

+ {% if page.url == item.link %} >>  {% endif %} + + {{ item.name }} + + +

+{% endfor %} diff --git a/_includes/weather.js.md b/_includes/weather.js.md index e4542ee..4d16a30 100644 --- a/_includes/weather.js.md +++ b/_includes/weather.js.md @@ -2,7 +2,7 @@ {% endcapture %} -{{ weather | remove: ""}} \ No newline at end of file +{{ weather | remove: "" }} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index b1e079e..3ec4f64 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,5 +1,5 @@ - + @@ -13,11 +13,6 @@ - - - - - @@ -30,12 +25,11 @@
-
{% include nav.html %}
-
+
- {%- capture opt -%} {{ content_baked | replace: 'id="', 'id="f_' - | replace: 'a href="#', 'a href="#f_' + | replace: 'href="#', 'href="#f_' }}
@@ -102,9 +96,16 @@
- - - - + diff --git a/_site/about.html b/_site/about.html index daf27ad..5dfbb86 100644 --- a/_site/about.html +++ b/_site/about.html @@ -1,17 +1,13 @@ - - + + + 霧雨蘑菇店 |/¥About.xml - - - - - @@ -24,43 +20,40 @@
-
-
-
+

关于：

@@ -80,13 +73,7 @@
-
@@ -114,7 +101,7 @@

关于：

-
+
@@ -122,13 +109,20 @@

关于：

- +
- - - - +
+ + + + + + + + + +
diff --git a/_site/archive.html b/_site/archive.html index c86f6f8..a2b4612 100644 --- a/_site/archive.html +++ b/_site/archive.html @@ -1,17 +1,13 @@ - - + + + 霧雨蘑菇店 |/¥归档页面.xml - - - - - @@ -24,49 +20,46 @@
-
-
-
+

黑历史：

@@ -82,13 +75,7 @@
-
@@ -106,7 +93,7 @@

黑历史：

@@ -118,7 +105,7 @@

黑历史：

-
+
@@ -126,13 +113,20 @@

黑历史：

- +
- - - - +
+ + + + + + + + + +
diff --git a/_site/assets/css/default/layout.css b/_site/assets/css/default/layout.css index 602e46e..75625f7 100644 --- a/_site/assets/css/default/layout.css +++ b/_site/assets/css/default/layout.css @@ -1 +1 @@ -iframe,input[type=checkbox]:not(.task-list-item-checkbox),.toggle{display:none}html,body{position:fixed;inset:0}html{background:#002;color:#aaf;font-family:monospace}#soup\.exe,#pseu{position:absolute;left:40%;top:45%;transform:translate(-40%, -45%);height:29.25vw;aspect-ratio:2.6;display:flex}#soup\.exe .c1,#pseu .c1{flex:5;width:0;display:flex;flex-direction:column}#soup\.exe .c1 .banner,#pseu .c1 .banner{position:relative;height:max(5.625vw,10vh)}#soup\.exe .c1 .main,#pseu .c1 .main{position:relative;width:auto;flex:1;display:flex}#soup\.exe .c1 .main .nav,#pseu .c1 .main .nav{max-width:11.25vw;flex:3;min-width:min-content}#soup\.exe .c1 .main .window,#pseu .c1 .main .window{flex:10;display:flex}#soup\.exe .c1 .main .window .content,#pseu .c1 .main .window .content{position:relative;width:100%;padding-bottom:25%}#soup\.exe .c1 .bottom,#pseu .c1 .bottom{--height: 10%;position:absolute;top:max(100% - var(--height),320px);z-index:1;height:var(--height)}#soup\.exe .c2,#pseu .c2{position:relative;max-width:19.6875vw;flex:3;z-index:1}.fullscreen{opacity:0;pointer-events:none}#soup\.exe,.body,.banner,.main,.nav,.bottom,.window{overflow:hidden}.nav-c,.content{overflow:hidden scroll}/*# sourceMappingURL=layout.css.map */ \ No newline at end of file +iframe,input[type=checkbox]:not(.task-list-item-checkbox),.toggle{display:none}html,body{position:fixed;inset:0}html{background:#002;color:#aaf;font-family:monospace}#soup\.exe,#pseu{position:absolute;left:40%;top:45%;transform:translate(-40%, -45%);height:27vw;aspect-ratio:2.8;display:flex}#soup\.exe .c1,#pseu .c1{flex:5;width:0;display:flex;flex-direction:column}#soup\.exe .c1 .banner,#pseu .c1 .banner{position:relative;height:max(5.625vw,10vh)}#soup\.exe .c1 .main,#pseu .c1 .main{position:relative;width:auto;flex:1;display:flex}#soup\.exe .c1 .main .nav,#pseu .c1 .main .nav{max-width:11.25vw;flex:3;min-width:min-content}#soup\.exe .c1 .main .window,#pseu .c1 .main .window{position:relative;flex:10;display:flex}#soup\.exe .c1 .main .window .content,#pseu .c1 .main .window .content{position:relative;width:100%;padding-bottom:25%}#soup\.exe .c1 .bottom,#pseu .c1 .bottom{--height: 10%;z-index:1;height:min(5vh,100% - 40vh)}#soup\.exe .c2,#pseu .c2{position:relative;max-width:19.6875vw;flex:3;z-index:1}.fullscreen{opacity:0;pointer-events:none}#soup\.exe,.body,.banner,.main,.nav,.bottom,.window{overflow:hidden}.content{overflow:hidden scroll}/*# sourceMappingURL=layout.css.map */ \ No newline at end of file diff --git a/_site/assets/css/default/layout.css.map b/_site/assets/css/default/layout.css.map index f45530b..aa27e3d 100644 --- a/_site/assets/css/default/layout.css.map +++ b/_site/assets/css/default/layout.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["layout.scss"],"names":[],"mappings":"AAAA,+EAEA,UACI,eACA,QAGJ,KACI,gBACA,WACA,sBAKJ,iBAEI,kBACA,iBACA,gCAGA,eACA,iBAGA,aAEA,yBACI,OACA,QACA,aACA,sBAEA,yCACI,kBAEA,yBAGJ,qCACI,kBACA,WACA,OACA,aAEA,+CACI,kBACA,OACA,sBAGJ,qDACI,QACA,aAGA,uEACI,kBACA,WACA,mBAKZ,yCACI,cACA,kBACA,oCACA,UACA,qBAIR,yBACI,kBACA,oBACA,OACA,UAIR,YACI,UACA,oBAKJ,oEAEA","sourcesContent":["iframe, input[type=\"checkbox\"]:not(.task-list-item-checkbox), .toggle { display: none; }\n\nhtml, body {\n position: fixed;\n inset: 0;\n}\n\nhtml {\n background: #002;\n color: #aaf;\n font-family: monospace;\n}\n\n/* ==== L A Y O U T T A B L E ==== */\n\n#soup\\.exe, #pseu {\n// pos\n position: absolute;\n left: 40%; top: 45%;\n transform: translate(-40%, -45%);\n// size\n // @include sizeUni(52);\n height: calc(52 * 9vw/16);\n aspect-ratio: 2.6;\n\n // flex\n display: flex;\n\n .c1 {\n flex: 5;\n width: 0;\n display: flex;\n flex-direction: column;\n\n .banner {\n position: relative;\n // @include sizeUni(10);\n height: MAX(calc(10 * 9vw/16), 10vh);\n }\n\n .main {\n position: relative;\n width: auto;\n flex: 1;\n display: flex;\n\n .nav {\n max-width: calc(20 * 9vw/16);\n flex: 3;\n min-width: min-content;\n }\n\n .window {\n flex: 10;\n display: flex;\n // flex-direction: row-reverse;\n\n .content {\n position: relative;\n width: 100%;\n padding-bottom: 25%;\n }\n }\n }\n\n .bottom {\n --height: 10%;\n position: absolute;\n top: MAX(calc(100% - var(--height)), 320px);\n z-index: 1;\n height: var(--height);\n }\n }\n\n .c2 {\n position: relative;\n max-width: calc(35 * 9vw/16);\n flex: 3;\n z-index: 1;\n }\n}\n\n.fullscreen {\n opacity: 0;\n pointer-events: none;\n}\n\n/* ====overflow ctrl==== */\n\n#soup\\.exe, .body, .banner, .main, .nav, .bottom, .window { overflow: hidden; }\n\n.nav-c, .content { overflow: hidden scroll; }\n"],"file":"layout.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["layout.scss"],"names":[],"mappings":"AAAA,+EAEA,UACI,eACA,QAGJ,KACI,gBACA,WACA,sBAKJ,iBAEI,kBACA,iBACA,gCAEA,YACA,iBAGA,aAEA,yBACI,OACA,QACA,aACA,sBAEA,yCACI,kBACA,yBAGJ,qCACI,kBACA,WACA,OACA,aAEA,+CACI,kBACA,OACA,sBAGJ,qDACI,kBACA,QACA,aAEA,uEACI,kBACA,WACA,mBAKZ,yCACI,cAGA,UACA,4BAKR,yBACI,kBACA,oBACA,OACA,UAIR,YACI,UACA,oBAKJ,oEAEA","sourcesContent":["iframe, input[type=\"checkbox\"]:not(.task-list-item-checkbox), .toggle { display: none; }\n\nhtml, body {\n position: fixed;\n inset: 0;\n}\n\nhtml {\n background: #002;\n color: #aaf;\n font-family: monospace;\n}\n\n/* ==== L A Y O U T T A B L E ==== */\n\n#soup\\.exe, #pseu {\n// pos\n position: absolute;\n left: 40%; top: 45%;\n transform: translate(-40%, -45%);\n// size\n height: calc(48vw * 9/16);\n aspect-ratio: 2.8;\n\n // flex\n display: flex;\n\n .c1 {\n flex: 5;\n width: 0;\n display: flex;\n flex-direction: column;\n\n .banner {\n position: relative;\n height: MAX(calc(10vw * 9/16), 10vh);\n }\n\n .main {\n position: relative;\n width: auto;\n flex: 1;\n display: flex;\n\n .nav {\n max-width: calc(20vw * 9/16);\n flex: 3;\n min-width: min-content;\n }\n\n .window {\n position: relative;\n flex: 10;\n display: flex;\n\n .content {\n position: relative;\n width: 100%;\n padding-bottom: 25%;\n }\n }\n }\n\n .bottom {\n --height: 10%;\n // position: absolute;\n // top: MAX(calc(100% - var(--height)), 320px);\n z-index: 1;\n height: MIN(5vh, calc(100% - 40vh));\n // height: 20px;\n }\n }\n\n .c2 {\n position: relative;\n max-width: calc(35vw * 9/16);\n flex: 3;\n z-index: 1;\n }\n}\n\n.fullscreen {\n opacity: 0;\n pointer-events: none;\n}\n\n/* ====overflow ctrl==== */\n\n#soup\\.exe, .body, .banner, .main, .nav, .bottom, .window { overflow: hidden; }\n\n.content { overflow: hidden scroll; }\n"],"file":"layout.css"} \ No newline at end of file diff --git a/_site/assets/css/default/style.css b/_site/assets/css/default/style.css index f28d2f9..9d56210 100644 --- a/_site/assets/css/default/style.css +++ b/_site/assets/css/default/style.css @@ -1 +1 @@ -iframe{display:initial}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}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}template{display:none}[hidden]{display:none}:root{--color: #44d;--color-sat: #00f;--color-fade: #eef;--color-plain: #000;--color-mid: #666;--color-green: #464;--color-green-fade: #efe;--color-red: #d00;--color-red-fade: #fdd;--color-yellow: #ff0;--color-yellow-fade: #ffe;--color-miku: #4dd;--color-miku-fade: #eff;--color-magenta: #f4f;--color-magenta-fade: #fef;--color-page: #fff}#soup\.exe{border:#fff 1px solid;box-shadow:10px 10px 20px 10px #44d}#soup\.exe::-webkit-resizer{background:url(/assets/image/resizer.gif);background-size:cover}#soup\.exe,#pseu{max-height:95vh;max-width:99vw;min-height:25vh;min-width:25vw;resize:both}html{image-rendering:pixelated}html,.nav{background:url(/assets/image/bg.gif);background-color:#000;background-position:center;background-size:max(20vw,40vh)}html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:url(/assets/image/cloud.png);background-size:cover;background-position:center}html::after{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/image/rain.gif);opacity:.5}html:has(.cornerCara:not([id="0"])){background:url(/assets/image/IMG_1148.JPG);background-color:#000;background-size:contain;background-position:right}.c1 .banner{border:#000 1px solid;background:url(/assets/image/xp_.gif);background-size:20vw;box-shadow:inset 10px -10px 5px -5px #44d,inset -30px 0 30px -20px rgba(68,68,221,.6666666667),inset -90px 50px 30px -30px #fff}.c1 .banner::before,.c1 .banner::after{position:absolute;inset:0;background-repeat:no-repeat !important}.c1 .banner::before{content:"";background:url(/assets/image/banner.png);background-color:#ccf;background-size:max(90%,600px) 100% !important;background-position:40px;mix-blend-mode:hard-light;opacity:.8}.c1 .banner::after{content:"";background:url(/assets/image/bannerTxt.png);background-size:auto 100% !important;background-position:calc(100% - max(30%,20px)) !important}.c1 .main .nav{position:relative;border-inline:#44d 1px solid}.c1 .main .nav-c{position:relative;z-index:1;height:100%;text-shadow:#fff 2px 2px;mix-blend-mode:hard-light;color:#2985ff}.c1 .main .nav-c p{padding-inline:1em 0;padding-block:.5em;margin-block:0;display:flex}.c1 .main .nav-c a,.c1 .main .nav-c .urHere-i{padding-right:100%;padding-block:.5em;margin-right:-100%;margin-block:-0.5em}.c1 .main .nav-c a{position:relative;color:#38f}.c1 .main .nav-c a.urHere{pointer-events:none}.c1 .main .nav-c .urHere-i{display:inline-block}.c1 .main .nav-c p{transition:all 0s .2s,background-color .4s .2s}.c1 .main .nav-c p:hover{transition:all 0s;padding-left:20%;background-color:#ccf}.c1 .main .nav-b{position:absolute;left:-25%;height:400%;width:150%;bottom:0;mix-blend-mode:lighten;background:linear-gradient(90deg, #000, rgba(0, 0, 0, 0) 50%),repeating-linear-gradient(#f80, #f0f 25%, #0ff 37.5%, #8f0 42%, #f80 50%);filter:contrast(2) blur(10px);animation:bgScroll 10s linear infinite}@keyframes bgScroll{from{bottom:-200%}to{bottom:0}}.c1 .bottom{width:100%;background:#000}.c1 .bottom img{position:relative;top:50%;transform:translateY(-50%)}.c2-b{position:absolute;inset:0;image-rendering:pixelated;background:url(/assets/image/bg2.gif);background-color:#000;background-size:max(10vw,20vh)}.c2 .chatroom{position:absolute;inset:0;width:auto;height:auto;overflow:scroll}.c2 .chatroom .giscus{height:100%}.c2 .chatroom .giscus .giscus-frame{position:absolute;inset:0 unset}.c2 iframe[name=neolink]{position:absolute;margin:10px;bottom:0}.content{text-align:justify;text-justify:inter-ideograph;background-color:var(--color-page);padding-inline:3em 2em}.content ::selection{color:var(--color-page);background:var(--color)}.fullscreen{transition:opacity .2s .2s,top .2s,bottom .2s;position:absolute;display:flex;flex-direction:column;left:50%;top:50vh;bottom:50vh;transform:translateX(-50%);z-index:10;width:90vw;background:#d1d1f7;box-shadow:-1px -1px 0 1px #e8e8fb,0 0 0 2px #000,inset -2px -4px #a2a2ee,inset 2px 2px #fff}.fullscreen.on{transition:opacity .2s,top .2s,bottom .2s;opacity:1;pointer-events:all;top:2vh;bottom:2vh}.fullscreen .content{flex:9;padding-inline:2em calc(2em + 5vw);margin:6px;font-size:1.2rem;box-shadow:inset -2px -2px #e8e8fb,inset 2px 2px #44d}.fullscreen .bottomBar{position:relative;height:1em;margin-block:0 10px;margin-inline:6px;color:var(--color)}.fullscreen .bottomBar .left,.fullscreen .bottomBar .right{display:inline-block}.fullscreen .bottomBar .right{position:absolute;right:0}.buttonBar{height:1.5em;padding:.25em;color:#fff;background:linear-gradient(90deg, #44d 20%, #a2a2ee);text-wrap:nowrap;overflow:hidden}.buttonBar .toggle{position:absolute;display:block;top:.25em;margin-right:.5em;width:1.5em;height:1.5em;box-sizing:border-box;background:#d1d1f7;box-shadow:inset -1.5px -1.5px #44d,inset 1.5px 1.5px #fff,inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.buttonBar .toggle::before{content:"";position:absolute;top:5px;left:5px;right:6px;bottom:6px;image-rendering:pixelated;background-size:cover !important;background-repeat:no-repeat !important}.buttonBar .toggle:hover{background:#e8e8fb}.buttonBar .toggle:active{background:#d1d1f7;box-shadow:inset -1.5px -1.5px #fff,inset 1.5px 1.5px #44d,inset -3px -3px #e8e8fb,inset 3px 3px #a2a2ee}.buttonBar .toggle:active::before{top:6px;left:6px;right:5px;bottom:5px}.window .buttonBar .toggle.fullscreenTg::before{background:url(/assets/image/button/max.gif)}.fullscreen .buttonBar .toggle.fullscreenTg::before{background:url(/assets/image/button/unmax.gif)}.buttonBar .toggle.darkTg::before{background:url(/assets/image/button/dark.gif)}.buttonBar .toggle.fontTg::before{background:url(/assets/image/button/font.gif)}.window .buttonBar{position:relative;height:100%;min-width:20px;max-width:20px;padding-inline:.25em;background:#44d}.window .buttonBar .toggle{left:50%;transform:translateX(-50%)}.window .buttonBar .darkTg{top:2em}.window .buttonBar .fontTg{top:3.5em}.fullscreen .buttonBar .fullscreenTg{right:0em}.fullscreen .buttonBar .darkTg{right:1.75em}.fullscreen .buttonBar .fontTg{right:3.25em}.cornerCara,.cornerCara-b{position:fixed;bottom:-16vh;right:calc(10vw - 39vh);transform:scale(75%);z-index:-3;height:calc(100vh + 10vw);max-height:140vh;aspect-ratio:.77;filter:drop-shadow(-1vw 2vw rgba(0, 0, 0, 0.5333333333))}.cornerCara-b{transition:opacity 1s;pointer-events:none;z-index:2}.cornerCara::before{content:"";position:absolute;inset:0}#soup\.exe:hover~.cornerCara-b,#soup\.exe:active~.cornerCara-b{transition:opacity 0s;opacity:.2}.cornerCara[id="0"]+.cornerCara-b,.cornerCara[id="0"]::before{background:url(/assets/image/cornerCara/marisa0.webp);background-size:contain}.cornerCara[id="1"]+.cornerCara-b,.cornerCara[id="1"]::before{background:url(/assets/image/cornerCara/marisa1.webp);background-size:contain}.cornerCara[id="2"]+.cornerCara-b,.cornerCara[id="2"]::before{background:url(/assets/image/cornerCara/marisa2.webp);background-size:contain}.cornerCara[id="3"]+.cornerCara-b,.cornerCara[id="3"]::before{background:url(/assets/image/cornerCara/marisa3.webp);background-size:contain}.cornerCara[id="4"]+.cornerCara-b,.cornerCara[id="4"]::before{background:url(/assets/image/cornerCara/marisa4.webp);background-size:contain}.cornerCara[id="5"]+.cornerCara-b,.cornerCara[id="5"]::before{background:url(/assets/image/cornerCara/marisa5.webp);background-size:contain}.cornerCara[id="6"]+.cornerCara-b,.cornerCara[id="6"]::before{background:url(/assets/image/cornerCara/marisa6.webp);background-size:contain}.cornerCara[id="7"]+.cornerCara-b,.cornerCara[id="7"]::before{background:url(/assets/image/cornerCara/marisa7.webp);background-size:contain}.cornerCara[id="8"]+.cornerCara-b,.cornerCara[id="8"]::before{background:url(/assets/image/cornerCara/marisa8.webp);background-size:contain}.cornerCara[id="9"]+.cornerCara-b,.cornerCara[id="9"]::before{background:url(/assets/image/cornerCara/marisa9.webp);background-size:contain}.cornerCara[id="10"]+.cornerCara-b,.cornerCara[id="10"]::before{background:url(/assets/image/cornerCara/marisa10.webp);background-size:contain}.cornerCara[id="11"]+.cornerCara-b,.cornerCara[id="11"]::before{background:url(/assets/image/cornerCara/marisa11.webp);background-size:contain}.cornerCara[id="12"]+.cornerCara-b,.cornerCara[id="12"]::before{background:url(/assets/image/cornerCara/marisa12.webp);background-size:contain}.cornerCara[id="13"]+.cornerCara-b,.cornerCara[id="13"]::before{background:url(/assets/image/cornerCara/marisa13.webp);background-size:contain}.cornerCara[id="14"]+.cornerCara-b,.cornerCara[id="14"]::before{background:url(/assets/image/cornerCara/marisa14.webp);background-size:contain}.cornerCara[id="15"]+.cornerCara-b,.cornerCara[id="15"]::before{background:url(/assets/image/cornerCara/marisa15.webp);background-size:contain}.cornerCara{background:url(/assets/image/cornerCara/marisaB_.webp);background-size:120%;background-position:-40% -40%;image-rendering:pixelated}.ibm,.ibm-b{position:absolute;right:calc(10vw - 39vh);bottom:0;z-index:-1;pointer-events:visible;transform:translateX(-20%);height:calc(25vh + 2.5vw);max-height:35vh;aspect-ratio:2}.ibm-b{mix-blend-mode:darken}.vid{position:absolute;display:none;right:-38%;bottom:-55%;transform:scale(0.17, 0.23) rotate(8deg) skew(3deg);width:170%;aspect-ratio:16/9;pointer-events:none;background:#fff}@keyframes flicker{0%{opacity:.65}50%{opacity:.65}50.1%{opacity:.5}100%{opacity:.5}}.vid iframe{position:absolute;width:100%;height:100%;z-index:10;inset:0}.mask:has(input:checked)~.vid{display:block;animation:flicker .05s linear infinite}.pc{transition:visibility 0s 1s,opacity 1s;visibility:hidden}.pc-b{transition:opacity 1s;z-index:1}.pc,.pc-b{position:absolute;right:8%;bottom:0%;width:75%;aspect-ratio:1.63;pointer-events:none;background:url(/assets/image/ibm.png);background-size:cover}.pc::before,.pc-b::before{position:absolute;left:35%;top:45%;width:50%;z-index:20;transform:rotate(9deg) skew(7deg);font-size:3.2vh}#soup\.exe:hover~.ibm-b .pc,#soup\.exe:active~.ibm-b .pc{transition:visibility 0s;visibility:visible}#soup\.exe:hover~.ibm .pc-b,#soup\.exe:active~.ibm .pc-b{transition:0s;opacity:0}.mask{position:absolute;display:block;right:32.7%;bottom:20%;z-index:1;transform:rotate(11deg) skew(7deg);width:28%;aspect-ratio:1.34;background:url(/assets/image/rainbowDither.png);background-size:4vw;opacity:0;mix-blend-mode:darken;animation:maskScroll 1s linear infinite}@keyframes maskScroll{0%{background-position:0}100%{background-position:8vw}}.mask:has(input:checked){opacity:.3}.mask:not(:has(input:checked))~.pc-b::before,.ibm-b:not(:has(~.ibm .mask input:checked)) .pc::before{color:#fff}.mask:not(:has(input:checked))~.pc-b::before,.ibm-b:not(:has(~.ibm .mask input:checked)) .pc::before{content:"Power off";filter:drop-shadow(0 0 5px #fff)}#soup\.exe,.fullscreen{cursor:url(/assets/image/cursor/hat.gif),auto !important}a,button,label,.cornerCara{animation:wonderCursor .5s infinite}@keyframes wonderCursor{0%{cursor:url(/assets/image/cursor/hatq1.gif),auto}25%{cursor:url(/assets/image/cursor/hatq2.gif),auto}50%{cursor:url(/assets/image/cursor/hatq3.gif),auto}75%{cursor:url(/assets/image/cursor/hatq4.gif),auto}100%{cursor:url(/assets/image/cursor/hatq5.gif),auto}}canvas{transition:.5s;opacity:.5;z-index:-2;image-rendering:pixelated}#soup\.exe:hover~canvas,#soup\.exe:active~canvas{opacity:0;animation:hideCanvas .5s linear forwards}@keyframes hideCanvas{0%{visibility:visible}100%{visibility:hidden}}.window ::-webkit-scrollbar,.fullscreen ::-webkit-scrollbar{width:24px}.window ::-webkit-scrollbar:horizontal,.fullscreen ::-webkit-scrollbar:horizontal{height:24px}.window ::-webkit-scrollbar-corner,.fullscreen ::-webkit-scrollbar-corner{background:#d1d1f7;box-shadow:inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.window ::-webkit-scrollbar-track,.fullscreen ::-webkit-scrollbar-track{background:url(/assets/image/scrollbar/bg.png);background-size:4px}.window ::-webkit-scrollbar-thumb,.fullscreen ::-webkit-scrollbar-thumb{background:#d1d1f7;box-shadow:inset -1.5px -1.5px #44d,inset 1.5px 1.5px #fff,inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.window ::-webkit-scrollbar-button,.fullscreen ::-webkit-scrollbar-button{background-size:cover !important}.window ::-webkit-scrollbar-button:horizontal:start:decrement,.window ::-webkit-scrollbar-button:horizontal:end:increment,.window ::-webkit-scrollbar-button:vertical:start:decrement,.window ::-webkit-scrollbar-button:vertical:end:increment,.fullscreen ::-webkit-scrollbar-button:horizontal:start:decrement,.fullscreen ::-webkit-scrollbar-button:horizontal:end:increment,.fullscreen ::-webkit-scrollbar-button:vertical:start:decrement,.fullscreen ::-webkit-scrollbar-button:vertical:end:increment{display:block}.window ::-webkit-scrollbar-button:vertical,.fullscreen ::-webkit-scrollbar-button:vertical{height:24px}.window ::-webkit-scrollbar-button:vertical:start,.fullscreen ::-webkit-scrollbar-button:vertical:start{background:url(/assets/image/scrollbar/up.png)}.window ::-webkit-scrollbar-button:vertical:end,.fullscreen ::-webkit-scrollbar-button:vertical:end{background:url(/assets/image/scrollbar/down.png)}.window ::-webkit-scrollbar-button:horizontal,.fullscreen ::-webkit-scrollbar-button:horizontal{width:24px}.window ::-webkit-scrollbar-button:horizontal:start,.fullscreen ::-webkit-scrollbar-button:horizontal:start{background:url(/assets/image/scrollbar/left.png)}.window ::-webkit-scrollbar-button:horizontal:end,.fullscreen ::-webkit-scrollbar-button:horizontal:end{background:url(/assets/image/scrollbar/right.png)}html{color:#000;text-underline-offset:25%}.content{color:var(--color) !important}.content>p:not([class],:has(img)):after{content:"湯";position:relative;display:inline-block;padding-left:.3em;line-height:.5em;opacity:.5;font-size:.7em;color:var(--color-red);transform:rotate(15deg);white-space:pre}a{position:relative;color:var(--color-miku)}a::after{content:"";position:absolute;inset:-0.5em}a::selection,a ::selection{background:var(--color-miku) !important}[norm]{color:var(--color-miku);text-decoration:underline}h1,.fake.h1{font-weight:bolder}h2,.fake.h2{font-weight:bolder}h3,.fake.h3{font-weight:bolder}h4,.fake.h4{font-weight:bolder}h5,.fake.h5{font-weight:normal}h6,.fake.h6{font-weight:normal}h4,.fake.h4{font-style:italic}h6,.fake.h6{font-style:italic}h1{margin-top:1em}:first-child~h1{margin-top:2em}h2{margin-top:1em}:first-child~h2{margin-top:2em}h3{margin-top:1em}:first-child~h3{margin-top:2em}h4{margin-top:1em}:first-child~h4{margin-top:2em}h5{margin-top:1em}:first-child~h5{margin-top:2em}h6{margin-top:1em}:first-child~h6{margin-top:2em}h1,.fake.h1{margin-bottom:1em}h2,.fake.h2{margin-bottom:1em}h3,.fake.h3{margin-bottom:.5em}h4,.fake.h4{margin-bottom:.5em}h5,.fake.h5{margin-bottom:.5em}h6,.fake.h6{margin-bottom:.5em}h1+h1{margin-top:0 !important}h1+h2{margin-top:0 !important}h1+h3{margin-top:0 !important}h1+h4{margin-top:0 !important}h1+h5{margin-top:0 !important}h1+h6{margin-top:0 !important}h2+h1{margin-top:0 !important}h2+h2{margin-top:0 !important}h2+h3{margin-top:0 !important}h2+h4{margin-top:0 !important}h2+h5{margin-top:0 !important}h2+h6{margin-top:0 !important}h3+h1{margin-top:0 !important}h3+h2{margin-top:0 !important}h3+h3{margin-top:0 !important}h3+h4{margin-top:0 !important}h3+h5{margin-top:0 !important}h3+h6{margin-top:0 !important}h4+h1{margin-top:0 !important}h4+h2{margin-top:0 !important}h4+h3{margin-top:0 !important}h4+h4{margin-top:0 !important}h4+h5{margin-top:0 !important}h4+h6{margin-top:0 !important}h5+h1{margin-top:0 !important}h5+h2{margin-top:0 !important}h5+h3{margin-top:0 !important}h5+h4{margin-top:0 !important}h5+h5{margin-top:0 !important}h5+h6{margin-top:0 !important}h6+h1{margin-top:0 !important}h6+h2{margin-top:0 !important}h6+h3{margin-top:0 !important}h6+h4{margin-top:0 !important}h6+h5{margin-top:0 !important}h6+h6{margin-top:0 !important}.content a::before{content:"¥目标: 127.0.0.1" attr(pageurl) attr(href) attr(t) !important}.content a[target=_blank]::before{content:"¥目标: " attr(href) attr(t) !important}h1{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h2{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h3{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h4{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h5{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h6{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h1{border-bottom:var(--color) 3px solid}h2{border-bottom:var(--color) 3px dashed}h3{border-bottom:var(--color) 3px dotted}h4{border-bottom:var(--color) 3px dotted}h4{width:max-content}h5{width:max-content}h6{width:max-content}h1[id]{--notify: "--> 点击复制标题链接"}h1[id]::before,h1[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h2[id]{--notify: "--> 点击复制标题链接"}h2[id]::before,h2[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h3[id]{--notify: "--> 点击复制标题链接"}h3[id]::before,h3[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h4[id]{--notify: "--> 点击复制标题链接"}h4[id]::before,h4[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h5[id]{--notify: "--> 点击复制标题链接"}h5[id]::before,h5[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h6[id]{--notify: "--> 点击复制标题链接"}h6[id]::before,h6[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h1[id]::before,h1[id]::after{display:block}h1[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h1[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h1[id]:active{background:var(--color);color:var(--color-page)}h1[id]:active::after{content:""}h1[id]:active::selection,h1[id]:active ::selection{color:var(--color);background:var(--color-page)}h2[id]::before,h2[id]::after{display:block}h2[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h2[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h2[id]:active{background:var(--color);color:var(--color-page)}h2[id]:active::after{content:""}h2[id]:active::selection,h2[id]:active ::selection{color:var(--color);background:var(--color-page)}h3[id]::before,h3[id]::after{display:block}h3[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h3[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h3[id]:active{background:var(--color);color:var(--color-page)}h3[id]:active::after{content:""}h3[id]:active::selection,h3[id]:active ::selection{color:var(--color);background:var(--color-page)}h4[id]::after{content:" #" attr(id) " " " "}h4[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h4[id]:active{background:var(--color);color:var(--color-page)}h4[id]:active::before{content:""}h5[id]::after{content:" #" attr(id) " " " "}h5[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h5[id]:active{background:var(--color);color:var(--color-page)}h5[id]:active::before{content:""}h6[id]::after{content:" #" attr(id) " " " "}h6[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h6[id]:active{background:var(--color);color:var(--color-page)}h6[id]:active::before{content:""}ul{list-style-type:"☆ "}ul ::marker{font-weight:bolder;color:var(--color-magenta)}ul ul{list-style-type:hebrew}ul ul ::marker{font-size:1em}ul ul ul{list-style-type:"。 "}ul ul ul ::marker{font-size:.7em}ul ul ul ul ::marker{font-size:.62em}ul ul ul ul ul{list-style-type:"· "}li{margin-bottom:.5em}ul{margin-top:.5em}ul.task-list{list-style-type:"- "}input.task-list-item-checkbox{position:relative;margin-right:.5em;visibility:hidden}input.task-list-item-checkbox::before{content:"";position:absolute;inset:0;background:url(/assets/image/button/unchecked.gif);background-size:cover;visibility:visible}input.task-list-item-checkbox:checked::before{background:url(/assets/image/button/checked.gif);background-size:cover}:not(pre)>code{color:var(--color-mid);margin-inline:.5em}:not(pre)>code::before,:not(pre)>code::after{content:"/";font-family:"fusion",monospace;margin-inline:.2em}.content img{-webkit-user-drag:none}p:has(img:not(.icon)){position:relative;display:block;width:60%;max-width:100%;padding:.5em 4em .75em .75em;margin-block:2em;overflow:auto;resize:both;text-align:center;border:var(--color) 2px dotted}.window p:has(img:not(.icon)){max-height:max(20vh,8em)}.window .content>p:has(img:not(.icon)){max-height:max(100%,8em)}.fullscreen p:has(img:not(.icon)){max-height:max(50vh,8em)}p:has(img:not(.icon)) img:not(.icon){position:relative;height:auto;width:auto;box-sizing:border-box;min-width:max(10em,100%);max-width:100%;margin-top:.25em;border:var(--color-fade) 4px solid}p:has(img:not(.icon)) img:not(.icon):hover{border-color:var(--color)}p:has(img:not(.icon)):has(img:not(.icon):active){position:fixed;inset:0;left:50%;transform:translateX(-50%);z-index:201;max-width:unset;max-height:unset;overflow:hidden;resize:none;border:none}p:has(img:not(.icon)):has(img:not(.icon):active) img:not(.icon){top:50%;transform:translateY(-50%);max-height:100%;min-width:100%;object-fit:contain;border:none}.content:has(p img:not(.icon):active)::after{content:"";position:fixed;inset:-2px;background:rgba(0,0,0,.6666666667);z-index:200}.content:has(~.buttonBar .darkTg input:checked){background:rgba(0,0,0,.5333333333) !important}.buttonBar:has(.darkTg input:checked)~.content,.content:has(~.buttonBar .darkTg input:checked){--color: #aaf;--color-fade: #224;--color-plain: #fff;--color-mid: #aaa;--color-green: #aca;--color-green-fade: #232;--color-red: #faa;--color-red-fade: #422;--color-yellow-fade: #662;--color-miku-fade: #066;--color-magenta-fade: #626;--color-page: #002}.fullscreen:has(.darkTg input:checked){background:#338;box-shadow:-1px -1px 0 1px #aaf,0 0 0 2px #44d,inset -2px -4px #224,inset 2px 2px #000}.fullscreen:has(.darkTg input:checked) .buttonBar{background:linear-gradient(90deg, #44d 20%, #000)}.fullscreen:has(.darkTg input:checked) .content{box-shadow:inset -2px -2px #224,inset 2px 2px #aaf}.fullscreen:has(.darkTg input:checked) .bottomBar{color:#fff}.window:has(.darkTg input:checked) ::-webkit-scrollbar-thumb,.fullscreen:has(.darkTg input:checked) ::-webkit-scrollbar-thumb{background:#338;box-shadow:inset -1.5px -1.5px #000,inset 1.5px 1.5px #aaf,inset -3px -3px #224,inset 3px 3px #44d}html{font-family:"fusion",monospace}html:has(.fontTg input:checked){font-family:"ibm",monospace}code,kbd,samp{font-family:"ibm",monospace}html:has(.fontTg input:checked) code,html:has(.fontTg input:checked) kbd,html:has(.fontTg input:checked) samp{font-family:"ibm",monospace}@font-face{font-family:"fusion";font-display:swap;src:url(/assets/font/fusion-pixel-10px-monospaced-zh_hant.ttf)}@font-face{font-family:"ibm";font-display:swap;src:url(/assets/font/IBM3161.ttf)}.highlight .hll{background-color:#ffc}.highlight .c{color:#080;font-style:italic}.highlight .err{border:1px solid red}.highlight .k{color:#a2f;font-weight:bold}.highlight .cm{color:#080;font-style:italic}.highlight .cp{color:#080}.highlight .c1{color:#080;font-style:italic}.highlight .cs{color:#080;font-weight:bold}.highlight .gd{color:#a00000}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:navy;font-weight:bold}.highlight .gi{color:#00a000}.highlight .go{color:gray}.highlight .gp{color:navy;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:purple;font-weight:bold}.highlight .gt{color:#0040d0}.highlight .kc{color:#a2f;font-weight:bold}.highlight .kd{color:#a2f;font-weight:bold}.highlight .kn{color:#a2f;font-weight:bold}.highlight .kp{color:#a2f}.highlight .kr{color:#a2f;font-weight:bold}.highlight .kt{color:#0b0;font-weight:bold}.highlight .s{color:#b44}.highlight .na{color:#b44}.highlight .nb{color:#a2f}.highlight .nc{color:blue}.highlight .no{color:#800}.highlight .nd{color:#a2f}.highlight .ni{color:#999;font-weight:bold}.highlight .ne{color:#d2413a;font-weight:bold}.highlight .nf{color:#00a000}.highlight .nl{color:#a0a000}.highlight .nn{color:blue;font-weight:bold}.highlight .nt{color:green;font-weight:bold}.highlight .nv{color:#b8860b}.highlight .ow{color:#a2f;font-weight:bold}.highlight .w{color:#bbb}.highlight .sb{color:#b44}.highlight .sc{color:#b44}.highlight .sd{color:#b44;font-style:italic}.highlight .s2{color:#b44}.highlight .se{color:#b62;font-weight:bold}.highlight .sh{color:#b44}.highlight .si{color:#b68;font-weight:bold}.highlight .sx{color:green}.highlight .sr{color:#b68}.highlight .s1{color:#b44}.highlight .ss{color:#b8860b}.highlight .bp{color:#a2f}.highlight .vc{color:#b8860b}.highlight .vg{color:#b8860b}.highlight .vi{color:#b8860b}em:not(.i)[class],em:not(.i)[r],em:not(.i)[t],em:not(.i)[norm],em:not(.i)[reveal]{font-style:normal}h1,h2,h3,h4,h5,h6,.fake{--s: 1 }.big{--s: 1.25}.bigger{--s: 1.5}.small{--s: .75}.smaller{--s: .5}.size:not(h1,h2,h3,h4,h5,h6,.fake),.big:not(h1,h2,h3,h4,h5,h6,.fake),.bigger:not(h1,h2,h3,h4,h5,h6,.fake),.small:not(h1,h2,h3,h4,h5,h6,.fake),.smaller:not(h1,h2,h3,h4,h5,h6,.fake){font-size:calc(var(--s)*1em)}h1,.fake.h1{font-size:calc(2em*var(--s))}h2,.fake.h2{font-size:calc(1.6em*var(--s))}h3,.fake.h3{font-size:calc(1.2em*var(--s))}h4,.fake.h4{font-size:calc(1.2em*var(--s))}h5,.fake.h5{font-size:calc(1.2em*var(--s))}h6,.fake.h6{font-size:calc(1.2em*var(--s))}.l,.c,.r{--ofs: 0;position:relative;display:block;width:100%;transform:translateX(--ofs)}.l{text-align:left;left:0}.c{text-align:center}.r{text-align:right;right:0}p:has(>.c),p:has(>.r),h1:has(>.c),h1:has(>.r),h2:has(>.c),h2:has(>.r),h3:has(>.c),h3:has(>.r),h4:has(>.c),h4:has(>.r),h5:has(>.c),h5:has(>.r),h6:has(>.c),h6:has(>.r){width:100%}.u,.ovl,del,.dll,.u.ovl{text-decoration-color:var(--lc);text-decoration-thickness:var(--lt)}.u.-d,.ovl.-d,del.-d,.dll.-d,.u.ovl.-d{text-decoration-style:dashed}.u.-do,.ovl.-do,del.-do,.dll.-do,.u.ovl.-do{text-decoration-style:dotted}.u.-db,.ovl.-db,del.-db,.dll.-db,.u.ovl.-db{text-decoration-style:double}.u.-w,.ovl.-w,del.-w,.dll.-w,.u.ovl.-w{text-decoration-style:wavy}.u{text-decoration-line:underline}.ovl{text-decoration-line:overline}del,.dll{text-decoration-line:line-through}.u.ovl{text-decoration-line:underline overline}del.u,.dll.u{text-decoration-line:line-through underline}del.ovl,.dll.ovl{text-decoration-line:line-through overline}del.u.ovl,.dll.u.ovl{text-decoration-line:line-through underline overline}.white{color:#fff}.hwhite{background-color:#fff}.bwhite{--bw: 2px;border:#fff solid var(--bw)}.silver{color:silver}.hsilver{background-color:silver}.bsilver{--bw: 2px;border:silver solid var(--bw)}.gray{color:gray}.hgray{background-color:gray}.bgray{--bw: 2px;border:gray solid var(--bw)}.black{color:#000}.hblack{background-color:#000}.bblack{--bw: 2px;border:#000 solid var(--bw)}.red{color:red}.hred{background-color:red}.bred{--bw: 2px;border:red solid var(--bw)}.maroon{color:maroon}.hmaroon{background-color:maroon}.bmaroon{--bw: 2px;border:maroon solid var(--bw)}.yellow{color:#ff0}.hyellow{background-color:#ff0}.byellow{--bw: 2px;border:#ff0 solid var(--bw)}.olive{color:olive}.holive{background-color:olive}.bolive{--bw: 2px;border:olive solid var(--bw)}.lime{color:lime}.hlime{background-color:lime}.blime{--bw: 2px;border:lime solid var(--bw)}.green{color:green}.hgreen{background-color:green}.bgreen{--bw: 2px;border:green solid var(--bw)}.aqua{color:aqua}.haqua{background-color:aqua}.baqua{--bw: 2px;border:aqua solid var(--bw)}.teal{color:teal}.hteal{background-color:teal}.bteal{--bw: 2px;border:teal solid var(--bw)}.blue{color:blue}.hblue{background-color:blue}.bblue{--bw: 2px;border:blue solid var(--bw)}.navy{color:navy}.hnavy{background-color:navy}.bnavy{--bw: 2px;border:navy solid var(--bw)}.fuchsia{color:#f0f}.hfuchsia{background-color:#f0f}.bfuchsia{--bw: 2px;border:#f0f solid var(--bw)}.purple{color:purple}.hpurple{background-color:purple}.bpurple{--bw: 2px;border:purple solid var(--bw)}.hwhite,.bwhite{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hsilver,.bsilver{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hgray,.bgray{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hblack,.bblack{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hred,.bred{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hmaroon,.bmaroon{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hyellow,.byellow{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.holive,.bolive{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hlime,.blime{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hgreen,.bgreen{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.haqua,.baqua{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hteal,.bteal{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hblue,.bblue{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hnavy,.bnavy{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hfuchsia,.bfuchsia{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.hpurple,.bpurple{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.h{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd));color:#44d;background:var(--color-yellow)}.ant{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.ant::before{--bw: 2px;border:1px dashed #000;border-image:url(/assets/image/ants.gif) 1 repeat}[r]{position:relative;display:inline-block;text-align:center}[r]::before{content:attr(r);position:relative;left:50%;transform:translateX(-50%);display:block;font-size:.75em}.del{position:relative}.del::after{content:"";position:absolute;inset:-2px -1px;background:var(--color);pointer-events:none}.del:hover::after{opacity:.2}.blur{filter:blur(0.1em)}.blurrier{filter:blur(0.25em)}.blur,.blurrier{transition:filter .2s}.blur:hover,.blurrier:hover{filter:blur(0)}[reveal]{position:relative;display:inline-block;line-height:0;text-decoration:dashed underline}[reveal]:hover{visibility:hidden}[reveal]:hover::after{content:attr(reveal);display:block;visibility:visible;font-style:italic}[t]{text-decoration:dotted underline}[t]::before{content:attr(t)}.content a::before{content:"¥目标: {{ site.url }}" attr(href) attr(t)}.del:not([t])::before,.blur::before,.blurrier::before{content:"你知道的太多了。"}[t],a,.del{position:relative}[t]::before,a::before,.del::before{transition:.2s .4s;pointer-events:none;position:absolute;left:0;top:.5em;z-index:10;font-size:max(.5em,.75rem);width:max-content;max-width:25vw;padding:.2em .5em;background:var(--color-page);opacity:0}[t]:hover::before,a:hover::before,.del:hover::before{transition:0s;top:1.5em;opacity:1 !important}[t],a,.del{--tc: var(--color)}[t]::before,a::before,.del::before{color:var(--tc);border:var(--tc) solid 2px;box-shadow:4px 4px var(--tc)}.footnote::before{line-height:1em;visibility:visible !important}a::before{transition:.2s;position:fixed;bottom:0;top:unset;max-width:unset}a:hover::before{top:unset}.above[t]::before{bottom:.5em;top:unset}.above[t]:hover::before{bottom:1.5em}a.ab,#markdown-toc li>a,#f_markdown-toc li>a{display:block;right:0;text-decoration:none;transition:0s .2s}a.ab::after,#markdown-toc li>a::after,#f_markdown-toc li>a::after{transition:opacity 0s .4s;inset:-0.2em 0;box-sizing:border-box;border-bottom:3px solid;border-image:linear-gradient(90deg, var(--color-miku), rgba(0, 0, 0, 0)) 1;opacity:0}a.ab:hover,#markdown-toc li>a:hover,#f_markdown-toc li>a:hover{transition:0s;padding-left:.5em;letter-spacing:.2em}a.ab:hover::after,#markdown-toc li>a:hover::after,#f_markdown-toc li>a:hover::after{transition:0s;opacity:1}table{--tbc: var(--color);--tbtc: var(--color);position:relative;z-index:1;color:var(--tbtc);border-collapse:collapse;margin-block:1em}table::before,table td,table th{padding-block:.2em;padding-inline:.5em}table[h]::before{content:attr(h);position:relative;display:table-caption;bottom:-1px}table.i{display:inline-table}table.t{box-shadow:2px 2px var(--tbc)}table.t thead,table.t tbody,table.t td:first-child,table.t tfoot{border:2px solid;border-color:var(--tbc)}table.t td:first-child{border-block-width:0}table.t::before,table.t thead,table.t td:first-child{font-weight:bolder;text-align:center}table.t tr:nth-child(even) td:not(:first-child){position:relative}table.t tr:nth-child(even) td:not(:first-child)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tbc);opacity:.3}table.t::before{background:var(--tbc);color:var(--color-page);box-shadow:2px 2px var(--tbc)}table.ts thead,table.ts tbody,table.ts tr :first-child,table.ts tfoot{border:0 solid;border-color:var(--tbc)}table.ts thead{border-bottom-width:2px}table.ts tbody:not(:first-child),table.ts tfoot{border-top-width:2px}table.ts tr :first-child{border-right-width:2px}table.ts::before{padding-block:.5em;font-weight:bolder;text-align:center}.content>blockquote,:not(blockquote)>blockquote{margin-block:1em}blockquote{margin-right:1em}blockquote>p:first-child{margin-top:0}blockquote>p:last-child{margin-bottom:0}blockquote.info,blockquote.note,blockquote.warn{display:block;position:relative;width:max-content;max-width:100%;padding-inline:2.5em .5em;padding-block:.5em;margin-left:0}blockquote.info::before,blockquote.note::before,blockquote.warn::before{position:absolute;left:0;top:.37em;padding-inline:.5em;font-size:1.2em}blockquote.info>blockquote,blockquote.note>blockquote,blockquote.warn>blockquote{margin-left:0}blockquote.info{background:var(--color-fade);border:var(--color) 3px solid;box-shadow:4px 4px var(--color);color:var(--color)}blockquote.info::before{content:"ⓘ"}blockquote.note{background:var(--color-green-fade);border:var(--color-green) 3px solid;box-shadow:4px 4px var(--color-green);color:var(--color-green)}blockquote.note::before{content:"ⓘ"}blockquote.warn{background:var(--color-red-fade);border:var(--color-red) 3px solid;box-shadow:4px 4px var(--color-red);color:var(--color-red)}blockquote.warn::before{content:"⚠";top:.3em;font-size:1.4em;font-weight:normal;padding-inline:.4em}blockquote.layer,blockquote.layer blockquote:not([class]){transition:border-color .4s;padding:.5em;box-shadow:-3px 0 var(--color);border:rgba(0,0,0,0) 3px solid;border-left-width:0px}blockquote.layer:hover,blockquote.layer blockquote:not([class]):hover{transition:border-color 0s;border-color:var(--color)}blockquote.layer:hover,blockquote.layer>blockquote:not([class]):hover{box-shadow:-3px 0 var(--color),3px 3px var(--color)}blockquote.layer blockquote:not([class]){margin:0 .3em}em[norm]{position:relative}em[norm]::before{content:attr(norm)}em[norm] sup[role=doc-noteref]{top:unset;position:static}em[norm] sup[role=doc-noteref] .footnote{position:absolute;inset:0;color:rgba(0,0,0,0)}.footnote{color:var(--color-red)}.footnotes{position:relative;margin-top:4em;padding-top:1em}.footnotes::before,.footnotes ol li::after{content:"";position:absolute;width:100%;height:.25em}.footnotes::before{top:0;border-block:var(--color) 2px solid}.footnotes ol{margin:0}.footnotes ol li[role=doc-endnote]:has(+li){position:relative;margin-bottom:2em;padding-bottom:2em}.footnotes ol li[role=doc-endnote]:has(+li)::after{width:calc(100% + 40px);bottom:0;left:-40px;border-block:var(--color) 2px dashed}.footnotes p:has(.reversefootnote){display:inline-block}hr{border:none;border-block:2px var(--color) solid;height:.2em;margin-block:2em}hr.break{height:1px;opacity:0;border:none !important}.rainbow{--rspd: 1s;--rbgsz: 4em}.rainbow,.rainbow *,.rainbow ::before{image-rendering:pixelated;background:url(/assets/image/rainbowDither.png),url(/assets/image/rainbowDither.png);background-size:var(--rbgsz);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0);animation:rainbowScroll var(--rspd) linear infinite}@keyframes rainbowScroll{0%{background-position:0}100%{background-position:var(--rbgsz)}}.rainbow.cmy,.rainbow.cmy *{background-image:url(/assets/image/rainbowDither_.png),url(/assets/image/rainbowDither_.png)}.rainbow.fancy{--rs: .1em;--rsc: var(--color-sat);filter:drop-shadow(0.05em -0.05em var(--rsc)) drop-shadow(-0.05em 0.05em var(--rsc)) drop-shadow(var(--rs) var(--rs) var(--rsc))}.rainbow.fancy2{--rs: .1em;--rsc: var(--color-sat);filter:drop-shadow(0.05em 0.05em var(--color-sat)) drop-shadow(0.1em 0.1em var(--color-page)) drop-shadow(0.1em 0.1em #dd4) drop-shadow(0.1em 0.1em #4dd) drop-shadow(0.1em 0.1em #d4d) drop-shadow(0.05em -0.05em var(--rsc)) drop-shadow(-0.05em 0.05em var(--rsc))}.shadow{--sdd: .25em;--sbr: 2px;--sdc: var(--color);text-shadow:var(--sdd) var(--sdd) var(--sbr) var(--sdc)}.projection{--pdd: .33em;--pdc: var(--color-plain);text-shadow:1px 1px var(--color-page),var(--pdd) var(--pdd) var(--pdc);padding-bottom:.2em}.echo{--h: 1;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,.8em,0em}.echo-down{--h: 0;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,0em}.echo-down-left{--h: -1;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,.8em}.echo-left{--h: -1;--v: 0;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,0em,.8em}.echo-up-left{--h: -1;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,.8em}.echo-up{--h: 0;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,0em}.echo-up-right{--h: 1;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,.8em,0em,0em}.echo-right{--h: 1;--v: 0;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,0em,0em}.echorb{--h: 1;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,.8em,0em}.echorb-down{--h: 0;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,0em}.echorb-down-left{--h: -1;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,.8em}.echorb-left{--h: -1;--v: 0;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,0em,.8em}.echorb-up-left{--h: -1;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,.8em}.echorb-up{--h: 0;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,0em}.echorb-up-right{--h: 1;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,.8em,0em,0em}.echorb-right{--h: 1;--v: 0;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,0em,0em}.stroke.echo{--h: 1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,.8em,0em}.stroke.echo-down{--h: 0;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,0em}.stroke.echo-down-left{--h: -1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,.8em}.stroke.echo-left{--h: -1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,0em,.8em}.stroke.echo-up-left{--h: -1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,.8em}.stroke.echo-up{--h: 0;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,0em}.stroke.echo-up-right{--h: 1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,.8em,0em,0em}.stroke.echo-right{--h: 1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,0em,0em}.stroke.echorb{--h: 1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,.8em,0em}.stroke.echorb-down{--h: 0;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,0em}.stroke.echorb-down-left{--h: -1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,.8em}.stroke.echorb-left{--h: -1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,0em,.8em}.stroke.echorb-up-left{--h: -1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,.8em}.stroke.echorb-up{--h: 0;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,0em}.stroke.echorb-up-right{--h: 1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,.8em,0em,0em}.stroke.echorb-right{--h: 1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,0em,0em}.stroke{--std: 1px;--stc: var(--color);color:var(--color-page);text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc)}.stroke.shadow{text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),var(--sdd) var(--sdd) var(--sdc)}.mirror{transform:scaleX(-1)}.upsdown{transform:scaleY(-1)}.mirror,.upsdown{display:inline-block}.blink{--bt: 2s;animation:blink var(--bt) steps(1, end) infinite forwards}.fadeinout{--ft: 2s;animation:blink var(--ft) linear infinite}@keyframes blink{50%{opacity:0}}.rumble{--rt: .05s;animation:rumble var(--rt) linear infinite alternate}.shudder{--st: .05s;animation:shudder var(--st) linear infinite alternate}.rumble,.shudder{display:inline-block}@keyframes rumble{100%{transform:translateY(-0.2em)}}@keyframes shudder{100%{transform:translateX(0.2em)}}.sparkle:not(.rainbow){background:url(/assets/image/sparkle.gif) repeat;background-size:10em}.sparkle.rainbow{position:relative}.sparkle.rainbow::before{content:"";position:absolute;inset:0;background:url(/assets/image/sparkle.gif) repeat;background-size:10em}.rotate{--rspd: 4s;--ofst-x: 0%;--ofst-y: 0%;--rphs: 0;--rheit: 2em;display:inline-block;transform-origin:calc(50% + var(--ofst-x)) calc(50% + var(--ofst-y));width:max-content;margin-block:calc(var(--rheit)/2);padding:0;animation:rotate var(--rspd) linear calc(var(--rspd)*var(--rphs)*-1) infinite}.rotate.rev{animation-direction:reverse}.rotate.c{transform:translateY(50%);animation-name:rotateCentered;left:50%;transform:translateX(-50%)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rotateCentered{0%{transform:translateX(-50%) rotate(0)}100%{transform:translateX(-50%) rotate(360deg)}}.pulse{--pspd: .25s;--pscl: 1.2;--pphs: 0;--s: 1;display:inline-block;font-size:calc(var(--pscl)*1em);animation:pulse var(--pspd) ease-out calc(var(--pspd)*var(--pphs)*-1) infinite alternate}@keyframes pulse{0%{scale:calc(1/var(--pscl))}100%{scale:1}}#oneko{position:fixed;left:16px;top:16px;width:32px;height:32px;z-index:2533;background:url(/assets/neko/oneko_sakura.gif);image-rendering:pixelated;opacity:.7;pointer-events:none}/*# sourceMappingURL=style.css.map */ \ No newline at end of file +iframe{display:initial}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}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}template{display:none}[hidden]{display:none}:root{--color: #44d;--color-sat: #00f;--color-fade: #eef;--color-plain: #000;--color-mid: #666;--color-green: #464;--color-green-fade: #efe;--color-red: #d00;--color-red-fade: #fee;--color-yellow: #ff0;--color-yellow-fade: #ffe;--color-miku: #4dd;--color-miku-fade: #eff;--color-magenta: #f4f;--color-magenta-fade: #fef;--color-page: #fff}#soup\.exe{border:#fff 1px solid;box-shadow:10px 10px 20px 10px #44d}#soup\.exe::-webkit-resizer{background:url(/assets/image/resizer.gif);background-size:cover}#soup\.exe,#pseu{max-height:95vh;max-width:99vw;min-height:25vh;min-width:25vw;resize:both}html{image-rendering:pixelated}html{background:url(/assets/image/bg.gif);background-color:#000;background-position:center;background-size:max(20vw,40vh)}html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:url(/assets/image/cloud.png);background-size:cover;background-position:center}html::after{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/image/rain.gif);opacity:.5}html:has(.cornerCara:not([id="0"])){background:url(/assets/image/IMG_1148.JPG);background-color:#000;background-size:contain;background-position:right}.c1 .banner{border:#000 1px solid;background:url(/assets/image/xp_.gif);background-size:20vw;background:url(https://64.media.tumblr.com/1b8577d77a572535172d95b5bb0a070b/tumblr_inline_n25dksRrdF1qhwjx8.gif);background-size:cover;background-position-y:6 0%;box-shadow:inset 10px -10px 5px -5px #44d,inset -30px 0 30px -20px rgba(68,68,221,.6666666667),inset -90px 50px 30px -30px #fff}.c1 .banner::before,.c1 .banner::after{position:absolute;inset:0;background-repeat:no-repeat !important}.c1 .banner::before{content:"";background:url(/assets/image/banner.png);background-color:#ccf;background-size:max(90%,600px) 100% !important;background-position:40px;mix-blend-mode:hard-light;opacity:.8}.c1 .banner::after{content:"";background:url(/assets/image/bannerTxt.png);background-size:auto 100% !important;background-position:calc(100% - max(20%,20px)) !important}.c1 .main .nav{position:relative;z-index:100;background:#d1d1f7 url(https://64.media.tumblr.com/c63ab1ff7f79b9d030a8a3a14f3535ec/tumblr_inline_mveh0uIwTZ1rfdbtm.png);background-position:bottom right}.c1 .main .nav nav{position:relative;z-index:-1}.c1 .main .nav nav p{padding-inline:1em;padding-block:.5em;margin-block:0}.c1 .main .nav nav a,.c1 .main .nav nav .urHere-i{padding-right:100%;padding-block:.5em;margin-right:-100%;margin-block:-0.5em}.c1 .main .nav nav p{text-shadow:#d1d1f7 2px 2px;transition:all 0s .2s,background-color 0s .4s}.c1 .main .nav nav p a.urHere{pointer-events:none}.c1 .main .nav nav p a,.c1 .main .nav nav p .urHere-i{color:#44d}.c1 .main .nav nav p:nth-child(even){background:rgba(255,255,255,.5333333333)}.c1 .main .nav nav p:hover{transition:all 0s;text-align:right !important;filter:invert(1)}.c1 .bottom{width:100%;background:rgba(0,0,0,.5333333333)}.c1 .bottom img{position:relative;top:50%;transform:translateY(-50%)}.c2-b{position:absolute;inset:0;image-rendering:pixelated;background:url(/assets/image/bg2.gif);background-color:#000;background-size:max(10vw,20vh)}.c2 .chatroom{position:absolute;inset:0;width:auto;height:auto;overflow:scroll}.c2 .chatroom .giscus{height:100%}.c2 .chatroom .giscus .giscus-frame{position:absolute;inset:0 unset}.c2 iframe[name=neolink]{position:absolute;margin:10px;bottom:0}.content{text-align:justify;text-justify:inter-ideograph;background-color:var(--color-page);padding-inline:3em 2em}.fullscreen{transition:opacity .2s .2s,top .2s,bottom .2s;position:absolute;display:flex;flex-direction:column;left:50%;top:50vh;bottom:50vh;transform:translateX(-50%);z-index:10;width:90vw;background:#d1d1f7;box-shadow:-1px -1px 0 1px #e8e8fb,0 0 0 2px #000,inset -2px -4px #a2a2ee,inset 2px 2px #fff}.fullscreen.on{transition:opacity .2s,top .2s,bottom .2s;opacity:1;pointer-events:all;top:2vh;bottom:2vh}.fullscreen .content{flex:9;padding-inline:2em calc(2em + 5vw);margin:6px;font-size:1.2rem;box-shadow:inset -2px -2px #e8e8fb,inset 2px 2px #44d}.fullscreen .bottomBar{position:relative;height:1em;margin-block:0 10px;margin-inline:6px;color:var(--color)}.fullscreen .bottomBar .left,.fullscreen .bottomBar .right{display:inline-block}.fullscreen .bottomBar .right{position:absolute;right:0}.buttonBar{height:1.5em;padding:.25em;color:#fff;background:linear-gradient(90deg, #44d 20%, #a2a2ee);text-wrap:nowrap;overflow:hidden}.buttonBar .toggle{position:absolute;display:block;top:.25em;margin-right:.5em;width:1.5em;height:1.5em;box-sizing:border-box;background:#d1d1f7;box-shadow:inset -1.5px -1.5px #44d,inset 1.5px 1.5px #fff,inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.buttonBar .toggle::before{content:"";position:absolute;top:5px;left:5px;right:6px;bottom:6px;image-rendering:pixelated;background-size:cover !important;background-repeat:no-repeat !important}.buttonBar .toggle:hover{background:#e8e8fb}.buttonBar .toggle:active{background:#d1d1f7;box-shadow:inset -1.5px -1.5px #fff,inset 1.5px 1.5px #44d,inset -3px -3px #e8e8fb,inset 3px 3px #a2a2ee}.buttonBar .toggle:active::before{top:6px;left:6px;right:5px;bottom:5px}.window .buttonBar .toggle.fullscreenTg::before{background:url(/assets/image/button/max.gif)}.fullscreen .buttonBar .toggle.fullscreenTg::before{background:url(/assets/image/button/unmax.gif)}.buttonBar .toggle.darkTg::before{background:url(/assets/image/button/dark.gif)}.buttonBar .toggle.fontTg::before{background:url(/assets/image/button/font.gif)}.window .buttonBar{position:relative;height:100%;min-width:20px;max-width:20px;padding-inline:.25em;background:#44d}.window .buttonBar .toggle{left:50%;transform:translateX(-50%)}.window .buttonBar .darkTg{top:2em}.window .buttonBar .fontTg{top:3.5em}.fullscreen .buttonBar .fullscreenTg{right:0em}.fullscreen .buttonBar .darkTg{right:1.75em}.fullscreen .buttonBar .fontTg{right:3.25em}.cornerCara,.cornerCara-b{position:fixed;bottom:-16vh;right:calc(10vw - 39vh);transform:scale(75%);z-index:-3;height:calc(100vh + 10vw);max-height:140vh;aspect-ratio:.77;filter:drop-shadow(-1vw 2vw rgba(0, 0, 0, 0.5333333333))}.cornerCara-b{transition:opacity 1s;pointer-events:none;z-index:2}.cornerCara::before{content:"";position:absolute;inset:0}#soup\.exe:is(:hover,:active)~.cornerCara-b{transition:opacity 0s;opacity:.2}.cornerCara[id="0"]+.cornerCara-b,.cornerCara[id="0"]::before{background:url(/assets/image/cornerCara/marisa0.webp);background-size:contain}.cornerCara[id="1"]+.cornerCara-b,.cornerCara[id="1"]::before{background:url(/assets/image/cornerCara/marisa1.webp);background-size:contain}.cornerCara[id="2"]+.cornerCara-b,.cornerCara[id="2"]::before{background:url(/assets/image/cornerCara/marisa2.webp);background-size:contain}.cornerCara[id="3"]+.cornerCara-b,.cornerCara[id="3"]::before{background:url(/assets/image/cornerCara/marisa3.webp);background-size:contain}.cornerCara[id="4"]+.cornerCara-b,.cornerCara[id="4"]::before{background:url(/assets/image/cornerCara/marisa4.webp);background-size:contain}.cornerCara[id="5"]+.cornerCara-b,.cornerCara[id="5"]::before{background:url(/assets/image/cornerCara/marisa5.webp);background-size:contain}.cornerCara[id="6"]+.cornerCara-b,.cornerCara[id="6"]::before{background:url(/assets/image/cornerCara/marisa6.webp);background-size:contain}.cornerCara[id="7"]+.cornerCara-b,.cornerCara[id="7"]::before{background:url(/assets/image/cornerCara/marisa7.webp);background-size:contain}.cornerCara[id="8"]+.cornerCara-b,.cornerCara[id="8"]::before{background:url(/assets/image/cornerCara/marisa8.webp);background-size:contain}.cornerCara[id="9"]+.cornerCara-b,.cornerCara[id="9"]::before{background:url(/assets/image/cornerCara/marisa9.webp);background-size:contain}.cornerCara[id="10"]+.cornerCara-b,.cornerCara[id="10"]::before{background:url(/assets/image/cornerCara/marisa10.webp);background-size:contain}.cornerCara[id="11"]+.cornerCara-b,.cornerCara[id="11"]::before{background:url(/assets/image/cornerCara/marisa11.webp);background-size:contain}.cornerCara[id="12"]+.cornerCara-b,.cornerCara[id="12"]::before{background:url(/assets/image/cornerCara/marisa12.webp);background-size:contain}.cornerCara[id="13"]+.cornerCara-b,.cornerCara[id="13"]::before{background:url(/assets/image/cornerCara/marisa13.webp);background-size:contain}.cornerCara[id="14"]+.cornerCara-b,.cornerCara[id="14"]::before{background:url(/assets/image/cornerCara/marisa14.webp);background-size:contain}.cornerCara[id="15"]+.cornerCara-b,.cornerCara[id="15"]::before{background:url(/assets/image/cornerCara/marisa15.webp);background-size:contain}.cornerCara{background:url(/assets/image/cornerCara/marisaB_.webp);background-size:120%;background-position:-40% -40%;image-rendering:pixelated}.ibm,.ibm-b{position:absolute;right:calc(10vw - 39vh);bottom:0;z-index:-1;pointer-events:visible;transform:translateX(-20%);height:calc(25vh + 2.5vw);max-height:35vh;aspect-ratio:2}.ibm-b{mix-blend-mode:darken}.vid{position:absolute;display:none;right:-38%;bottom:-55%;transform:scale(0.17, 0.23) rotate(8deg) skew(3deg);width:170%;aspect-ratio:16/9;pointer-events:none;background:#fff}.vid iframe{position:absolute;width:100%;height:100%;z-index:10;inset:0}.mask:has(input:checked)~.vid{display:block;animation:flicker .05s linear infinite}@keyframes flicker{0%{opacity:.65}50%{opacity:.65}50.1%{opacity:.5}100%{opacity:.5}}.pc{transition:visibility 0s 1s,opacity 1s;visibility:hidden}.pc-b{transition:opacity 1s;z-index:1}.pc,.pc-b{position:absolute;right:8%;bottom:0%;width:75%;aspect-ratio:1.63;pointer-events:none;background:url(/assets/image/ibm.png);background-size:cover}.pc::before,.pc-b::before{position:absolute;left:35%;top:45%;width:50%;z-index:20;transform:rotate(9deg) skew(7deg);font-size:3.2vh}#soup\.exe:is(:hover,:active)~.ibm-b .pc{transition:visibility 0s;visibility:visible}#soup\.exe:is(:hover,:active)~.ibm .pc-b{transition:0s;opacity:0}.mask{position:absolute;display:block;right:32.7%;bottom:20%;z-index:1;transform:rotate(11deg) skew(7deg);width:28%;aspect-ratio:1.34;background:url(/assets/image/rainbowDither.png);background-size:4vw;opacity:0;mix-blend-mode:darken;animation:maskScroll 1s linear infinite}@keyframes maskScroll{0%{background-position:0}100%{background-position:8vw}}.mask:has(input:checked){opacity:.3}.mask:not(:has(input:checked))~.pc-b::before,.ibm-b:not(:has(~.ibm .mask input:checked)) .pc::before{color:#fff}.mask:not(:has(input:checked))~.pc-b::before,.ibm-b:not(:has(~.ibm .mask input:checked)) .pc::before{content:"Power off";filter:drop-shadow(0 0 5px #fff)}#soup\.exe,.fullscreen{cursor:url(/assets/image/cursor/hat.gif),auto !important}a,button,label,.cornerCara{animation:wonderCursor .5s infinite}@keyframes wonderCursor{0%{cursor:url(/assets/image/cursor/hatq1.gif),auto}25%{cursor:url(/assets/image/cursor/hatq2.gif),auto}50%{cursor:url(/assets/image/cursor/hatq3.gif),auto}75%{cursor:url(/assets/image/cursor/hatq4.gif),auto}100%{cursor:url(/assets/image/cursor/hatq5.gif),auto}}canvas{transition:.5s;opacity:.5;z-index:-2;image-rendering:pixelated}#soup\.exe:is(:hover,:active)~canvas{opacity:0;animation:hideCanvas .5s linear forwards}@keyframes hideCanvas{0%{visibility:visible}100%{visibility:hidden}}.window ::-webkit-scrollbar,.fullscreen ::-webkit-scrollbar{width:16px}.window ::-webkit-scrollbar:horizontal,.fullscreen ::-webkit-scrollbar:horizontal{height:16px}.window ::-webkit-scrollbar-corner,.fullscreen ::-webkit-scrollbar-corner{background:#d1d1f7;box-shadow:inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.window ::-webkit-scrollbar-track,.fullscreen ::-webkit-scrollbar-track{background:url(/assets/image/scrollbar/bg.png);background-size:4px}.window ::-webkit-scrollbar-thumb,.fullscreen ::-webkit-scrollbar-thumb{background:#d1d1f7;box-shadow:inset -1.5px -1.5px #44d,inset 1.5px 1.5px #fff,inset -3px -3px #a2a2ee,inset 3px 3px #e8e8fb}.window ::-webkit-scrollbar-button,.fullscreen ::-webkit-scrollbar-button{background-size:cover !important}.window ::-webkit-scrollbar-button:horizontal:start:decrement,.window ::-webkit-scrollbar-button:horizontal:end:increment,.window ::-webkit-scrollbar-button:vertical:start:decrement,.window ::-webkit-scrollbar-button:vertical:end:increment,.fullscreen ::-webkit-scrollbar-button:horizontal:start:decrement,.fullscreen ::-webkit-scrollbar-button:horizontal:end:increment,.fullscreen ::-webkit-scrollbar-button:vertical:start:decrement,.fullscreen ::-webkit-scrollbar-button:vertical:end:increment{display:block}.window ::-webkit-scrollbar-button:vertical,.fullscreen ::-webkit-scrollbar-button:vertical{height:16px}.window ::-webkit-scrollbar-button:vertical:start,.fullscreen ::-webkit-scrollbar-button:vertical:start{background:url(/assets/image/scrollbar/up.png)}.window ::-webkit-scrollbar-button:vertical:end,.fullscreen ::-webkit-scrollbar-button:vertical:end{background:url(/assets/image/scrollbar/down.png)}.window ::-webkit-scrollbar-button:horizontal,.fullscreen ::-webkit-scrollbar-button:horizontal{width:16px}.window ::-webkit-scrollbar-button:horizontal:start,.fullscreen ::-webkit-scrollbar-button:horizontal:start{background:url(/assets/image/scrollbar/left.png)}.window ::-webkit-scrollbar-button:horizontal:end,.fullscreen ::-webkit-scrollbar-button:horizontal:end{background:url(/assets/image/scrollbar/right.png)}.window .content::-webkit-scrollbar,.fullscreen .content::-webkit-scrollbar{width:24px !important}.window .content::-webkit-scrollbar:horizontal,.fullscreen .content::-webkit-scrollbar:horizontal{height:24px !important}.window .content::-webkit-scrollbar-button:vertical,.fullscreen .content::-webkit-scrollbar-button:vertical{height:24px !important}.window .content::-webkit-scrollbar-button:horizontal,.fullscreen .content::-webkit-scrollbar-button:horizontal{width:24px !important}html{color:#000;text-underline-offset:12.5%}::selection{color:var(--color-page);background:var(--color)}.content{color:var(--color) !important;overflow-wrap:break-word}.content>p:not([class],:has(img)):after{content:"湯";position:relative;display:inline-block;padding-left:.3em;line-height:.5em;opacity:.5;font-size:.7em;color:var(--color-red);transform:rotate(15deg);white-space:pre}pre{overflow-x:auto}.content a{position:relative;color:var(--color-miku)}.content a::after{content:"";position:absolute;inset:-0.5em}h1,.fake.h1{font-weight:bolder}h2,.fake.h2{font-weight:bolder}h3,.fake.h3{font-weight:bolder}h4,.fake.h4{font-weight:bolder}h5,.fake.h5{font-weight:normal}h6,.fake.h6{font-weight:normal}h4,.fake.h4{font-style:italic}h6,.fake.h6{font-style:italic}h1{margin-top:1em}:first-child~h1{margin-top:2em}h2{margin-top:1em}:first-child~h2{margin-top:2em}h3{margin-top:1em}:first-child~h3{margin-top:2em}h4{margin-top:1em}:first-child~h4{margin-top:2em}h5{margin-top:1em}:first-child~h5{margin-top:2em}h6{margin-top:1em}:first-child~h6{margin-top:2em}h1,.fake.h1{margin-bottom:1em}h2,.fake.h2{margin-bottom:1em}h3,.fake.h3{margin-bottom:.5em}h4,.fake.h4{margin-bottom:.5em}h5,.fake.h5{margin-bottom:.5em}h6,.fake.h6{margin-bottom:.5em}h1+h1{margin-top:0 !important}h1+h2{margin-top:0 !important}h1+h3{margin-top:0 !important}h1+h4{margin-top:0 !important}h1+h5{margin-top:0 !important}h1+h6{margin-top:0 !important}h2+h1{margin-top:0 !important}h2+h2{margin-top:0 !important}h2+h3{margin-top:0 !important}h2+h4{margin-top:0 !important}h2+h5{margin-top:0 !important}h2+h6{margin-top:0 !important}h3+h1{margin-top:0 !important}h3+h2{margin-top:0 !important}h3+h3{margin-top:0 !important}h3+h4{margin-top:0 !important}h3+h5{margin-top:0 !important}h3+h6{margin-top:0 !important}h4+h1{margin-top:0 !important}h4+h2{margin-top:0 !important}h4+h3{margin-top:0 !important}h4+h4{margin-top:0 !important}h4+h5{margin-top:0 !important}h4+h6{margin-top:0 !important}h5+h1{margin-top:0 !important}h5+h2{margin-top:0 !important}h5+h3{margin-top:0 !important}h5+h4{margin-top:0 !important}h5+h5{margin-top:0 !important}h5+h6{margin-top:0 !important}h6+h1{margin-top:0 !important}h6+h2{margin-top:0 !important}h6+h3{margin-top:0 !important}h6+h4{margin-top:0 !important}h6+h5{margin-top:0 !important}h6+h6{margin-top:0 !important}h1{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h2{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h3{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h4{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h5{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h6{position:relative;inset:-0.5rem -0.2rem;padding:.5rem .2rem}h1{border-bottom:var(--color) 3px solid}h2{border-bottom:var(--color) 3px dashed}h3{border-bottom:var(--color) 3px dotted}h4{border-bottom:var(--color) 3px dotted}h4{width:max-content}h5{width:max-content}h6{width:max-content}h1[id]{--notify: "--> 点击复制标题链接"}h1[id]::before,h1[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h2[id]{--notify: "--> 点击复制标题链接"}h2[id]::before,h2[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h3[id]{--notify: "--> 点击复制标题链接"}h3[id]::before,h3[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h4[id]{--notify: "--> 点击复制标题链接"}h4[id]::before,h4[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h5[id]{--notify: "--> 点击复制标题链接"}h5[id]::before,h5[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h6[id]{--notify: "--> 点击复制标题链接"}h6[id]::before,h6[id]::after{font-weight:normal;font-size:max(.5em,.8rem);opacity:.7}h1[id]::before,h1[id]::after{display:block}h1[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h1[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h1[id]:active{background:var(--color);color:var(--color-page)}h1[id]:active::after{content:""}h1[id]:active::selection,h1[id]:active ::selection{color:var(--color);background:var(--color-page)}h2[id]::before,h2[id]::after{display:block}h2[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h2[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h2[id]:active{background:var(--color);color:var(--color-page)}h2[id]:active::after{content:""}h2[id]:active::selection,h2[id]:active ::selection{color:var(--color);background:var(--color-page)}h3[id]::before,h3[id]::after{display:block}h3[id]::before{content:"#" attr(id) " ";position:relative;bottom:.2em;text-decoration:dashed underline 1.5px}h3[id]:hover::after{content:var(--notify);position:absolute;top:.5rem;right:0;background:var(--color-page);opacity:1}h3[id]:active{background:var(--color);color:var(--color-page)}h3[id]:active::after{content:""}h3[id]:active::selection,h3[id]:active ::selection{color:var(--color);background:var(--color-page)}h4[id]::after{content:" #" attr(id) " " " "}h4[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h4[id]:active{background:var(--color);color:var(--color-page)}h4[id]:active::before{content:""}h5[id]::after{content:" #" attr(id) " " " "}h5[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h5[id]:active{background:var(--color);color:var(--color-page)}h5[id]:active::before{content:""}h6[id]::after{content:" #" attr(id) " " " "}h6[id]:hover::before{content:var(--notify);position:absolute;top:-0.8em;text-wrap:nowrap;background:var(--color-page);opacity:1}h6[id]:active{background:var(--color);color:var(--color-page)}h6[id]:active::before{content:""}ul{list-style-type:"☆ "}ul ::marker{font-weight:bolder;color:var(--color-magenta)}ul ul{list-style-type:hebrew}ul ul ::marker{font-size:1em}ul ul ul{list-style-type:"。 "}ul ul ul ::marker{font-size:.7em}ul ul ul ul ::marker{font-size:.62em}ul ul ul ul ul{list-style-type:"· "}td ul{margin-block:0}ul.task-list{list-style-type:"- "}input.task-list-item-checkbox{position:relative;margin-right:.5em;visibility:hidden}input.task-list-item-checkbox::before{content:"";position:absolute;inset:0;background:url(/assets/image/button/unchecked.gif);background-size:cover;visibility:visible}input.task-list-item-checkbox:checked::before{background:url(/assets/image/button/checked.gif);background-size:cover}:not(pre)>code{background:var(--color-page);margin-inline:.5em}:not(pre)>code:is(::before,::after){content:"/";margin-inline:.2em}.content img{-webkit-user-drag:none}p:has(img:not(.icon)){position:relative;display:block;width:60%;max-width:100%;padding:.5em 4em .75em .75em;margin-block:2em;overflow:auto;resize:both;text-align:center;border:var(--color) 2px dotted}.window p:has(img:not(.icon)){max-height:max(20vh,8em)}.window .content>p:has(img:not(.icon)){max-height:max(100%,8em)}.fullscreen p:has(img:not(.icon)){max-height:max(50vh,8em)}p:has(img:not(.icon)) img:not(.icon){position:relative;height:auto;width:auto;box-sizing:border-box;min-width:max(10em,100%);max-width:100%;margin-top:.25em;border:var(--color-fade) 4px solid}p:has(img:not(.icon)) img:not(.icon):hover{border-color:var(--color)}p:has(img:not(.icon)):has(img:not(.icon):active){position:fixed;inset:0;left:50%;transform:translateX(-50%);z-index:201;max-width:unset;max-height:unset;overflow:hidden;resize:none;border:none}p:has(img:not(.icon)):has(img:not(.icon):active) img:not(.icon){top:50%;transform:translateY(-50%);max-height:100%;min-width:100%;object-fit:contain;border:none}.content:has(p img:not(.icon):active)::after{content:"";position:fixed;inset:-2px;background:rgba(0,0,0,.6666666667);z-index:200}.content:has(~.buttonBar .darkTg input:checked){background:rgba(0,0,0,.5333333333) !important}.buttonBar:has(.darkTg input:checked)~.content,.content:has(~.buttonBar .darkTg input:checked){--color: #aaf;--color-fade: #224;--color-plain: #fff;--color-mid: #aaa;--color-green: #aca;--color-green-fade: #232;--color-red: #faa;--color-red-fade: #422;--color-yellow-fade: #662;--color-miku-fade: #066;--color-magenta-fade: #626;--color-page: #002}.fullscreen:has(.darkTg input:checked){background:#338;box-shadow:-1px -1px 0 1px #aaf,0 0 0 2px #44d,inset -2px -4px #224,inset 2px 2px #000}.fullscreen:has(.darkTg input:checked) .buttonBar{background:linear-gradient(90deg, #44d 20%, #000)}.fullscreen:has(.darkTg input:checked) .content{box-shadow:inset -2px -2px #224,inset 2px 2px #aaf}.fullscreen:has(.darkTg input:checked) .bottomBar{color:#fff}:is(.window,.fullscreen):has(.darkTg input:checked) ::-webkit-scrollbar-thumb{background:#338;box-shadow:inset -1.5px -1.5px #000,inset 1.5px 1.5px #aaf,inset -3px -3px #224,inset 3px 3px #44d}html{font-family:"fusion",monospace}html:has(.fontTg input:checked){font-family:"ibm",monospace}code,kbd,samp{font-family:"ibm",monospace}html:has(.fontTg input:checked) code,html:has(.fontTg input:checked) kbd,html:has(.fontTg input:checked) samp{font-family:"ibm",monospace}@font-face{font-family:"fusion";font-display:swap;src:url(/assets/font/fusion-pixel-10px-monospaced-zh_hant.ttf)}@font-face{font-family:"ibm";font-display:swap;src:url(/assets/font/IBM3161.ttf)}.highlight .hll{background-color:#ffc}.highlight .c{color:#080;font-style:italic}.highlight .err{border:1px solid red}.highlight .k{color:#a2f;font-weight:bold}.highlight .cm{color:#080;font-style:italic}.highlight .cp{color:#080}.highlight .c1{color:#080;font-style:italic}.highlight .cs{color:#080;font-weight:bold}.highlight .gd{color:#a00000}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:navy;font-weight:bold}.highlight .gi{color:#00a000}.highlight .go{color:gray}.highlight .gp{color:navy;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:purple;font-weight:bold}.highlight .gt{color:#0040d0}.highlight .kc{color:#a2f;font-weight:bold}.highlight .kd{color:#a2f;font-weight:bold}.highlight .kn{color:#a2f;font-weight:bold}.highlight .kp{color:#a2f}.highlight .kr{color:#a2f;font-weight:bold}.highlight .kt{color:#0b0;font-weight:bold}.highlight .s{color:#b44}.highlight .na{color:#b44}.highlight .nb{color:#a2f}.highlight .nc{color:blue}.highlight .no{color:#800}.highlight .nd{color:#a2f}.highlight .ni{color:#999;font-weight:bold}.highlight .ne{color:#d2413a;font-weight:bold}.highlight .nf{color:#00a000}.highlight .nl{color:#a0a000}.highlight .nn{color:blue;font-weight:bold}.highlight .nt{color:green;font-weight:bold}.highlight .nv{color:#b8860b}.highlight .ow{color:#a2f;font-weight:bold}.highlight .w{color:#bbb}.highlight .sb{color:#b44}.highlight .sc{color:#b44}.highlight .sd{color:#b44;font-style:italic}.highlight .s2{color:#b44}.highlight .se{color:#b62;font-weight:bold}.highlight .sh{color:#b44}.highlight .si{color:#b68;font-weight:bold}.highlight .sx{color:green}.highlight .sr{color:#b68}.highlight .s1{color:#b44}.highlight .ss{color:#b8860b}.highlight .bp{color:#a2f}.highlight .vc{color:#b8860b}.highlight .vg{color:#b8860b}.highlight .vi{color:#b8860b}#oneko{position:fixed;left:16px;top:16px;width:32px;height:32px;z-index:2533;background:url(/assets/neko/oneko_sakura.gif);image-rendering:pixelated;opacity:.7;pointer-events:none}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/_site/assets/css/default/style.css.map b/_site/assets/css/default/style.css.map index ccb7018..9014752 100644 --- a/_site/assets/css/default/style.css.map +++ b/_site/assets/css/default/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss","../../../_sass/normalize.scss","../../../_sass/code.scss","../../../_sass/moardown.scss","../../../_sass/neko.scss"],"names":[],"mappings":"CAAA,uBCOA,KACI,iBACA,8BAMJ,cAGA,mBAIA,GACI,cACA,eAOJ,GACI,uBACA,SACA,iBAKJ,IACI,gCACA,cAMJ,iCAIA,YACI,mBACA,0BACA,iCAIJ,SACI,mBAKJ,cACI,gCACA,cAIJ,oBAIA,QACI,cACA,cACA,kBACA,wBAGJ,mBACA,eAKA,sBAMA,sCACI,oBACA,eACA,iBACA,SAKJ,aAEI,iBAKJ,cAEI,oBAIJ,gDACI,0BAGA,wHACE,kBACA,UAIF,0IAIJ,oCAMA,OACI,sBACA,cACA,cACA,eACA,UACA,mBAIJ,iCAGA,uBAIA,6BACI,sBACA,UAIc,8FAIlB,cACI,6BACA,oBAGA,kEAKJ,6BACI,0BACA,aAMJ,sBAGA,0BAKA,sBAGA,sBDxLA,MACI,cACA,kBACA,mBACA,oBACA,kBACA,oBACA,yBACA,kBACA,uBACA,qBACA,0BACA,mBACA,wBACA,sBACA,2BACA,mBAsBJ,WAEI,sBACA,oCACA,4FAGJ,iBAEW,+BACA,+BACP,YAGJ,+BAGA,UACI,qCACI,sBACA,2BACA,+BAIR,wBACI,eACA,QACA,WACA,oBACA,wCACI,sBACA,2BAIR,uBACI,eACA,QACA,WACA,uCACA,WAGJ,oCACI,2CACI,sBACA,wBACA,0BAWJ,YAEI,sBAIA,2DAEA,gIAIA,uCACI,kBACA,QACA,uCAGJ,+BACI,yCACI,sBACA,+CACA,yBAEJ,0BACA,WAGJ,8BACI,4CACI,qCACA,0DAWR,eAEI,kBAEA,6BAEA,iBAEI,kBACA,UAEA,YAeA,yBACA,0BACA,cAfA,mBACe,wCACX,eACA,aAGJ,8CACe,sCACA,uCASf,mBACI,kBACA,WAEA,0BACI,oBAIR,2BACI,qBAKJ,mBACI,+CAGA,yBACI,kBACA,iBACA,sBAOZ,iBAEI,kBACA,UAEA,uBACA,SAEA,uBACA,WACI,6HAEJ,8BAIA,uCACA,oBACI,kBACA,aAMhB,YAEI,WAEA,gBAEA,gBACI,kBACA,QACA,2BAUR,MAEI,kBACA,QAEA,0BACA,sCACI,sBACA,+BAIR,cAEI,kBACA,QACA,uBACA,gBAGA,sBACI,YAEA,oCACI,kBACA,cAKZ,yBACI,kBACA,YACA,SAUR,SAEI,mBACA,6BACA,mCACA,uBAEA,qBACI,wBACA,wBAMR,YACI,8CAEA,kBACA,aACA,sBACA,SACA,qBACA,2BACA,WAEA,WAEA,mBACA,6FAKA,eACI,0CACA,UACA,mBACA,mBAGJ,qBAEI,OACA,mCACA,WAEA,iBACA,sDAIJ,uBACI,kBACA,WACU,sCACV,mBAEA,gFAEA,8BACI,kBACA,QAuBZ,WAEI,aACA,cAEA,WACA,qDACA,iBACA,gBAEA,mBAEI,kBACA,cACA,UACA,kBAEA,yBAEA,sBACA,mBACA,yGAKA,sCACI,kBACA,iBACA,qBACA,0BAEI,iCACA,uCAIR,4CAEA,0BACI,mBACA,yGAKA,kCACI,iBACA,qBAIR,6FACA,mGACA,gFACA,gFAIJ,mBAEI,kBACA,YACA,eACA,eACA,qBAEA,gBAEA,2BACI,SACA,2BAGJ,mCACA,qCAIA,+CACA,4CACA,4CASJ,0BAEI,eACA,qCACA,qBACA,WAEA,0BACA,iBACA,iBAEA,yDAGJ,cACI,sBACA,oBAEA,UAGJ,+BACI,kBACA,QAGJ,gGAI4B,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBAEN,YACI,uDACI,qBACA,8BAEJ,0BAKJ,YAEI,kBACA,iCACA,WACA,uBACA,2BAEA,0BACA,gBACA,eAGJ,OACI,sBAIR,KAEI,kBACA,aACA,uBACA,oDAEA,WACA,kBAEA,oBACA,gBAEA,mBACI,eACA,gBACA,iBACA,iBAGJ,YACI,kBACA,WACA,YACA,WACA,QAIR,mFAGA,IACI,uCACA,kBAEA,MACI,sBACA,UAGJ,UAEI,kBACA,mBAEA,UACA,kBAEA,oBACA,4DAEA,0BACI,kBACA,SACA,QACA,UACA,WACA,kCACA,gBAIR,yDACI,yBACA,mBAGJ,yDACI,cACA,UAKR,MAEI,kBACA,cACA,uBACA,UACA,mCAEA,UACA,kBAEA,gDACK,oBACL,UACA,sBAEA,wCACA,sBACI,yBACA,8BAGJ,oCAGI,gHACA,0JAYR,gFAIA,2BACI,oCACA,wBACI,GALiB,gDAMjB,IANiB,gDAOjB,IAPiB,gDAQjB,IARiB,gDASjB,KATiB,iDAazB,OACI,eACA,WACA,WACA,0BAIA,iDACI,UACA,yCACA,sBACI,sBACA,wBAWW,4DACJ,WACf,8FAEA,0EACI,mBACA,yDAIJ,2IAEA,wEACI,mBACA,yGAMJ,2GAE+B,8fAE3B,wGACI,uJACA,qJAEJ,2GACI,6JACA,0JAmBZ,KACI,WACA,0BAGJ,uCAEI,oDAEI,kBACA,qBACA,kBAEA,iBACA,WACA,eACA,uBACA,wBACA,gBAIR,EACI,kBACA,wBAEA,oBACI,kBACA,aAGJ,2BACI,wCAIR,OACI,wBACA,0BAOA,4HAGA,8DAGA,4DAKA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BAIA,4DAGA,4HAK2B,wjCAID,wFACA,gFAI1B,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAOJ,mKAIA,+DAKA,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WAOJ,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BA3BR,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BA3BR,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BAQR,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAjBJ,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAjBJ,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAQZ,GACgB,qBADX,0DAED,MACgB,uBADX,6BAED,SACgB,qBADX,iCAEI,qCAED,eACgB,qBAOhC,sBACA,mBAIA,aACI,qBAGJ,8BACI,kBACA,kBACA,kBAEA,iDACI,kBACA,QACA,yEACA,mBAGJ,qHAGJ,eACI,uBACA,mBAEA,yDACI,+BACA,mBAQR,oCAEA,sBAEI,kBACA,cAEA,UACA,eACA,6BACA,iBACA,cACA,YAEA,kBACA,+BAEA,uDACA,gEACA,2DAEA,qCAEI,kBAEA,uBACA,sBACA,yBACA,eACA,iBAEA,mCACA,qEAGJ,iDAEI,eACA,QACA,SACA,2BACA,YAEA,gBACA,iBACA,gBACA,YAEA,YAEA,gEAEI,QACA,2BAEA,gBACA,eACA,mBAEA,YAKZ,wDACI,eACA,WACA,mCACA,YASJ,8FAEA,+FA7+BI,cACA,mBACA,oBACA,kBACA,oBACA,yBACA,kBACA,uBACA,0BACA,wBACA,2BACA,mBAo+BJ,uCAlqBI,gBACA,uFAKA,oGAEA,mGAIA,6DAwpBkD,8HAhUlD,gBACA,mGAuUJ,KACI,+BACA,4DAGJ,cACI,4BACA,0IAGJ,gCACI,kBACA,+DAGJ,6BACI,kBACA,kCEriCJ,sCACA,2CACA,qCACA,0CAEA,4CACA,0BACA,4CACA,2CACA,6BACA,iCACA,yBACA,2CACA,6BACA,0BACA,2CACA,gCACA,6CACA,6BACA,2CACA,2CACA,2CACA,0BACA,2CACA,2CAEA,yBACA,0BACA,0BACA,0BACA,0BACA,0BACA,2CACA,8CACA,6BACA,6BACA,2CACA,4CACA,6BACA,2CACA,yBAKA,0BACA,0BACA,4CACA,0BACA,2CACA,0BACA,2CACA,2BACA,0BACA,0BACA,6BACA,0BACA,6BACA,6BACA,6BCzDa,oGAIb,gCAEA,eACA,iBACA,gBACA,iBAEyC,iNAEzC,yCACA,2CAC2B,4KAM3B,SACI,SACA,kBACA,cACA,WACA,4BAIJ,GACI,gBACA,OAIJ,GACI,kBAIJ,GACI,iBACA,QAKwB,iLAI5B,wBACuB,oEACnB,oEACA,yEACA,yEACA,kEAGG,kCACF,mCACL,2CACG,+CACS,yDACF,4DACF,0EAQH,aAJI,KAKL,yBALK,KAML,8CAFC,cAJI,OAKL,0BALK,OAML,iDAFC,YAJI,KAKL,wBALK,KAML,6CAFC,aAJI,KAKL,yBALK,KAML,8CAFC,WAJI,IAKL,uBALK,IAML,2CAFC,cAJI,OAKL,0BALK,OAML,iDAFC,cAJI,KAKL,0BALK,KAML,+CAFC,aAJI,MAKL,yBALK,MAML,+CAFC,YAJI,KAKL,wBALK,KAML,6CAFC,aAJI,MAKL,yBALK,MAML,+CAFC,YAJI,KAKL,wBALK,KAML,6CAFC,YAJI,KAKL,wBALK,KAML,6CAFC,YAJI,KAKL,wBALK,KAML,6CAFC,YAJI,KAKL,wBALK,KAML,6CAFC,eAJI,KAKL,2BALK,KAML,gDAFC,cAJI,OAKL,0BALK,OAML,iDAU+B,gBAN/B,kBACA,qBACA,YACA,+CAG+B,kBAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,gBAN/B,kBACA,qBACA,YACA,+CAG+B,YAN/B,kBACA,qBACA,YACA,+CAG+B,kBAN/B,kBACA,qBACA,YACA,+CAG+B,kBAN/B,kBACA,qBACA,YACA,+CAG+B,gBAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,gBAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,cAN/B,kBACA,qBACA,YACA,+CAG+B,oBAN/B,kBACA,qBACA,YACA,+CAG+B,kBAN/B,kBACA,qBACA,YACA,+CAKJ,GARI,kBACA,qBACA,YACA,+CAOA,WACA,+BAGJ,KAdI,kBACA,qBACA,YACA,+CAaA,gGAMJ,IACI,kBACA,qBAEA,kBAEA,4BAEI,kBACA,SACA,2BACA,cAEA,gBAMR,uBAEI,uBACI,kBACA,gBACA,wBACA,oBAGM,kBACN,WAIR,yBACA,8BAEA,gBACI,sBACA,2CAGJ,SACI,kBACA,qBACA,cACA,iCAEA,eACI,kBAEA,2CACI,cACA,mBACA,kBAQZ,qCACI,4BAIS,oEAEqB,yEAElC,WACI,kBAEA,mCACI,mBACA,oBAEA,kBACA,OACA,SACA,WAEA,2BACA,kBACA,eAEA,kBACA,6BACA,UAGJ,qDACI,cACA,UACA,qBAIJ,8BACI,mCACI,gBACA,2BACA,6BAKZ,gEAGI,UACI,eACA,eACA,mBACA,gBAGJ,gBACI,UAOJ,wCACA,qCAIJ,6CAGI,cACA,QACA,qBACA,kBAEA,4FACI,eACA,sBAEI,wBACA,2EAEJ,UAGJ,+DACI,cACA,kBACA,oBAEA,oFACI,cACA,UAOZ,MACI,yCAEA,kBACA,UAEA,kBACA,yBACA,iBAEA,uEAEA,iCACI,kBACA,sBACA,YAIJ,6BAGA,QACI,8BAEA,0GACA,4CACA,0FAEA,gDACI,kBACA,mEACI,kBACA,QACA,WACA,sBACA,WAIR,gBACI,sBACA,wBACA,8BAOJ,6GACA,uCACA,qEACA,gDAEA,iBACI,mBACA,mBACA,kBAOZ,iEAEA,WAEI,iBADA,8EAIA,gDACI,cACA,kBACA,kBACA,eACA,0BACA,mBACA,cAEA,wEACI,kBACA,OACA,UACA,oBACA,gBAGJ,+FAIJ,gBACI,6BACA,8BACA,gCACA,mBAEA,oCAGJ,gBACI,mCACA,oCACA,sCACA,yBAEA,oCAIJ,gBACI,iCACA,kCACA,oCACA,uBAEA,oCACI,SACA,gBACA,mBACA,oBAMJ,0DACI,4BACA,aACA,+BACA,qDAEA,sEACI,2BACA,0BAKJ,sEACI,oDAIR,uDAMR,SACI,kBACA,oCAEA,+BACI,UACA,gBAEA,yCACI,kBACA,QACA,oBAKZ,UACI,uBAGJ,WACI,kBACA,eACA,gBAEA,sDACI,kBACA,wBAGJ,mBACI,MACA,oCAGJ,uBACI,4CACI,kBACA,kBACA,mBAEA,mDACI,wBACA,oBACA,qCAKZ,mCACI,qBAMR,GACI,gDACA,YACA,iBAEA,SACI,WACA,UACA,uBAqBR,SACI,wBACA,sCACI,0BACA,kHACA,qBACA,6BACA,oBAEA,oDACA,yBACI,yBACA,uCAKR,4BACI,6FAKR,eACI,mCACA,OACI,0HAMR,gBACI,mCACA,OACI,+PAYR,QACI,4CACA,wDAGJ,YACI,uCACA,uEACA,oBAiCwC,MAVxC,cACA,wNACA,0BAUA,WAZA,cACA,wNACA,yBAWA,gBAbA,eACA,wNACA,0BAYA,WAdA,eACA,wNACA,yBAaA,cAfA,gBACA,wNACA,0BAcA,SAhBA,eACA,wNACA,yBAeA,eAjBA,eACA,wNACA,0BAgBA,YAlBA,cACA,wNACA,yBAQwC,QAVxC,cACA,oMACA,0BAUA,aAZA,cACA,oMACA,yBAWA,kBAbA,eACA,oMACA,0BAYA,aAdA,eACA,oMACA,yBAaA,gBAfA,gBACA,oMACA,0BAcA,WAhBA,eACA,oMACA,yBAeA,iBAjBA,eACA,oMACA,0BAgBA,cAlBA,cACA,oMACA,yBAQwC,aAVxC,cACA,shBACA,0BAUA,kBAZA,cACA,shBACA,yBAWA,uBAbA,eACA,shBACA,0BAYA,kBAdA,eACA,shBACA,yBAaA,qBAfA,gBACA,shBACA,0BAcA,gBAhBA,eACA,shBACA,yBAeA,sBAjBA,eACA,shBACA,0BAgBA,mBAlBA,cACA,shBACA,yBAQwC,eAVxC,cACA,kgBACA,0BAUA,oBAZA,cACA,kgBACA,yBAWA,yBAbA,eACA,kgBACA,0BAYA,oBAdA,eACA,kgBACA,yBAaA,uBAfA,gBACA,kgBACA,0BAcA,kBAhBA,eACA,kgBACA,yBAeA,wBAjBA,eACA,kgBACA,0BAgBA,qBAlBA,cACA,kgBACA,yBAqBJ,QACI,+BACA,wBACA,YAnHA,8TAqHA,0XAKJ,6BAEA,8BAEA,sCAMA,OACI,SACA,0DAGJ,WACI,SACA,0CAGJ,gCAIA,QACI,WACA,qDAGJ,SACI,WACA,sDAGJ,sCAEA,qDACA,qDAIA,6FACA,mCAEI,oCACI,kBACA,QACA,sEAMR,QACI,4DAEA,qBACA,iBACI,oDAGJ,kBAEA,kCACA,UAEA,8EAEA,wCAEA,UACI,0BACA,8BACA,oCAGJ,kBACI,uBACA,+BAGJ,0BACI,wCACA,gDAMR,OACI,0CAIA,qBAGA,gCACA,yFACA,iBACI,6BACA,cC3sBR,OACI,eACA,mBACA,uBACA,aACA,8CACA,0BACA,WACA","sourcesContent":["iframe { display: initial; } // show navlink after apply style.css\n\n@import \"normalize\";\n\n$ghprxy: \"https://ghproxy.com/https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main\";\n$ghprxy: \"\";\n\n:root {\n --color: #44d;\n --color-sat: #00f;\n --color-fade: #eef;\n --color-plain: #000;\n --color-mid: #666;\n --color-green: #464;\n --color-green-fade: #efe;\n --color-red: #d00;\n --color-red-fade: #fdd;\n --color-yellow: #ff0;\n --color-yellow-fade: #ffe;\n --color-miku: #4dd;\n --color-miku-fade: #eff;\n --color-magenta: #f4f;\n --color-magenta-fade: #fef;\n --color-page: #fff;\n}\n\n@mixin darkscheme {\n --color: #aaf;\n --color-fade: #224;\n --color-plain: #fff;\n --color-mid: #aaa;\n --color-green: #aca;\n --color-green-fade: #232;\n --color-red: #faa;\n --color-red-fade: #422;\n --color-yellow-fade: #662;\n --color-miku-fade: #066;\n --color-magenta-fade: #626;\n --color-page: #002;\n}\n\n\n\n/* ==== M A I N ==== */\n\n#soup\\.exe {\n// styl\n border: #fff 1px solid;\n box-shadow: 10px 10px 20px 10px #44d;\n &::-webkit-resizer { background: url(/assets/image/resizer.gif) {size: cover}; }\n}\n\n#soup\\.exe, #pseu {\n// resize\n max: { height: 95vh; width: 99vw }\n min: { height: 25vh; width: 25vw }\n resize: both;\n}\n\nhtml { image-rendering: pixelated; }\n\n// main bg\nhtml, .nav {\n background: url(/assets/image/bg.gif) {\n color: #000;\n position: center;\n size: MAX(20vw,40vh);\n }\n}\n\nhtml::before { content: \"\";\n position: fixed;\n inset: 0;\n z-index: -2;\n pointer-events: none;\n background: url(/assets/image/cloud.png) {\n size: cover;\n position: center;\n };\n}\n\nhtml::after { content: \"\";\n position: fixed;\n inset: 0;\n z-index: -1;\n background: url(/assets/image/rain.gif);\n opacity: .5;\n}\n\nhtml:has(.cornerCara:not([id=\"0\"])) {\n background: url(/assets/image/IMG_1148.JPG) {\n color: #000;\n size: contain;\n position: right;\n };\n}\n\n/* ======= */\n\n\n\n/* ==== C 1 ==== */\n\n.c1 {\n .banner {\n // styl\n border: #000 1px solid;\n // background: url(https://media.tenor.com/5lWosOHS630AAAAC/amor.gif);\n // background: url(https://usagif.com/wp-content/uploads/gifs/water-66.gif);\n // background: url(https://64.media.tumblr.com/9af92cc03553bd821021fd950fbc33b5/1534f96efdb15e70-b5/s100x200/6f110ffcfa7afe0af25add8144e9d30fbefc97fe.gifv);\n background: url(/assets/image/xp_.gif) { size: 20vw; };\n\n box-shadow: inset 10px -10px 5px -5px #44d,\n inset -30px 0 30px -20px #44da,\n inset -90px 50px 30px -30px #fff;\n\n &::before, &::after {\n position: absolute;\n inset: 0;\n background-repeat: no-repeat !important;\n }\n\n &::before { content: \"\";\n background: url(/assets/image/banner.png) {\n color: #ccf;\n size: MAX(90%, 600px) 100% !important;\n position: 40px;\n };\n mix-blend-mode: hard-light;\n opacity: .8;\n }\n\n &::after { content: \"\";\n background: url(/assets/image/bannerTxt.png) {\n size: auto 100% !important;\n position: calc(100% - MAX(30%, 20px)) !important;\n };\n // opacity: .5;\n }\n\n }\n\n .main {\n\n /* ==== N A V B A R ==== */\n\n .nav {\n // pos\n position: relative;\n // styl\n border-inline: #44d 1px solid;\n\n &-c {\n // pos\n position: relative;\n z-index: 1;\n // size\n height: 100%;\n\n p {\n padding: { inline: 1em 0; block: .5em; };\n margin-block: 0;\n display: flex;\n }\n\n a, .urHere-i {\n padding: { right: 100%; block: .5em; };\n margin: { right: -100%; block: -.5em };\n }\n\n /* ====link fluid hovering==== */\n\n text-shadow: #fff 2px 2px;\n mix-blend-mode: hard-light;\n color: #2985ff;\n\n a {\n position: relative;\n color: #38f;\n\n &.urHere {\n pointer-events: none;\n }\n }\n\n .urHere-i {\n display: inline-block;\n }\n\n /* ====ani==== */\n\n p {\n transition: all 0s .2s,\n background-color .4s .2s;\n\n &:hover {\n transition: all 0s;\n padding-left: 20%;\n background-color: #ccf;\n }\n }\n }\n\n /* ====Animating coolaf gradient bg==== */\n\n &-b {\n // pos\n position: absolute;\n left: -25%;\n // size\n height: 400%; width: 150%;\n bottom: 0;\n // styl\n mix-blend-mode: lighten;\n background:\n linear-gradient(90deg, #000, #0000 50%),\n repeating-linear-gradient(#f80, #f0f 25%, #0ff 37.5%, #8f0 42%, #f80 50%);\n filter: contrast(2) blur(10px) ;\n\n /* ====ani==== */\n\n animation: bgScroll 10s linear infinite;\n @keyframes bgScroll {\n from { bottom: -200%; }\n to { bottom: 0; }\n }\n }\n }\n }\n\n .bottom {\n // size\n width: 100%;\n // styl\n background: #000;\n\n img {\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n}\n\n\n\n/* ==== C 2 ==== */\n\n.c2 {\n &-b {\n // pos\n position: absolute;\n inset: 0;\n // styl\n image-rendering: pixelated;\n background: url(/assets/image/bg2.gif) {\n color: #000;\n size: MAX(10vw,20vh);\n };\n }\n\n .chatroom {\n // pos\n position: absolute;\n inset: 0;\n width: auto; height: auto;\n overflow: scroll;\n // margin-inline: 5%;\n\n .giscus {\n height: 100%;\n\n .giscus-frame {\n position: absolute;\n inset: 0 unset;\n }\n }\n }\n\n & iframe[name=\"neolink\"] {\n position: absolute;\n margin: 10px;\n bottom: 0;\n }\n}\n\n/* ======== */\n\n\n\n/* ==== C O N T E N T ==== */\n\n.content {\n// styl\n text-align: justify;\n text-justify: inter-ideograph;\n background-color: var(--color-page);\n padding-inline: 3em 2em;\n\n ::selection {\n color: var(--color-page);\n background: var(--color);\n }\n}\n\n// fullscreen\n\n.fullscreen {\n transition: opacity .2s .2s, top .2s, bottom .2s;\n// pos\n position: absolute;\n display: flex;\n flex-direction: column;\n left: 50%;\n top: 50vh; bottom: 50vh;\n transform: translateX(-50%);\n z-index: 10;\n// size\n width: 90vw;\n// styl\n background: #d1d1f7;\n box-shadow: -1px -1px 0 1px #e8e8fb,\n 0 0 0 2px #000,\n inset -2px -4px #a2a2ee,\n inset 2px 2px #fff;\n\n &.on {\n transition: opacity .2s, top .2s, bottom .2s;\n opacity: 1;\n pointer-events: all;\n top: 2vh; bottom: 2vh;\n }\n\n .content {\n // size\n flex: 9;\n padding-inline: 2em calc(2em + 5vw);\n margin: 6px;\n // styl\n font-size: 1.2rem;\n box-shadow: inset -2px -2px #e8e8fb,\n inset 2px 2px #44d;\n }\n\n .bottomBar {\n position: relative;\n height: 1em;\n margin: { block: 0 10px; inline: 6px };\n color: var(--color);\n\n .left, .right { display: inline-block; }\n\n .right {\n position: absolute;\n right: 0;\n }\n }\n}\n\n@mixin fullscreen-dark {\n background: #338;\n box-shadow: -1px -1px 0 1px #aaf,\n 0 0 0 2px #44d,\n inset -2px -4px #224,\n inset 2px 2px #000;\n\n .buttonBar { background: linear-gradient(90deg, #44d 20%, #000); }\n\n .content { box-shadow: inset -2px -2px #224,\n inset 2px 2px #aaf;\n }\n\n .bottomBar { color: #fff; }\n}\n\n// button bar\n\n.buttonBar {\n// size\n height: 1.5em;\n padding: .25em;\n// styl\n color: #fff;\n background: linear-gradient(90deg, #44d 20%, #a2a2ee);\n text-wrap: nowrap;\n overflow: hidden;\n\n .toggle {\n // pos\n position: absolute;\n display: block;\n top: .25em;\n margin-right: .5em;\n // size\n width: 1.5em; height: 1.5em;\n // styl\n box-sizing: border-box;\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #44d,\n inset 1.5px 1.5px #fff,\n inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n\n &::before { content: \"\";\n position: absolute;\n top: 5px; left: 5px;\n right: 6px; bottom: 6px;\n image-rendering: pixelated;\n background: {\n size: cover !important;\n repeat: no-repeat !important\n };\n }\n\n &:hover { background: #e8e8fb; }\n\n &:active {\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #fff,\n inset 1.5px 1.5px #44d,\n inset -3px -3px #e8e8fb,\n inset 3px 3px #a2a2ee;\n\n &::before {\n top: 6px; left: 6px;\n right: 5px; bottom: 5px;\n }\n }\n\n .window &.fullscreenTg::before { background: url(/assets/image/button/max.gif); }\n .fullscreen &.fullscreenTg::before { background: url(/assets/image/button/unmax.gif); }\n &.darkTg::before { background: url(/assets/image/button/dark.gif); }\n &.fontTg::before { background: url(/assets/image/button/font.gif); }\n\n }\n\n .window & {\n // pos\n position: relative;\n height: 100%;\n min-width: 20px;\n max-width: 20px;\n padding-inline: .25em;\n // styl\n background: #44d;\n\n .toggle {\n left: 50%;\n transform: translateX(-50%);\n }\n\n .darkTg { top: 2em; }\n .fontTg { top: 3.5em }\n }\n\n .fullscreen & {\n .fullscreenTg { right: 0em; }\n .darkTg { right: 1.75em; }\n .fontTg { right: 3.25em; }\n }\n}\n\n\n\n/* ==== C O R N E R ==== */ // WARNING: spaghetti ahead!!!\n\n.cornerCara {\n &, &-b {\n // pos\n position: fixed;\n bottom: -16vh; right: calc(10vw - 39vh);\n transform: scale(75%);\n z-index: -3;\n // size\n height: calc(100vh + 10vw);\n max-height: 140vh;\n aspect-ratio: .77;\n // styl\n filter: drop-shadow(-1vw 2vw #0008);\n }\n\n &-b {\n transition: opacity 1s;\n pointer-events: none;\n // pos\n z-index: 2;\n }\n\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n }\n\n #soup\\.exe:hover ~&-b, #soup\\.exe:active ~&-b { transition: opacity 0s; opacity: .2; }\n\n /* ====randomBG==== */\n\n @for $i from 0 through 15 { &[id=\"#{$i}\"] +&-b, &[id=\"#{$i}\"]::before { background: url(/assets/image/cornerCara/marisa#{$i}.webp)\n { size: contain } }; }\n\n & {\n background: url(/assets/image/cornerCara/marisaB_.webp) {\n size: 120%;\n position: -40% -40%;\n };\n image-rendering: pixelated;\n }\n}\n\n.ibm {\n &, &-b {\n // pos\n position: absolute;\n right: calc(10vw - 39vh); bottom: 0;\n z-index: -1;\n pointer-events: visible;\n transform: translateX(-20%);\n // size\n height: calc(25vh + 2.5vw);\n max-height: 35vh;\n aspect-ratio: 2;\n }\n\n &-b {\n mix-blend-mode: darken;\n }\n}\n\n.vid {\n// pos\n position: absolute;\n display: none;\n right: -38%; bottom: -55%;\n transform: scale(.17, .23) rotate(8deg) skew(3deg);\n// size\n width: 170%;\n aspect-ratio: 16/9;\n// styl\n pointer-events: none;\n background: #fff;\n\n @keyframes flicker {\n 0% { opacity: .65;}\n 50% { opacity: .65;}\n 50.1% { opacity: .5; }\n 100% { opacity: .5; }\n }\n\n iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n inset: 0;\n }\n}\n\n.mask:has(input:checked) ~ .vid { display: block; animation: flicker .05s linear infinite; }\n\n\n.pc {\n transition: visibility 0s 1s, opacity 1s;\n visibility: hidden;\n\n &-b {\n transition: opacity 1s;\n z-index: 1;\n }\n\n &, &-b {\n // pos\n position: absolute;\n right: 8%; bottom: 0%;\n // size\n width: 75%;\n aspect-ratio: 1.63;\n // styl\n pointer-events: none;\n background: url(/assets/image/ibm.png) { size: cover; };\n\n &::before {\n position: absolute;\n left: 35%;\n top: 45%;\n width: 50%;\n z-index: 20;\n transform: rotate(9deg) skew(7deg);\n font-size: 3.2vh;\n }\n }\n\n #soup\\.exe:hover ~ .ibm-b &, #soup\\.exe:active ~ .ibm-b & {\n transition: visibility 0s;\n visibility: visible;\n }\n\n #soup\\.exe:hover ~ .ibm &-b, #soup\\.exe:active ~ .ibm &-b {\n transition: 0s;\n opacity: 0;\n }\n}\n\n\n.mask {\n// pos\n position: absolute;\n display: block;\n right: 32.7%; bottom: 20%;\n z-index: 1;\n transform: rotate(11deg) skew(7deg);\n// size\n width: 28%;\n aspect-ratio: 1.34;\n// styl\n background: url(/assets/image/rainbowDither.png)\n {size: 4vw};\n opacity: 0;\n mix-blend-mode: darken;\n\n animation: maskScroll 1s linear infinite;\n @keyframes maskScroll {\n 0% { background-position: 0; }\n 100% { background-position: 8vw; }\n }\n\n &:has(input:checked) { opacity: .3; }\n\n &:not(:has(input:checked)) ~.pc-b, .ibm-b:not(:has(~.ibm & input:checked)) .pc {\n &::before { color: #fff; }\n &::before { content: \"Power off\"; filter: drop-shadow(0 0 5px #fff); }\n }\n}\n\n/* ======== */\n\n\n\n/* ==== C U R S O R ==== */\n\n// html { cursor: none;}\n\n#soup\\.exe, .fullscreen { cursor: url(/assets/image/cursor/hat.gif), auto !important; }\n\n@mixin wCursorGif($id) { cursor: url(/assets/image/cursor/hatq#{$id}.gif), auto; }\n\na, button, label, .cornerCara {\n animation: wonderCursor .5s infinite;\n @keyframes wonderCursor {\n 0% { @include wCursorGif(1) }\n 25% { @include wCursorGif(2) }\n 50% { @include wCursorGif(3) }\n 75% { @include wCursorGif(4) }\n 100% { @include wCursorGif(5) }\n }\n}\n\ncanvas {\n transition: .5s;\n opacity: .5;\n z-index: -2;\n image-rendering: pixelated;\n}\n\n#soup\\.exe:hover, #soup\\.exe:active {\n ~ canvas {\n opacity: 0;\n animation: hideCanvas .5s linear forwards;\n @keyframes hideCanvas {\n 0% { visibility: visible; }\n 100% { visibility: hidden; }\n }\n }\n}\n\n\n/* ======== */\n\n\n\n/* ==== S C R O L L B A R ==== */\n.window, .fullscreen { ::-webkit-scrollbar {\n width: 24px;\n &:horizontal { height: 24px; }\n\n &-corner {\n background: #d1d1f7;\n box-shadow: inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n }\n\n &-track { background: url(/assets/image/scrollbar/bg.png) {size: 4px}; }\n\n &-thumb {\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #44d,\n inset 1.5px 1.5px #fff,\n inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n }\n\n &-button { background-size: cover !important;\n\n &:horizontal, &:vertical { &:start:decrement, &:end:increment { display: block; }}\n\n &:vertical { height: 24px;\n &:start { background: url(/assets/image/scrollbar/up.png); }\n &:end { background: url(/assets/image/scrollbar/down.png); }\n }\n &:horizontal { width: 24px;\n &:start { background: url(/assets/image/scrollbar/left.png); }\n &:end { background: url(/assets/image/scrollbar/right.png); }\n }\n }\n}}\n\n@mixin scrollbar-dark {\n background: #338;\n box-shadow: inset -1.5px -1.5px #000,\n inset 1.5px 1.5px #aaf,\n inset -3px -3px #224,\n inset 3px 3px #44d;\n}\n\n/* ======== */\n\n\n\n/* ==== T X T ==== */\n\nhtml {\n color: #000;\n text-underline-offset: 25%;\n}\n\n.content { color: var(--color) !important;\n\n >p:not([class], :has(img)):after { content: \"湯\";\n //pos\n position: relative;\n display: inline-block;\n padding-left: .3em;\n //styl\n line-height: .5em;\n opacity: .5;\n font-size: .7em;\n color: var(--color-red);\n transform: rotate(15deg);\n white-space: pre;\n }\n}\n\na {\n position: relative;\n color: var(--color-miku);\n\n &::after { content: \"\";\n position: absolute;\n inset: -.5em;\n }\n\n &::selection, ::selection {\n background: var(--color-miku) !important;\n }\n}\n\n[norm] {\n color: var(--color-miku);\n text-decoration: underline;\n}\n\n/* HEADERS */\n\n// headers font style\n$hs: 1, 2, 3, 4; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-weight: bolder; }\n}\n$hs: 5, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-weight: normal; }\n}\n$hs: 4, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-style: italic }\n}\n\n// headers margin block\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} { margin-top: 1em; } // 1em top margin if headers is the first element\n :first-child ~ h#{$i} { margin-top: 2em; } // 2em top margin if else\n}\n\n$hs: 1, 2; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { margin-bottom: 1em; }\n}\n$hs: 3, 4, 5, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { margin-bottom: .5em; }\n}\n\n// reduce margin in between two adjacent headers\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} { @each $i in $hs { +h#{$i} { margin-top: 0 !important; } } }\n}\n\n// reveal url for hyperlinks. requires moardown.scss\n.content a { &::before { content: \"¥目标: 127.0.0.1\"attr(pageurl) attr(href) attr(t) !important; } } // same domain\n.content a[target=\"_blank\"] { &::before { content: \"¥目标: \"attr(href) attr(t) !important; } } // cross domain\n\n// headers padding\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} {\n position: relative;\n inset: -.5rem -.2rem;\n padding: .5rem .2rem;\n }\n}\n\n$hs: 1, 2, (3, 4) ;\n$hline: solid dashed dotted ;\n@for $i from 1 through length($hs) { @each $h in nth($hs, $i) {\n h#{$h} { border-bottom: var(--color) 3px nth($hline, $i); }\n}}\n\n$hs: 4, 5, 6; @each $i in $hs {\n h#{$i} { width: max-content };\n}\n\n// reveal heading id\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i}[id] {\n --notify: \"--> 点击复制标题链接\";\n\n &::before, &::after {\n font-weight: normal;\n font-size: max(.5em, .8rem);\n opacity: .7;\n }\n }\n}\n\n$hs: 1, 2, 3; @each $i in $hs {\n h#{$i}[id] {\n &::before, &::after { display: block; }\n\n &::before { content: \"#\" attr(id) \"\\00a0\";\n // pos\n position: relative;\n bottom: .2em;\n // styl\n text-decoration: dashed underline 1.5px;\n }\n\n &:hover { &::after { content: var(--notify);\n // pos\n position: absolute;\n top: .5rem; right: 0;\n // styl\n background: var(--color-page);\n opacity: 1;\n }\n }\n\n &:active {\n background: var(--color);\n color: var(--color-page);\n\n &::after { content: \"\"; }\n &::selection, ::selection {\n color: var(--color);\n background: var(--color-page);\n }\n }\n }\n}\n\n$hs: 4, 5, 6; @each $i in $hs {\n h#{$i}[id] {\n &::after { content: \"\\00a0#\" attr(id) \"\\00a0\" \"\\00a0\"; }\n\n &:hover { &::before { content: var(--notify);\n // pos\n position: absolute;\n top: -.8em;\n // styl\n text-wrap: nowrap;\n background: var(--color-page);\n opacity: 1;\n }\n }\n\n &:active {\n background: var(--color);\n color: var(--color-page);\n\n &::before { content: \"\"; }\n }\n }\n}\n\n/* ======== */\n\n// list\nul { ::marker { font-weight: bolder; color: var(--color-magenta); }\n list-style-type: \"☆ \";\n ul { ::marker { font-size: 1em; }\n list-style-type: hebrew;\n ul { ::marker { font-size: .7em; }\n list-style-type: \"。 \";\n ul { ::marker { font-size: .62em; }\n // list-style-type: inherit;\n ul { // ::marker { font-size: inherit; }\n list-style-type: \"· \";\n }\n }\n }\n }\n}\n\nli { margin-bottom: .5em; }\nul { margin-top: .5em; }\n\n// check\n\nul.task-list {\n list-style-type: \"- \";\n}\n\ninput.task-list-item-checkbox {\n position: relative;\n margin-right: .5em;\n visibility: hidden;\n\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n background: url(/assets/image/button/unchecked.gif) { size:cover; };\n visibility: visible;\n }\n\n &:checked::before { background: url(/assets/image/button/checked.gif) { size:cover; }; }\n}\n\n:not(pre) >code {\n color: var(--color-mid);\n margin-inline: .5em;\n\n &::before, &::after { content: \"/\";\n font-family: \"fusion\", monospace; \n margin-inline: .2em;\n }\n}\n\n// images:\n// adaptive and rezizeable container & img maximize \n// overly fucked spaghetti code\n\n.content img { -webkit-user-drag: none; }\n\np:has(img:not(.icon)) {\n// pos \n position: relative;\n display: block;\n// size\n width: 60%;\n max-width: 100%;\n padding: .5em 4em .75em .75em;\n margin-block: 2em;\n overflow: auto;\n resize: both;\n// styl\n text-align: center;\n border: var(--color) 2px dotted; \n\n .window & { max-height: MAX(20vh, 8em); }\n .window .content >& { max-height: MAX(100%, 8em); }\n .fullscreen & { max-height: MAX(50vh, 8em); }\n\n img:not(.icon) {\n // pos\n position: relative;\n // size\n height: auto; width: auto;\n box-sizing: border-box;\n min-width: MAX(10em, 100%);\n max-width: 100%;\n margin-top: .25em;\n // styl\n border: var(--color-fade) 4px solid;\n &:hover { border-color: var(--color); }\n }\n\n &:has(img:not(.icon):active) {\n // pos\n position: fixed;\n inset: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 201;\n // size\n max-width: unset;\n max-height: unset;\n overflow: hidden;\n resize: none;\n // styl\n border: none;\n\n img:not(.icon) {\n // pos\n top: 50%;\n transform: translateY(-50%);\n // size\n max-height: 100%;\n min-width: 100%;\n object-fit: contain;\n // styl\n border: none;\n }\n }\n}\n\n.content:has(p img:not(.icon):active)::after { content: \"\";\n position: fixed;\n inset: -2px;\n background: #000a;\n z-index: 200;\n};\n\n/* ======== */\n\n\n\n/* ==== D A R K M O D E ==== */\n\n.content:has(~.buttonBar .darkTg input:checked) { background: #0008 !important; }\n\n.buttonBar:has(.darkTg input:checked) ~.content, .content:has(~.buttonBar .darkTg input:checked) { @include darkscheme() }\n\n.fullscreen:has(.darkTg input:checked) { @include fullscreen-dark; }\n\n.window, .fullscreen { &:has(.darkTg input:checked) { ::-webkit-scrollbar-thumb { @include scrollbar-dark; }}}\n\n/* ======== */\n\n\n\n/* ==== F O N T ==== */\n\nhtml {\n font-family: \"fusion\", monospace;\n &:has(.fontTg input:checked) { font-family: \"ibm\", monospace; }\n}\n\ncode, kbd, samp {\n font-family: \"ibm\", monospace;\n html:has(.fontTg input:checked) & { font-family: \"ibm\", monospace; }\n}\n\n@font-face { font-family: \"fusion\";\n font-display: swap;\n src: url(/assets/font/fusion-pixel-10px-monospaced-zh_hant.ttf);\n}\n\n@font-face { font-family: \"ibm\";\n font-display: swap;\n src: url(/assets/font/IBM3161.ttf);\n}\n\n/* ======== */\n\n@import \"code\";\n\n@import \"moardown\";\n\n@import \"neko\";\n\n","//! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\r\n//# Modified it's arrangement little for my personal preference :|\r\n\r\n// Document ================================\r\n\r\n// 1. Correct the line height in all browsers.\r\n// 2. Prevent adjustments of font size after orientation changes in iOS.\r\nhtml {\r\n line-height: 1.15; // 1\r\n -webkit-text-size-adjust: 100%; // 2\r\n}\r\n\r\n// Sections ================================\r\n\r\n// Remove the margin in all browsers.\r\nbody { margin: 0; }\r\n\r\n// Render the `main` element consistently in IE.\r\nmain { display: block; }\r\n\r\n// Correct the font size and margin on `h1` elements within `section` and\r\n// `article` contexts in Chrome, Firefox, and Safari.\r\nh1 {\r\n font-size: 2em;\r\n margin: 0.67em 0;\r\n}\r\n\r\n// Grouping content ================================\r\n\r\n// 1. Add the correct box sizing in Firefox.\r\n// 2. Show the overflow in Edge and IE.\r\nhr {\r\n box-sizing: content-box; // 1\r\n height: 0; // 1\r\n overflow: visible; // 2\r\n}\r\n\r\n// 1. Correct the inheritance and scaling of font size in all browsers.\r\n// 2. Correct the odd `em` font sizing in all browsers.\r\npre {\r\n font-family: monospace, monospace; // 1\r\n font-size: 1em; // 2\r\n}\r\n\r\n// Text-level semantics ================================\r\n\r\n// Remove the gray background on active links in IE 10.\r\na { background-color: transparent; }\r\n\r\n// 1. Remove the bottom border in Chrome 57-\r\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\nabbr[title] {\r\n border-bottom: none; // 1\r\n text-decoration: underline; // 2\r\n text-decoration: underline dotted; // 2\r\n}\r\n\r\n// Add the correct font weight in Chrome, Edge, and Safari.\r\nb, strong {\r\n font-weight: bolder;\r\n}\r\n\r\n// 1. Correct the inheritance and scaling of font size in all browsers.\r\n// 2. Correct the odd `em` font sizing in all browsers.\r\ncode, kbd, samp {\r\n font-family: monospace, monospace; // 1\r\n font-size: 1em; // 2\r\n}\r\n\r\n// Add the correct font size in all browsers.\r\nsmall { font-size: 80%; }\r\n\r\n// Prevent `sub` and `sup` elements from affecting the line height in\r\n// all browsers.\r\nsub, sup {\r\n font-size: 75%;\r\n line-height: 0;\r\n position: relative;\r\n vertical-align: baseline;\r\n}\r\n\r\nsub { bottom: -0.25em; }\r\nsup { top: -0.5em; }\r\n\r\n// Embedded content ================================\r\n\r\n// Remove the border on images inside links in IE 10.\r\nimg { border-style: none; }\r\n\r\n// Forms ================================\r\n\r\n// 1. Change the font styles in all browsers.\r\n// 2. Remove the margin in Firefox and Safari.\r\nbutton, input, optgroup, select, textarea {\r\n font-family: inherit; // 1\r\n font-size: 100%; // 1\r\n line-height: 1.15; // 1\r\n margin: 0; // 2\r\n}\r\n\r\n// Show the overflow in IE.\r\n// 1. Show the overflow in Edge.\r\nbutton,\r\ninput { // 1\r\n overflow: visible;\r\n}\r\n\r\n// Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n// 1. Remove the inheritance of text transform in Firefox.\r\nbutton,\r\nselect { // 1\r\n text-transform: none;\r\n}\r\n\r\n// Correct the inability to style clickable types in iOS and Safari.\r\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\r\n -webkit-appearance: button;\r\n\r\n // Remove the inner border and padding in Firefox.\r\n &::-moz-focus-inner {\r\n border-style: none;\r\n padding: 0;\r\n }\r\n\r\n // Restore the focus styles unset by the previous rule.\r\n &:-moz-focusring { outline: 1px dotted ButtonText; }\r\n}\r\n\r\n// Correct the padding in Firefox.\r\nfieldset { padding: 0.35em 0.75em 0.625em; }\r\n\r\n// 1. Correct the text wrapping in Edge and IE.\r\n// 2. Correct the color inheritance from `fieldset` elements in IE.\r\n// 3. Remove the padding so developers are not caught out when they zero out\r\n// `fieldset` elements in all browsers.\r\nlegend {\r\n box-sizing: border-box; // 1\r\n color: inherit; // 2\r\n display: table; // 1\r\n max-width: 100%; // 1\r\n padding: 0; // 3\r\n white-space: normal; // 1\r\n}\r\n\r\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\nprogress { vertical-align: baseline; }\r\n\r\n// Remove the default vertical scrollbar in IE 10+.\r\ntextarea { overflow: auto; }\r\n\r\n// 1. Add the correct box sizing in IE 10.\r\n// 2. Remove the padding in IE 10.\r\n[type=\"checkbox\"], [type=\"radio\"] {\r\n box-sizing: border-box; // 1\r\n padding: 0; // 2\r\n}\r\n\r\n// Correct the cursor style of increment and decrement buttons in Chrome.\r\n[type=\"number\"] { &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { height: auto; } }\r\n\r\n// 1. Correct the odd appearance in Chrome and Safari.\r\n// 2. Correct the outline style in Safari.\r\n[type=\"search\"] {\r\n -webkit-appearance: textfield; // 1\r\n outline-offset: -2px; // 2\r\n\r\n // Remove the inner padding in Chrome and Safari on macOS.\r\n ::-webkit-search-decoration { -webkit-appearance: none; }\r\n}\r\n\r\n// 1. Correct the inability to style clickable types in iOS and Safari.\r\n// 2. Change font properties to `inherit` in Safari.\r\n::-webkit-file-upload-button {\r\n -webkit-appearance: button; // 1\r\n font: inherit; // 2\r\n}\r\n\r\n// Interactive ================================\r\n\r\n// Add the correct display in Edge, IE 10+, and Firefox.\r\ndetails { display: block; }\r\n\r\n// Add the correct display in all browsers.\r\nsummary { display: list-item; }\r\n\r\n// Misc ================================\r\n\r\n// Add the correct display in IE 10+.\r\ntemplate { display: none; }\r\n\r\n// Add the correct display in IE 10.\r\n[hidden] { display: none; }",".highlight .hll { background-color: #ffffcc }\r\n.highlight .c { color: #008800; font-style: italic } // Comment\r\n.highlight .err { border: 1px solid #FF0000 } // Error\r\n.highlight .k { color: #AA22FF; font-weight: bold } // Keyword\r\n// .highlight .o { color: #666666 } // Operator\r\n.highlight .cm { color: #008800; font-style: italic } // Comment.Multiline\r\n.highlight .cp { color: #008800 } // Comment.Preproc\r\n.highlight .c1 { color: #008800; font-style: italic } // Comment.Single\r\n.highlight .cs { color: #008800; font-weight: bold } // Comment.Special\r\n.highlight .gd { color: #A00000 } // Generic.Deleted\r\n.highlight .ge { font-style: italic } // Generic.Emph\r\n.highlight .gr { color: #FF0000 } // Generic.Error\r\n.highlight .gh { color: #000080; font-weight: bold } // Generic.Heading\r\n.highlight .gi { color: #00A000 } // Generic.Inserted\r\n.highlight .go { color: #808080 } // Generic.Output\r\n.highlight .gp { color: #000080; font-weight: bold } // Generic.Prompt\r\n.highlight .gs { font-weight: bold } // Generic.Strong\r\n.highlight .gu { color: #800080; font-weight: bold } // Generic.Subheading\r\n.highlight .gt { color: #0040D0 } // Generic.Traceback\r\n.highlight .kc { color: #AA22FF; font-weight: bold } // Keyword.Constant\r\n.highlight .kd { color: #AA22FF; font-weight: bold } // Keyword.Declaration\r\n.highlight .kn { color: #AA22FF; font-weight: bold } // Keyword.Namespace\r\n.highlight .kp { color: #AA22FF } // Keyword.Pseudo\r\n.highlight .kr { color: #AA22FF; font-weight: bold } // Keyword.Reserved\r\n.highlight .kt { color: #00BB00; font-weight: bold } // Keyword.Type\r\n// .highlight .m { color: #666666 } // Literal.Number\r\n.highlight .s { color: #BB4444 } // Literal.String\r\n.highlight .na { color: #BB4444 } // Name.Attribute\r\n.highlight .nb { color: #AA22FF } // Name.Builtin\r\n.highlight .nc { color: #0000FF } // Name.Class\r\n.highlight .no { color: #880000 } // Name.Constant\r\n.highlight .nd { color: #AA22FF } // Name.Decorator\r\n.highlight .ni { color: #999999; font-weight: bold } // Name.Entity\r\n.highlight .ne { color: #D2413A; font-weight: bold } // Name.Exception\r\n.highlight .nf { color: #00A000 } // Name.Function\r\n.highlight .nl { color: #A0A000 } // Name.Label\r\n.highlight .nn { color: #0000FF; font-weight: bold } // Name.Namespace\r\n.highlight .nt { color: #008000; font-weight: bold } // Name.Tag\r\n.highlight .nv { color: #B8860B } // Name.Variable\r\n.highlight .ow { color: #AA22FF; font-weight: bold } // Operator.Word\r\n.highlight .w { color: #bbbbbb } // Text.Whitespace\r\n// .highlight .mf { color: #666666 } // Literal.Number.Float\r\n// .highlight .mh { color: #666666 } // Literal.Number.Hex\r\n// .highlight .mi { color: #666666 } // Literal.Number.Integer\r\n// .highlight .mo { color: #666666 } // Literal.Number.Oct\r\n.highlight .sb { color: #BB4444 } // Literal.String.Backtick\r\n.highlight .sc { color: #BB4444 } // Literal.String.Char\r\n.highlight .sd { color: #BB4444; font-style: italic } // Literal.String.Doc\r\n.highlight .s2 { color: #BB4444 } // Literal.String.Double\r\n.highlight .se { color: #BB6622; font-weight: bold } // Literal.String.Escape\r\n.highlight .sh { color: #BB4444 } // Literal.String.Heredoc\r\n.highlight .si { color: #BB6688; font-weight: bold } // Literal.String.Interpol\r\n.highlight .sx { color: #008000 } // Literal.String.Other\r\n.highlight .sr { color: #BB6688 } // Literal.String.Regex\r\n.highlight .s1 { color: #BB4444 } // Literal.String.Single\r\n.highlight .ss { color: #B8860B } // Literal.String.Symbol\r\n.highlight .bp { color: #AA22FF } // Name.Builtin.Pseudo\r\n.highlight .vc { color: #B8860B } // Name.Variable.Class\r\n.highlight .vg { color: #B8860B } // Name.Variable.Global\r\n.highlight .vi { color: #B8860B } // Name.Variable.Instance\r\n// .highlight .il { color: #666666 } // Literal.Number.Integer.Long","// remove italic effect for ( ** in markdown ) in order to easily assign class to inline text\r\n// use .i to reobtain italic for \r\nem:not(.i) { &[class], &[r], &[t], &[norm], &[reveal] { font-style: normal; }}\r\n\r\n// sizes ================================\r\n\r\nh1, h2, h3, h4, h5, h6, .fake { --s: 1 }\r\n\r\n.big { --s: 1.25; }\r\n.bigger { --s: 1.5; }\r\n.small { --s: .75; }\r\n.smaller { --s: .5; }\r\n\r\n.size, .big, .bigger, .small, .smaller { &:not(h1, h2, h3, h4, h5, h6, .fake) { font-size: calc(var(--s) * 1em); } }\r\n\r\nh1, .fake.h1 { font-size: calc( 2em * var(--s)); }\r\nh2, .fake.h2 { font-size: calc( 1.6em * var(--s)); }\r\n@for $i from 3 through 6 { h#{$i}, .fake.h#{$i} { font-size: calc( 1.2em * var(--s)); } }\r\n\r\n// alignment ================================\r\n\r\n// inline elements are converted to block level element\r\n\r\n.l, .c, .r {\r\n --ofs: 0;\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n transform: translateX(--ofs);\r\n}\r\n\r\n// left\r\n.l {\r\n text-align: left;\r\n left:0\r\n}\r\n\r\n// center\r\n.c {\r\n text-align: center;\r\n}\r\n\r\n// right\r\n.r {\r\n text-align: right;\r\n right: 0;\r\n}\r\n\r\n// maximize width to page width for block level elements\r\n// which contains children with alignment\r\np, h1, h2, h3, h4, h5, h6 { &:has(>.c), &:has(>.r) { width: 100%; } }\r\n\r\n// lines ================================\r\n\r\n.u, .ovl, del, .dll, .u.ovl {\r\n text-decoration: { color: var(--lc); thickness: var(--lt) } ;\r\n &.-d { text-decoration: { style: dashed; }; }\r\n &.-do { text-decoration: { style: dotted; }; }\r\n &.-db { text-decoration: { style: double; }; }\r\n &.-w { text-decoration: { style: wavy; }; }\r\n}\r\n\r\n .u { text-decoration-line: underline; }\r\n .ovl { text-decoration-line: overline; }\r\ndel, .dll { text-decoration-line: line-through; }\r\n .u.ovl { text-decoration-line: underline overline; }\r\ndel, .dll { &.u { text-decoration-line: line-through underline; }\r\n &.ovl { text-decoration-line: line-through overline; }\r\n &.u.ovl { text-decoration-line: line-through underline overline; } }\r\n\r\n// colors ================================\r\n\r\n$colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple;\r\n\r\n// use \"''+$color\" so that scss don't throw a warning\r\n@each $color in $colors {\r\n .#{\"\"+$color} { color: $color; }\r\n .h#{\"\"+$color} { background-color: $color; }\r\n .b#{\"\"+$color} { --bw: 2px; border: $color solid var(--bw); }\r\n}\r\n\r\n@mixin colorbg {\r\n position: relative;\r\n display: inline-block;\r\n --bd: .05em;\r\n padding: calc(var(--bd)) calc(.1em + var(--bd));\r\n}\r\n\r\n.h, .b { @each $color in $colors { &#{\"\"+$color} { @include colorbg(); }}}\r\n\r\n.h {\r\n @include colorbg(); \r\n color: #44d;\r\n background: var(--color-yellow);\r\n}\r\n\r\n.ant {\r\n @include colorbg();\r\n &::before { --bw: 2px; border: 1px dashed #000; border-image: url(/assets/image/ants.gif) 1 repeat; }\r\n}\r\n\r\n// ruby (拼音) ================================\r\n\r\n// use *character*{:r=\"ruby\"} inside markdown\r\n[r] {\r\n position: relative;\r\n display: inline-block;\r\n // width: max-content;\r\n text-align: center;\r\n\r\n &::before { content: attr(r);\r\n // pos\r\n position: relative;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: block;\r\n // styl\r\n font-size: .75em;\r\n }\r\n}\r\n\r\n// del (黑幕) ================================\r\n\r\n.del { position: relative;\r\n\r\n &::after { content: \"\";\r\n position: absolute;\r\n inset: -2px -1px;\r\n background: var(--color);\r\n pointer-events: none;\r\n }\r\n\r\n &:hover { &::after {\r\n opacity: .2;\r\n }}\r\n}\r\n\r\n.blur { filter: blur(.1em); }\r\n.blurrier { filter: blur(.25em); }\r\n\r\n.blur, .blurrier {\r\n transition: filter .2s;\r\n &:hover { filter: blur(0); }\r\n}\r\n\r\n[reveal] {\r\n position: relative;\r\n display: inline-block;\r\n line-height: 0;\r\n text-decoration: dashed underline;\r\n\r\n &:hover {\r\n visibility: hidden;\r\n\r\n &::after { content: attr(reveal);\r\n display: block;\r\n visibility: visible;\r\n font-style: italic;\r\n }\r\n }\r\n}\r\n\r\n// tip ================================\r\n\r\n// use *content*{:t=\"tip\"} inside markdown\r\n[t] { text-decoration: dotted underline;\r\n &::before { content: attr(t); }\r\n}\r\n\r\n// reveal url for hyperlinks\r\n.content a { &::before { content: \"¥目标: {{ site.url }}\"attr(href) attr(t); } } // liquid doesn't work here\r\n\r\n.del:not([t]), .blur, .blurrier { &::before { content: \"你知道的太多了。\"; } }\r\n\r\n[t], a, .del {\r\n position: relative;\r\n\r\n &::before {\r\n transition: .2s .4s;\r\n pointer-events: none;\r\n // pos\r\n position: absolute;\r\n left: 0 ;\r\n top: .5em;\r\n z-index: 10;\r\n // size\r\n font-size: MAX(.5em, .75rem);\r\n width: max-content;\r\n max-width: 25vw;\r\n // styl\r\n padding: .2em .5em;\r\n background: var(--color-page);\r\n opacity: 0;\r\n }\r\n\r\n &:hover::before {\r\n transition: 0s;\r\n top: 1.5em;\r\n opacity: 1 !important;\r\n }\r\n\r\n // tip coloring\r\n & { --tc: var(--color);\r\n &::before {\r\n color: var(--tc);\r\n border: var(--tc) solid 2px;\r\n box-shadow: 4px 4px var(--tc);\r\n }\r\n }\r\n}\r\n\r\n.footnote::before { line-height: 1em; visibility: visible !important; }\r\n\r\na {\r\n &::before {\r\n transition: .2s;\r\n position: fixed;\r\n bottom: 0; top: unset;\r\n max-width: unset;\r\n }\r\n\r\n &:hover::before {\r\n top: unset;\r\n }\r\n}\r\n\r\n// tip above\r\n\r\n.above[t] {\r\n &::before { bottom: .5em; top: unset; }\r\n &:hover::before { bottom: 1.5em; }\r\n}\r\n\r\n// full width link\r\na.ab,\r\n#markdown-toc li>a,\r\n#f_markdown-toc li>a {\r\n display: block;\r\n right: 0;\r\n text-decoration: none;\r\n transition: 0s .2s;\r\n\r\n &::after { transition: opacity .0s .4s;\r\n inset: -.2em 0;\r\n box-sizing: border-box;\r\n border: {\r\n bottom: 3px solid;\r\n image: linear-gradient(90deg, var(--color-miku), #0000) 1;\r\n };\r\n opacity: 0;\r\n }\r\n\r\n &:hover {\r\n transition: 0s;\r\n padding-left: .5em;\r\n letter-spacing: .2em;\r\n\r\n &::after {\r\n transition: 0s;\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n// table ================================\r\n\r\ntable {\r\n --tbc: var(--color); --tbtc: var(--color);\r\n// pos\r\n position: relative;\r\n z-index: 1;\r\n//styl\r\n color: var(--tbtc);\r\n border-collapse: collapse;\r\n margin-block: 1em;\r\n\r\n &::before, td, th { padding-block: .2em; padding-inline: .5em; }\r\n\r\n &[h]::before { content: attr(h);\r\n position: relative;\r\n display: table-caption;\r\n bottom: -1px;\r\n }\r\n\r\n // inline table\r\n &.i { display: inline-table; }\r\n\r\n // default table\r\n &.t {\r\n box-shadow: 2px 2px var(--tbc);\r\n // border\r\n thead, tbody, td:first-child, tfoot { border: 2px solid { color: var(--tbc); }; }\r\n td:first-child { border-block-width: 0; }\r\n &::before, thead, td:first-child { font-weight: bolder; text-align: center; }\r\n\r\n tr:nth-child(even) td:not(:first-child) {\r\n position: relative;\r\n &::before { content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background: var(--tbc);\r\n opacity: .3;\r\n }\r\n }\r\n\r\n &::before {\r\n background: var(--tbc);\r\n color: var(--color-page);\r\n box-shadow: 2px 2px var(--tbc);\r\n }\r\n }\r\n\r\n // simple table\r\n &.ts {\r\n // border\r\n thead, tbody, tr :first-child, tfoot { border: 0 solid { color: var(--tbc); }; }\r\n thead { border-bottom-width: 2px; }\r\n tbody:not(:first-child), tfoot { border-top-width: 2px; }\r\n tr :first-child { border-right-width: 2px; }\r\n\r\n &::before {\r\n padding-block: .5em;\r\n font-weight: bolder;\r\n text-align: center;\r\n }\r\n }\r\n}\r\n\r\n// blocks ================================\r\n\r\n.content>blockquote, :not(blockquote) >blockquote { margin-block: 1em; }\r\n\r\nblockquote {\r\n >p:first-child { margin-top: 0; } >p:last-child { margin-bottom: 0; } // revome extra margin for first and last children blockquote\r\n margin-right: 1em;\r\n\r\n // inform blocks\r\n &.info, &.note, &.warn {\r\n display: block;\r\n position: relative;\r\n width: max-content;\r\n max-width: 100%;\r\n padding-inline: 2.5em .5em;\r\n padding-block: .5em;\r\n margin-left: 0;\r\n\r\n &::before {\r\n position: absolute;\r\n left: 0;\r\n top: .37em;\r\n padding-inline: .5em;\r\n font-size: 1.2em;\r\n }\r\n\r\n >blockquote { margin-left: 0; } // remove default left margin\r\n }\r\n\r\n // information block\r\n &.info {\r\n background: var(--color-fade);\r\n border: var(--color) 3px solid;\r\n box-shadow: 4px 4px var(--color);\r\n color: var(--color);\r\n\r\n &::before { content: \"ⓘ\"; }\r\n }\r\n\r\n &.note {\r\n background: var(--color-green-fade);\r\n border: var(--color-green) 3px solid;\r\n box-shadow: 4px 4px var(--color-green);\r\n color: var(--color-green);\r\n\r\n &::before { content: \"ⓘ\"; }\r\n }\r\n\r\n // warning block\r\n &.warn {\r\n background: var(--color-red-fade);\r\n border: var(--color-red) 3px solid;\r\n box-shadow: 4px 4px var(--color-red);\r\n color: var(--color-red);\r\n\r\n &::before { content: \"⚠\";\r\n top: .3em;\r\n font-size: 1.4em;\r\n font-weight: normal;\r\n padding-inline: .4em;\r\n }\r\n }\r\n\r\n // cascading layer block ( unnecessarily complex )\r\n &.layer {\r\n &, blockquote:not([class]) {\r\n transition: border-color .4s;\r\n padding: .5em;\r\n box-shadow: -3px 0 var(--color);\r\n border: #0000 3px solid { left-width: 0px; };\r\n\r\n &:hover {\r\n transition: border-color 0s;\r\n border-color: var(--color);\r\n }\r\n }\r\n\r\n &, >blockquote:not([class]) {\r\n &:hover {\r\n box-shadow: -3px 0 var(--color), 3px 3px var(--color);\r\n }\r\n }\r\n\r\n blockquote:not([class]) { margin: 0 .3em; }\r\n }\r\n}\r\n\r\n// footnote ================================\r\n\r\nem[norm] {\r\n position: relative;\r\n &::before { content: attr(norm); }\r\n\r\n sup[role=\"doc-noteref\"] {\r\n top: unset;\r\n position: static;\r\n\r\n .footnote {\r\n position: absolute;\r\n inset: 0;\r\n color: #0000;\r\n }\r\n }\r\n}\r\n\r\n.footnote {\r\n color: var(--color-red);\r\n}\r\n\r\n.footnotes {\r\n position: relative;\r\n margin-top: 4em;\r\n padding-top: 1em;\r\n\r\n &::before, ol li::after { content: \"\";\r\n position: absolute;\r\n width: 100%; height: .25em;\r\n }\r\n\r\n &::before {\r\n top: 0;\r\n border-block: var(--color) 2px solid;\r\n }\r\n\r\n ol { margin: 0;\r\n li[role=\"doc-endnote\"]:has(+li) {\r\n position: relative;\r\n margin-bottom: 2em;\r\n padding-bottom: 2em;\r\n\r\n &::after {\r\n width: calc(100% + 40px);\r\n bottom: 0; left: -40px;\r\n border-block: var(--color) 2px dashed;\r\n }\r\n }\r\n }\r\n\r\n p:has(.reversefootnote) {\r\n display: inline-block;\r\n }\r\n}\r\n\r\n// horizontal rules ================================\r\n\r\nhr {\r\n border: none { block: 2px var(--color) solid };\r\n height: .2em;\r\n margin-block: 2em;\r\n\r\n &.break {\r\n height: 1px;\r\n opacity: 0;\r\n border: none !important;\r\n }\r\n}\r\n\r\n\r\n/* ================ F A N C Y ================ */\r\n\r\n// mimic text-stroke using text-shadow ================================\r\n\r\n$text-stroke-shadow:\r\n calc(-1 * var(--std)) 0 var(--stc), // l\r\n calc(-1 * var(--std)) calc(-1 * var(--std)) var(--stc), // lt\r\n 0 calc(-1 * var(--std)) var(--stc), // t\r\n calc(var(--std)) calc(-1 * var(--std)) var(--stc), // rt\r\n calc(var(--std)) 0 var(--stc), // r\r\n calc(var(--std)) calc(var(--std)) var(--stc), // rb\r\n 0 calc(var(--std)) var(--stc), // b\r\n calc(-1 * var(--std)) calc(var(--std)) var(--stc); // lb\r\n\r\n// rainbow ================================\r\n\r\n.rainbow {\r\n --rspd: 1s; --rbgsz: 4em;\r\n &, *, ::before {\r\n image-rendering: pixelated;\r\n background: url(/assets/image/rainbowDither.png), url(#{$ghprxy}/assets/image/rainbowDither.png) {size: var(--rbgsz)};\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n color: #0000;\r\n\r\n animation: rainbowScroll var(--rspd) linear infinite;\r\n @keyframes rainbowScroll {\r\n 0% { background-position: 0; }\r\n 100% { background-position: var(--rbgsz); }\r\n }\r\n }\r\n\r\n // rainbow but with cyam magenta yellow color scheme\r\n &.cmy, &.cmy * {\r\n background-image: url(/assets/image/rainbowDither_.png), url(#{$ghprxy}/assets/image/rainbowDither_.png) ;\r\n }\r\n}\r\n\r\n// rainbow with stroke and shadow really cool\r\n.rainbow.fancy {\r\n --rs: .1em; --rsc: var(--color-sat);\r\n filter:\r\n drop-shadow(.05em -.05em var(--rsc))\r\n drop-shadow(-.05em .05em var(--rsc))\r\n drop-shadow(var(--rs) var(--rs) var(--rsc));\r\n}\r\n\r\n// .rainbow.fancy but with rainbowing shadows\r\n.rainbow.fancy2 {\r\n --rs: .1em; --rsc: var(--color-sat);\r\n filter:\r\n drop-shadow(.05em .05em var(--color-sat))\r\n drop-shadow(.1em .1em var(--color-page))\r\n drop-shadow(.1em .1em #dd4)\r\n drop-shadow(.1em .1em #4dd)\r\n drop-shadow(.1em .1em #d4d)\r\n drop-shadow(.05em -.05em var(--rsc))\r\n drop-shadow(-.05em .05em var(--rsc))\r\n\r\n}\r\n\r\n// shadow\r\n\r\n.shadow {\r\n --sdd: .25em; --sbr: 2px; --sdc: var(--color);\r\n text-shadow: var(--sdd) var(--sdd) var(--sbr) var(--sdc);\r\n}\r\n\r\n.projection {\r\n --pdd: .33em; --pdc: var(--color-plain);\r\n text-shadow: 1px 1px var(--color-page), var(--pdd) var(--pdd) var(--pdc);\r\n padding-bottom: .2em;\r\n}\r\n\r\n// echo ================================\r\n\r\n$echo:\r\n calc(.1em * var(--h)) calc(.1em * var(--v)) #44d8,\r\n calc(.2em * var(--h)) calc(.2em * var(--v)) #44d4,\r\n calc(.3em * var(--h)) calc(.3em * var(--v)) #44d2;\r\n\r\n$echorb:\r\n calc(.05em * var(--h)) calc(.05em * var(--v)) #d44,\r\n calc(.1em * var(--h)) calc(.1em * var(--v)) #dd4,\r\n calc(.15em * var(--h)) calc(.15em * var(--v)) #4dd,\r\n calc(.2em * var(--h)) calc(.2em * var(--v)) #d4d;\r\n\r\n$echo_type:\r\n ($echo),\r\n ($echorb),\r\n (($text-stroke-shadow), ($echo)),\r\n (($text-stroke-shadow), ($echorb));\r\n\r\n@mixin echo($h, $v, $e) {\r\n --h: #{$h}; --v: #{$v};\r\n text-shadow: nth($echo_type, $e);\r\n padding: calc(.8em * max(0,-$v)),\r\n calc(.8em * max(0, $h)),\r\n calc(.8em * max(0, $v)),\r\n calc(.8em * max(0,-$h));\r\n}\r\n\r\n$echo_list: \".echo\", \".echorb\", \".stroke.echo\", \".stroke.echorb\";\r\n\r\n@for $i from 1 through length($echo_list) { #{nth($echo_list, $i)}\r\n { @include echo( 1, 1, $i );\r\n &-down { @include echo( 0, 1, $i ); }\r\n &-down-left { @include echo(-1, 1, $i ); }\r\n &-left { @include echo(-1, 0, $i ); }\r\n &-up-left { @include echo(-1,-1, $i ); }\r\n &-up { @include echo( 0,-1, $i ); }\r\n &-up-right { @include echo( 1,-1, $i ); }\r\n &-right { @include echo( 1, 0, $i ); }\r\n};}\r\n\r\n// stroke ================================\r\n\r\n.stroke {\r\n --std: 1px; --stc: var(--color);\r\n color: var(--color-page);\r\n text-shadow: $text-stroke-shadow;\r\n\r\n &.shadow { text-shadow: $text-stroke-shadow, var(--sdd) var(--sdd) var(--sdc); }\r\n}\r\n\r\n// mirror ================================\r\n\r\n.mirror { transform: scaleX(-1); }\r\n\r\n.upsdown { transform: scaleY(-1); }\r\n\r\n.mirror, .upsdown { display: inline-block; }\r\n\r\n// animate ================================\r\n\r\n// blink\r\n\r\n.blink {\r\n --bt: 2s;\r\n animation: blink var(--bt) steps(1, end) infinite forwards;\r\n}\r\n\r\n.fadeinout {\r\n --ft: 2s;\r\n animation: blink var(--ft) linear infinite;\r\n}\r\n\r\n@keyframes blink { 50% { opacity: 0; } }\r\n\r\n// rumble shudder\r\n\r\n.rumble {\r\n --rt: .05s;\r\n animation: rumble var(--rt) linear infinite alternate;\r\n}\r\n\r\n.shudder {\r\n --st: .05s;\r\n animation: shudder var(--st) linear infinite alternate;\r\n}\r\n\r\n.rumble, .shudder { display: inline-block; }\r\n\r\n@keyframes rumble { 100% { transform: translateY(-.2em) } }\r\n@keyframes shudder { 100% { transform: translateX(.2em) } }\r\n\r\n// sparkle \r\n\r\n.sparkle:not(.rainbow) { background: url(/assets/image/sparkle.gif) repeat { size: 10em }; }\r\n.sparkle.rainbow { position: relative;\r\n\r\n &::before { content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: url(/assets/image/sparkle.gif) repeat { size: 10em }; \r\n }\r\n}\r\n\r\n// rotate\r\n\r\n.rotate {\r\n --rspd: 4s; --ofst-x: 0%; --ofst-y: 0%; --rphs: 0; --rheit: 2em;\r\n// pos\r\n display: inline-block;\r\n transform-origin:\r\n calc( 50% + var(--ofst-x))\r\n calc( 50% + var(--ofst-y));\r\n// size\r\n width: max-content;\r\n// styl\r\n margin-block: calc(var(--rheit)/2);\r\n padding: 0;\r\n// ani\r\n animation: rotate var(--rspd) linear calc(var(--rspd) * var(--rphs) * -1) infinite;\r\n\r\n &.rev { animation-direction: reverse; }\r\n\r\n &.c {\r\n transform: translateY(50%);\r\n animation-name: rotateCentered;\r\n left: 50%; transform: translateX(-50%);\r\n }\r\n\r\n @keyframes rotate {\r\n 0% { transform: rotate(0); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes rotateCentered {\r\n 0% { transform: translateX(-50%) rotate(0); }\r\n 100% { transform: translateX(-50%) rotate(360deg); }\r\n }\r\n}\r\n\r\n// pulse\r\n\r\n.pulse {\r\n --pspd: .25s; --pscl: 1.2; --pphs: 0; --s: 1;\r\n\r\n // .rotate & { --pscl: 1.5 }\r\n\r\n display: inline-block;\r\n\r\n // sizing\r\n font-size: calc(var(--pscl) * 1em);\r\n animation: pulse var(--pspd) ease-out calc(var(--pspd) * var(--pphs) * -1) infinite alternate;\r\n @keyframes pulse {\r\n 0% { scale: calc(1 / var(--pscl)); }\r\n 100% { scale: 1; }\r\n }\r\n}","#oneko {\r\n position: fixed;\r\n left: 16px; top: 16px;\r\n width: 32px; height: 32px;\r\n z-index: 2533;\r\n background: url(/assets/neko/oneko_sakura.gif);\r\n image-rendering: pixelated;\r\n opacity: .7;\r\n pointer-events: none;\r\n}"],"file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss","../../../_sass/normalize.scss","../../../_sass/code.scss","../../../_sass/neko.scss"],"names":[],"mappings":"CAAA,uBCOA,KACI,iBACA,8BAMJ,cAGA,mBAIA,GACI,cACA,eAOJ,GACI,uBACA,SACA,iBAKJ,IACI,gCACA,cAMJ,iCAIA,YACI,mBACA,0BACA,iCAIJ,SACI,mBAKJ,cACI,gCACA,cAIJ,oBAIA,QACI,cACA,cACA,kBACA,wBAGJ,mBACA,eAKA,sBAMA,sCACI,oBACA,eACA,iBACA,SAKJ,aAEI,iBAKJ,cAEI,oBAIJ,gDACI,0BAGA,wHACE,kBACA,UAIF,0IAIJ,oCAMA,OACI,sBACA,cACA,cACA,eACA,UACA,mBAIJ,iCAGA,uBAIA,6BACI,sBACA,UAIc,8FAIlB,cACI,6BACA,oBAGA,kEAKJ,6BACI,0BACA,aAMJ,sBAGA,0BAKA,sBAGA,sBD3LA,MACI,cACA,kBACA,mBACA,oBACA,kBACA,oBACA,yBACA,kBACA,uBACA,qBACA,0BACA,mBACA,wBACA,sBACA,2BACA,mBAsBJ,WAEI,sBACA,oCACA,4FAGJ,iBAEW,+BACA,+BACP,YAGJ,+BAGA,KACI,qCACI,sBACA,2BACA,+BAIR,wBACI,eACA,QACA,WACA,oBACA,wCACI,sBACA,2BAIR,uBACI,eACA,QACA,WACA,uCACA,WAGJ,oCACI,2CACI,sBACA,wBACA,0BAWJ,YAEI,sBAIA,2DACA,uIACA,2BAEA,gIAIA,uCACI,kBACA,QACA,uCAGJ,+BACI,yCACI,sBACA,+CACA,yBAEJ,0BACA,WAGJ,8BACI,4CACI,qCACA,0DAWR,eAEI,kBACA,YACA,0JAEA,mBACI,kBACA,WACA,qBACe,sCACX,eAIJ,kDACe,sCACA,uCAGf,qBACI,4BACA,8CAGI,kDAGJ,iEAEA,8EAEA,2BACI,kBACA,4BACA,iBAOpB,YAEI,WAEA,mCAEA,gBACI,kBACA,QACA,2BAUR,MAEI,kBACA,QAEA,0BACA,sCACI,sBACA,+BAIR,cAEI,kBACA,QACA,uBACA,gBAGA,sBACI,YAEA,oCACI,kBACA,cAKZ,yBACI,kBACA,YACA,SAUR,SAEI,mBACA,6BACA,mCACA,uBAKJ,YACI,8CAEA,kBACA,aACA,sBACA,SACA,qBACA,2BACA,WAEA,WAEA,mBACA,6FAKA,eACI,0CACA,UACA,mBACA,mBAGJ,qBAEI,OACA,mCACA,WAEA,iBACA,sDAIJ,uBACI,kBACA,WACU,sCACV,mBAEA,gFAEA,8BACI,kBACA,QAuBZ,WAEI,aACA,cAEA,WACA,qDACA,iBACA,gBAEA,mBAEI,kBACA,cACA,UACA,kBAEA,yBAEA,sBACA,mBACA,yGAKA,sCACI,kBACA,iBACA,qBACA,0BAEI,iCACA,uCAIR,4CAEA,0BACI,mBACA,yGAKA,kCACI,iBACA,qBAIR,6FACA,mGACA,gFACA,gFAGJ,mBAEI,kBACA,YACA,eACA,eACA,qBAEA,gBAEA,2BACI,SACA,2BAGJ,mCACA,qCAIA,+CACA,4CACA,4CASJ,0BAEI,eACA,qCACA,qBACA,WAEA,0BACA,iBACA,iBAEA,yDAGJ,cACI,sBACA,oBAEA,UAGJ,+BACI,kBACA,QAGJ,6EAI4B,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,oHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBADsB,uHACtB,wBAEN,YACI,uDACI,qBACA,8BAEJ,0BAKJ,YAEI,kBACA,iCACA,WACA,uBACA,2BAEA,0BACA,gBACA,eAGJ,OACI,sBAIR,KAEI,kBACA,aACA,uBACA,oDAEA,WACA,kBAEA,oBACA,gBAEA,YACI,kBACA,WACA,YACA,WACA,QAGJ,mFAEA,mBACI,eACA,gBACA,iBACA,iBAKR,IACI,uCACA,kBAEA,MACI,sBACA,UAGJ,UAEI,kBACA,mBAEA,UACA,kBAEA,oBACA,4DAEA,0BACI,kBACA,SACA,QACA,UACA,WACA,kCACA,gBAIR,yCACI,yBACA,mBAGJ,yCACI,cACA,UAKR,MAEI,kBACA,cACA,uBACA,UACA,mCAEA,UACA,kBAEA,gDACK,oBACL,UACA,sBAEA,wCACA,sBACI,yBACA,8BAGJ,oCAGI,gHACA,0JAYR,gFAIA,2BACI,oCACA,wBACI,GALgB,gDAMhB,IANgB,gDAOhB,IAPgB,gDAQhB,IARgB,gDAShB,KATgB,iDAaxB,OACI,eACA,WACA,WACA,0BAIA,qCACI,UACA,yCACA,sBACI,sBACA,wBAYR,4DACmB,WACf,8FAEA,0EACI,mBACA,yDAIJ,2IAEA,wEACI,mBACA,yGAMJ,2GAE+B,8fAE3B,wGACI,uJACA,qJAEJ,2GACI,6JACA,0JAKZ,4EACmB,sBACf,yHAGI,mIACA,sIAqBZ,KACI,WACA,4BAGJ,YACI,wBACA,wBAGJ,uCACI,yBAEA,oDAEI,kBACA,qBACA,kBAEA,iBACA,WACA,eACA,uBACA,wBACA,gBAIR,IACI,gBAGJ,WACI,kBACA,wBAEA,6BACI,kBACA,aAQJ,4HAIA,8DAGA,4DAKA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BADA,kBACA,+BAIA,4DAGA,4HAK2B,wjCAK3B,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAHJ,GACI,kBACA,sBACA,oBAOJ,mKAIA,+DAKA,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WANR,OACI,yBAEA,6BACI,mBACA,0BACA,WAOJ,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BA3BR,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BA3BR,2CAEA,wCAEI,kBACA,YAEA,uCAGM,0CAEF,kBACA,kBAEA,6BACA,UAIR,cACI,wBACA,wBAEA,gCACA,mDACI,mBACA,6BAQR,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAjBJ,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAjBJ,4CAEU,2CAEF,kBACA,WAEA,iBACA,6BACA,UAIR,cACI,wBACA,wBAEA,iCAQZ,GACgB,qBADX,0DAED,MACgB,uBADX,6BAED,SACgB,qBADX,iCAEI,qCAED,eACgB,qBAOhC,qBAIA,aACI,qBAGJ,8BACI,kBACA,kBACA,kBAEA,iDACI,kBACA,QACA,yEACA,mBAGJ,qHAGJ,eAEI,6BACA,mBAEA,gDAEI,mBAQR,oCAEA,sBAEI,kBACA,cAEA,UACA,eACA,6BACA,iBACA,cACA,YAEA,kBACA,+BAEA,uDACA,gEACA,2DAEA,qCAEI,kBAEA,uBACA,sBACA,yBACA,eACA,iBAEA,mCACA,qEAGJ,iDAEI,eACA,QACA,SACA,2BACA,YAEA,gBACA,iBACA,gBACA,YAEA,YAEA,gEAEI,QACA,2BAEA,gBACA,eACA,mBAEA,YAKZ,wDACI,eACA,WACA,mCACA,YASJ,8FAEA,+FA38BI,cACA,mBACA,oBACA,kBACA,oBACA,yBACA,kBACA,uBACA,0BACA,wBACA,2BACA,mBAk8BJ,uCA7qBI,gBACA,uFAKA,oGAEA,mGAIA,6DAmqBJ,8EA9TI,gBACA,mGAqUJ,KACI,+BACA,4DAGJ,cACI,4BACA,0IAGJ,gCACI,kBACA,+DAGJ,6BACI,kBACA,kCEhgCJ,sCACA,2CACA,qCACA,0CAEA,4CACA,0BACA,4CACA,2CACA,6BACA,iCACA,yBACA,2CACA,6BACA,0BACA,2CACA,gCACA,6CACA,6BACA,2CACA,2CACA,2CACA,0BACA,2CACA,2CAEA,yBACA,0BACA,0BACA,0BACA,0BACA,0BACA,2CACA,8CACA,6BACA,6BACA,2CACA,4CACA,6BACA,2CACA,yBAKA,0BACA,0BACA,4CACA,0BACA,2CACA,0BACA,2CACA,2BACA,0BACA,0BACA,6BACA,0BACA,6BACA,6BACA,6BC3DA,OACI,eACA,mBACA,uBACA,aACA,8CACA,0BACA,WACA","sourcesContent":["iframe { display: initial; } // show navlink after apply style.css\n\n@import \"normalize\";\n\n:root {\n --color: #44d;\n --color-sat: #00f;\n --color-fade: #eef;\n --color-plain: #000;\n --color-mid: #666;\n --color-green: #464;\n --color-green-fade: #efe;\n --color-red: #d00;\n --color-red-fade: #fee;\n --color-yellow: #ff0;\n --color-yellow-fade: #ffe;\n --color-miku: #4dd;\n --color-miku-fade: #eff;\n --color-magenta: #f4f;\n --color-magenta-fade: #fef;\n --color-page: #fff;\n}\n\n@mixin darkscheme {\n --color: #aaf;\n --color-fade: #224;\n --color-plain: #fff;\n --color-mid: #aaa;\n --color-green: #aca;\n --color-green-fade: #232;\n --color-red: #faa;\n --color-red-fade: #422;\n --color-yellow-fade: #662;\n --color-miku-fade: #066;\n --color-magenta-fade: #626;\n --color-page: #002;\n}\n\n\n\n/* ==== M A I N ==== */\n\n#soup\\.exe {\n// styl\n border: #fff 1px solid;\n box-shadow: 10px 10px 20px 10px #44d;\n &::-webkit-resizer { background: url(/assets/image/resizer.gif) {size: cover}; }\n}\n\n#soup\\.exe, #pseu {\n// resize\n max: { height: 95vh; width: 99vw }\n min: { height: 25vh; width: 25vw }\n resize: both;\n}\n\nhtml { image-rendering: pixelated; }\n\n// main bg\nhtml {\n background: url(/assets/image/bg.gif) {\n color: #000;\n position: center;\n size: MAX(20vw,40vh);\n }\n}\n\nhtml::before { content: \"\";\n position: fixed;\n inset: 0;\n z-index: -2;\n pointer-events: none;\n background: url(/assets/image/cloud.png) {\n size: cover;\n position: center;\n };\n}\n\nhtml::after { content: \"\";\n position: fixed;\n inset: 0;\n z-index: -1;\n background: url(/assets/image/rain.gif);\n opacity: .5;\n}\n\nhtml:has(.cornerCara:not([id=\"0\"])) {\n background: url(/assets/image/IMG_1148.JPG) {\n color: #000;\n size: contain;\n position: right;\n };\n}\n\n/* ======= */\n\n\n\n/* ==== C 1 ==== */\n\n.c1 {\n .banner {\n // styl\n border: #000 1px solid;\n // background: url(https://media.tenor.com/5lWosOHS630AAAAC/amor.gif);\n // background: url(https://usagif.com/wp-content/uploads/gifs/water-66.gif);\n // background: url(https://64.media.tumblr.com/9af92cc03553bd821021fd950fbc33b5/1534f96efdb15e70-b5/s100x200/6f110ffcfa7afe0af25add8144e9d30fbefc97fe.gifv);\n background: url(/assets/image/xp_.gif) { size: 20vw; };\n background: url(https://64.media.tumblr.com/1b8577d77a572535172d95b5bb0a070b/tumblr_inline_n25dksRrdF1qhwjx8.gif) { size: cover; };\n background-position-y: 6 0%;\n\n box-shadow: inset 10px -10px 5px -5px #44d,\n inset -30px 0 30px -20px #44da,\n inset -90px 50px 30px -30px #fff;\n\n &::before, &::after {\n position: absolute;\n inset: 0;\n background-repeat: no-repeat !important;\n }\n\n &::before { content: \"\";\n background: url(/assets/image/banner.png) {\n color: #ccf;\n size: MAX(90%, 600px) 100% !important;\n position: 40px;\n };\n mix-blend-mode: hard-light;\n opacity: .8;\n }\n\n &::after { content: \"\";\n background: url(/assets/image/bannerTxt.png) {\n size: auto 100% !important;\n position: calc(100% - MAX(20%, 20px)) !important;\n };\n // opacity: .5;\n }\n\n }\n\n .main {\n\n /* ==== N A V B A R ==== */\n\n .nav {\n // pos\n position: relative;\n z-index: 100;\n background: #d1d1f7 url(https://64.media.tumblr.com/c63ab1ff7f79b9d030a8a3a14f3535ec/tumblr_inline_mveh0uIwTZ1rfdbtm.png) {position: bottom right};\n\n nav {\n position: relative;\n z-index: -1;\n p {\n padding: { inline: 1em; block: .5em; };\n margin-block: 0;\n }\n\n\n a, .urHere-i {\n padding: { right: 100%; block: .5em; };\n margin: { right: -100%; block: -.5em };\n }\n \n p {\n text-shadow: #d1d1f7 2px 2px;\n transition: all 0s .2s, background-color 0s .4s;\n \n a {\n &.urHere { pointer-events: none; }\n }\n \n a, .urHere-i { color: #44d; } \n\n &:nth-child(even) { background: #fff8; }\n\n &:hover {\n transition: all 0s;\n text-align: right !important;\n filter: invert(1);\n }\n }\n }\n }\n }\n\n .bottom {\n // size\n width: 100%;\n // styl\n background: #0008;\n\n img {\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n}\n\n\n\n/* ==== C 2 ==== */\n\n.c2 {\n &-b {\n // pos\n position: absolute;\n inset: 0;\n // styl\n image-rendering: pixelated;\n background: url(/assets/image/bg2.gif) {\n color: #000;\n size: MAX(10vw,20vh);\n };\n }\n\n .chatroom {\n // pos\n position: absolute;\n inset: 0;\n width: auto; height: auto;\n overflow: scroll;\n // margin-inline: 5%;\n\n .giscus {\n height: 100%;\n\n .giscus-frame {\n position: absolute;\n inset: 0 unset;\n }\n }\n }\n\n & iframe[name=\"neolink\"] {\n position: absolute;\n margin: 10px;\n bottom: 0;\n }\n}\n\n/* ======== */\n\n\n\n/* ==== C O N T E N T ==== */\n\n.content {\n// styl\n text-align: justify;\n text-justify: inter-ideograph;\n background-color: var(--color-page);\n padding-inline: 3em 2em;\n}\n\n// fullscreen\n\n.fullscreen {\n transition: opacity .2s .2s, top .2s, bottom .2s;\n// pos\n position: absolute;\n display: flex;\n flex-direction: column;\n left: 50%;\n top: 50vh; bottom: 50vh;\n transform: translateX(-50%);\n z-index: 10;\n// size\n width: 90vw;\n// styl\n background: #d1d1f7;\n box-shadow: -1px -1px 0 1px #e8e8fb,\n 0 0 0 2px #000,\n inset -2px -4px #a2a2ee,\n inset 2px 2px #fff;\n\n &.on {\n transition: opacity .2s, top .2s, bottom .2s;\n opacity: 1;\n pointer-events: all;\n top: 2vh; bottom: 2vh;\n }\n\n .content {\n // size\n flex: 9;\n padding-inline: 2em calc(2em + 5vw);\n margin: 6px;\n // styl\n font-size: 1.2rem;\n box-shadow: inset -2px -2px #e8e8fb,\n inset 2px 2px #44d;\n }\n\n .bottomBar {\n position: relative;\n height: 1em;\n margin: { block: 0 10px; inline: 6px };\n color: var(--color);\n\n .left, .right { display: inline-block; }\n\n .right {\n position: absolute;\n right: 0;\n }\n }\n}\n\n@mixin fullscreen-dark {\n background: #338;\n box-shadow: -1px -1px 0 1px #aaf,\n 0 0 0 2px #44d,\n inset -2px -4px #224,\n inset 2px 2px #000;\n\n .buttonBar { background: linear-gradient(90deg, #44d 20%, #000); }\n\n .content { box-shadow: inset -2px -2px #224,\n inset 2px 2px #aaf;\n }\n\n .bottomBar { color: #fff; }\n}\n\n// button bar\n\n.buttonBar {\n// size\n height: 1.5em;\n padding: .25em;\n// styl\n color: #fff;\n background: linear-gradient(90deg, #44d 20%, #a2a2ee);\n text-wrap: nowrap;\n overflow: hidden;\n\n .toggle {\n // pos\n position: absolute;\n display: block;\n top: .25em;\n margin-right: .5em;\n // size\n width: 1.5em; height: 1.5em;\n // styl\n box-sizing: border-box;\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #44d,\n inset 1.5px 1.5px #fff,\n inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n\n &::before { content: \"\";\n position: absolute;\n top: 5px; left: 5px;\n right: 6px; bottom: 6px;\n image-rendering: pixelated;\n background: {\n size: cover !important;\n repeat: no-repeat !important\n };\n }\n\n &:hover { background: #e8e8fb; }\n\n &:active {\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #fff,\n inset 1.5px 1.5px #44d,\n inset -3px -3px #e8e8fb,\n inset 3px 3px #a2a2ee;\n\n &::before {\n top: 6px; left: 6px;\n right: 5px; bottom: 5px;\n }\n }\n\n .window &.fullscreenTg::before { background: url(/assets/image/button/max.gif); }\n .fullscreen &.fullscreenTg::before { background: url(/assets/image/button/unmax.gif); }\n &.darkTg::before { background: url(/assets/image/button/dark.gif); }\n &.fontTg::before { background: url(/assets/image/button/font.gif); }\n }\n\n .window & {\n // pos\n position: relative;\n height: 100%;\n min-width: 20px;\n max-width: 20px;\n padding-inline: .25em;\n // styl\n background: #44d;\n\n .toggle {\n left: 50%;\n transform: translateX(-50%);\n }\n\n .darkTg { top: 2em; }\n .fontTg { top: 3.5em }\n }\n\n .fullscreen & {\n .fullscreenTg { right: 0em; }\n .darkTg { right: 1.75em; }\n .fontTg { right: 3.25em; }\n }\n}\n\n\n\n/* ==== C O R N E R ==== */ // WARNING: spaghetti ahead!!!\n\n.cornerCara {\n &, &-b {\n // pos\n position: fixed;\n bottom: -16vh; right: calc(10vw - 39vh);\n transform: scale(75%);\n z-index: -3;\n // size\n height: calc(100vh + 10vw);\n max-height: 140vh;\n aspect-ratio: .77;\n // styl\n filter: drop-shadow(-1vw 2vw #0008);\n }\n\n &-b {\n transition: opacity 1s;\n pointer-events: none;\n // pos\n z-index: 2;\n }\n\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n }\n\n #soup\\.exe:is(:hover, :active) ~&-b { transition: opacity 0s; opacity: .2; }\n\n /* ====randomBG==== */\n\n @for $i from 0 through 15 { &[id=\"#{$i}\"] +&-b, &[id=\"#{$i}\"]::before { background: url(/assets/image/cornerCara/marisa#{$i}.webp)\n { size: contain } }; }\n\n & {\n background: url(/assets/image/cornerCara/marisaB_.webp) {\n size: 120%;\n position: -40% -40%;\n };\n image-rendering: pixelated;\n }\n}\n\n.ibm {\n &, &-b {\n // pos\n position: absolute;\n right: calc(10vw - 39vh); bottom: 0;\n z-index: -1;\n pointer-events: visible;\n transform: translateX(-20%);\n // size\n height: calc(25vh + 2.5vw);\n max-height: 35vh;\n aspect-ratio: 2;\n }\n\n &-b {\n mix-blend-mode: darken;\n }\n}\n\n.vid {\n// pos\n position: absolute;\n display: none;\n right: -38%; bottom: -55%;\n transform: scale(.17, .23) rotate(8deg) skew(3deg);\n// size\n width: 170%;\n aspect-ratio: 16/9;\n// styl\n pointer-events: none;\n background: #fff;\n\n iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n inset: 0;\n }\n\n .mask:has(input:checked) ~ & { display: block; animation: flicker .05s linear infinite; }\n\n @keyframes flicker {\n 0% { opacity: .65;}\n 50% { opacity: .65;}\n 50.1% { opacity: .5; }\n 100% { opacity: .5; }\n }\n}\n\n\n.pc {\n transition: visibility 0s 1s, opacity 1s;\n visibility: hidden;\n\n &-b {\n transition: opacity 1s;\n z-index: 1;\n }\n\n &, &-b {\n // pos\n position: absolute;\n right: 8%; bottom: 0%;\n // size\n width: 75%;\n aspect-ratio: 1.63;\n // styl\n pointer-events: none;\n background: url(/assets/image/ibm.png) { size: cover; };\n\n &::before {\n position: absolute;\n left: 35%;\n top: 45%;\n width: 50%;\n z-index: 20;\n transform: rotate(9deg) skew(7deg);\n font-size: 3.2vh;\n }\n }\n\n #soup\\.exe:is(:hover, :active) ~ .ibm-b & {\n transition: visibility 0s;\n visibility: visible;\n }\n\n #soup\\.exe:is(:hover, :active) ~ .ibm &-b {\n transition: 0s;\n opacity: 0;\n }\n}\n\n\n.mask {\n// pos\n position: absolute;\n display: block;\n right: 32.7%; bottom: 20%;\n z-index: 1;\n transform: rotate(11deg) skew(7deg);\n// size\n width: 28%;\n aspect-ratio: 1.34;\n// styl\n background: url(/assets/image/rainbowDither.png)\n {size: 4vw};\n opacity: 0;\n mix-blend-mode: darken;\n\n animation: maskScroll 1s linear infinite;\n @keyframes maskScroll {\n 0% { background-position: 0; }\n 100% { background-position: 8vw; }\n }\n\n &:has(input:checked) { opacity: .3; }\n\n &:not(:has(input:checked)) ~.pc-b, .ibm-b:not(:has(~.ibm & input:checked)) .pc {\n &::before { color: #fff; }\n &::before { content: \"Power off\"; filter: drop-shadow(0 0 5px #fff); }\n }\n}\n\n/* ======== */\n\n\n\n/* ==== C U R S O R ==== */\n\n// html { cursor: none;}\n\n#soup\\.exe, .fullscreen { cursor: url(/assets/image/cursor/hat.gif), auto !important; }\n\n@mixin CursorGif($id) { cursor: url(/assets/image/cursor/hatq#{$id}.gif), auto; }\n\na, button, label, .cornerCara {\n animation: wonderCursor .5s infinite;\n @keyframes wonderCursor {\n 0% { @include CursorGif(1) }\n 25% { @include CursorGif(2) }\n 50% { @include CursorGif(3) }\n 75% { @include CursorGif(4) }\n 100% { @include CursorGif(5) }\n }\n}\n\ncanvas {\n transition: .5s;\n opacity: .5;\n z-index: -2;\n image-rendering: pixelated;\n}\n\n#soup\\.exe:is(:hover, :active) {\n ~ canvas {\n opacity: 0;\n animation: hideCanvas .5s linear forwards;\n @keyframes hideCanvas {\n 0% { visibility: visible; }\n 100% { visibility: hidden; }\n }\n }\n}\n\n\n/* ======== */\n\n\n\n/* ==== S C R O L L B A R ==== */\n.window, .fullscreen {\n ::-webkit-scrollbar {\n width: 16px;\n &:horizontal { height: 16px; }\n\n &-corner {\n background: #d1d1f7;\n box-shadow: inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n }\n\n &-track { background: url(/assets/image/scrollbar/bg.png) {size: 4px}; }\n\n &-thumb {\n background: #d1d1f7;\n box-shadow: inset -1.5px -1.5px #44d,\n inset 1.5px 1.5px #fff,\n inset -3px -3px #a2a2ee,\n inset 3px 3px #e8e8fb;\n }\n\n &-button { background-size: cover !important;\n\n &:horizontal, &:vertical { &:start:decrement, &:end:increment { display: block; }}\n\n &:vertical { height: 16px;\n &:start { background: url(/assets/image/scrollbar/up.png); }\n &:end { background: url(/assets/image/scrollbar/down.png); }\n }\n &:horizontal { width: 16px;\n &:start { background: url(/assets/image/scrollbar/left.png); }\n &:end { background: url(/assets/image/scrollbar/right.png); }\n }\n }\n }\n\n .content::-webkit-scrollbar {\n width: 24px !important;\n &:horizontal { height: 24px !important; }\n\n &-button {\n &:vertical { height: 24px !important; }\n &:horizontal { width: 24px !important; }\n }\n }\n}\n\n\n\n@mixin scrollbar-dark {\n background: #338;\n box-shadow: inset -1.5px -1.5px #000,\n inset 1.5px 1.5px #aaf,\n inset -3px -3px #224,\n inset 3px 3px #44d;\n}\n\n/* ======== */\n\n\n\n/* ==== T X T ==== */\n\nhtml {\n color: #000;\n text-underline-offset: 12.5%;\n}\n\n::selection {\n color: var(--color-page);\n background: var(--color);\n}\n\n.content { color: var(--color) !important;\n overflow-wrap: break-word;\n\n >p:not([class], :has(img)):after { content: \"湯\";\n //pos\n position: relative;\n display: inline-block;\n padding-left: .3em;\n //styl\n line-height: .5em;\n opacity: .5;\n font-size: .7em;\n color: var(--color-red);\n transform: rotate(15deg);\n white-space: pre;\n }\n}\n\npre {\n overflow-x: auto;\n}\n\n.content a {\n position: relative;\n color: var(--color-miku);\n\n &::after { content: \"\";\n position: absolute;\n inset: -.5em;\n }\n}\n\n/* HEADERS */\n\n// headers font style\n$hs: 1, 2, 3, 4; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-weight: bolder; }\n}\n\n$hs: 5, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-weight: normal; }\n}\n$hs: 4, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { font-style: italic }\n}\n\n// headers margin block\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} { margin-top: 1em; } // 1em top margin if headers is the first element\n :first-child ~ h#{$i} { margin-top: 2em; } // 2em top margin if else\n}\n\n$hs: 1, 2; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { margin-bottom: 1em; }\n}\n$hs: 3, 4, 5, 6; @each $i in $hs {\n h#{$i}, .fake.h#{$i} { margin-bottom: .5em; }\n}\n\n// reduce margin in between two adjacent headers\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} { @each $i in $hs { +h#{$i} { margin-top: 0 !important; } } }\n}\n\n// headers padding\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i} {\n position: relative;\n inset: -.5rem -.2rem;\n padding: .5rem .2rem;\n }\n}\n\n$hs: 1, 2, (3, 4) ;\n$hline: solid dashed dotted ;\n@for $i from 1 through length($hs) { @each $h in nth($hs, $i) {\n h#{$h} { border-bottom: var(--color) 3px nth($hline, $i); }\n}}\n\n$hs: 4, 5, 6; @each $i in $hs {\n h#{$i} { width: max-content };\n}\n\n// reveal heading id\n$hs: 1, 2, 3, 4, 5, 6; @each $i in $hs {\n h#{$i}[id] {\n --notify: \"--> 点击复制标题链接\";\n\n &::before, &::after {\n font-weight: normal;\n font-size: max(.5em, .8rem);\n opacity: .7;\n }\n }\n}\n\n$hs: 1, 2, 3; @each $i in $hs {\n h#{$i}[id] {\n &::before, &::after { display: block; }\n\n &::before { content: \"#\" attr(id) \"\\00a0\";\n // pos\n position: relative;\n bottom: .2em;\n // styl\n text-decoration: dashed underline 1.5px;\n }\n\n &:hover { &::after { content: var(--notify);\n // pos\n position: absolute;\n top: .5rem; right: 0;\n // styl\n background: var(--color-page);\n opacity: 1;\n }\n }\n\n &:active {\n background: var(--color);\n color: var(--color-page);\n\n &::after { content: \"\"; }\n &::selection, ::selection {\n color: var(--color);\n background: var(--color-page);\n }\n }\n }\n}\n\n$hs: 4, 5, 6; @each $i in $hs {\n h#{$i}[id] {\n &::after { content: \"\\00a0#\" attr(id) \"\\00a0\" \"\\00a0\"; }\n\n &:hover { &::before { content: var(--notify);\n // pos\n position: absolute;\n top: -.8em;\n // styl\n text-wrap: nowrap;\n background: var(--color-page);\n opacity: 1;\n }\n }\n\n &:active {\n background: var(--color);\n color: var(--color-page);\n\n &::before { content: \"\"; }\n }\n }\n}\n\n/* ======== */\n\n// list\nul { ::marker { font-weight: bolder; color: var(--color-magenta); }\n list-style-type: \"☆ \";\n ul { ::marker { font-size: 1em; }\n list-style-type: hebrew;\n ul { ::marker { font-size: .7em; }\n list-style-type: \"。 \";\n ul { ::marker { font-size: .62em; }\n // list-style-type: inherit;\n ul { // ::marker { font-size: inherit; }\n list-style-type: \"· \";\n }\n }\n }\n }\n}\n\ntd ul { margin-block: 0; }\n\n// check\n\nul.task-list {\n list-style-type: \"- \";\n}\n\ninput.task-list-item-checkbox {\n position: relative;\n margin-right: .5em;\n visibility: hidden;\n\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n background: url(/assets/image/button/unchecked.gif) { size:cover; };\n visibility: visible;\n }\n\n &:checked::before { background: url(/assets/image/button/checked.gif) { size:cover; }; }\n}\n\n:not(pre) >code {\n // color: var(--color-mid);\n background: var(--color-page);\n margin-inline: .5em;\n\n &:is(::before, ::after) { content: \"/\";\n // font-family: \"fusion\", monospace; \n margin-inline: .2em;\n }\n}\n\n// images:\n// adaptive and rezizeable container & img maximize \n// overly fucked-up spaghetti code\n\n.content img { -webkit-user-drag: none; }\n\np:has(img:not(.icon)) {\n// pos \n position: relative;\n display: block;\n// size\n width: 60%;\n max-width: 100%;\n padding: .5em 4em .75em .75em;\n margin-block: 2em;\n overflow: auto;\n resize: both;\n// styl\n text-align: center;\n border: var(--color) 2px dotted; \n\n .window & { max-height: MAX(20vh, 8em); }\n .window .content >& { max-height: MAX(100%, 8em); }\n .fullscreen & { max-height: MAX(50vh, 8em); }\n\n img:not(.icon) {\n // pos\n position: relative;\n // size\n height: auto; width: auto;\n box-sizing: border-box;\n min-width: MAX(10em, 100%);\n max-width: 100%;\n margin-top: .25em;\n // styl\n border: var(--color-fade) 4px solid;\n &:hover { border-color: var(--color); }\n }\n\n &:has(img:not(.icon):active) {\n // pos\n position: fixed;\n inset: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 201;\n // size\n max-width: unset;\n max-height: unset;\n overflow: hidden;\n resize: none;\n // styl\n border: none;\n\n img:not(.icon) {\n // pos\n top: 50%;\n transform: translateY(-50%);\n // size\n max-height: 100%;\n min-width: 100%;\n object-fit: contain;\n // styl\n border: none;\n }\n }\n}\n\n.content:has(p img:not(.icon):active)::after { content: \"\";\n position: fixed;\n inset: -2px;\n background: #000a;\n z-index: 200;\n};\n\n/* ======== */\n\n\n\n/* ==== D A R K M O D E ==== */\n\n.content:has(~.buttonBar .darkTg input:checked) { background: #0008 !important; }\n\n.buttonBar:has(.darkTg input:checked) ~.content, .content:has(~.buttonBar .darkTg input:checked) { @include darkscheme() }\n\n.fullscreen:has(.darkTg input:checked) { @include fullscreen-dark; }\n\n:is(.window, .fullscreen):has(.darkTg input:checked) ::-webkit-scrollbar-thumb { @include scrollbar-dark; }\n\n/* ======== */\n\n\n\n/* ==== F O N T ==== */\n\nhtml {\n font-family: \"fusion\", monospace;\n &:has(.fontTg input:checked) { font-family: \"ibm\", monospace; }\n}\n\ncode, kbd, samp {\n font-family: \"ibm\", monospace;\n html:has(.fontTg input:checked) & { font-family: \"ibm\", monospace; }\n}\n\n@font-face { font-family: \"fusion\";\n font-display: swap;\n src: url(/assets/font/fusion-pixel-10px-monospaced-zh_hant.ttf);\n}\n\n@font-face { font-family: \"ibm\";\n font-display: swap;\n src: url(/assets/font/IBM3161.ttf);\n}\n\n/* ======== */\n\n@import \"code\";\n\n@import \"neko\";\n\n","//! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\r\n//# Modified it's arrangement little for my personal preference :|\r\n\r\n// Document ================================\r\n\r\n// 1. Correct the line height in all browsers.\r\n// 2. Prevent adjustments of font size after orientation changes in iOS.\r\nhtml {\r\n line-height: 1.15; // 1\r\n -webkit-text-size-adjust: 100%; // 2\r\n}\r\n\r\n// Sections ================================\r\n\r\n// Remove the margin in all browsers.\r\nbody { margin: 0; }\r\n\r\n// Render the `main` element consistently in IE.\r\nmain { display: block; }\r\n\r\n// Correct the font size and margin on `h1` elements within `section` and\r\n// `article` contexts in Chrome, Firefox, and Safari.\r\nh1 {\r\n font-size: 2em;\r\n margin: 0.67em 0;\r\n}\r\n\r\n// Grouping content ================================\r\n\r\n// 1. Add the correct box sizing in Firefox.\r\n// 2. Show the overflow in Edge and IE.\r\nhr {\r\n box-sizing: content-box; // 1\r\n height: 0; // 1\r\n overflow: visible; // 2\r\n}\r\n\r\n// 1. Correct the inheritance and scaling of font size in all browsers.\r\n// 2. Correct the odd `em` font sizing in all browsers.\r\npre {\r\n font-family: monospace, monospace; // 1\r\n font-size: 1em; // 2\r\n}\r\n\r\n// Text-level semantics ================================\r\n\r\n// Remove the gray background on active links in IE 10.\r\na { background-color: transparent; }\r\n\r\n// 1. Remove the bottom border in Chrome 57-\r\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\nabbr[title] {\r\n border-bottom: none; // 1\r\n text-decoration: underline; // 2\r\n text-decoration: underline dotted; // 2\r\n}\r\n\r\n// Add the correct font weight in Chrome, Edge, and Safari.\r\nb, strong {\r\n font-weight: bolder;\r\n}\r\n\r\n// 1. Correct the inheritance and scaling of font size in all browsers.\r\n// 2. Correct the odd `em` font sizing in all browsers.\r\ncode, kbd, samp {\r\n font-family: monospace, monospace; // 1\r\n font-size: 1em; // 2\r\n}\r\n\r\n// Add the correct font size in all browsers.\r\nsmall { font-size: 80%; }\r\n\r\n// Prevent `sub` and `sup` elements from affecting the line height in\r\n// all browsers.\r\nsub, sup {\r\n font-size: 75%;\r\n line-height: 0;\r\n position: relative;\r\n vertical-align: baseline;\r\n}\r\n\r\nsub { bottom: -0.25em; }\r\nsup { top: -0.5em; }\r\n\r\n// Embedded content ================================\r\n\r\n// Remove the border on images inside links in IE 10.\r\nimg { border-style: none; }\r\n\r\n// Forms ================================\r\n\r\n// 1. Change the font styles in all browsers.\r\n// 2. Remove the margin in Firefox and Safari.\r\nbutton, input, optgroup, select, textarea {\r\n font-family: inherit; // 1\r\n font-size: 100%; // 1\r\n line-height: 1.15; // 1\r\n margin: 0; // 2\r\n}\r\n\r\n// Show the overflow in IE.\r\n// 1. Show the overflow in Edge.\r\nbutton,\r\ninput { // 1\r\n overflow: visible;\r\n}\r\n\r\n// Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n// 1. Remove the inheritance of text transform in Firefox.\r\nbutton,\r\nselect { // 1\r\n text-transform: none;\r\n}\r\n\r\n// Correct the inability to style clickable types in iOS and Safari.\r\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\r\n -webkit-appearance: button;\r\n\r\n // Remove the inner border and padding in Firefox.\r\n &::-moz-focus-inner {\r\n border-style: none;\r\n padding: 0;\r\n }\r\n\r\n // Restore the focus styles unset by the previous rule.\r\n &:-moz-focusring { outline: 1px dotted ButtonText; }\r\n}\r\n\r\n// Correct the padding in Firefox.\r\nfieldset { padding: 0.35em 0.75em 0.625em; }\r\n\r\n// 1. Correct the text wrapping in Edge and IE.\r\n// 2. Correct the color inheritance from `fieldset` elements in IE.\r\n// 3. Remove the padding so developers are not caught out when they zero out\r\n// `fieldset` elements in all browsers.\r\nlegend {\r\n box-sizing: border-box; // 1\r\n color: inherit; // 2\r\n display: table; // 1\r\n max-width: 100%; // 1\r\n padding: 0; // 3\r\n white-space: normal; // 1\r\n}\r\n\r\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\nprogress { vertical-align: baseline; }\r\n\r\n// Remove the default vertical scrollbar in IE 10+.\r\ntextarea { overflow: auto; }\r\n\r\n// 1. Add the correct box sizing in IE 10.\r\n// 2. Remove the padding in IE 10.\r\n[type=\"checkbox\"], [type=\"radio\"] {\r\n box-sizing: border-box; // 1\r\n padding: 0; // 2\r\n}\r\n\r\n// Correct the cursor style of increment and decrement buttons in Chrome.\r\n[type=\"number\"] { &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { height: auto; } }\r\n\r\n// 1. Correct the odd appearance in Chrome and Safari.\r\n// 2. Correct the outline style in Safari.\r\n[type=\"search\"] {\r\n -webkit-appearance: textfield; // 1\r\n outline-offset: -2px; // 2\r\n\r\n // Remove the inner padding in Chrome and Safari on macOS.\r\n ::-webkit-search-decoration { -webkit-appearance: none; }\r\n}\r\n\r\n// 1. Correct the inability to style clickable types in iOS and Safari.\r\n// 2. Change font properties to `inherit` in Safari.\r\n::-webkit-file-upload-button {\r\n -webkit-appearance: button; // 1\r\n font: inherit; // 2\r\n}\r\n\r\n// Interactive ================================\r\n\r\n// Add the correct display in Edge, IE 10+, and Firefox.\r\ndetails { display: block; }\r\n\r\n// Add the correct display in all browsers.\r\nsummary { display: list-item; }\r\n\r\n// Misc ================================\r\n\r\n// Add the correct display in IE 10+.\r\ntemplate { display: none; }\r\n\r\n// Add the correct display in IE 10.\r\n[hidden] { display: none; }",".highlight .hll { background-color: #ffffcc }\r\n.highlight .c { color: #008800; font-style: italic } // Comment\r\n.highlight .err { border: 1px solid #FF0000 } // Error\r\n.highlight .k { color: #AA22FF; font-weight: bold } // Keyword\r\n// .highlight .o { color: #666666 } // Operator\r\n.highlight .cm { color: #008800; font-style: italic } // Comment.Multiline\r\n.highlight .cp { color: #008800 } // Comment.Preproc\r\n.highlight .c1 { color: #008800; font-style: italic } // Comment.Single\r\n.highlight .cs { color: #008800; font-weight: bold } // Comment.Special\r\n.highlight .gd { color: #A00000 } // Generic.Deleted\r\n.highlight .ge { font-style: italic } // Generic.Emph\r\n.highlight .gr { color: #FF0000 } // Generic.Error\r\n.highlight .gh { color: #000080; font-weight: bold } // Generic.Heading\r\n.highlight .gi { color: #00A000 } // Generic.Inserted\r\n.highlight .go { color: #808080 } // Generic.Output\r\n.highlight .gp { color: #000080; font-weight: bold } // Generic.Prompt\r\n.highlight .gs { font-weight: bold } // Generic.Strong\r\n.highlight .gu { color: #800080; font-weight: bold } // Generic.Subheading\r\n.highlight .gt { color: #0040D0 } // Generic.Traceback\r\n.highlight .kc { color: #AA22FF; font-weight: bold } // Keyword.Constant\r\n.highlight .kd { color: #AA22FF; font-weight: bold } // Keyword.Declaration\r\n.highlight .kn { color: #AA22FF; font-weight: bold } // Keyword.Namespace\r\n.highlight .kp { color: #AA22FF } // Keyword.Pseudo\r\n.highlight .kr { color: #AA22FF; font-weight: bold } // Keyword.Reserved\r\n.highlight .kt { color: #00BB00; font-weight: bold } // Keyword.Type\r\n// .highlight .m { color: #666666 } // Literal.Number\r\n.highlight .s { color: #BB4444 } // Literal.String\r\n.highlight .na { color: #BB4444 } // Name.Attribute\r\n.highlight .nb { color: #AA22FF } // Name.Builtin\r\n.highlight .nc { color: #0000FF } // Name.Class\r\n.highlight .no { color: #880000 } // Name.Constant\r\n.highlight .nd { color: #AA22FF } // Name.Decorator\r\n.highlight .ni { color: #999999; font-weight: bold } // Name.Entity\r\n.highlight .ne { color: #D2413A; font-weight: bold } // Name.Exception\r\n.highlight .nf { color: #00A000 } // Name.Function\r\n.highlight .nl { color: #A0A000 } // Name.Label\r\n.highlight .nn { color: #0000FF; font-weight: bold } // Name.Namespace\r\n.highlight .nt { color: #008000; font-weight: bold } // Name.Tag\r\n.highlight .nv { color: #B8860B } // Name.Variable\r\n.highlight .ow { color: #AA22FF; font-weight: bold } // Operator.Word\r\n.highlight .w { color: #bbbbbb } // Text.Whitespace\r\n// .highlight .mf { color: #666666 } // Literal.Number.Float\r\n// .highlight .mh { color: #666666 } // Literal.Number.Hex\r\n// .highlight .mi { color: #666666 } // Literal.Number.Integer\r\n// .highlight .mo { color: #666666 } // Literal.Number.Oct\r\n.highlight .sb { color: #BB4444 } // Literal.String.Backtick\r\n.highlight .sc { color: #BB4444 } // Literal.String.Char\r\n.highlight .sd { color: #BB4444; font-style: italic } // Literal.String.Doc\r\n.highlight .s2 { color: #BB4444 } // Literal.String.Double\r\n.highlight .se { color: #BB6622; font-weight: bold } // Literal.String.Escape\r\n.highlight .sh { color: #BB4444 } // Literal.String.Heredoc\r\n.highlight .si { color: #BB6688; font-weight: bold } // Literal.String.Interpol\r\n.highlight .sx { color: #008000 } // Literal.String.Other\r\n.highlight .sr { color: #BB6688 } // Literal.String.Regex\r\n.highlight .s1 { color: #BB4444 } // Literal.String.Single\r\n.highlight .ss { color: #B8860B } // Literal.String.Symbol\r\n.highlight .bp { color: #AA22FF } // Name.Builtin.Pseudo\r\n.highlight .vc { color: #B8860B } // Name.Variable.Class\r\n.highlight .vg { color: #B8860B } // Name.Variable.Global\r\n.highlight .vi { color: #B8860B } // Name.Variable.Instance\r\n// .highlight .il { color: #666666 } // Literal.Number.Integer.Long","#oneko {\r\n position: fixed;\r\n left: 16px; top: 16px;\r\n width: 32px; height: 32px;\r\n z-index: 2533;\r\n background: url(/assets/neko/oneko_sakura.gif);\r\n image-rendering: pixelated;\r\n opacity: .7;\r\n pointer-events: none;\r\n}"],"file":"style.css"} \ No newline at end of file diff --git a/_site/assets/css/markaround.css b/_site/assets/css/markaround.css new file mode 100644 index 0000000..5d263bc --- /dev/null +++ b/_site/assets/css/markaround.css @@ -0,0 +1 @@ +em:not(.i):is([class],[r],[t],[foot],[reveal]){font-style:normal}h1,h2,h3,h4,h5,h6,.fake{--s: 1 }.big{--s: 1.5}.bigger{--s: 1.75}.small{--s: .75}.smaller{--s: .5}:is(.size,.big,.bigger,.small,.smaller):not(h1,h2,h3,h4,h5,h6,.fake){font-size:calc(var(--s)*1em)}h1,.fake.h1{font-size:calc(2em*var(--s))}h2,.fake.h2{font-size:calc(1.6em*var(--s))}h3,.fake.h3{font-size:calc(1.2em*var(--s))}h4,.fake.h4{font-size:calc(1.2em*var(--s))}h5,.fake.h5{font-size:calc(1.2em*var(--s))}h6,.fake.h6{font-size:calc(1.2em*var(--s))}.l,.c,.r{--ofs: 0;position:relative;display:block;width:100%;transform:translateX(--ofs)}.l{text-align:left;left:0;text-justify:auto}.c{text-align:center}.r{text-align:right;right:0}:is(p,h1,h2,h3,h4,h5,h6):is(:has(>.l),:has(>.c),:has(>.r)){width:100%}.u,.ovl,del,.dll,.u.ovl{text-decoration-color:var(--lc);text-decoration-thickness:var(--lt)}.u.-d,.ovl.-d,del.-d,.dll.-d,.u.ovl.-d{text-decoration-style:dashed}.u.-do,.ovl.-do,del.-do,.dll.-do,.u.ovl.-do{text-decoration-style:dotted}.u.-db,.ovl.-db,del.-db,.dll.-db,.u.ovl.-db{text-decoration-style:double}.u.-w,.ovl.-w,del.-w,.dll.-w,.u.ovl.-w{text-decoration-style:wavy}.u{text-decoration-line:underline}.ovl{text-decoration-line:overline}del,.dll{text-decoration-line:line-through}.u.ovl{text-decoration-line:underline overline}del.u,.dll.u{text-decoration-line:line-through underline}del.ovl,.dll.ovl{text-decoration-line:line-through overline}del.u.ovl,.dll.u.ovl{text-decoration-line:line-through underline overline}.white,.wh{color:#fff}.hwhite,.hwh{background-color:#fff;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bwhite,.bwh{--bw: 2px;border:#fff solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.silver,.si{color:silver}.hsilver,.hsi{background-color:silver;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bsilver,.bsi{--bw: 2px;border:silver solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.gray,.gr{color:gray}.hgray,.hgr{background-color:gray;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bgray,.bgr{--bw: 2px;border:gray solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.black,.bc{color:#000}.hblack,.hbc{background-color:#000;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bblack,.bbc{--bw: 2px;border:#000 solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.red,.re{color:red}.hred,.hre{background-color:red;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bred,.bre{--bw: 2px;border:red solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.maroon,.ma{color:maroon}.hmaroon,.hma{background-color:maroon;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bmaroon,.bma{--bw: 2px;border:maroon solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.yellow,.ye{color:#ff0}.hyellow,.hye{background-color:#ff0;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.byellow,.bye{--bw: 2px;border:#ff0 solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.olive,.ol{color:olive}.holive,.hol{background-color:olive;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bolive,.bol{--bw: 2px;border:olive solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.lime,.li{color:lime}.hlime,.hli{background-color:lime;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.blime,.bli{--bw: 2px;border:lime solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.green,.gr{color:green}.hgreen,.hgr{background-color:green;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bgreen,.bgr{--bw: 2px;border:green solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.aqua,.aq{color:aqua}.haqua,.haq{background-color:aqua;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.baqua,.baq{--bw: 2px;border:aqua solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.teal,.te{color:teal}.hteal,.hte{background-color:teal;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bteal,.bte{--bw: 2px;border:teal solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.blue,.bl{color:blue}.hblue,.hbl{background-color:blue;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bblue,.bbl{--bw: 2px;border:blue solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.navy,.na{color:navy}.hnavy,.hna{background-color:navy;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bnavy,.bna{--bw: 2px;border:navy solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.fuchsia,.fu{color:#f0f}.hfuchsia,.hfu{background-color:#f0f;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bfuchsia,.bfu{--bw: 2px;border:#f0f solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.purple,.pu{color:purple}.hpurple,.hpu{background-color:purple;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.bpurple,.bpu{--bw: 2px;border:purple solid var(--bw);position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.c .h{--hc: #44d;position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd));color:var(--hc);background:var(--color-yellow)}.ant{position:relative;display:inline-block;--bd: .05em;padding:calc(var(--bd)) calc(.1em + var(--bd))}.ant::before{--bw: 2px;border:1px dashed #000;border-image:url(/assets/image/ants.gif) 1 repeat}[r]{position:relative;display:inline-block;text-align:center}[r]::before{content:attr(r);position:relative;left:50%;transform:translateX(-50%);display:block;font-size:.75em}.del{position:relative}.del::after{content:"";position:absolute;inset:-2px -1px;background:var(--color);pointer-events:none}.del:hover::after{opacity:.1}.blur{--br: .1em;filter:blur(0.1em)}.blurrier{filter:blur(0.25em)}.blur,.blurrier{transition:filter .2s}.blur:hover,.blurrier:hover{filter:blur(0)}[reveal]{position:relative;display:inline-block;line-height:0;text-decoration:dashed underline}[reveal]:hover{visibility:hidden}[reveal]:hover::after{content:attr(reveal);display:block;visibility:visible;font-style:italic}[t]{text-decoration:dotted underline}[t]::before{content:attr(t)}.content a::before{content:"¥目标: 127.0.0.1" attr(pageurl) attr(href) attr(t) !important}.content a[target=_blank]::before{content:"¥目标: " attr(href) attr(t) !important}.del:not([t])::before{content:"你知道的太多了。"}[t],a,.del{position:relative}[t]::before,a::before,.del::before{transition:.2s .2s;pointer-events:none;position:absolute;left:0;top:.5em;z-index:10;font-size:max(.5em,.75rem);width:max-content;max-width:25vw;padding:.2em .5em;background:var(--color-page);opacity:0}[t]:hover::before,a:hover::before,.del:hover::before{transition:0s .5s;top:1.75em;opacity:1 !important}[t],a,.del{--tc: var(--color)}[t]::before,a::before,.del::before{color:var(--tc);border:var(--tc) solid 2px;box-shadow:4px 4px var(--tc)}.footnote::before{line-height:1em;visibility:visible !important}a::before{transition:0s;position:fixed;bottom:0;top:unset;max-width:unset}a:hover::before{transition:0s;top:unset}.above[t]::before{bottom:.75em;top:unset}.above[t]:hover::before{bottom:1.5em}:is(a.ab,:is(#markdown-toc,#f_markdown-toc) li>a){display:block;right:0;text-decoration:none;transition:0s .2s}:is(a.ab,:is(#markdown-toc,#f_markdown-toc) li>a)::after{transition:opacity 0s .4s;inset:-0.2em 0;box-sizing:border-box;border-bottom:3px solid;border-image:linear-gradient(90deg, var(--color-miku), rgba(0, 0, 0, 0)) 1;opacity:0}:is(a.ab,:is(#markdown-toc,#f_markdown-toc) li>a):hover{transition:0s;padding-left:.5em;letter-spacing:.2em}:is(a.ab,:is(#markdown-toc,#f_markdown-toc) li>a):hover::after{transition:0s;opacity:1}table{--tbc: var(--color);--tbtc: var(--color);position:relative;z-index:1;color:var(--tbtc);border-collapse:collapse;margin-block:1em}table::before,table td,table th{padding-inline:.5em}table[h]::before{content:attr(h);position:relative;display:table-caption;bottom:-1px}table.t{box-shadow:2px 2px var(--tbc)}table.t thead,table.t tbody,table.t td:first-child,table.t tfoot{border:2px solid;border-color:var(--tbc)}table.t td:first-child{border-block-width:0}table.t::before,table.t thead,table.t td:first-child{font-weight:bolder;text-align:center}table.t tr:nth-child(even) td:not(:first-child){position:relative}table.t tr:nth-child(even) td:not(:first-child)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tbc);opacity:.3}table.t::before{background:var(--tbc);color:var(--color-page);box-shadow:2px 2px var(--tbc)}table.ts thead,table.ts tbody,table.ts tr :first-child,table.ts tfoot{border:0 solid;border-color:var(--tbc)}table.ts thead{border-bottom-width:2px}table.ts tbody:not(:first-child),table.ts tfoot{border-top-width:2px}table.ts tr :first-child{border-right-width:2px}table.ts::before{padding-block:.5em;font-weight:bolder;text-align:center}:is(.content,:not(blockquote))>blockquote{margin-block:1em}blockquote{margin-right:1em}blockquote>p:first-child{margin-top:0}blockquote>p:last-child{margin-bottom:0}blockquote:is(.info,.warn){display:block;position:relative;width:max-content;max-width:100%;padding-inline:2.5em .5em;padding-block:.5em;margin-left:0}.content>blockquote:is(.info,.warn){max-width:90%}blockquote:is(.info,.warn)::before{position:absolute;left:0;top:.37em;padding-inline:.5em;font-size:1.2em}blockquote:is(.info,.warn)>blockquote{margin-left:0}blockquote.info{background:var(--color-fade);border:var(--color) 3px solid;box-shadow:4px 4px var(--color);color:var(--color)}blockquote.info::before{content:"ⓘ"}blockquote.warn{background:var(--color-red-fade);border:var(--color-red) 3px solid;box-shadow:4px 4px var(--color-red);color:var(--color-red)}blockquote.warn::before{content:"⚠";top:.3em;font-size:1.4em;font-weight:normal;padding-inline:.4em}blockquote.layer,blockquote.layer blockquote:not([class]){transition:border-color .4s;padding:.5em;box-shadow:-3px 0 var(--color);border:rgba(0,0,0,0) 3px solid;border-left-width:0px}blockquote.layer:hover,blockquote.layer blockquote:not([class]):hover{transition:border-color 0s;border-color:var(--color);box-shadow:-3px 0 var(--color),3px 3px var(--color)}blockquote.layer blockquote:not([class]){margin:0 .3em}.footnote,[foot]{text-decoration:none}sup[role=doc-noteref]{top:unset;position:static;font-size:100%;color:var(--color-miku)}sup[role=doc-noteref]::before{content:"["}sup[role=doc-noteref]::after{content:"]"}[foot]{position:relative;color:var(--color-miku)}[foot]::before{content:"[" attr(foot) "]"}[foot] .footnote{position:absolute;inset:0;color:rgba(0,0,0,0)}[foot] sup[role=doc-noteref]::before{content:none}[foot] sup[role=doc-noteref]::after{content:none}.footnotes{position:relative;margin-top:4em;padding-top:1em}.footnotes::before,.footnotes ol li::after{content:"";position:absolute;width:100%;height:.25em}.footnotes::before{top:0;border-block:var(--color) 2px solid}.footnotes ol{margin:0}.footnotes ol li[role=doc-endnote]:has(+li){position:relative;margin-bottom:2em;padding-bottom:2em}.footnotes ol li[role=doc-endnote]:has(+li)::after{width:calc(100% + 40px);bottom:0;left:-40px;border-block:var(--color) 2px dashed}.footnotes p:has(.reversefootnote){display:inline-block}hr{border:none;border-block:2px var(--color) solid;height:.2em;margin-block:2em}hr.break{height:1px;opacity:0;border:none !important}.rainbow{--rspd: 1s;--rbgsz: 4em}.rainbow,.rainbow *,.rainbow ::before{image-rendering:pixelated;background:url(/assets/image/rainbowDither.png);background-size:var(--rbgsz);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0);animation:rainbowScroll var(--rspd) linear infinite}@keyframes rainbowScroll{0%{background-position:0}100%{background-position:var(--rbgsz)}}.rainbow.cmy,.rainbow.cmy *{background-image:url(/assets/image/rainbowDither_.png)}.rainbow.fancy{--rs: .1em;--rsc: var(--color-sat);filter:drop-shadow(0.05em -0.05em var(--rsc)) drop-shadow(-0.05em 0.05em var(--rsc)) drop-shadow(var(--rs) var(--rs) var(--rsc))}.rainbow.fancy2{--rs: .1em;--rsc: var(--color-sat);filter:drop-shadow(0.05em 0.05em var(--color-sat)) drop-shadow(0.1em 0.1em var(--color-page)) drop-shadow(0.1em 0.1em #dd4) drop-shadow(0.1em 0.1em #4dd) drop-shadow(0.1em 0.1em #d4d) drop-shadow(0.05em -0.05em var(--rsc)) drop-shadow(-0.05em 0.05em var(--rsc))}.shadow{--sdd: .25em;--sbr: 2px;--sdc: var(--color);text-shadow:var(--sdd) var(--sdd) var(--sbr) var(--sdc)}.projection{--pdd: .33em;--pdc: var(--color-plain);text-shadow:1px 1px var(--color-page),var(--pdd) var(--pdd) var(--pdc);padding-bottom:.2em}.echo{--h: 1;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,.8em,0em}.echo-down{--h: 0;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,0em}.echo-down-left{--h: -1;--v: 1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,.8em}.echo-left{--h: -1;--v: 0;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,0em,.8em}.echo-up-left{--h: -1;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,.8em}.echo-up{--h: 0;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,0em}.echo-up-right{--h: 1;--v: -1;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,.8em,0em,0em}.echo-right{--h: 1;--v: 0;text-shadow:calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,0em,0em}.echorb{--h: 1;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,.8em,0em}.echorb-down{--h: 0;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,0em}.echorb-down-left{--h: -1;--v: 1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,.8em}.echorb-left{--h: -1;--v: 0;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,0em,.8em}.echorb-up-left{--h: -1;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,.8em}.echorb-up{--h: 0;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,0em}.echorb-up-right{--h: 1;--v: -1;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,.8em,0em,0em}.echorb-right{--h: 1;--v: 0;text-shadow:calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,0em,0em}.stroke.echo{--h: 1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,.8em,0em}.stroke.echo-down{--h: 0;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,0em}.stroke.echo-down-left{--h: -1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,.8em,.8em}.stroke.echo-left{--h: -1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,0em,0em,.8em}.stroke.echo-up-left{--h: -1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,.8em}.stroke.echo-up{--h: 0;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,0em,0em,0em}.stroke.echo-up-right{--h: 1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:.8em,.8em,0em,0em}.stroke.echo-right{--h: 1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.1em*var(--h)) calc(.1em*var(--v)) rgba(68,68,221,.5333333333),calc(.2em*var(--h)) calc(.2em*var(--v)) rgba(68,68,221,.2666666667),calc(.3em*var(--h)) calc(.3em*var(--v)) rgba(68,68,221,.1333333333);padding:0em,.8em,0em,0em}.stroke.echorb{--h: 1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,.8em,0em}.stroke.echorb-down{--h: 0;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,0em}.stroke.echorb-down-left{--h: -1;--v: 1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,.8em,.8em}.stroke.echorb-left{--h: -1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,0em,0em,.8em}.stroke.echorb-up-left{--h: -1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,.8em}.stroke.echorb-up{--h: 0;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,0em,0em,0em}.stroke.echorb-up-right{--h: 1;--v: -1;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:.8em,.8em,0em,0em}.stroke.echorb-right{--h: 1;--v: 0;text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),calc(.05em*var(--h)) calc(.05em*var(--v)) #d44,calc(.1em*var(--h)) calc(.1em*var(--v)) #dd4,calc(.15em*var(--h)) calc(.15em*var(--v)) #4dd,calc(.2em*var(--h)) calc(.2em*var(--v)) #d4d;padding:0em,.8em,0em,0em}.stroke{--std: 1px;--stc: var(--color);color:var(--color-page);text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc)}.stroke.shadow{text-shadow:calc(-1*var(--std)) 0 var(--stc),calc(-1*var(--std)) calc(-1*var(--std)) var(--stc),0 calc(-1*var(--std)) var(--stc),calc(var(--std)) calc(-1*var(--std)) var(--stc),calc(var(--std)) 0 var(--stc),calc(var(--std)) calc(var(--std)) var(--stc),0 calc(var(--std)) var(--stc),calc(-1*var(--std)) calc(var(--std)) var(--stc),var(--sdd) var(--sdd) var(--sdc)}.mirror{transform:scaleX(-1)}.upsdown{transform:scaleY(-1)}.mirror,.upsdown{display:inline-block}.blink{--bt: 2s;animation:blink var(--bt) steps(1, end) infinite forwards}.fadeinout{--ft: 2s;animation:blink var(--ft) linear infinite}@keyframes blink{50%{opacity:0}}.rumble{--rt: .05s;animation:rumble var(--rt) linear infinite alternate}.shudder{--st: .05s;animation:shudder var(--st) linear infinite alternate}.rumble,.shudder{display:inline-block}@keyframes rumble{100%{transform:translateY(-0.2em)}}@keyframes shudder{100%{transform:translateX(0.2em)}}.sparkle:not(.rainbow){background:url(/assets/image/sparkle.gif) repeat;background-size:10em}.sparkle.rainbow{position:relative}.sparkle.rainbow::before{content:"";position:absolute;inset:0;background:url(/assets/image/sparkle.gif) repeat;background-size:10em}.rotate{--rspd: 4s;--ofst-x: 0%;--ofst-y: 0%;--rphs: 0;--rheit: 2em;display:inline-block;transform-origin:calc(50% + var(--ofst-x)) calc(50% + var(--ofst-y));width:max-content;margin-block:calc(var(--rheit)/2);padding:0;animation:rotate var(--rspd) linear calc(var(--rspd)*var(--rphs)*-1) infinite}.rotate.rev{animation-direction:reverse}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.pulse{--pspd: .25s;--pscl: 1.2;--pphs: 0;--s: 1;display:inline-block;font-size:calc(var(--pscl)*1em);animation:pulse var(--pspd) ease-out calc(var(--pspd)*var(--pphs)*-1) infinite alternate}@keyframes pulse{0%{scale:calc(1/var(--pscl))}100%{scale:1}}/*# sourceMappingURL=markaround.css.map */ \ No newline at end of file diff --git a/_site/assets/css/markaround.css.map b/_site/assets/css/markaround.css.map new file mode 100644 index 0000000..e7a9877 --- /dev/null +++ b/_site/assets/css/markaround.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["markaround.scss"],"names":[],"mappings":"CAuBA,iEAIA,gCAEA,cACA,kBACA,gBACA,iBAEA,kGAEA,yCACA,2CAC2B,4KAM3B,SACI,SACA,kBACA,cACA,WACA,4BAIJ,GACI,gBACA,OACA,kBAKJ,GACI,kBAIJ,GACI,iBACA,QAKJ,sEAIA,wBACuB,oEACnB,oEACA,yEACA,yEACA,kEAGG,kCACF,mCACL,2CACG,+CACS,yDACF,4DACF,0EAmBH,sBACD,mCATA,kBACA,qBACA,YACA,+CAOA,mDAVA,kBACA,qBACA,YACA,+CAKC,yBACD,sCATA,kBACA,qBACA,YACA,+CAOA,sDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,sBACD,mCATA,kBACA,qBACA,YACA,+CAOA,mDAVA,kBACA,qBACA,YACA,+CAKC,mBACD,gCATA,kBACA,qBACA,YACA,+CAOA,gDAVA,kBACA,qBACA,YACA,+CAKC,yBACD,sCATA,kBACA,qBACA,YACA,+CAOA,sDAVA,kBACA,qBACA,YACA,+CAKC,uBACD,oCATA,kBACA,qBACA,YACA,+CAOA,oDAVA,kBACA,qBACA,YACA,+CAKC,uBACD,oCATA,kBACA,qBACA,YACA,+CAOA,oDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,uBACD,oCATA,kBACA,qBACA,YACA,+CAOA,oDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,qBACD,kCATA,kBACA,qBACA,YACA,+CAOA,kDAVA,kBACA,qBACA,YACA,+CAKC,wBACD,qCATA,kBACA,qBACA,YACA,+CAOA,qDAVA,kBACA,qBACA,YACA,+CAKC,yBACD,sCATA,kBACA,qBACA,YACA,+CAOA,sDAVA,kBACA,qBACA,YACA,+CAWJ,MAGI,WAjBA,kBACA,qBACA,YACA,+CAgBA,gBACA,+BAGJ,KAvBI,kBACA,qBACA,YACA,+CAsBA,gGAMJ,IACI,kBACA,qBAEA,kBAEA,4BAEI,kBACA,SACA,2BACA,cAEA,gBAMR,uBAEI,uBACI,kBACA,gBACA,wBACA,oBAGM,kBACN,WAIR,MACI,WACA,mBACA,8BAEA,gBACI,sBACA,2CAIR,SACI,kBACA,qBACA,cACA,iCAEA,eACI,kBAEA,2CACI,cACA,mBACA,kBAQZ,qCACI,4BAIJ,wFACA,gFAEgB,yCAEhB,WACI,kBAEA,mCACI,mBACA,oBAEA,kBACA,OACA,SACA,WAEA,2BACA,kBACA,eAEA,kBACA,6BACA,UAGJ,qDACI,kBACA,WACA,qBAIJ,8BACI,mCACI,gBACA,2BACA,6BAKZ,gEAGI,UACI,cACA,eACA,mBACA,gBAGJ,gBACI,cACA,UAOJ,yCACA,qCAIJ,kDAII,cACA,QACA,qBACA,kBAEA,mFACI,eACA,sBAEI,wBACA,2EAEJ,UAGJ,wDACI,cACA,kBACA,oBAEA,+DACI,cACA,UAOZ,MACI,yCAEA,kBACA,UAEA,kBACA,yBACA,iBAEA,oDAEA,iCACI,kBACA,sBACA,YAIJ,QACI,8BAEA,0GACA,4CACA,0FAEA,gDACI,kBACA,mEACI,kBACA,QACA,WACA,sBACA,WAIR,gBACI,sBACA,wBACA,8BAOJ,6GACA,uCACA,qEACA,gDAEA,iBACI,mBACA,mBACA,kBAOZ,2DAEA,WAEI,iBADA,8EAIA,2BACI,cACA,kBACA,kBACA,eACA,0BACA,mBACA,cAEA,kDAEA,mCACI,kBACA,OACA,UACA,oBACA,gBAGJ,oDAIJ,gBACI,6BACA,8BACA,gCACA,mBAEA,oCAIJ,gBACI,iCACA,kCACA,oCACA,uBAEA,oCACI,SACA,gBACA,mBACA,oBAMJ,0DACI,4BACA,aACA,+BACA,qDAEA,sEACI,2BACA,0BACA,oDAIR,uDAMR,iBACI,qBAGJ,sBACI,UACA,gBACA,eACA,wBAEA,0CACA,yCAGJ,OACI,kBAEA,wBADA,0CAGA,iBACI,kBACA,QACA,oBAIA,kDACA,iDAIR,WACI,kBACA,eACA,gBAEA,sDACI,kBACA,wBAGJ,mBACI,MACA,oCAGJ,uBACI,4CACI,kBACA,kBACA,mBAEA,mDACI,wBACA,oBACA,qCAKZ,mCACI,qBAMR,GACI,gDACA,YACA,iBAEA,SACI,WACA,UACA,uBAqBR,SACI,wBACA,sCACI,0BACA,6EACA,qBACA,6BACA,oBAEA,oDACA,yBACI,yBACA,uCAKR,4BACI,uDAKR,eACI,mCACA,OACI,0HAMR,gBACI,mCACA,OACI,+PAYR,QACI,4CACA,wDAGJ,YACI,uCACA,uEACA,oBAiCwC,MAVxC,cACA,wNACA,0BAUA,WAZA,cACA,wNACA,yBAWA,gBAbA,eACA,wNACA,0BAYA,WAdA,eACA,wNACA,yBAaA,cAfA,gBACA,wNACA,0BAcA,SAhBA,eACA,wNACA,yBAeA,eAjBA,eACA,wNACA,0BAgBA,YAlBA,cACA,wNACA,yBAQwC,QAVxC,cACA,oMACA,0BAUA,aAZA,cACA,oMACA,yBAWA,kBAbA,eACA,oMACA,0BAYA,aAdA,eACA,oMACA,yBAaA,gBAfA,gBACA,oMACA,0BAcA,WAhBA,eACA,oMACA,yBAeA,iBAjBA,eACA,oMACA,0BAgBA,cAlBA,cACA,oMACA,yBAQwC,aAVxC,cACA,shBACA,0BAUA,kBAZA,cACA,shBACA,yBAWA,uBAbA,eACA,shBACA,0BAYA,kBAdA,eACA,shBACA,yBAaA,qBAfA,gBACA,shBACA,0BAcA,gBAhBA,eACA,shBACA,yBAeA,sBAjBA,eACA,shBACA,0BAgBA,mBAlBA,cACA,shBACA,yBAQwC,eAVxC,cACA,kgBACA,0BAUA,oBAZA,cACA,kgBACA,yBAWA,yBAbA,eACA,kgBACA,0BAYA,oBAdA,eACA,kgBACA,yBAaA,uBAfA,gBACA,kgBACA,0BAcA,kBAhBA,eACA,kgBACA,yBAeA,wBAjBA,eACA,kgBACA,0BAgBA,qBAlBA,cACA,kgBACA,yBAqBJ,QACI,+BACA,wBACA,YAnHA,8TAqHA,0XAKJ,6BAEA,8BAEA,sCAMA,OACI,SACA,0DAGJ,WACI,SACA,0CAGJ,gCAIA,QACI,WACA,qDAGJ,SACI,WACA,sDAGJ,sCAEA,qDACA,qDAIA,6FACA,mCAEI,oCACI,kBACA,QACA,sEAMR,QACI,4DAEA,qBACA,iBACI,oDAGJ,kBAEA,kCACA,UAEA,8EAEA,wCAEA,kBACI,uBACA,+BAMR,OACI,0CAIA,qBAGA,gCACA,yFACA,iBACI,6BACA","sourcesContent":["/*\n:root {\n --color: #44d;\n --color-sat: #00f;\n --color-fade: #eef;\n --color-plain: #000;\n --color-mid: #666;\n --color-green: #464;\n --color-green-fade: #efe;\n --color-red: #d00;\n --color-red-fade: #fdd;\n --color-yellow: #ff0;\n --color-yellow-fade: #ffe;\n --color-miku: #4dd;\n --color-miku-fade: #eff;\n --color-magenta: #f4f;\n --color-magenta-fade: #fef;\n --color-page: #fff;\n}\n*/\n\n// remove italic effect for ( ** in markdown ) in order to easily assign class to inline text\n// use .i to reobtain italic for \nem:not(.i):is([class], [r], [t], [foot], [reveal]) { font-style: normal; }\n\n// sizes ================================\n\nh1, h2, h3, h4, h5, h6, .fake { --s: 1 }\n\n.big { --s: 1.5; }\n.bigger { --s: 1.75; }\n.small { --s: .75; }\n.smaller { --s: .5; }\n\n:is(.size, .big, .bigger, .small, .smaller):not(h1, h2, h3, h4, h5, h6, .fake) { font-size: calc(var(--s) * 1em); }\n\nh1, .fake.h1 { font-size: calc( 2em * var(--s)); }\nh2, .fake.h2 { font-size: calc( 1.6em * var(--s)); }\n@for $i from 3 through 6 { h#{$i}, .fake.h#{$i} { font-size: calc( 1.2em * var(--s)); } }\n\n// alignment ================================\n\n// inline elements are converted to block level element\n\n.l, .c, .r {\n --ofs: 0;\n position: relative;\n display: block;\n width: 100%;\n transform: translateX(--ofs);\n}\n\n// left\n.l {\n text-align: left;\n left: 0;\n text-justify: auto;\n\n}\n\n// center\n.c {\n text-align: center;\n}\n\n// right\n.r {\n text-align: right;\n right: 0;\n}\n\n// maximize width to page width for block level elements\n// which contains children with alignment\n:is(p, h1, h2, h3, h4, h5, h6):is(:has(>.l), :has(>.c), :has(>.r)) { width: 100%; }\n\n// lines ================================\n\n.u, .ovl, del, .dll, .u.ovl {\n text-decoration: { color: var(--lc); thickness: var(--lt) } ;\n &.-d { text-decoration: { style: dashed; }; }\n &.-do { text-decoration: { style: dotted; }; }\n &.-db { text-decoration: { style: double; }; }\n &.-w { text-decoration: { style: wavy; }; }\n}\n\n .u { text-decoration-line: underline; }\n .ovl { text-decoration-line: overline; }\ndel, .dll { text-decoration-line: line-through; }\n .u.ovl { text-decoration-line: underline overline; }\ndel, .dll { &.u { text-decoration-line: line-through underline; }\n &.ovl { text-decoration-line: line-through overline; }\n &.u.ovl { text-decoration-line: line-through underline overline; } }\n\n// colors ================================\n\n$colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple;\n\n$clrsabbr: wh, si, gr, bc, re, ma, ye, ol, li, gr, aq, te, bl, na, fu, pu;\n\n// use \"''+$color\" so that scss don't throw a warning\n\n@mixin colorbg {\n position: relative;\n display: inline-block;\n --bd: .05em;\n padding: calc(var(--bd)) calc(.1em + var(--bd));\n}\n\n@for $i from 1 through length($colors) {\n \n .#{\"\"+nth($colors, $i)}, .#{\"\"+nth($clrsabbr, $i)} { color: nth($colors, $i); }\n .h#{\"\"+nth($colors, $i)}, .h#{\"\"+nth($clrsabbr, $i)} { background-color: nth($colors, $i); @include colorbg(); }\n .b#{\"\"+nth($colors, $i)}, .b#{\"\"+nth($clrsabbr, $i)} { --bw: 2px; border: nth($colors, $i) solid var(--bw); @include colorbg(); }\n\n}\n\n.c\n\n.h {\n --hc: #44d;\n @include colorbg(); \n color: var(--hc);\n background: var(--color-yellow);\n}\n\n.ant {\n @include colorbg();\n &::before { --bw: 2px; border: 1px dashed #000; border-image: url(/assets/image/ants.gif) 1 repeat; }\n}\n\n// ruby (拼音) ================================\n\n// use *character*{:r=\"ruby\"} inside markdown\n[r] {\n position: relative;\n display: inline-block;\n // width: max-content;\n text-align: center;\n\n &::before { content: attr(r);\n // pos\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n display: block;\n // styl\n font-size: .75em;\n }\n}\n\n// del (黑幕) ================================\n\n.del { position: relative;\n\n &::after { content: \"\";\n position: absolute;\n inset: -2px -1px;\n background: var(--color);\n pointer-events: none;\n }\n\n &:hover { &::after {\n opacity: .1;\n }}\n}\n\n.blur {\n --br: .1em;\n filter: blur(.1em);\n &rier { filter: blur(.25em); }\n\n &, &rier {\n transition: filter .2s;\n &:hover { filter: blur(0); }\n }\n}\n\n[reveal] {\n position: relative;\n display: inline-block;\n line-height: 0;\n text-decoration: dashed underline;\n\n &:hover {\n visibility: hidden;\n\n &::after { content: attr(reveal);\n display: block;\n visibility: visible;\n font-style: italic;\n }\n }\n}\n\n// tip ================================\n\n// use *content*{:t=\"tip\"} inside markdown\n[t] { text-decoration: dotted underline;\n &::before { content: attr(t); }\n}\n\n// reveal url for hyperlinks\n.content a::before { content: \"¥目标: 127.0.0.1\"attr(pageurl) attr(href) attr(t) !important; } // same domain\n.content a[target=\"_blank\"]::before { content: \"¥目标: \"attr(href) attr(t) !important; } // cross domain\n\n.del:not([t]) { &::before { content: \"你知道的太多了。\"; } }\n\n[t], a, .del {\n position: relative;\n\n &::before {\n transition: .2s .2s;\n pointer-events: none;\n // pos\n position: absolute;\n left: 0 ;\n top: .5em;\n z-index: 10;\n // size\n font-size: MAX(.5em, .75rem);\n width: max-content;\n max-width: 25vw;\n // styl\n padding: .2em .5em;\n background: var(--color-page);\n opacity: 0;\n }\n\n &:hover::before {\n transition: 0s .5s;\n top: 1.75em;\n opacity: 1 !important;\n }\n\n // tip coloring\n & { --tc: var(--color);\n &::before {\n color: var(--tc);\n border: var(--tc) solid 2px;\n box-shadow: 4px 4px var(--tc);\n }\n }\n}\n\n.footnote::before { line-height: 1em; visibility: visible !important; }\n\na {\n &::before {\n transition: 0s;\n position: fixed;\n bottom: 0; top: unset;\n max-width: unset;\n }\n\n &:hover::before {\n transition: 0s;\n top: unset;\n }\n}\n\n// tip above\n\n.above[t] {\n &::before { bottom: .75em; top: unset; }\n &:hover::before { bottom: 1.5em; }\n}\n\n// full width link\n:is(\n a.ab,\n :is(#markdown-toc, #f_markdown-toc) li >a\n) {\n display: block;\n right: 0;\n text-decoration: none;\n transition: 0s .2s;\n\n &::after { transition: opacity .0s .4s;\n inset: -.2em 0;\n box-sizing: border-box;\n border: {\n bottom: 3px solid;\n image: linear-gradient(90deg, var(--color-miku), #0000) 1;\n };\n opacity: 0;\n }\n\n &:hover {\n transition: 0s;\n padding-left: .5em;\n letter-spacing: .2em;\n\n &::after {\n transition: 0s;\n opacity: 1;\n }\n }\n}\n\n// table ================================\n\ntable {\n --tbc: var(--color); --tbtc: var(--color);\n// pos\n position: relative;\n z-index: 1;\n//styl\n color: var(--tbtc);\n border-collapse: collapse;\n margin-block: 1em;\n\n &::before, td, th { padding-inline: .5em; }\n\n &[h]::before { content: attr(h);\n position: relative;\n display: table-caption;\n bottom: -1px;\n }\n\n // default table\n &.t {\n box-shadow: 2px 2px var(--tbc);\n // border\n thead, tbody, td:first-child, tfoot { border: 2px solid { color: var(--tbc); }; }\n td:first-child { border-block-width: 0; }\n &::before, thead, td:first-child { font-weight: bolder; text-align: center; }\n\n tr:nth-child(even) td:not(:first-child) {\n position: relative;\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background: var(--tbc);\n opacity: .3;\n }\n }\n\n &::before {\n background: var(--tbc);\n color: var(--color-page);\n box-shadow: 2px 2px var(--tbc);\n }\n }\n\n // simple table\n &.ts {\n // border\n thead, tbody, tr :first-child, tfoot { border: 0 solid { color: var(--tbc); }; }\n thead { border-bottom-width: 2px; }\n tbody:not(:first-child), tfoot { border-top-width: 2px; }\n tr :first-child { border-right-width: 2px; }\n\n &::before {\n padding-block: .5em;\n font-weight: bolder;\n text-align: center;\n }\n }\n}\n\n// blocks ================================\n\n:is(.content, :not(blockquote)) >blockquote { margin-block: 1em; }\n\nblockquote {\n >p:first-child { margin-top: 0; } >p:last-child { margin-bottom: 0; } // revome extra margin for first and last children blockquote\n margin-right: 1em;\n\n // inform blocks\n &:is(.info, .warn) {\n display: block;\n position: relative;\n width: max-content;\n max-width: 100%;\n padding-inline: 2.5em .5em;\n padding-block: .5em;\n margin-left: 0;\n\n .content >& { max-width: 90%; }\n\n &::before {\n position: absolute;\n left: 0;\n top: .37em;\n padding-inline: .5em;\n font-size: 1.2em;\n }\n\n >blockquote { margin-left: 0; } // remove default left margin\n }\n\n // information block\n &.info {\n background: var(--color-fade);\n border: var(--color) 3px solid;\n box-shadow: 4px 4px var(--color);\n color: var(--color);\n\n &::before { content: \"ⓘ\"; }\n }\n\n // warning block\n &.warn {\n background: var(--color-red-fade);\n border: var(--color-red) 3px solid;\n box-shadow: 4px 4px var(--color-red);\n color: var(--color-red);\n\n &::before { content: \"⚠\";\n top: .3em;\n font-size: 1.4em;\n font-weight: normal;\n padding-inline: .4em;\n }\n }\n\n // cascading layer block ( unnecessarily complex )\n &.layer {\n &, blockquote:not([class]) {\n transition: border-color .4s;\n padding: .5em;\n box-shadow: -3px 0 var(--color);\n border: #0000 3px solid { left-width: 0px; };\n\n &:hover {\n transition: border-color 0s;\n border-color: var(--color);\n box-shadow: -3px 0 var(--color), 3px 3px var(--color);\n }\n }\n\n blockquote:not([class]) { margin: 0 .3em; }\n }\n}\n\n// footnote ================================\n\n.footnote, [foot] {\n text-decoration: none;\n}\n\nsup[role=\"doc-noteref\"] {\n top: unset;\n position: static;\n font-size: 100%;\n color: var(--color-miku);\n\n &::before { content: \"[\"; }\n &::after { content: \"]\"; } \n}\n\n[foot] {\n position: relative;\n &::before { content: \"[\" attr(foot) \"]\"; }\n color: var(--color-miku);\n\n .footnote {\n position: absolute;\n inset: 0;\n color: #0000;\n }\n\n sup[role=\"doc-noteref\"] {\n &::before { content: none; }\n &::after { content: none; }\n }\n}\n\n.footnotes {\n position: relative;\n margin-top: 4em;\n padding-top: 1em;\n\n &::before, ol li::after { content: \"\";\n position: absolute;\n width: 100%; height: .25em;\n }\n\n &::before {\n top: 0;\n border-block: var(--color) 2px solid;\n }\n\n ol { margin: 0;\n li[role=\"doc-endnote\"]:has(+li) {\n position: relative;\n margin-bottom: 2em;\n padding-bottom: 2em;\n\n &::after {\n width: calc(100% + 40px);\n bottom: 0; left: -40px;\n border-block: var(--color) 2px dashed;\n }\n }\n }\n\n p:has(.reversefootnote) {\n display: inline-block;\n }\n}\n\n// horizontal rules ================================\n\nhr {\n border: none { block: 2px var(--color) solid };\n height: .2em;\n margin-block: 2em;\n\n &.break {\n height: 1px;\n opacity: 0;\n border: none !important;\n }\n}\n\n\n/* ================ F A N C Y ================ */\n\n// mimic text-stroke using text-shadow ================================\n\n$text-stroke-shadow:\n calc(-1 * var(--std)) 0 var(--stc), // l\n calc(-1 * var(--std)) calc(-1 * var(--std)) var(--stc), // lt\n 0 calc(-1 * var(--std)) var(--stc), // t\n calc(var(--std)) calc(-1 * var(--std)) var(--stc), // rt\n calc(var(--std)) 0 var(--stc), // r\n calc(var(--std)) calc(var(--std)) var(--stc), // rb\n 0 calc(var(--std)) var(--stc), // b\n calc(-1 * var(--std)) calc(var(--std)) var(--stc); // lb\n\n// rainbow ================================\n\n.rainbow {\n --rspd: 1s; --rbgsz: 4em;\n &, *, ::before {\n image-rendering: pixelated;\n background: url(/assets/image/rainbowDither.png) {size: var(--rbgsz)};\n background-clip: text;\n -webkit-background-clip: text;\n color: #0000;\n\n animation: rainbowScroll var(--rspd) linear infinite;\n @keyframes rainbowScroll {\n 0% { background-position: 0; }\n 100% { background-position: var(--rbgsz); }\n }\n }\n\n // rainbow but with cyam magenta yellow color scheme\n &.cmy, &.cmy * {\n background-image: url(/assets/image/rainbowDither_.png) ;\n }\n}\n\n// rainbow with stroke and shadow really cool\n.rainbow.fancy {\n --rs: .1em; --rsc: var(--color-sat);\n filter:\n drop-shadow(.05em -.05em var(--rsc))\n drop-shadow(-.05em .05em var(--rsc))\n drop-shadow(var(--rs) var(--rs) var(--rsc));\n}\n\n// .rainbow.fancy but with rainbowing shadows\n.rainbow.fancy2 {\n --rs: .1em; --rsc: var(--color-sat);\n filter:\n drop-shadow(.05em .05em var(--color-sat))\n drop-shadow(.1em .1em var(--color-page))\n drop-shadow(.1em .1em #dd4)\n drop-shadow(.1em .1em #4dd)\n drop-shadow(.1em .1em #d4d)\n drop-shadow(.05em -.05em var(--rsc))\n drop-shadow(-.05em .05em var(--rsc))\n\n}\n\n// shadow\n\n.shadow {\n --sdd: .25em; --sbr: 2px; --sdc: var(--color);\n text-shadow: var(--sdd) var(--sdd) var(--sbr) var(--sdc);\n}\n\n.projection {\n --pdd: .33em; --pdc: var(--color-plain);\n text-shadow: 1px 1px var(--color-page), var(--pdd) var(--pdd) var(--pdc);\n padding-bottom: .2em;\n}\n\n// echo ================================\n\n$echo:\n calc(.1em * var(--h)) calc(.1em * var(--v)) #44d8,\n calc(.2em * var(--h)) calc(.2em * var(--v)) #44d4,\n calc(.3em * var(--h)) calc(.3em * var(--v)) #44d2;\n\n$echorb:\n calc(.05em * var(--h)) calc(.05em * var(--v)) #d44,\n calc(.1em * var(--h)) calc(.1em * var(--v)) #dd4,\n calc(.15em * var(--h)) calc(.15em * var(--v)) #4dd,\n calc(.2em * var(--h)) calc(.2em * var(--v)) #d4d;\n\n$echo_type:\n ($echo),\n ($echorb),\n (($text-stroke-shadow), ($echo)),\n (($text-stroke-shadow), ($echorb));\n\n@mixin echo($h, $v, $e) {\n --h: #{$h}; --v: #{$v};\n text-shadow: nth($echo_type, $e);\n padding: calc(.8em * max(0,-$v)),\n calc(.8em * max(0, $h)),\n calc(.8em * max(0, $v)),\n calc(.8em * max(0,-$h));\n}\n\n$echo_list: \".echo\", \".echorb\", \".stroke.echo\", \".stroke.echorb\";\n\n@for $i from 1 through length($echo_list) { #{nth($echo_list, $i)}\n { @include echo( 1, 1, $i );\n &-down { @include echo( 0, 1, $i ); }\n &-down-left { @include echo(-1, 1, $i ); }\n &-left { @include echo(-1, 0, $i ); }\n &-up-left { @include echo(-1,-1, $i ); }\n &-up { @include echo( 0,-1, $i ); }\n &-up-right { @include echo( 1,-1, $i ); }\n &-right { @include echo( 1, 0, $i ); }\n};}\n\n// stroke ================================\n\n.stroke {\n --std: 1px; --stc: var(--color);\n color: var(--color-page);\n text-shadow: $text-stroke-shadow;\n\n &.shadow { text-shadow: $text-stroke-shadow, var(--sdd) var(--sdd) var(--sdc); }\n}\n\n// mirror ================================\n\n.mirror { transform: scaleX(-1); }\n\n.upsdown { transform: scaleY(-1); }\n\n.mirror, .upsdown { display: inline-block; }\n\n// animate ================================\n\n// blink\n\n.blink {\n --bt: 2s;\n animation: blink var(--bt) steps(1, end) infinite forwards;\n}\n\n.fadeinout {\n --ft: 2s;\n animation: blink var(--ft) linear infinite;\n}\n\n@keyframes blink { 50% { opacity: 0; } }\n\n// rumble shudder\n\n.rumble {\n --rt: .05s;\n animation: rumble var(--rt) linear infinite alternate;\n}\n\n.shudder {\n --st: .05s;\n animation: shudder var(--st) linear infinite alternate;\n}\n\n.rumble, .shudder { display: inline-block; }\n\n@keyframes rumble { 100% { transform: translateY(-.2em) } }\n@keyframes shudder { 100% { transform: translateX(.2em) } }\n\n// sparkle \n\n.sparkle:not(.rainbow) { background: url(/assets/image/sparkle.gif) repeat { size: 10em }; }\n.sparkle.rainbow { position: relative;\n\n &::before { content: \"\";\n position: absolute;\n inset: 0;\n background: url(/assets/image/sparkle.gif) repeat { size: 10em }; \n }\n}\n\n// rotate\n\n.rotate {\n --rspd: 4s; --ofst-x: 0%; --ofst-y: 0%; --rphs: 0; --rheit: 2em;\n// pos\n display: inline-block;\n transform-origin:\n calc( 50% + var(--ofst-x))\n calc( 50% + var(--ofst-y));\n// size\n width: max-content;\n// styl\n margin-block: calc(var(--rheit)/2);\n padding: 0;\n// ani\n animation: rotate var(--rspd) linear calc(var(--rspd) * var(--rphs) * -1) infinite;\n\n &.rev { animation-direction: reverse; }\n\n @keyframes rotate {\n 0% { transform: rotate(0); }\n 100% { transform: rotate(360deg); }\n }\n}\n\n// pulse\n\n.pulse {\n --pspd: .25s; --pscl: 1.2; --pphs: 0; --s: 1;\n\n // .rotate & { --pscl: 1.5 }\n\n display: inline-block;\n\n // sizing\n font-size: calc(var(--pscl) * 1em);\n animation: pulse var(--pspd) ease-out calc(var(--pspd) * var(--pphs) * -1) infinite alternate;\n @keyframes pulse {\n 0% { scale: calc(1 / var(--pscl)); }\n 100% { scale: 1; }\n }\n}"],"file":"markaround.css"} \ No newline at end of file diff --git a/_site/assets/js/fallback-cssAsset.js b/_site/assets/js/fallback-cssAsset.js index 606525d..a4dea8f 100644 --- a/_site/assets/js/fallback-cssAsset.js +++ b/_site/assets/js/fallback-cssAsset.js @@ -80,14 +80,9 @@ checkUrl(Url1, Timeout1) }) .catch(error => { console.error('ghProxy 连接', error, '，不使用代理服务加载网页资源。'); - console.log('您此时无法正常访问 github，且 ghProxy 代理服务此时处于离线状态，网页资源下载速度可能变慢或完全失效。\n', - '请等待 ghProxy 上线后再次访问本网页，或自行配置网络代理恢复 github 访问！') - }); } else { console.error('ghProxy 连接失败，不使用代理服务加载网页资源。'); - console.log('您此时无法正常访问 github，且 ghProxy 代理服务此时处于离线状态，网页资源下载速度可能变慢或完全失效。', - '\n请等待 ghProxy 上线后再次访问本网页，或自行配置网络代理恢复 github 访问！') } }); }); diff --git a/_site/assets/js/ip.js b/_site/assets/js/ip.js new file mode 100644 index 0000000..79dbaed --- /dev/null +++ b/_site/assets/js/ip.js @@ -0,0 +1,3 @@ + + + diff --git a/_site/assets/js/weather.js b/_site/assets/js/weather.js index 04ac5cd..ce5c18f 100644 --- a/_site/assets/js/weather.js +++ b/_site/assets/js/weather.js @@ -2,7 +2,7 @@ doneWeather = false; - fetch('https://api.open-meteo.com/v1/forecast?latitude=36.7&longitude=137.85¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=Asia%2FTokyo&past_days=1&forecast_days=8') + fetch('https://api.open-meteo.com/v1/forecast?latitude=36.7&longitude=137.85¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=Asia%2FTokyo&past_days=1&forecast_days=8', {priority: 'low'}) .then(response => response.json()) .then(jsonWeather => { if (!doneWeather) { doneWeather = true; diff --git a/_site/home.html b/_site/home.html index 4db7206..e9c4582 100644 --- a/_site/home.html +++ b/_site/home.html @@ -1,17 +1,13 @@ - - + + + 霧雨蘑菇店 || 欢迎来到霧雨蘑菇店！ - - - - - @@ -24,57 +20,54 @@
-
-
-
+
-

欢迎来到 ¥霧雨蘑菇店¥
うこそ！

+

欢迎来到 ¥霧雨蘑菇店¥
うこそ！

-
+

冲浪了这么久，赶快进来歇一会吧|∀` )。

-


+


红茶无限续杯！没有茶点！幽幽子请不要再来了！

-

这里是霧雨蘑菇汤的互联网小角落，本店提供：
-最新最好的 IBM 计算机、旋转 fumo 、畅销书籍、魔法金属、拉面代码， 细心发掘的话还可以发现更多有意思的稀奇玩意~

+

这里是霧雨蘑菇汤的互联网小角落，本店提供：
+最新最好的 IBM 计算机、旋转 fumo 、畅销书籍、魔法金属、拉面代码， 细心发掘的话还可以发现更多有意思的稀奇玩意~

请使用天亦3G设备浏览本网页

@@ -85,19 +78,19 @@
- +

加载中……

- + -
+

目击者报告：

-

*明明叫作蘑菇店，实际上并不出售蘑菇
-（×1 不过确实是有趣的地方）
+

*明明叫作蘑菇店，实际上并不出售蘑菇
+（×1 不过确实是有趣的地方）
——匿名

@@ -114,13 +107,7 @@
-
@@ -136,17 +123,17 @@
-

欢迎来到 ¥霧雨蘑菇店¥
うこそ！

+

欢迎来到 ¥霧雨蘑菇店¥
うこそ！

-
+

冲浪了这么久，赶快进来歇一会吧|∀` )。

-


+


红茶无限续杯！没有茶点！幽幽子请不要再来了！

-

这里是霧雨蘑菇汤的互联网小角落，本店提供：
-最新最好的 IBM 计算机、旋转 fumo 、畅销书籍、魔法金属、拉面代码， 细心发掘的话还可以发现更多有意思的稀奇玩意~

+

这里是霧雨蘑菇汤的互联网小角落，本店提供：
+最新最好的 IBM 计算机、旋转 fumo 、畅销书籍、魔法金属、拉面代码， 细心发掘的话还可以发现更多有意思的稀奇玩意~

请使用天亦3G设备浏览本网页

@@ -157,19 +144,19 @@
- +

加载中……

- + -
+

目击者报告：

-

*明明叫作蘑菇店，实际上并不出售蘑菇
-（×1 不过确实是有趣的地方）
+

*明明叫作蘑菇店，实际上并不出售蘑菇
+（×1 不过确实是有趣的地方）
——匿名

@@ -182,7 +169,7 @@
-
+
@@ -190,13 +177,20 @@
- +
- - - - +
+ + + + + + + + + +
diff --git a/_site/sitemap.xml b/_site/sitemap.xml index 4acd10f..98b8993 100644 --- a/_site/sitemap.xml +++ b/_site/sitemap.xml @@ -10,7 +10,10 @@ http://localhost:4000/home -http://localhost:4000/md-lab +http://localhost:4000/weblab/ + + +http://localhost:4000/weblab/markaround http://localhost:4000/we_fuck_gfw diff --git a/_site/we_fuck_gfw.html b/_site/we_fuck_gfw.html index 75a4e41..ebc537b 100644 --- a/_site/we_fuck_gfw.html +++ b/_site/we_fuck_gfw.html @@ -1,17 +1,13 @@ - - + + + 霧雨蘑菇店 |/¥⑨都能读懂的网络代理教程：使用¥NekoRay¥/¥NekoBox¥进行网络代理.xml - - - - - @@ -24,46 +20,91 @@
-
-
-
+
-

⑨都能读懂的网络代理教程：
+

目录

+ + +

⑨都能读懂的网络代理教程：
使用 NekoRay / NekoBox 进行网络代理

@@ -71,20 +112,17 @@

前言：

-

由于前几天从 Clash for Windows 删库开始的一系列事件，尤其是 Clash 内核与 Clash.Meta 内核的删库/归档，整个 Clash 客户端生态灰飞烟灭。

Clash for Windows 作为一个如此普及的代理客户端，加上我自己也是在两年前左右从 V2rayN 转为 CFW 忠实用户，正好借着这次迁移至 NekoRay 的机会，便想着干脆为这个支持 Xray, Sing-box, Hysteria, Naive 等多个内核，并且有着优秀方便的分流规则与 TUN 代理的优秀客户端写一篇使用教程。

前置知识：

- -
+

虽然这一部分并非必须，但可以帮助你对网络代理建立系统性认识。若对网络代理已足够了解，可直接跳转下一部分

什么是网络代理：

- -

简单来说，当你访问一个网站 （如 https://google.com/），或是应用联网访问数据时，你的设备会向网络运营商发出请求，与目标网址的服务器间建立连接，开始数据交换。

+

简单来说，当你访问一个网站 （如 https://google.com/），或是应用联网访问数据时，你的设备会向网络运营商发出请求，与目标网址的服务器间建立连接，开始数据交换。

在这种情况下，你的 IP 地址向目标服务器公开、运营商也会知道你所访问的地址。通常称这种连接方式为直连。

@@ -93,34 +131,37 @@

什么是网络代理：

因此，运营商无法得知你此时连接的真实目的地与意图，同时目标服务器也无法得知你的真实IP，从而达到保护隐私与绕过防火墙的目的。

术语：

-
    -
  • 代理客户端：
    +
  • +代理客户端：
    为你的设备处理网络代理的客户端，拥有的功能通常包括使用多种方式代理本机网络流量，可配置的分流规则，从订阅链接批量下载节点等功能。
  • -

    节点：
    +

    节点：
    一串包括了代理服务器地址，加密协议，密钥等信息的配置，系建立代理连接的关键要素（使用机场的话大多数时候便无需手动配置节点）。

  • -

    机场：
    +

    机场：
    提供与维护分布于世界各地的代理服务器的服务商，通常通过订阅的方式提供节点。

  • -

    订阅链接：
    +

    订阅链接：
    大多数机场使用订阅链接作为将全部节点一次性导入至代理客户端的方式（基于客户端的不同，用户还可以通过手动复制等方式导入节点）。

  • -

    上传与下载：
    +

    上传与下载：
    上传指由你的设备通过互联网向外界输出数据的行为，相反，下载则是你的设备接收外界数据的行为；当你访问网络的时候，上传与下载无时不刻不在进行。

    • -
  • 延迟与速度：
    +
  • +延迟与速度：
    延迟与速度是两个经常被混淆的概念。 　　
      -
    • 延迟 +
    • +延迟 指数据从你的设备发送至目标服务器（在这个语境下则是代理服务器），目标服务器的回复再传回你的设备所使用的总时间（如：200ms）； 　　
      • -
    • 速度 +
    • +速度 分为上传速度与下载速度，则是指一定时间内你的设备所能上传/下载的数据总量（如：10mb/s）。
    @@ -130,105 +171,135 @@

    术语：

-
+

接下来，本教程将正式启程！

-
- -

下载 NekoRay：仓库地址 | 下载地址

+
-

+

下载 NekoRay：仓库地址 | 下载地址 +

+

Windows 用户的请从 Release 中的下载文件名为nekoray-...-windows64.zip的文件。

下载后无需安装，自行解压到合适的路径，运行位于.\nekoray-...-windows64\nekoray\nekoray.exe路径的文件即可启动程序。

初次启动

-

启动程序后首先将会看到以下窗口：

-

+

两个内核在一般使用场景下区别不大，推荐使用 sing-box 内核。

界面

进入主界面之后，会看到与下图类似的界面：

-

+

其中，序号1到7分别是（暂时不理解的话没关系，下文中会对重要的部分进行讲解）：

- + - + - + - + - + - + - +
  • 工具栏：
+
    +
  • 工具栏：
    • +
+		 程序配置、设置选项、以及导入代理节点等功能都可在此调出；
  • 代理模式：
+
    +
  • 代理模式：
    • +
+		 默认的端口转发模式、系统代理模式、TUN 模式；
  • 节点列表：
+
    +
  • 节点列表：
    • +
+		 接下来导入的节点将会显示在本列表中；
  • 日志：
+
    +
  • 日志：
    • +
+		 会实时记录节点开关状态、网络连接等等信息——正常使用没有问题的话并不需要理解日志中的信息；
  • 当前节点：
+
    +
  • 当前节点：
    • +
+		 显示当前启用的代理节点名称；
  • 转发端口：
+
    +
  • 转发端口：
    • +
+		 用于手动配置其他程序的代理，正常使用不一定需要；
  • 网络流量状态：
 +
    +
  • 网络流量状态：
    • +
+		 实时显示当前经过 NekoRay 处理的网络流量的细节（代理流量与直连流量的上传/下载速度）。

关键配置：

- -
+

关于语言：软件默认语言跟随系统，如果你的系统语言不是中文但需要中文界面，请于

-

首选项 > 基本设置 > 样式 > Language
+

首选项 > 基本设置 > 样式 > Language
Preference > Basic Settings > Style > Language

切换语言为中文。

-
+

导航至工具栏的程序选项，建议开启跟随系统启动（开机自启动）以及记住最后的配置（关闭程序时记住启用的节点、代理模式等设置）。

-

+

首选项 > 基本设置：

-

此分类中大部分选项除非有特殊需要否则无需改动

    -
  • > 样式：更改语言与界面主题
    • +
  • +> 样式：更改语言与界面主题

首选项 > 路由设置：

-

关于分流：大部分代理客户端都带有分流的功能，可以基于域名、IP、进程名配置分流规则，指定对应网络流量通过代理或者直连（例：A站 https://acfun.cn/… 无法从国外大部分地区访问，因此可配置域名 acfun.cn 通过直连连接）。

    -
  • > 通用：若无需要无需改动
    • -
  • > DNS： +
  • +> 通用：若无需要无需改动
    • +
  • +> DNS：
      -
    • 简易 DNS 设置 > 远程 DNS 配置代理流量经过的 DNS 服务器，默认选项中含有 Google 和 Cloudflare 提供的 DNS 服务，个人偏向于使用 Cloudflare。请避免在此选项中填入国内的 DNS 服务或其他不值得信任的 DNS 服务！
      • -
    • 简易 DNS 设置 > 直连 DNS 配置直连流量经过的 DNS 服务器（意义不大）
      • +
    • +简易 DNS 设置 > 远程 DNS 配置代理流量经过的 DNS 服务器，默认选项中含有 Google 和 Cloudflare 提供的 DNS 服务，个人偏向于使用 Cloudflare。请避免在此选项中填入国内的 DNS 服务或其他不值得信任的 DNS 服务！ +
      • +
    • +简易 DNS 设置 > 直连 DNS 配置直连流量经过的 DNS 服务器（意义不大）
  • @@ -236,19 +307,21 @@

    首选项 > 路由设置：

    我所使用的设置：

    -

    +

    • IP- 直连：

      - 
      geoip:private
+        
      
+
      geoip:private

    • 域名 - 直连：

      - 
      domain_suffix:moegirl.org.cn
+        
      
+
      domain_suffix:moegirl.org.cn
 domain_suffix:moegirl.org.cn
 domain_suffix:moegirl.uk
 domain_suffix:saraba1st.com
@@ -311,7 +384,8 @@ 
      首选项 > 路由设置：
      
       
    • 
         
      域名 - 阻止：
      
 
-        
      geosite:category-ads-all
+        
      
+
      geosite:category-ads-all
 domain:appcenter.ms
 domain:firebase.io
 domain:crashlytics.com
@@ -349,7 +423,6 @@ 
      首选项 > 路由设置：

    首选项 > TUN 设置（仅影响 TUN 模式代理）：

    -

    有关 TUN 代理和其他代理模式的讲解请见下文

    @@ -357,85 +430,96 @@

    首选项 > TUN 设 - + - + - + - +
    • 启用 Tun IPV6：
    		+
      +
    • 启用 Tun IPV6：
      • +
    +    		 可开启，除非日后使用 TUN 模式时发现问题；
    • Strict Route (严格路由)：
    		+
      +
    • Strict Route (严格路由)：
      • +
    +    		 开启。关闭本设置会导致 DNS 泄露；
    • FakeDNS：
    		+
      +
    • FakeDNS：
      • +
    +    		 开启；
    • 绕过CIDR、绕过进程名：
    		+
      +
    • 绕过CIDR、绕过进程名：
      • +
    +    		 按需自行设置（可开启任务管理器 Ctrl Shift ESC，导航至详细信息标签查看进程名）；

    导入节点：

    -

    假设你已经购买了机场订阅，或者有其他获取节点的渠道（自建节点、免费公开节点等）。

    从订阅链接导入：

    -

    从机场网站复制好订阅链接后，在界面中简单按下Ctrl V，或者导航至 工具栏 > 服务器 > 从剪贴板添加

    -

    +

    选择：作为订阅（创建新租）

    -

    +

    在工具栏打开 首选项 > 分组，此时应该可以看到新添加的分组。你可以定期回到这里更新订阅。

    -

    +

    默认分组此时就可以删除了

    此外，你也可以直接复制节点文本导入节点，本文便不再赘述。

    开始使用代理：

    -

    回到程序主界面，切换到刚刚添加的分组标签：

    -

    +

    -

    +

    此时，你应该可以看到全部新添加的节点：

    单击选中一个节点，按Enter键即可切换至对应节点。此时，任何经过 NekoRay 代理且未被路由设置排除的流量都会通过连接的节点进行代理了。

    -

    +

    连接到节点后的日志消息

    -

    +

    界面左下角也会显示当前连接的节点名称

    代理模式：

    -
    -

    参见：1。

    +

    参见：1。

    在 NekoRay 主界面工具栏找到 Tun 模式和系统代理的复选框

    ps: 两个都勾选的话系统代理也会被 TUN 覆盖掉 -

    +

    正常使用推荐直接开启系统代理即可。对于普通用户，除非特别需要代理某些不支持系统代理的程序（例：使用 Windows 的 cmd.exe 命令提示符导入ruby gem、为游戏提供加速等）时需要开启 TUN，其他时候不建议 TUN 模式常驻开启。

    选择最佳节点、理解设备的网络代理状态

    节点测速：

    -

    NekoRay 内含多种节点测速的方法。在节点列表中右键或在工具栏打开服务器标签，按需求选择当前选中或当前分组为对应节点选择测速方法。

    例：选择全部日本节点并对当前选中进行测速 -

    +

    • @@ -447,91 +531,88 @@

      节点测速：

    TCP Ping 之后按照测试结果对节点排序 -

    +

    网络流量状态：

    -

    界面的右下角会显示实时更新的当前网络流量状态。

    当你发现某个网址无法连接的时候，可以查看这里的状态以确定问题是否由于节点导致，考虑是否需要切换节点。 -

    +

    测试代理效果：

    - -

    访问 ipleak.net +

    访问 ipleak.net 查看当前代理的效果。

    理想的代理：No forwarded IP detected ~ 未检测到转发的 IP；DNS 地址与节点来自同一个国家 -

    +

    DNS 列表中夹杂着来自运营商的DNS地址：DNS泄露，请重新检查相关设置！ -

    +

    其他：关于网络安全

    任何时候都应该使用 HTTPS！

    -

    通过 HTTP 协议访问网络会面临着遭受中间人攻击的严重风险。中间人攻击指的是由运营商、CDN 网络、长城防火墙等通过劫持并篡改你接收到的数据包内容进行的欺骗、诈骗等行为。

    防止 WebRTC 泄露真实 IP

    - -

    由于浏览器实现 WebRTC（网络实时通讯）的方法中存在的严重漏洞，一个网站只需通过简单的 Javascript 便可以获得用户的真实 IP。解决方案包括禁用 WebRTC 以及使用插件防止泄露（如 WebRTC Leak Prevent）

    +

    由于浏览器实现 WebRTC（网络实时通讯）的方法中存在的严重漏洞，一个网站只需通过简单的 Javascript 便可以获得用户的真实 IP。解决方案包括禁用 WebRTC 以及使用插件防止泄露（如 WebRTC Leak Prevent）

    例：使用 WebRTC Leak Prevent 防止泄露真实 IP -

    +

    防止 CDN 泄露隐私

    -

    防止由使用不安全的 CDN（内容分发网络）所导致的隐私泄露： -Decentraleyes

    +Decentraleyes

    避免使用不可信的浏览器访问网络

    -

    任何情况下从原则上都不应使用任何国产商业浏览器，包括QQ、搜狗、360、“中国特供版”火狐，以及微信 QQ 微企等软件的内置浏览器。不是很推荐使用 Google Chrome 与 Edge，避免被谷歌和微软搜集隐私。推荐使用 Firefox（注意甄别“中国特供版”火狐！）及 Ungoogled Chrome。

    -
    +

    本教程到这里就结束啦。期待下次再见~

    参见：

    -
    1. -
      关于端口转发模式、系统代理与 TUN 模式
      +

      关于端口转发模式、系统代理与 TUN 模式：

      +
        -
      • 端口转发 是很多代理客户端的默认模式。在这个模式下客户端不会主动代理设备上的任何流量，须手动在需要代理的软件中设置使用本机的对应端口进行代理（如：127.0.0.1:2080，其中127.0.0.1代表本地主机，2080为代理客户端监听的端口）；
        • +
      • +端口转发 是很多代理客户端的默认模式。在这个模式下客户端不会主动代理设备上的任何流量，须手动在需要代理的软件中设置使用本机的对应端口进行代理（如：127.0.0.1:2080，其中127.0.0.1代表本地主机，2080为代理客户端监听的端口）；
      -

      +

      例：QBitTorrent 中的代理设置

        -
      • 系统代理 通过使用 Windows 默认的代理设置，代理 Windows 设备中的大部分网络流量（相当于自动将 Windows 设置 > 网络和 Internet > 代理 > 手动设置代理 中的地址设置成端口转发模式中使用的地址；这种情况下，有些软件不会遵守本设置，因此不会进行代理）；
        • +
      • +系统代理 通过使用 Windows 默认的代理设置，代理 Windows 设备中的大部分网络流量（相当于自动将 Windows 设置 > 网络和 Internet > 代理 > 手动设置代理 中的地址设置成端口转发模式中使用的地址；这种情况下，有些软件不会遵守本设置，因此不会进行代理）；
      -

      +

      自动设置后的 Windows 系统代理

        -
      • TUN 模式 通过复杂的原理，真正意义上代理设备的全部流量，类似于 VPN 的代理模式。缺点：必须特别设置分流规则排除不应经过代理的网站与软件。
        • +
      • +TUN 模式 通过复杂的原理，真正意义上代理设备的全部流量，类似于 VPN 的代理模式。缺点：必须特别设置分流规则排除不应经过代理的网站与软件。
      -

      ↩

      +

      ↩

    @@ -549,13 +630,7 @@
    关于端口转发模式、系统代理与 TUN 模式
    -
    @@ -570,7 +645,55 @@
    关于端口转发模式、系统代理与 TUN 模式
    -

    ⑨都能读懂的网络代理教程：
    +

    目录

    + + +

    ⑨都能读懂的网络代理教程：
    使用 NekoRay / NekoBox 进行网络代理

    @@ -578,20 +701,17 @@
    关于端口转发模式、系统代理与 TUN 模式

    前言：

    -

    由于前几天从 Clash for Windows 删库开始的一系列事件，尤其是 Clash 内核与 Clash.Meta 内核的删库/归档，整个 Clash 客户端生态灰飞烟灭。

    Clash for Windows 作为一个如此普及的代理客户端，加上我自己也是在两年前左右从 V2rayN 转为 CFW 忠实用户，正好借着这次迁移至 NekoRay 的机会，便想着干脆为这个支持 Xray, Sing-box, Hysteria, Naive 等多个内核，并且有着优秀方便的分流规则与 TUN 代理的优秀客户端写一篇使用教程。

    前置知识：

    - -
    +

    虽然这一部分并非必须，但可以帮助你对网络代理建立系统性认识。若对网络代理已足够了解，可直接跳转下一部分

    什么是网络代理：

    - -

    简单来说，当你访问一个网站 （如 https://google.com/），或是应用联网访问数据时，你的设备会向网络运营商发出请求，与目标网址的服务器间建立连接，开始数据交换。

    +

    简单来说，当你访问一个网站 （如 https://google.com/），或是应用联网访问数据时，你的设备会向网络运营商发出请求，与目标网址的服务器间建立连接，开始数据交换。

    在这种情况下，你的 IP 地址向目标服务器公开、运营商也会知道你所访问的地址。通常称这种连接方式为直连。

    @@ -600,34 +720,37 @@

    什么是网络代理：

    因此，运营商无法得知你此时连接的真实目的地与意图，同时目标服务器也无法得知你的真实IP，从而达到保护隐私与绕过防火墙的目的。

    术语：

    -
      -
    • 代理客户端：
      +
    • +代理客户端：
      为你的设备处理网络代理的客户端，拥有的功能通常包括使用多种方式代理本机网络流量，可配置的分流规则，从订阅链接批量下载节点等功能。
    • -

      节点：
      +

      节点：
      一串包括了代理服务器地址，加密协议，密钥等信息的配置，系建立代理连接的关键要素（使用机场的话大多数时候便无需手动配置节点）。

    • -

      机场：
      +

      机场：
      提供与维护分布于世界各地的代理服务器的服务商，通常通过订阅的方式提供节点。

    • -

      订阅链接：
      +

      订阅链接：
      大多数机场使用订阅链接作为将全部节点一次性导入至代理客户端的方式（基于客户端的不同，用户还可以通过手动复制等方式导入节点）。

    • -

      上传与下载：
      +

      上传与下载：
      上传指由你的设备通过互联网向外界输出数据的行为，相反，下载则是你的设备接收外界数据的行为；当你访问网络的时候，上传与下载无时不刻不在进行。

      • -
    • 延迟与速度：
      +
    • +延迟与速度：
      延迟与速度是两个经常被混淆的概念。 　　
        -
      • 延迟 +
      • +延迟 指数据从你的设备发送至目标服务器（在这个语境下则是代理服务器），目标服务器的回复再传回你的设备所使用的总时间（如：200ms）； 　　
        • -
      • 速度 +
      • +速度 分为上传速度与下载速度，则是指一定时间内你的设备所能上传/下载的数据总量（如：10mb/s）。
      @@ -637,105 +760,135 @@

      术语：

    -
    +

    接下来，本教程将正式启程！

    -
    - -

    下载 NekoRay：仓库地址 | 下载地址

    +
    -

    +

    下载 NekoRay：仓库地址 | 下载地址 +

    +

    Windows 用户的请从 Release 中的下载文件名为nekoray-...-windows64.zip的文件。

    下载后无需安装，自行解压到合适的路径，运行位于.\nekoray-...-windows64\nekoray\nekoray.exe路径的文件即可启动程序。

    初次启动

    -

    启动程序后首先将会看到以下窗口：

    -

    +

    两个内核在一般使用场景下区别不大，推荐使用 sing-box 内核。

    界面

    进入主界面之后，会看到与下图类似的界面：

    -

    +

    其中，序号1到7分别是（暂时不理解的话没关系，下文中会对重要的部分进行讲解）：

    - + - + - + - + - + - + - +
    • 工具栏：
    		+
      +
    • 工具栏：
      • +
    +    		 程序配置、设置选项、以及导入代理节点等功能都可在此调出；
    • 代理模式：
    		+
      +
    • 代理模式：
      • +
    +    		 默认的端口转发模式、系统代理模式、TUN 模式；
    • 节点列表：
    		+
      +
    • 节点列表：
      • +
    +    		 接下来导入的节点将会显示在本列表中；
    • 日志：
    		+
      +
    • 日志：
      • +
    +    		 会实时记录节点开关状态、网络连接等等信息——正常使用没有问题的话并不需要理解日志中的信息；
    • 当前节点：
    		+
      +
    • 当前节点：
      • +
    +    		 显示当前启用的代理节点名称；
    • 转发端口：
    		+
      +
    • 转发端口：
      • +
    +    		 用于手动配置其他程序的代理，正常使用不一定需要；
    • 网络流量状态：
    		 +
      +
    • 网络流量状态：
      • +
    +    		 实时显示当前经过 NekoRay 处理的网络流量的细节（代理流量与直连流量的上传/下载速度）。

    关键配置：

    - -
    +

    关于语言：软件默认语言跟随系统，如果你的系统语言不是中文但需要中文界面，请于

    -

    首选项 > 基本设置 > 样式 > Language
    +

    首选项 > 基本设置 > 样式 > Language
    Preference > Basic Settings > Style > Language

    切换语言为中文。

    -
    +

    导航至工具栏的程序选项，建议开启跟随系统启动（开机自启动）以及记住最后的配置（关闭程序时记住启用的节点、代理模式等设置）。

    -

    +

    首选项 > 基本设置：

    -

    此分类中大部分选项除非有特殊需要否则无需改动

      -
    • > 样式：更改语言与界面主题
      • +
    • +> 样式：更改语言与界面主题

    首选项 > 路由设置：

    -

    关于分流：大部分代理客户端都带有分流的功能，可以基于域名、IP、进程名配置分流规则，指定对应网络流量通过代理或者直连（例：A站 https://acfun.cn/… 无法从国外大部分地区访问，因此可配置域名 acfun.cn 通过直连连接）。

      -
    • > 通用：若无需要无需改动
      • -
    • > DNS： +
    • +> 通用：若无需要无需改动
      • +
    • +> DNS：
        -
      • 简易 DNS 设置 > 远程 DNS 配置代理流量经过的 DNS 服务器，默认选项中含有 Google 和 Cloudflare 提供的 DNS 服务，个人偏向于使用 Cloudflare。请避免在此选项中填入国内的 DNS 服务或其他不值得信任的 DNS 服务！
        • -
      • 简易 DNS 设置 > 直连 DNS 配置直连流量经过的 DNS 服务器（意义不大）
        • +
      • +简易 DNS 设置 > 远程 DNS 配置代理流量经过的 DNS 服务器，默认选项中含有 Google 和 Cloudflare 提供的 DNS 服务，个人偏向于使用 Cloudflare。请避免在此选项中填入国内的 DNS 服务或其他不值得信任的 DNS 服务！ +
        • +
      • +简易 DNS 设置 > 直连 DNS 配置直连流量经过的 DNS 服务器（意义不大）
    • @@ -743,19 +896,21 @@

      首选项 > 路由设置：

      我所使用的设置：

      -

      +

      • IP- 直连：

        - 
        geoip:private
+        
        
+
        geoip:private

      • 域名 - 直连：

        - 
        domain_suffix:moegirl.org.cn
+        
        
+
        domain_suffix:moegirl.org.cn
 domain_suffix:moegirl.org.cn
 domain_suffix:moegirl.uk
 domain_suffix:saraba1st.com
@@ -818,7 +973,8 @@ 
        首选项 > 路由设置：
        
       
      • 
         
        域名 - 阻止：
        
 
-        
        geosite:category-ads-all
+        
        
+
        geosite:category-ads-all
 domain:appcenter.ms
 domain:firebase.io
 domain:crashlytics.com
@@ -856,7 +1012,6 @@ 
        首选项 > 路由设置：

      首选项 > TUN 设置（仅影响 TUN 模式代理）：

      -

      有关 TUN 代理和其他代理模式的讲解请见下文

      @@ -864,85 +1019,96 @@

      首选项 > TUN - + - + - + - +
      • 启用 Tun IPV6：
      		+
        +
      • 启用 Tun IPV6：
        • +
      +      		 可开启，除非日后使用 TUN 模式时发现问题；
      • Strict Route (严格路由)：
      		+
        +
      • Strict Route (严格路由)：
        • +
      +      		 开启。关闭本设置会导致 DNS 泄露；
      • FakeDNS：
      		+
        +
      • FakeDNS：
        • +
      +      		 开启；
      • 绕过CIDR、绕过进程名：
      		+
        +
      • 绕过CIDR、绕过进程名：
        • +
      +      		 按需自行设置（可开启任务管理器 Ctrl Shift ESC，导航至详细信息标签查看进程名）；

      导入节点：

      -

      假设你已经购买了机场订阅，或者有其他获取节点的渠道（自建节点、免费公开节点等）。

      从订阅链接导入：

      -

      从机场网站复制好订阅链接后，在界面中简单按下Ctrl V，或者导航至 工具栏 > 服务器 > 从剪贴板添加

      -

      +

      选择：作为订阅（创建新租）

      -

      +

      在工具栏打开 首选项 > 分组，此时应该可以看到新添加的分组。你可以定期回到这里更新订阅。

      -

      +

      默认分组此时就可以删除了

      此外，你也可以直接复制节点文本导入节点，本文便不再赘述。

      开始使用代理：

      -

      回到程序主界面，切换到刚刚添加的分组标签：

      -

      +

      -

      +

      此时，你应该可以看到全部新添加的节点：

      单击选中一个节点，按Enter键即可切换至对应节点。此时，任何经过 NekoRay 代理且未被路由设置排除的流量都会通过连接的节点进行代理了。

      -

      +

      连接到节点后的日志消息

      -

      +

      界面左下角也会显示当前连接的节点名称

      代理模式：

      -
      -

      参见：1。

      +

      参见：1。

      在 NekoRay 主界面工具栏找到 Tun 模式和系统代理的复选框

      ps: 两个都勾选的话系统代理也会被 TUN 覆盖掉 -

      +

      正常使用推荐直接开启系统代理即可。对于普通用户，除非特别需要代理某些不支持系统代理的程序（例：使用 Windows 的 cmd.exe 命令提示符导入ruby gem、为游戏提供加速等）时需要开启 TUN，其他时候不建议 TUN 模式常驻开启。

      选择最佳节点、理解设备的网络代理状态

      节点测速：

      -

      NekoRay 内含多种节点测速的方法。在节点列表中右键或在工具栏打开服务器标签，按需求选择当前选中或当前分组为对应节点选择测速方法。

      例：选择全部日本节点并对当前选中进行测速 -

      +

      • @@ -954,91 +1120,88 @@

        节点测速：

      TCP Ping 之后按照测试结果对节点排序 -

      +

      网络流量状态：

      -

      界面的右下角会显示实时更新的当前网络流量状态。

      当你发现某个网址无法连接的时候，可以查看这里的状态以确定问题是否由于节点导致，考虑是否需要切换节点。 -

      +

      测试代理效果：

      - -

      访问 ipleak.net +

      访问 ipleak.net 查看当前代理的效果。

      理想的代理：No forwarded IP detected ~ 未检测到转发的 IP；DNS 地址与节点来自同一个国家 -

      +

      DNS 列表中夹杂着来自运营商的DNS地址：DNS泄露，请重新检查相关设置！ -

      +

      其他：关于网络安全

      任何时候都应该使用 HTTPS！

      -

      通过 HTTP 协议访问网络会面临着遭受中间人攻击的严重风险。中间人攻击指的是由运营商、CDN 网络、长城防火墙等通过劫持并篡改你接收到的数据包内容进行的欺骗、诈骗等行为。

      防止 WebRTC 泄露真实 IP

      - -

      由于浏览器实现 WebRTC（网络实时通讯）的方法中存在的严重漏洞，一个网站只需通过简单的 Javascript 便可以获得用户的真实 IP。解决方案包括禁用 WebRTC 以及使用插件防止泄露（如 WebRTC Leak Prevent）

      +

      由于浏览器实现 WebRTC（网络实时通讯）的方法中存在的严重漏洞，一个网站只需通过简单的 Javascript 便可以获得用户的真实 IP。解决方案包括禁用 WebRTC 以及使用插件防止泄露（如 WebRTC Leak Prevent）

      例：使用 WebRTC Leak Prevent 防止泄露真实 IP -

      +

      防止 CDN 泄露隐私

      -

      防止由使用不安全的 CDN（内容分发网络）所导致的隐私泄露： -Decentraleyes

      +Decentraleyes

      避免使用不可信的浏览器访问网络

      -

      任何情况下从原则上都不应使用任何国产商业浏览器，包括QQ、搜狗、360、“中国特供版”火狐，以及微信 QQ 微企等软件的内置浏览器。不是很推荐使用 Google Chrome 与 Edge，避免被谷歌和微软搜集隐私。推荐使用 Firefox（注意甄别“中国特供版”火狐！）及 Ungoogled Chrome。

      -
      +

      本教程到这里就结束啦。期待下次再见~

      参见：

      -
      1. -
        关于端口转发模式、系统代理与 TUN 模式
        +

        关于端口转发模式、系统代理与 TUN 模式：

        +
          -
        • 端口转发 是很多代理客户端的默认模式。在这个模式下客户端不会主动代理设备上的任何流量，须手动在需要代理的软件中设置使用本机的对应端口进行代理（如：127.0.0.1:2080，其中127.0.0.1代表本地主机，2080为代理客户端监听的端口）；
          • +
        • +端口转发 是很多代理客户端的默认模式。在这个模式下客户端不会主动代理设备上的任何流量，须手动在需要代理的软件中设置使用本机的对应端口进行代理（如：127.0.0.1:2080，其中127.0.0.1代表本地主机，2080为代理客户端监听的端口）；
        -

        +

        例：QBitTorrent 中的代理设置

          -
        • 系统代理 通过使用 Windows 默认的代理设置，代理 Windows 设备中的大部分网络流量（相当于自动将 Windows 设置 > 网络和 Internet > 代理 > 手动设置代理 中的地址设置成端口转发模式中使用的地址；这种情况下，有些软件不会遵守本设置，因此不会进行代理）；
          • +
        • +系统代理 通过使用 Windows 默认的代理设置，代理 Windows 设备中的大部分网络流量（相当于自动将 Windows 设置 > 网络和 Internet > 代理 > 手动设置代理 中的地址设置成端口转发模式中使用的地址；这种情况下，有些软件不会遵守本设置，因此不会进行代理）；
        -

        +

        自动设置后的 Windows 系统代理

          -
        • TUN 模式 通过复杂的原理，真正意义上代理设备的全部流量，类似于 VPN 的代理模式。缺点：必须特别设置分流规则排除不应经过代理的网站与软件。
          • +
        • +TUN 模式 通过复杂的原理，真正意义上代理设备的全部流量，类似于 VPN 的代理模式。缺点：必须特别设置分流规则排除不应经过代理的网站与软件。
        -

        ↩

        +

        ↩

      @@ -1047,12 +1210,12 @@
      关于端口转发模式、系统代理与 TUN 模式
      地址：http://localhost:4000/we_fuck_gfw | 作者：Kirisame Soup ☆
      - 词量：3576 - | 字符量：6891 + 词量：3783 + | 字符量：7188
    -
    +
    @@ -1060,13 +1223,20 @@
    关于端口转发模式、系统代理与 TUN 模式
    - +
    - - - - +
    + + + + + + + + + +
    diff --git a/_site/weblab/index.html b/_site/weblab/index.html new file mode 100644 index 0000000..e74b65b --- /dev/null +++ b/_site/weblab/index.html @@ -0,0 +1,128 @@ + + + + + + + + 霧雨蘑菇店 || 奇迹在此发生 + + + + + +
    + +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    + A:¥霧雨蘑菇店/¥Web¥实验室.xml + + + +
    +
    + + +
    +
    +
    地址：http://localhost:4000/weblab/ | 作者：Kirisame Soup ☆
    +
    + 词量：1 + | 字符量：10 +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + + + + + + + +
    + diff --git a/_site/md-lab.html b/_site/weblab/markaround.html similarity index 57% rename from _site/md-lab.html rename to _site/weblab/markaround.html index 25a242f..4b88f45 100644 --- a/_site/md-lab.html +++ b/_site/weblab/markaround.html @@ -1,17 +1,13 @@ - - + + + 霧雨蘑菇店 |/¥MarkDown¥实验室.xml - - - - - @@ -24,111 +20,154 @@
    -
    -
    -
    +
    -

    MoarDown - Markdown 语法扩充类！:

    +

    MarkAround 实验室:

    +

    基于样式表的 Markdown (Kramdown) 语法扩展

    -

    目录

    +

    需要在自己网站上使用？

    +

    在网页 sass/scss 格式的样式表中添加以下代码即可：

    + +
    @import "https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_sass/markaround.scss";
+
    + +

    或者也可以通过将 markaround.scss 克隆至你的Jekyl仓库下的_sass 文件夹后，在 sass/scss 格式的样式表中添加@import "markaround";

    + +

    如果你的网站不支持构建 sass/scss：

    +

    编译完成的css样式表可在 此处 获取。

    +

    在页面html文件的<head>标签下添加以下代码，或者自行克隆到网页的仓库下使用。

    + +
    <link rel="stylesheet" href="https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/assets/css/markaround.css">
+
    + +
    +

    注：推荐使用 Kramdown 或类似拥有类似功能的 MD 处理器简化为文章元素添加属性的过程。

    +
    + +

    目录

      -
    • MoarDown - Markdown 语法扩充类！:
        -
      • 目录
        • -
      • 常规分类:
          -
        • 大小:
          • -
        • 伪标题:
          • -
        • 对齐:
          • -
        • 修饰线:
          • -
        • 颜色:
          • -
        • 背景色:
          • -
        • 边框色:
          • -
        • 注音:
          • -
        • 悬浮提示: -
          • -
        • 表格:
          • -
        • 文本块:
          • +
        • +MarkAround 实验室: -
          +

          常规分类:

          大小:

            -
          • .bigger 1
            • +
          • 普通大小（作为对比）
            • +
          • +.bigger 1 +
          • .big
          • .small
          • .smaller
            • -
          • .size 2 +
          • +.size 2
              -
            • --s: 1.096 (自定义大小倍率)
              • +
            • --s: 1.096 (自定义大小倍率) +

          伪标题:

            -
          • .fake.h1
            • -
          • .fake.h2
            • -
          • .fake.h3
            • -
          • .fake.h4
            • -
          • .fake.h5
            • -
          • .fake.h6
            • +
          • + .fake.h1 +
            • +
          • + .fake.h2 +
            • +
          • + .fake.h3 +
            • +
          • + .fake.h4 +
            • +
          • + .fake.h5 +
            • +
          • + .fake.h6 +

          对齐:

          -

          居中：.c +

          靠左：.l +居中：.c 靠右：.r

          @@ -138,7 +177,6 @@

          修饰线:

          - @@ -149,7 +187,6 @@

          修饰线:

          - @@ -157,7 +194,6 @@

          修饰线:

          - @@ -165,7 +201,6 @@

          修饰线:

          - @@ -173,7 +208,6 @@

          修饰线:

          - @@ -181,7 +215,6 @@

          修饰线:

          - @@ -192,125 +225,515 @@

          修饰线:

        • markdown原版语法的删除线:
            -
          • txt : ~~txt~~
            • -
          • txt : ~~txt~~{:.-d}
            • -
          • txt : ~~txt~~{:.-dd}
            • -
          • txt : ~~txt~~{:.-db}
            • -
          • txt : ~~txt~~{:.-w}
            • +
          • +txt : ~~txt~~
            • +
          • +txt : ~~txt~~{:.-d}
            • +
          • +txt : ~~txt~~{:.-dd}
            • +
          • +txt : ~~txt~~{:.-db}
            • +
          • +txt : ~~txt~~{:.-w}

          • 颜色:

          +
              下划线 上划线
          正常线  .u .ovl .dll
          段虚线  .u.-d .ovl.-d .dll.-d
          点虚线  .u.-do .ovl.-do .dll.-do
          双层线  .u.-db .ovl.-db .dll.-db
          波浪线  .u.-w .ovl.-w .dll.-w
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
            +
          • .white
            • +
          +          		.wh
            -
          • .white
          • .silver
            • +
          +          		.si
          +
          • .gray
            • -
          • .black
            • +
          +          		.gr
          +
            +
          • .black
            • +
          +          		.bc
          +
          • .red
            • +
          +          		.re
          +
          • .maroon
            • -
          • .yellow
            • +
          +          		.ma
          +
            +
          • .yellow
            • +
          +          		.ye
          +
          • .olive
            • +
          +          		.ol
          +
          • .lime
            • +
          +          		.li
          +
          • .green
            • +
          +          		.gr
          +
          • .aqua
            • +
          +          		.aq
          +
          • .teal
            • +
          +          		.te
          +
          • .blue
            • +
          +          		.bl
          +
          • .navy
            • +
          +          		.na
          +
          • .fuchsia
            • +
          +          		.fu
          +
          • .purple
          +          		.pu

          背景色:

            -
          • -

            --hd: 0.05em (背景、边框距离)

            -
            • +
          • --hd: 0.05em (背景、边框距离) +
            • +
          • .h
            • +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          • .hwhite
            • +
          +          		.hwh
          +
          • .hsilver
            • +
          +          		.hsi
          +
          • .hgray
            • +
          +          		.hgr
          +
          • .hblack
            • +
          +          		.hbc
          +
          • .hred
            • +
          +          		.hre
          +
          • .hmaroon
            • +
          +          		.hma
          +
          • .hyellow
            • +
          +          		.hye
          +
          • .holive
            • +
          +          		.hol
          +
          • .hlime
            • +
          +          		.hli
          +
          • .hgreen
            • +
          +          		.hgr
          +
          • .haqua
            • +
          +          		.haq
          +
          • .hteal
            • +
          +          		.hte
          +
          • .hblue
            • +
          +          		.hbl
          +
          • .hnavy
            • +
          +          		.hna
          +
          • .hfuchsia
            • +
          +          		.hfu
          +
          • .hpurple
          +          		.hpu

          边框色:

            -
          • --bw: 2px (边框粗细)
            • -
          • -

            --bd: 0.05em (背景、边框距离)

            -
            • +
          • --bw: 2px (边框粗细) +
            • +
          • --bd: 0.05em (背景、边框距离) +
            • +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          • .bwhite
            • +
          +          		.bwh
          +
          • .bsilver
            • +
          +          		.bsi
          +
          • .bgray
            • +
          +          		.bgr
          +
          • .bblack
            • +
          +          		.bbc
          +
          • .bred
            • +
          +          		.bre
          +
          • .bmaroon
            • +
          +          		.bma
          +
          • .byellow
            • +
          +          		.bye
          +
          • .bolive
            • +
          +          		.bol
          +
          • .blime
            • +
          +          		.bli
          +
          • .bgreen
            • +
          +          		.bgr
          +
          • .baqua
            • +
          +          		.baq
          +
          • .bteal
            • +
          +          		.bte
          +
          • .bblue
            • +
          +          		.bbl
          +
          • .bnavy
            • +
          +          		.bna
          +
          • .bfuchsia
            • +
          +          		.bfu
          +
          • .bpurple
          +          		.bpu

          注音:

          • 这是文字

            -

            *这是文字*{:r="这是注音"}

            +
            +
            *这是文字*{:r="这是注音"}
+
          • -

            这 是 文 字

            +

            这是文字

            - 
            *这*{:r="zhe"}
-*是*{:r="shi"}
-*文*{:r="zhu"}
-*字*{:r="yin"}
+    
            
+
            *这*{:r="zhè"}
+*是*{:r="shì"}
+*文*{:r="zhù"}
+*字*{:r="yīn"}
          -

          悬浮提示:

          +

          隐藏:

          +
          +

          将鼠标悬浮到文本上

          +
            -
          • html 自带的悬浮提示：{:title=”这是提示”}
            • +
          • .del
            • +
          • +.blur +
              +
            • .blurrier
              • +
            • --br: 0.1em (模糊半径) +
              • +
            +
            • +
          • +这是一段普通的文字”}
          -

          更华丽的提示:

          +

          悬浮提示:

          +
          +

          html 也有自带悬浮提示，即 title=”” 属性：{:title=”这是提示”}

          +
          +
            -
          • {:t=”这是提示”}
            • -
          • {:t=”这是提示” .above}
            • -
          • {:t=”这是提示” style=”–tc:#d44”} +
          • +

            {:t=”这是提示”}

            +
            • +
          • +

            {:t=”这是提示” .above}

            +
            • +
          • +

            {:t=”这是提示” style=”–tc:#d44”}

              -
            • --tc: #44d (提示颜色)
              • +
            • --tc: #44d (提示颜色) +
          + +
          +

          用来制作舒适的链接列表效果

          + +
          +

          表格:

            -
          • 表格默认另开新行，加入 .i 类可转成行内表格
          • 平表格
            • - +
              @@ -339,33 +762,19 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+
          • 普通表格
            • - +
              @@ -394,33 +803,16 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
               {:.t}
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+{:.t}`|
+
            • - +
              @@ -479,65 +871,27 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.t h="这是表格"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.t h="这是表格"}`|
+
          • 简单表格
            • - +
              @@ -566,33 +920,16 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
               {:.ts}
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+{:.ts}
+
            • - +
              @@ -651,58 +988,20 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.ts h="这是表格"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.ts h="这是表格"}
+
            • @@ -710,7 +1009,7 @@

            表格:

          • –tbtc: 调整表格文字颜色
            • - +
              @@ -769,58 +1068,20 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"}
+
            • @@ -840,13 +1101,6 @@

            文本块:

            {:.info}

-
  • 注释块： -
    -

    > 文本

    - -

    {:.note}

    -
    -
  • 警告块：

    > 文本

    @@ -854,7 +1108,7 @@

    文本块:

    {:.warn}

    • -
  • 嵌套结构块：
    +
  • 嵌套结构块：

    > 文本

    @@ -891,19 +1145,42 @@

    文本块:

    • -

    华丽装饰类！:

    +

    脚注:

    + +
      +
    • +

      普通（序号）脚注：[^title] 3

      + +
      +
      [^title]: 
+    示例：普通脚注。这是一段文字
+
+    另一段文字
+
+    > 提示文字块
+    {:.info}
+
      +
      • +
    • +

      文字脚注：*[^title2]*{:foot=”我是脚注”} 4

      +
      • +
    -

    彩虹:

    +

    华丽装饰类！:

    -
    +

    彩虹:

    +

    不兼容阴影 .shadow 与描边 .stroke

      -
    • .rainbow +
    • +.rainbow
        -
      • --rspd: 1s (滚动速度)
        • -
      • --rbgsz: 4em (背景大小)
        • +
      • --rspd: 1s (滚动速度) +
        • +
      • --rbgsz: 4em (背景大小) +
    • .rainbow.fancy
      • @@ -911,21 +1188,27 @@

      彩虹:

      .rainbow.fancy2

        -
      • --rspd: 10s (滚动速度)
        • -
      • --rsc: #00f (阴影描边颜色)
        • +
      • --rspd: 10s (滚动速度) +
        • +
      • --rsc: #00f (阴影描边颜色) +
      -
    • .rainbow.cmy
      -.rainbow.fancy.cmy
      +
    • +.rainbow.cmy
      +.rainbow.fancy.cmy
      .rainbow.fancy2.cmy   彩虹但是青品黄

    阴影:

      -
    • .shadow +
    • +.shadow
        -
      • --sdd: 4px (阴影距离)
        • -
      • --sdc: #000 (阴影颜色)
        • +
      • --sdd: 4px (阴影距离) +
        • +
      • --sdc: #000 (阴影颜色) +
    • .echo
      • @@ -934,19 +1217,24 @@

      阴影:

      描边:

        -
      • .stroke +
      • +.stroke
          -
        • --std: 2px (描边距离)
          • -
        • --stc: #440 (描边颜色)
          • +
        • --std: 2px (描边距离) +
          • +
        • --stc: #440 (描边颜色) +

      动画！:

        -
      • .pulse +
      • +.pulse
          -
        • --pspd: .25s (跳动速度)
          • +
        • --pspd: .25s (跳动速度) +
        • --pscl: 1.2 (跳动大小倍率)7
        • --pphs: 0 (跳动动画相位偏移)
            @@ -960,13 +1248,21 @@

            动画！:

          • -
        • .rotate +
        • +.rotate
          • .rotate.rev
            • -
          • --rpsd: 1s (旋转速度(周期) – 默认 3s)
            • -
          • --ofst-x: 50% (水平偏移旋转中心 – 默认 0%)
            • -
          • --ofst-y: 300% (垂直偏移旋转中心 – 默认 0%)
            • -
          • --rphs: 0 +
          • +--rpsd: 1s (旋转速度(周期) – 默认 3s) +
            • +
          • +--ofst-x: 50% (水平偏移旋转中心 – 默认 0%) +
            • +
          • +--ofst-y: 300% (垂直偏移旋转中心 – 默认 0%) +
            • +
          • +--rphs: 0 --rphs: .25 (旋转相位偏移 – 默认 0)
            • 最好使用 0 至 1 之间的值（偏移 0 至 1 周期）
              • @@ -977,18 +1273,17 @@

              动画！:

            • 嵌套使用段落类（block-level class）和内容类（inline class），以同时使用旋转文字（.rotate）和跳动文字（.pulse） （在同一元素中无法同时使用两者——无法直接 {:.rotate.pulse}）：
                -
              • {:.rotate}
                +
              • {:.rotate}
                *文字内容*{:.pulse}
                • -
              • {:.rotate}
                +
              • {:.rotate}
                *文字内容*{:.pulse}
            -
            +

            文字排版测试用

            -

            午后之时，那银白色的幻想乡。

            白雪静静地飘落于尚未开发的自然之中，显现出充满幻想的壮观景象。只能听见妖怪惨叫般的鸣啼声远远传来。

            @@ -1091,42 +1386,47 @@

            文字排版测试用

            • {: } 冒号后支持添加的属性包括：类名称、ID值、HTML属性
                -
              • 类名称： {:.classname}
                • -
              • ID: {:#id}
                -(本文档中罗列的特性都不会用到ID值)
                • +
              • 类名称： {:.classname} +
                • +
              • ID: {:#id}
                +(本文档中罗列的特性都不会用到ID值) +
              • HTML 属性：
                • {:attr="value"}
                  • -
                • 空属性： {:attr=""}
                  • -
                • 使用例： {:style="background:url(/assets/image.gif)"}
                  +
                • 空属性： {:attr=""} +
                  • +
                • 使用例： {:style="background:url(/assets/image.gif)"}
                  为元素添加一个自定义的图片背景
                • -
              • 使用多种不同的属性：
                -{:.bigger.rainbow#unique style:"transform:scaleX(200%)"}
                • +
              • 使用多种不同的属性：
                +{:.bigger.rainbow#unique style:"transform:scaleX(200%)"} +
            -
            +
            • 为行内元素添加属性：
                -
              • 段落内容 *文字*{:.cfuchsia} 段落内容。
                -3
                • +
              • 段落内容 *文字*{:.cfuchsia} 段落内容。
                +5 +
            -
            +
            • -

              为段落元素添加属性：

              -{:.bfuchsia.cfuchsia}
              段落内容段落内容段落内容。

              +

              为段落元素添加属性：

              +{:.bfuchsia.cfuchsia}
              段落内容段落内容段落内容。

              -
              +

              {: } 也可置于段落下方

              • @@ -1135,7 +1435,7 @@

              文字排版测试用

              详见：https://kramdown.gettalong.org/syntax.html#attribute-list-definitions

              -

              ↩

              +

              ↩

            • @@ -1144,7 +1444,29 @@

              文字排版测试用

              例：上文的 .size 类使用了 {:.size style="--s:1.096"} 语句将文本字号设成 1.096 倍

    -

    ↩

    +

    ↩

    + +
  • + +

    示例：普通（序号）脚注。这是一段文字

    + +

    另一段文字

    + +
    +

    提示文字块

    +
    +

    ↩

    +
    • +
  • + +

    示例：文字脚注。一段文字

    + +

    另一段文字

    + +
    +

    提示文字块

    +
    +

    ↩

  • @@ -1159,7 +1481,7 @@

    文字排版测试用

    这种情况下，请使用 .i 类专门声明此文字为斜体。

    • -

    ↩

    +

    ↩

    @@ -1177,13 +1499,7 @@

    文字排版测试用

    -
    @@ -1198,72 +1514,118 @@

    文字排版测试用

    -

    MoarDown - Markdown 语法扩充类！:

    +

    MarkAround 实验室:

    +

    基于样式表的 Markdown (Kramdown) 语法扩展

    -

    目录

    +

    需要在自己网站上使用？

    +

    在网页 sass/scss 格式的样式表中添加以下代码即可：

    + +
    @import "https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_sass/markaround.scss";
+
    +

    或者也可以通过将 markaround.scss 克隆至你的Jekyl仓库下的_sass 文件夹后，在 sass/scss 格式的样式表中添加@import "markaround";

    + +

    如果你的网站不支持构建 sass/scss：

    +

    编译完成的css样式表可在 此处 获取。

    + +

    在页面html文件的<head>标签下添加以下代码，或者自行克隆到网页的仓库下使用。

    + +
    <link rel="stylesheet" href="https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/assets/css/markaround.css">
+
    + +
    +

    注：推荐使用 Kramdown 或类似拥有类似功能的 MD 处理器简化为文章元素添加属性的过程。

    +
    + +

    目录

      -
    • MoarDown - Markdown 语法扩充类！:
        -
      • 目录
        • -
      • 常规分类:
          -
        • 大小:
          • -
        • 伪标题:
          • -
        • 对齐:
          • -
        • 修饰线:
          • -
        • 颜色:
          • -
        • 背景色:
          • -
        • 边框色:
          • -
        • 注音:
          • -
        • 悬浮提示: -
          • -
        • 表格:
          • -
        • 文本块:
          • +
        • +MarkAround 实验室: -
          +

          常规分类:

          大小:

            -
          • .bigger 1
            • +
          • 普通大小（作为对比）
            • +
          • +.bigger 1 +
          • .big
          • .small
          • .smaller
            • -
          • .size 2 +
          • +.size 2
              -
            • --s: 1.096 (自定义大小倍率)
              • +
            • --s: 1.096 (自定义大小倍率) +

          伪标题:

            -
          • .fake.h1
            • -
          • .fake.h2
            • -
          • .fake.h3
            • -
          • .fake.h4
            • -
          • .fake.h5
            • -
          • .fake.h6
            • +
          • + .fake.h1 +
            • +
          • + .fake.h2 +
            • +
          • + .fake.h3 +
            • +
          • + .fake.h4 +
            • +
          • + .fake.h5 +
            • +
          • + .fake.h6 +

          对齐:

          -

          居中：.c +

          靠左：.l +居中：.c 靠右：.r

          @@ -1273,7 +1635,6 @@

          修饰线:

          - @@ -1284,7 +1645,6 @@

          修饰线:

          - @@ -1292,7 +1652,6 @@

          修饰线:

          - @@ -1300,7 +1659,6 @@

          修饰线:

          - @@ -1308,7 +1666,6 @@

          修饰线:

          - @@ -1316,7 +1673,6 @@

          修饰线:

          - @@ -1327,125 +1683,515 @@

          修饰线:

        • markdown原版语法的删除线:
            -
          • txt : ~~txt~~
            • -
          • txt : ~~txt~~{:.-d}
            • -
          • txt : ~~txt~~{:.-dd}
            • -
          • txt : ~~txt~~{:.-db}
            • -
          • txt : ~~txt~~{:.-w}
            • +
          • +txt : ~~txt~~
            • +
          • +txt : ~~txt~~{:.-d}
            • +
          • +txt : ~~txt~~{:.-dd}
            • +
          • +txt : ~~txt~~{:.-db}
            • +
          • +txt : ~~txt~~{:.-w}

          • 颜色:

          +
              下划线 上划线
          正常线  .u .ovl .dll
          段虚线  .u.-d .ovl.-d .dll.-d
          点虚线  .u.-do .ovl.-do .dll.-do
          双层线  .u.-db .ovl.-db .dll.-db
          波浪线  .u.-w .ovl.-w .dll.-w
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
            +
          • .white
            • +
          +          		.wh
            -
          • .white
          • .silver
            • +
          +          		.si
          +
          • .gray
            • -
          • .black
            • +
          +          		.gr
          +
            +
          • .black
            • +
          +          		.bc
          +
          • .red
            • +
          +          		.re
          +
          • .maroon
            • -
          • .yellow
            • +
          +          		.ma
          +
            +
          • .yellow
            • +
          +          		.ye
          +
          • .olive
            • +
          +          		.ol
          +
          • .lime
            • +
          +          		.li
          +
          • .green
            • +
          +          		.gr
          +
          • .aqua
            • +
          +          		.aq
          +
          • .teal
            • +
          +          		.te
          +
          • .blue
            • +
          +          		.bl
          +
          • .navy
            • +
          +          		.na
          +
          • .fuchsia
            • +
          +          		.fu
          +
          • .purple
          +          		.pu

          背景色:

            -
          • -

            --hd: 0.05em (背景、边框距离)

            -
            • +
          • --hd: 0.05em (背景、边框距离) +
            • +
          • .h
            • +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          • .hwhite
            • +
          +          		.hwh
          +
          • .hsilver
            • +
          +          		.hsi
          +
          • .hgray
            • +
          +          		.hgr
          +
          • .hblack
            • +
          +          		.hbc
          +
          • .hred
            • +
          +          		.hre
          +
          • .hmaroon
            • +
          +          		.hma
          +
          • .hyellow
            • +
          +          		.hye
          +
          • .holive
            • +
          +          		.hol
          +
          • .hlime
            • +
          +          		.hli
          +
          • .hgreen
            • +
          +          		.hgr
          +
          • .haqua
            • +
          +          		.haq
          +
          • .hteal
            • +
          +          		.hte
          +
          • .hblue
            • +
          +          		.hbl
          +
          • .hnavy
            • +
          +          		.hna
          +
          • .hfuchsia
            • +
          +          		.hfu
          +
          • .hpurple
          +          		.hpu

          边框色:

            -
          • --bw: 2px (边框粗细)
            • -
          • -

            --bd: 0.05em (背景、边框距离)

            -
            • +
          • --bw: 2px (边框粗细) +
            • +
          • --bd: 0.05em (背景、边框距离) +
            • +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +
          • .bwhite
            • +
          +          		.bwh
          +
          • .bsilver
            • +
          +          		.bsi
          +
          • .bgray
            • +
          +          		.bgr
          +
          • .bblack
            • +
          +          		.bbc
          +
          • .bred
            • +
          +          		.bre
          +
          • .bmaroon
            • +
          +          		.bma
          +
          • .byellow
            • +
          +          		.bye
          +
          • .bolive
            • +
          +          		.bol
          +
          • .blime
            • +
          +          		.bli
          +
          • .bgreen
            • +
          +          		.bgr
          +
          • .baqua
            • +
          +          		.baq
          +
          • .bteal
            • +
          +          		.bte
          +
          • .bblue
            • +
          +          		.bbl
          +
          • .bnavy
            • +
          +          		.bna
          +
          • .bfuchsia
            • +
          +          		.bfu
          +
          • .bpurple
          +          		.bpu

          注音:

          • 这是文字

            -

            *这是文字*{:r="这是注音"}

            +
            +
            *这是文字*{:r="这是注音"}
+
          • -

            这 是 文 字

            +

            这是文字

            - 
            *这*{:r="zhe"}
-*是*{:r="shi"}
-*文*{:r="zhu"}
-*字*{:r="yin"}
+    
            
+
            *这*{:r="zhè"}
+*是*{:r="shì"}
+*文*{:r="zhù"}
+*字*{:r="yīn"}
          -

          悬浮提示:

          +

          隐藏:

          +
          +

          将鼠标悬浮到文本上

          +
            -
          • html 自带的悬浮提示：{:title=”这是提示”}
            • +
          • .del
            • +
          • +.blur +
              +
            • .blurrier
              • +
            • --br: 0.1em (模糊半径) +
              • +
            +
            • +
          • +这是一段普通的文字”}
          -

          更华丽的提示:

          +

          悬浮提示:

          +
          +

          html 也有自带悬浮提示，即 title=”” 属性：{:title=”这是提示”}

          +
          +
            -
          • {:t=”这是提示”}
            • -
          • {:t=”这是提示” .above}
            • -
          • {:t=”这是提示” style=”–tc:#d44”} +
          • +

            {:t=”这是提示”}

            +
            • +
          • +

            {:t=”这是提示” .above}

            +
            • +
          • +

            {:t=”这是提示” style=”–tc:#d44”}

              -
            • --tc: #44d (提示颜色)
              • +
            • --tc: #44d (提示颜色) +
          + +
          +

          用来制作舒适的链接列表效果

          + +
          +

          表格:

            -
          • 表格默认另开新行，加入 .i 类可转成行内表格
          • 平表格
            • - +
              @@ -1474,33 +2220,19 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+
          • 普通表格
            • - +
              @@ -1529,33 +2261,16 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
               {:.t}
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+{:.t}`|
+
            • - +
              @@ -1614,65 +2329,27 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.t h="这是表格"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.t h="这是表格"}`|
+
          • 简单表格
            • - +
              @@ -1701,33 +2378,16 @@

              表格:

              1
              - - - - - - - - - - - - - - - - - - - - - - - -
               |1|a|b|c|
               |2|d|e|f|
               |3|g|h|i|
               |4|j|k|l|
               {:.ts}
              +
              +
              |1|a|b|c|
+|2|d|e|f|
+|3|g|h|i|
+|4|j|k|l|
+{:.ts}
+
            • - +
              @@ -1786,58 +2446,20 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.ts h="这是表格"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.ts h="这是表格"}
+
            • @@ -1845,7 +2467,7 @@

            表格:

          • –tbtc: 调整表格文字颜色
            • - +
              @@ -1904,58 +2526,20 @@

              表格:

               
              - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
               | |一|二|三|
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |----------|
               |1|a |b |c |
               |2|d |e |f |
               |3|g |h |i |
               |4|j |k |l |
               |==========|
               |0|z |z |z |
               {:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"}
              +
              +
              | |一|二|三|
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|----------|
+|1|a |b |c |
+|2|d |e |f |
+|3|g |h |i |
+|4|j |k |l |
+|==========|
+|0|z |z |z |
+{:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"}
+
            • @@ -1975,13 +2559,6 @@

            文本块:

            {:.info}

            -
          • 注释块： -
            -

            > 文本

            - -

            {:.note}

            -
            -
          • 警告块：

            > 文本

            @@ -1989,7 +2566,7 @@

            文本块:

            {:.warn}

            • -
          • 嵌套结构块：
            +
          • 嵌套结构块：

            > 文本

            @@ -2026,19 +2603,42 @@

            文本块:

          -

          华丽装饰类！:

          +

          脚注:

          + +
            +
          • +

            普通（序号）脚注：[^title] 3

            + +
            +
            [^title]: 
+    示例：普通脚注。这是一段文字
+
+    另一段文字
 
-
            彩虹:
            
+    > 提示文字块
+    {:.info}
+
            +
            • +
          • +

            文字脚注：*[^title2]*{:foot=”我是脚注”} 4

            +
            • +
          + +

          华丽装饰类！:

          -
          +

          彩虹:

          +

          不兼容阴影 .shadow 与描边 .stroke

            -
          • .rainbow +
          • +.rainbow
              -
            • --rspd: 1s (滚动速度)
              • -
            • --rbgsz: 4em (背景大小)
              • +
            • --rspd: 1s (滚动速度) +
              • +
            • --rbgsz: 4em (背景大小) +
          • .rainbow.fancy
            • @@ -2046,21 +2646,27 @@

            彩虹:

            .rainbow.fancy2

              -
            • --rspd: 10s (滚动速度)
              • -
            • --rsc: #00f (阴影描边颜色)
              • +
            • --rspd: 10s (滚动速度) +
              • +
            • --rsc: #00f (阴影描边颜色) +
            -
          • .rainbow.cmy
            -.rainbow.fancy.cmy
            +
          • +.rainbow.cmy
            +.rainbow.fancy.cmy
            .rainbow.fancy2.cmy   彩虹但是青品黄

          阴影:

            -
          • .shadow +
          • +.shadow
              -
            • --sdd: 4px (阴影距离)
              • -
            • --sdc: #000 (阴影颜色)
              • +
            • --sdd: 4px (阴影距离) +
              • +
            • --sdc: #000 (阴影颜色) +
          • .echo
            • @@ -2069,19 +2675,24 @@

            阴影:

            描边:

              -
            • .stroke +
            • +.stroke
                -
              • --std: 2px (描边距离)
                • -
              • --stc: #440 (描边颜色)
                • +
              • --std: 2px (描边距离) +
                • +
              • --stc: #440 (描边颜色) +

            动画！:

              -
            • .pulse +
            • +.pulse
                -
              • --pspd: .25s (跳动速度)
                • +
              • --pspd: .25s (跳动速度) +
              • --pscl: 1.2 (跳动大小倍率)7
              • --pphs: 0 (跳动动画相位偏移)
                  @@ -2095,13 +2706,21 @@

                  动画！:

                • -
              • .rotate +
              • +.rotate
                • .rotate.rev
                  • -
                • --rpsd: 1s (旋转速度(周期) – 默认 3s)
                  • -
                • --ofst-x: 50% (水平偏移旋转中心 – 默认 0%)
                  • -
                • --ofst-y: 300% (垂直偏移旋转中心 – 默认 0%)
                  • -
                • --rphs: 0 +
                • +--rpsd: 1s (旋转速度(周期) – 默认 3s) +
                  • +
                • +--ofst-x: 50% (水平偏移旋转中心 – 默认 0%) +
                  • +
                • +--ofst-y: 300% (垂直偏移旋转中心 – 默认 0%) +
                  • +
                • +--rphs: 0 --rphs: .25 (旋转相位偏移 – 默认 0)
                  • 最好使用 0 至 1 之间的值（偏移 0 至 1 周期）
                    • @@ -2112,18 +2731,17 @@

                    动画！:

                  • 嵌套使用段落类（block-level class）和内容类（inline class），以同时使用旋转文字（.rotate）和跳动文字（.pulse） （在同一元素中无法同时使用两者——无法直接 {:.rotate.pulse}）：
                      -
                    • {:.rotate}
                      +
                    • {:.rotate}
                      *文字内容*{:.pulse}
                      • -
                    • {:.rotate}
                      +
                    • {:.rotate}
                      *文字内容*{:.pulse}
                  -
                  +

                  文字排版测试用

                  -

                  午后之时，那银白色的幻想乡。

                  白雪静静地飘落于尚未开发的自然之中，显现出充满幻想的壮观景象。只能听见妖怪惨叫般的鸣啼声远远传来。

                  @@ -2226,42 +2844,47 @@

                  文字排版测试用

                  • {: } 冒号后支持添加的属性包括：类名称、ID值、HTML属性
                      -
                    • 类名称： {:.classname}
                      • -
                    • ID: {:#id}
                      -(本文档中罗列的特性都不会用到ID值)
                      • +
                    • 类名称： {:.classname} +
                      • +
                    • ID: {:#id}
                      +(本文档中罗列的特性都不会用到ID值) +
                    • HTML 属性：
                      • {:attr="value"}
                        • -
                      • 空属性： {:attr=""}
                        • -
                      • 使用例： {:style="background:url(/assets/image.gif)"}
                        +
                      • 空属性： {:attr=""} +
                        • +
                      • 使用例： {:style="background:url(/assets/image.gif)"}
                        为元素添加一个自定义的图片背景
                      • -
                    • 使用多种不同的属性：
                      -{:.bigger.rainbow#unique style:"transform:scaleX(200%)"}
                      • +
                    • 使用多种不同的属性：
                      +{:.bigger.rainbow#unique style:"transform:scaleX(200%)"} +
                  -
                  +
                  • 为行内元素添加属性：
                      -
                    • 段落内容 *文字*{:.cfuchsia} 段落内容。
                      -3
                      • +
                    • 段落内容 *文字*{:.cfuchsia} 段落内容。
                      +5 +
                  -
                  +
                  • -

                    为段落元素添加属性：

                    -{:.bfuchsia.cfuchsia}
                    段落内容段落内容段落内容。

                    +

                    为段落元素添加属性：

                    +{:.bfuchsia.cfuchsia}
                    段落内容段落内容段落内容。

                    -
                    +

                    {: } 也可置于段落下方

                    • @@ -2270,7 +2893,7 @@

                    文字排版测试用

                    详见：https://kramdown.gettalong.org/syntax.html#attribute-list-definitions

                    -

                    ↩

                    +

                    ↩

                  • @@ -2279,7 +2902,29 @@

                    文字排版测试用

                    例：上文的 .size 类使用了 {:.size style="--s:1.096"} 语句将文本字号设成 1.096 倍

          -

          ↩

          +

          ↩

          +
          • +
        • + +

          示例：普通（序号）脚注。这是一段文字

          + +

          另一段文字

          + +
          +

          提示文字块

          +
          +

          ↩

          +
          • +
        • + +

          示例：文字脚注。一段文字

          + +

          另一段文字

          + +
          +

          提示文字块

          +
          +

          ↩

        • @@ -2294,21 +2939,21 @@

          文字排版测试用

          这种情况下，请使用 .i 类专门声明此文字为斜体。

          -

          ↩

          +

          ↩

    -
    地址：http://localhost:4000/md-lab | 作者：Kirisame Soup ☆
    +
    地址：http://localhost:4000/weblab/markaround | 作者：Kirisame Soup ☆
    - 词量：3982 - | 字符量：6772 + 词量：4399 + | 字符量：9119
    -
    +
    @@ -2316,13 +2961,20 @@

    文字排版测试用

    - +
    - - - - +
    + + + + + + + + + +
    diff --git a/assets/css/default/layout.scss b/assets/css/default/layout.scss index 6e31918..13678a0 100644 --- a/assets/css/default/layout.scss +++ b/assets/css/default/layout.scss @@ -22,9 +22,8 @@ html { left: 40%; top: 45%; transform: translate(-40%, -45%); // size - // @include sizeUni(52); - height: calc(52 * 9vw/16); - aspect-ratio: 2.6; + height: calc(48vw * 9/16); + aspect-ratio: 2.8; // flex display: flex; @@ -37,8 +36,7 @@ html { .banner { position: relative; - // @include sizeUni(10); - height: MAX(calc(10 * 9vw/16), 10vh); + height: MAX(calc(10vw * 9/16), 10vh); } .main { @@ -48,15 +46,15 @@ html { display: flex; .nav { - max-width: calc(20 * 9vw/16); + max-width: calc(20vw * 9/16); flex: 3; min-width: min-content; } .window { + position: relative; flex: 10; display: flex; - // flex-direction: row-reverse; .content { position: relative; @@ -68,16 +66,17 @@ html { .bottom { --height: 10%; - position: absolute; - top: MAX(calc(100% - var(--height)), 320px); + // position: absolute; + // top: MAX(calc(100% - var(--height)), 320px); z-index: 1; - height: var(--height); + height: MIN(5vh, calc(100% - 40vh)); + // height: 20px; } } .c2 { position: relative; - max-width: calc(35 * 9vw/16); + max-width: calc(35vw * 9/16); flex: 3; z-index: 1; } @@ -92,4 +91,4 @@ html { #soup\.exe, .body, .banner, .main, .nav, .bottom, .window { overflow: hidden; } -.nav-c, .content { overflow: hidden scroll; } +.content { overflow: hidden scroll; } diff --git a/assets/css/default/style.scss b/assets/css/default/style.scss index 82ae598..a2cab4d 100644 --- a/assets/css/default/style.scss +++ b/assets/css/default/style.scss @@ -5,9 +5,6 @@ iframe { display: initial; } // show navlink after apply style.css @import "normalize"; -$ghprxy: "https://ghproxy.com/https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main"; -$ghprxy: ""; - :root { --color: #44d; --color-sat: #00f; @@ -17,7 +14,7 @@ $ghprxy: ""; --color-green: #464; --color-green-fade: #efe; --color-red: #d00; - --color-red-fade: #fdd; + --color-red-fade: #fee; --color-yellow: #ff0; --color-yellow-fade: #ffe; --color-miku: #4dd; @@ -63,7 +60,7 @@ $ghprxy: ""; html { image-rendering: pixelated; } // main bg -html, .nav { +html { background: url(/assets/image/bg.gif) { color: #000; position: center; @@ -112,6 +109,8 @@ html:has(.cornerCara:not([id="0"])) { // background: url(https://usagif.com/wp-content/uploads/gifs/water-66.gif); // background: url(https://64.media.tumblr.com/9af92cc03553bd821021fd950fbc33b5/1534f96efdb15e70-b5/s100x200/6f110ffcfa7afe0af25add8144e9d30fbefc97fe.gifv); background: url(/assets/image/xp_.gif) { size: 20vw; }; + background: url(https://64.media.tumblr.com/1b8577d77a572535172d95b5bb0a070b/tumblr_inline_n25dksRrdF1qhwjx8.gif) { size: cover; }; + background-position-y: 6 0%; box-shadow: inset 10px -10px 5px -5px #44d, inset -30px 0 30px -20px #44da, @@ -136,7 +135,7 @@ html:has(.cornerCara:not([id="0"])) { &::after { content: ""; background: url(/assets/image/bannerTxt.png) { size: auto 100% !important; - position: calc(100% - MAX(30%, 20px)) !important; + position: calc(100% - MAX(20%, 20px)) !important; }; // opacity: .5; } @@ -150,84 +149,42 @@ html:has(.cornerCara:not([id="0"])) { .nav { // pos position: relative; - // styl - border-inline: #44d 1px solid; + z-index: 100; + background: #d1d1f7 url(https://64.media.tumblr.com/c63ab1ff7f79b9d030a8a3a14f3535ec/tumblr_inline_mveh0uIwTZ1rfdbtm.png) {position: bottom right}; - &-c { - // pos + nav { position: relative; - z-index: 1; - // size - height: 100%; - + z-index: -1; p { - padding: { inline: 1em 0; block: .5em; }; + padding: { inline: 1em; block: .5em; }; margin-block: 0; - display: flex; } + a, .urHere-i { padding: { right: 100%; block: .5em; }; margin: { right: -100%; block: -.5em }; } - - /* ====link fluid hovering==== */ - - text-shadow: #fff 2px 2px; - mix-blend-mode: hard-light; - color: #2985ff; - - a { - position: relative; - color: #38f; - - &.urHere { - pointer-events: none; + + p { + text-shadow: #d1d1f7 2px 2px; + transition: all 0s .2s, background-color 0s .4s; + + a { + &.urHere { pointer-events: none; } } - } + + a, .urHere-i { color: #44d; } - .urHere-i { - display: inline-block; - } - - /* ====ani==== */ - - p { - transition: all 0s .2s, - background-color .4s .2s; + &:nth-child(even) { background: #fff8; } &:hover { transition: all 0s; - padding-left: 20%; - background-color: #ccf; + text-align: right !important; + filter: invert(1); } } } - - /* ====Animating coolaf gradient bg==== */ - - &-b { - // pos - position: absolute; - left: -25%; - // size - height: 400%; width: 150%; - bottom: 0; - // styl - mix-blend-mode: lighten; - background: - linear-gradient(90deg, #000, #0000 50%), - repeating-linear-gradient(#f80, #f0f 25%, #0ff 37.5%, #8f0 42%, #f80 50%); - filter: contrast(2) blur(10px) ; - - /* ====ani==== */ - - animation: bgScroll 10s linear infinite; - @keyframes bgScroll { - from { bottom: -200%; } - to { bottom: 0; } - } - } } } @@ -235,7 +192,7 @@ html:has(.cornerCara:not([id="0"])) { // size width: 100%; // styl - background: #000; + background: #0008; img { position: relative; @@ -299,11 +256,6 @@ html:has(.cornerCara:not([id="0"])) { text-justify: inter-ideograph; background-color: var(--color-page); padding-inline: 3em 2em; - - ::selection { - color: var(--color-page); - background: var(--color); - } } // fullscreen @@ -434,7 +386,6 @@ html:has(.cornerCara:not([id="0"])) { .fullscreen &.fullscreenTg::before { background: url(/assets/image/button/unmax.gif); } &.darkTg::before { background: url(/assets/image/button/dark.gif); } &.fontTg::before { background: url(/assets/image/button/font.gif); } - } .window & { @@ -494,7 +445,7 @@ html:has(.cornerCara:not([id="0"])) { inset: 0; } - #soup\.exe:hover ~&-b, #soup\.exe:active ~&-b { transition: opacity 0s; opacity: .2; } + #soup\.exe:is(:hover, :active) ~&-b { transition: opacity 0s; opacity: .2; } /* ====randomBG==== */ @@ -542,13 +493,6 @@ html:has(.cornerCara:not([id="0"])) { pointer-events: none; background: #fff; - @keyframes flicker { - 0% { opacity: .65;} - 50% { opacity: .65;} - 50.1% { opacity: .5; } - 100% { opacity: .5; } - } - iframe { position: absolute; width: 100%; @@ -556,9 +500,16 @@ html:has(.cornerCara:not([id="0"])) { z-index: 10; inset: 0; } -} -.mask:has(input:checked) ~ .vid { display: block; animation: flicker .05s linear infinite; } + .mask:has(input:checked) ~ & { display: block; animation: flicker .05s linear infinite; } + + @keyframes flicker { + 0% { opacity: .65;} + 50% { opacity: .65;} + 50.1% { opacity: .5; } + 100% { opacity: .5; } + } +} .pc { @@ -592,12 +543,12 @@ html:has(.cornerCara:not([id="0"])) { } } - #soup\.exe:hover ~ .ibm-b &, #soup\.exe:active ~ .ibm-b & { + #soup\.exe:is(:hover, :active) ~ .ibm-b & { transition: visibility 0s; visibility: visible; } - #soup\.exe:hover ~ .ibm &-b, #soup\.exe:active ~ .ibm &-b { + #soup\.exe:is(:hover, :active) ~ .ibm &-b { transition: 0s; opacity: 0; } @@ -644,16 +595,16 @@ html:has(.cornerCara:not([id="0"])) { #soup\.exe, .fullscreen { cursor: url(/assets/image/cursor/hat.gif), auto !important; } -@mixin wCursorGif($id) { cursor: url(/assets/image/cursor/hatq#{$id}.gif), auto; } +@mixin CursorGif($id) { cursor: url(/assets/image/cursor/hatq#{$id}.gif), auto; } a, button, label, .cornerCara { animation: wonderCursor .5s infinite; @keyframes wonderCursor { - 0% { @include wCursorGif(1) } - 25% { @include wCursorGif(2) } - 50% { @include wCursorGif(3) } - 75% { @include wCursorGif(4) } - 100% { @include wCursorGif(5) } + 0% { @include CursorGif(1) } + 25% { @include CursorGif(2) } + 50% { @include CursorGif(3) } + 75% { @include CursorGif(4) } + 100% { @include CursorGif(5) } } } @@ -664,7 +615,7 @@ canvas { image-rendering: pixelated; } -#soup\.exe:hover, #soup\.exe:active { +#soup\.exe:is(:hover, :active) { ~ canvas { opacity: 0; animation: hideCanvas .5s linear forwards; @@ -681,40 +632,54 @@ canvas { /* ==== S C R O L L B A R ==== */ -.window, .fullscreen { ::-webkit-scrollbar { - width: 24px; - &:horizontal { height: 24px; } +.window, .fullscreen { + ::-webkit-scrollbar { + width: 16px; + &:horizontal { height: 16px; } - &-corner { - background: #d1d1f7; - box-shadow: inset -3px -3px #a2a2ee, - inset 3px 3px #e8e8fb; - } + &-corner { + background: #d1d1f7; + box-shadow: inset -3px -3px #a2a2ee, + inset 3px 3px #e8e8fb; + } - &-track { background: url(/assets/image/scrollbar/bg.png) {size: 4px}; } + &-track { background: url(/assets/image/scrollbar/bg.png) {size: 4px}; } - &-thumb { - background: #d1d1f7; - box-shadow: inset -1.5px -1.5px #44d, - inset 1.5px 1.5px #fff, - inset -3px -3px #a2a2ee, - inset 3px 3px #e8e8fb; - } + &-thumb { + background: #d1d1f7; + box-shadow: inset -1.5px -1.5px #44d, + inset 1.5px 1.5px #fff, + inset -3px -3px #a2a2ee, + inset 3px 3px #e8e8fb; + } - &-button { background-size: cover !important; + &-button { background-size: cover !important; - &:horizontal, &:vertical { &:start:decrement, &:end:increment { display: block; }} + &:horizontal, &:vertical { &:start:decrement, &:end:increment { display: block; }} - &:vertical { height: 24px; - &:start { background: url(/assets/image/scrollbar/up.png); } - &:end { background: url(/assets/image/scrollbar/down.png); } + &:vertical { height: 16px; + &:start { background: url(/assets/image/scrollbar/up.png); } + &:end { background: url(/assets/image/scrollbar/down.png); } + } + &:horizontal { width: 16px; + &:start { background: url(/assets/image/scrollbar/left.png); } + &:end { background: url(/assets/image/scrollbar/right.png); } + } } - &:horizontal { width: 24px; - &:start { background: url(/assets/image/scrollbar/left.png); } - &:end { background: url(/assets/image/scrollbar/right.png); } + } + + .content::-webkit-scrollbar { + width: 24px !important; + &:horizontal { height: 24px !important; } + + &-button { + &:vertical { height: 24px !important; } + &:horizontal { width: 24px !important; } } } -}} +} + + @mixin scrollbar-dark { background: #338; @@ -732,10 +697,16 @@ canvas { html { color: #000; - text-underline-offset: 25%; + text-underline-offset: 12.5%; +} + +::selection { + color: var(--color-page); + background: var(--color); } .content { color: var(--color) !important; + overflow-wrap: break-word; >p:not([class], :has(img)):after { content: "湯"; //pos @@ -752,7 +723,11 @@ html { } } -a { +pre { + overflow-x: auto; +} + +.content a { position: relative; color: var(--color-miku); @@ -760,15 +735,6 @@ a { position: absolute; inset: -.5em; } - - &::selection, ::selection { - background: var(--color-miku) !important; - } -} - -[norm] { - color: var(--color-miku); - text-decoration: underline; } /* HEADERS */ @@ -777,6 +743,7 @@ a { $hs: 1, 2, 3, 4; @each $i in $hs { h#{$i}, .fake.h#{$i} { font-weight: bolder; } } + $hs: 5, 6; @each $i in $hs { h#{$i}, .fake.h#{$i} { font-weight: normal; } } @@ -802,10 +769,6 @@ $hs: 1, 2, 3, 4, 5, 6; @each $i in $hs { h#{$i} { @each $i in $hs { +h#{$i} { margin-top: 0 !important; } } } } -// reveal url for hyperlinks. requires moardown.scss -.content a { &::before { content: "¥目标: {{site.host}}"attr(pageurl) attr(href) attr(t) !important; } } // same domain -.content a[target="_blank"] { &::before { content: "¥目标: "attr(href) attr(t) !important; } } // cross domain - // headers padding $hs: 1, 2, 3, 4, 5, 6; @each $i in $hs { h#{$i} { @@ -916,8 +879,7 @@ ul { ::marker { font-weight: bolder; color: var(--color-magenta); } } } -li { margin-bottom: .5em; } -ul { margin-top: .5em; } +td ul { margin-block: 0; } // check @@ -941,18 +903,19 @@ input.task-list-item-checkbox { } :not(pre) >code { - color: var(--color-mid); + // color: var(--color-mid); + background: var(--color-page); margin-inline: .5em; - &::before, &::after { content: "/"; - font-family: "fusion", monospace; + &:is(::before, ::after) { content: "/"; + // font-family: "fusion", monospace; margin-inline: .2em; } } // images: // adaptive and rezizeable container & img maximize -// overly fucked spaghetti code +// overly fucked-up spaghetti code .content img { -webkit-user-drag: none; } @@ -971,9 +934,9 @@ p:has(img:not(.icon)) { text-align: center; border: var(--color) 2px dotted; - .window & { max-height: MAX(20vh, 8em); } + .window & { max-height: MAX(20vh, 8em); } .window .content >& { max-height: MAX(100%, 8em); } - .fullscreen & { max-height: MAX(50vh, 8em); } + .fullscreen & { max-height: MAX(50vh, 8em); } img:not(.icon) { // pos @@ -1037,7 +1000,7 @@ p:has(img:not(.icon)) { .fullscreen:has(.darkTg input:checked) { @include fullscreen-dark; } -.window, .fullscreen { &:has(.darkTg input:checked) { ::-webkit-scrollbar-thumb { @include scrollbar-dark; }}} +:is(.window, .fullscreen):has(.darkTg input:checked) ::-webkit-scrollbar-thumb { @include scrollbar-dark; } /* ======== */ @@ -1069,7 +1032,5 @@ code, kbd, samp { @import "code"; -@import "moardown"; - @import "neko"; diff --git a/_sass/moardown.scss b/assets/css/markaround.scss similarity index 84% rename from _sass/moardown.scss rename to assets/css/markaround.scss index c81f5ea..4eba8c3 100644 --- a/_sass/moardown.scss +++ b/assets/css/markaround.scss @@ -1,17 +1,41 @@ +--- +--- + +/* +:root { + --color: #44d; + --color-sat: #00f; + --color-fade: #eef; + --color-plain: #000; + --color-mid: #666; + --color-green: #464; + --color-green-fade: #efe; + --color-red: #d00; + --color-red-fade: #fdd; + --color-yellow: #ff0; + --color-yellow-fade: #ffe; + --color-miku: #4dd; + --color-miku-fade: #eff; + --color-magenta: #f4f; + --color-magenta-fade: #fef; + --color-page: #fff; +} +*/ + // remove italic effect for ( ** in markdown ) in order to easily assign class to inline text // use .i to reobtain italic for -em:not(.i) { &[class], &[r], &[t], &[norm], &[reveal] { font-style: normal; }} +em:not(.i):is([class], [r], [t], [foot], [reveal]) { font-style: normal; } // sizes ================================ h1, h2, h3, h4, h5, h6, .fake { --s: 1 } -.big { --s: 1.25; } -.bigger { --s: 1.5; } +.big { --s: 1.5; } +.bigger { --s: 1.75; } .small { --s: .75; } .smaller { --s: .5; } -.size, .big, .bigger, .small, .smaller { &:not(h1, h2, h3, h4, h5, h6, .fake) { font-size: calc(var(--s) * 1em); } } +:is(.size, .big, .bigger, .small, .smaller):not(h1, h2, h3, h4, h5, h6, .fake) { font-size: calc(var(--s) * 1em); } h1, .fake.h1 { font-size: calc( 2em * var(--s)); } h2, .fake.h2 { font-size: calc( 1.6em * var(--s)); } @@ -32,7 +56,9 @@ h2, .fake.h2 { font-size: calc( 1.6em * var(--s)); } // left .l { text-align: left; - left:0 + left: 0; + text-justify: auto; + } // center @@ -48,7 +74,7 @@ h2, .fake.h2 { font-size: calc( 1.6em * var(--s)); } // maximize width to page width for block level elements // which contains children with alignment -p, h1, h2, h3, h4, h5, h6 { &:has(>.c), &:has(>.r) { width: 100%; } } +:is(p, h1, h2, h3, h4, h5, h6):is(:has(>.l), :has(>.c), :has(>.r)) { width: 100%; } // lines ================================ @@ -72,12 +98,9 @@ del, .dll { &.u { text-decoration-line: line-through underline; } $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple; +$clrsabbr: wh, si, gr, bc, re, ma, ye, ol, li, gr, aq, te, bl, na, fu, pu; + // use "''+$color" so that scss don't throw a warning -@each $color in $colors { - .#{""+$color} { color: $color; } - .h#{""+$color} { background-color: $color; } - .b#{""+$color} { --bw: 2px; border: $color solid var(--bw); } -} @mixin colorbg { position: relative; @@ -86,11 +109,20 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq padding: calc(var(--bd)) calc(.1em + var(--bd)); } -.h, .b { @each $color in $colors { &#{""+$color} { @include colorbg(); }}} +@for $i from 1 through length($colors) { + + .#{""+nth($colors, $i)}, .#{""+nth($clrsabbr, $i)} { color: nth($colors, $i); } + .h#{""+nth($colors, $i)}, .h#{""+nth($clrsabbr, $i)} { background-color: nth($colors, $i); @include colorbg(); } + .b#{""+nth($colors, $i)}, .b#{""+nth($clrsabbr, $i)} { --bw: 2px; border: nth($colors, $i) solid var(--bw); @include colorbg(); } + +} + +.c .h { + --hc: #44d; @include colorbg(); - color: #44d; + color: var(--hc); background: var(--color-yellow); } @@ -131,16 +163,19 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq } &:hover { &::after { - opacity: .2; + opacity: .1; }} } -.blur { filter: blur(.1em); } -.blurrier { filter: blur(.25em); } +.blur { + --br: .1em; + filter: blur(.1em); + &rier { filter: blur(.25em); } -.blur, .blurrier { - transition: filter .2s; - &:hover { filter: blur(0); } + &, &rier { + transition: filter .2s; + &:hover { filter: blur(0); } + } } [reveal] { @@ -168,15 +203,16 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq } // reveal url for hyperlinks -.content a { &::before { content: "¥目标: {{ site.url }}"attr(href) attr(t); } } // liquid doesn't work here +.content a::before { content: "¥目标: {{site.host}}"attr(pageurl) attr(href) attr(t) !important; } // same domain +.content a[target="_blank"]::before { content: "¥目标: "attr(href) attr(t) !important; } // cross domain -.del:not([t]), .blur, .blurrier { &::before { content: "你知道的太多了。"; } } +.del:not([t]) { &::before { content: "你知道的太多了。"; } } [t], a, .del { position: relative; &::before { - transition: .2s .4s; + transition: .2s .2s; pointer-events: none; // pos position: absolute; @@ -194,8 +230,8 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq } &:hover::before { - transition: 0s; - top: 1.5em; + transition: 0s .5s; + top: 1.75em; opacity: 1 !important; } @@ -213,13 +249,14 @@ $colors: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aq a { &::before { - transition: .2s; + transition: 0s; position: fixed; bottom: 0; top: unset; max-width: unset; } &:hover::before { + transition: 0s; top: unset; } } @@ -227,14 +264,15 @@ a { // tip above .above[t] { - &::before { bottom: .5em; top: unset; } + &::before { bottom: .75em; top: unset; } &:hover::before { bottom: 1.5em; } } // full width link -a.ab, -#markdown-toc li>a, -#f_markdown-toc li>a { +:is( + a.ab, + :is(#markdown-toc, #f_markdown-toc) li >a +) { display: block; right: 0; text-decoration: none; @@ -274,7 +312,7 @@ table { border-collapse: collapse; margin-block: 1em; - &::before, td, th { padding-block: .2em; padding-inline: .5em; } + &::before, td, th { padding-inline: .5em; } &[h]::before { content: attr(h); position: relative; @@ -282,9 +320,6 @@ table { bottom: -1px; } - // inline table - &.i { display: inline-table; } - // default table &.t { box-shadow: 2px 2px var(--tbc); @@ -329,14 +364,14 @@ table { // blocks ================================ -.content>blockquote, :not(blockquote) >blockquote { margin-block: 1em; } +:is(.content, :not(blockquote)) >blockquote { margin-block: 1em; } blockquote { >p:first-child { margin-top: 0; } >p:last-child { margin-bottom: 0; } // revome extra margin for first and last children blockquote margin-right: 1em; // inform blocks - &.info, &.note, &.warn { + &:is(.info, .warn) { display: block; position: relative; width: max-content; @@ -345,6 +380,8 @@ blockquote { padding-block: .5em; margin-left: 0; + .content >& { max-width: 90%; } + &::before { position: absolute; left: 0; @@ -366,15 +403,6 @@ blockquote { &::before { content: "ⓘ"; } } - &.note { - background: var(--color-green-fade); - border: var(--color-green) 3px solid; - box-shadow: 4px 4px var(--color-green); - color: var(--color-green); - - &::before { content: "ⓘ"; } - } - // warning block &.warn { background: var(--color-red-fade); @@ -401,11 +429,6 @@ blockquote { &:hover { transition: border-color 0s; border-color: var(--color); - } - } - - &, >blockquote:not([class]) { - &:hover { box-shadow: -3px 0 var(--color), 3px 3px var(--color); } } @@ -416,24 +439,35 @@ blockquote { // footnote ================================ -em[norm] { - position: relative; - &::before { content: attr(norm); } +.footnote, [foot] { + text-decoration: none; +} - sup[role="doc-noteref"] { - top: unset; - position: static; +sup[role="doc-noteref"] { + top: unset; + position: static; + font-size: 100%; + color: var(--color-miku); - .footnote { - position: absolute; - inset: 0; - color: #0000; - } - } + &::before { content: "["; } + &::after { content: "]"; } } -.footnote { - color: var(--color-red); +[foot] { + position: relative; + &::before { content: "[" attr(foot) "]"; } + color: var(--color-miku); + + .footnote { + position: absolute; + inset: 0; + color: #0000; + } + + sup[role="doc-noteref"] { + &::before { content: none; } + &::after { content: none; } + } } .footnotes { @@ -505,7 +539,7 @@ $text-stroke-shadow: --rspd: 1s; --rbgsz: 4em; &, *, ::before { image-rendering: pixelated; - background: url(/assets/image/rainbowDither.png), url(#{$ghprxy}/assets/image/rainbowDither.png) {size: var(--rbgsz)}; + background: url(/assets/image/rainbowDither.png) {size: var(--rbgsz)}; background-clip: text; -webkit-background-clip: text; color: #0000; @@ -519,7 +553,7 @@ $text-stroke-shadow: // rainbow but with cyam magenta yellow color scheme &.cmy, &.cmy * { - background-image: url(/assets/image/rainbowDither_.png), url(#{$ghprxy}/assets/image/rainbowDither_.png) ; + background-image: url(/assets/image/rainbowDither_.png) ; } } @@ -682,21 +716,10 @@ $echo_list: ".echo", ".echorb", ".stroke.echo", ".stroke.echorb"; &.rev { animation-direction: reverse; } - &.c { - transform: translateY(50%); - animation-name: rotateCentered; - left: 50%; transform: translateX(-50%); - } - @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } - - @keyframes rotateCentered { - 0% { transform: translateX(-50%) rotate(0); } - 100% { transform: translateX(-50%) rotate(360deg); } - } } // pulse diff --git a/assets/js/fallback-cssAsset.js b/assets/js/fallback-cssAsset.js index 606525d..a4dea8f 100644 --- a/assets/js/fallback-cssAsset.js +++ b/assets/js/fallback-cssAsset.js @@ -80,14 +80,9 @@ checkUrl(Url1, Timeout1) }) .catch(error => { console.error('ghProxy 连接', error, '，不使用代理服务加载网页资源。'); - console.log('您此时无法正常访问 github，且 ghProxy 代理服务此时处于离线状态，网页资源下载速度可能变慢或完全失效。\n', - '请等待 ghProxy 上线后再次访问本网页，或自行配置网络代理恢复 github 访问！') - }); } else { console.error('ghProxy 连接失败，不使用代理服务加载网页资源。'); - console.log('您此时无法正常访问 github，且 ghProxy 代理服务此时处于离线状态，网页资源下载速度可能变慢或完全失效。', - '\n请等待 ghProxy 上线后再次访问本网页，或自行配置网络代理恢复 github 访问！') } }); }); diff --git a/assets/js/ip.js b/assets/js/ip.js new file mode 100644 index 0000000..5e3c387 --- /dev/null +++ b/assets/js/ip.js @@ -0,0 +1,5 @@ +--- +layout: +--- + +{% include ip.js.md %} diff --git a/home.md b/home.md index bb47af0..c1d28b6 100644 --- a/home.md +++ b/home.md @@ -37,9 +37,9 @@ description: 欢迎来到霧雨蘑菇店！ {:.info} > *加载中......*{:.weather} - + -{:.note} +{:.info} > **目击者报告：**{:.u} > > **\*明明叫作蘑菇店，实际上并不出售蘑菇** diff --git a/we_fuck_gfw.md b/we_fuck_gfw.md index b47da76..1b772ed 100644 --- a/we_fuck_gfw.md +++ b/we_fuck_gfw.md @@ -2,6 +2,10 @@ title: ⑨都能读懂的网络代理教程：使用 NekoRay / NekoBox 进行网络代理 --- +## 目录 {#index} +- 目录 +{:toc} + ⑨都能读懂的网络代理教程： *使用 NekoRay / NekoBox 进行网络代理*{:.small} {:.fake.h1} @@ -10,18 +14,15 @@ title: ⑨都能读懂的网络代理教程：使用 NekoRay / NekoBox 进行网 {:.info} ## 前言： - 由于前几天从 Clash for Windows 删库开始的一系列事件，尤其是 Clash 内核与 Clash.Meta 内核的删库/归档，整个 Clash 客户端生态灰飞烟灭。 Clash for Windows 作为一个如此普及的代理客户端，加上我自己也是在两年前左右从 V2rayN 转为 CFW 忠实用户，正好借着这次迁移至 NekoRay 的机会，便想着干脆为这个支持 Xray, Sing-box, Hysteria, Naive 等多个内核，并且有着优秀方便的分流规则与 TUN 代理的优秀客户端写一篇使用教程。 ## 前置知识： - > 虽然这一部分并非必须，但可以帮助你对网络代理建立系统性认识。若对网络代理已足够了解，可直接跳转下一部分 -{:.note} +{:.info} ### 什么是网络代理： - 简单来说，当你访问一个网站 （如 ），或是应用联网访问数据时，你的设备会向网络运营商发出请求，与目标网址的服务器间建立连接，开始数据交换。 在这种情况下，你的 IP 地址向目标服务器公开、运营商也会知道你所访问的地址。通常称这种连接方式为**直连**。 @@ -31,7 +32,6 @@ Clash for Windows 作为一个如此普及的代理客户端，加上我自己 因此，运营商无法得知你此时连接的真实目的地与意图，同时目标服务器也无法得知你的真实IP，从而**达到保护隐私与绕过防火墙的目的。** ### 术语： - - ***代理客户端：*** 为你的设备**处理网络代理的客户端**{:.h}，拥有的功能通常包括使用多种方式代理本机网络流量，可配置的分流规则，从*订阅链接*{:.u}批量下载*节点*{:.u}等功能。 - ***节点：*** @@ -66,8 +66,7 @@ Clash for Windows 作为一个如此普及的代理客户端，加上我自己 --- -## 下载 NekoRay：[仓库地址](https://github.com/MatsuriDayo/nekoray) | [下载地址](https://github.com/MatsuriDayo/nekoray/releases/latest) - +## 下载 NekoRay：[仓库地址](https://github.com/MatsuriDayo/nekoray) \| [下载地址](https://github.com/MatsuriDayo/nekoray/releases/latest) ![](https://telegra.ph/file/1c22af3b4ff6c1dbbecc2.png) Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.zip`的文件。 @@ -75,7 +74,6 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z 下载后无需安装，自行解压到合适的路径，运行位于`.\nekoray-...-windows64\nekoray\nekoray.exe`路径的文件即可启动程序。 ## 初次启动 - 启动程序后首先将会看到以下窗口： ![](https://telegra.ph/file/28ee88573f88511ba6963.png) @@ -89,23 +87,22 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z 其中，序号1到7分别是（暂时不理解的话没关系，下文中会对重要的部分进行讲解）： -| **{::nomarkdown}
    • 工具栏：
    {:/}** | 程序配置、设置选项、以及导入代理节点等功能都可在此调出； -| **{::nomarkdown}
    • 代理模式：
    {:/}** | 默认的端口转发模式、系统代理模式、TUN 模式； -| **{::nomarkdown}
    • 节点列表：
    {:/}** | 接下来导入的节点将会显示在本列表中； -| **{::nomarkdown}
    • 日志：
    {:/}** | 会实时记录节点开关状态、网络连接等等信息——正常使用没有问题的话并不需要理解日志中的信息； -| **{::nomarkdown}
    • 当前节点：
    {:/}** | 显示当前启用的代理节点名称； -| **{::nomarkdown}
    • 转发端口：
    {:/}** | 用于手动配置其他程序的代理，正常使用不一定需要； -| **{::nomarkdown}
    • 网络流量状态：
    {:/}** | 实时显示当前经过 NekoRay 处理的网络流量的细节（代理流量与直连流量的上传/下载速度）。 +| - 工具栏： | 程序配置、设置选项、以及导入代理节点等功能都可在此调出； +| - 代理模式： | 默认的端口转发模式、系统代理模式、TUN 模式； +| - 节点列表： | 接下来导入的节点将会显示在本列表中； +| - 日志： | 会实时记录节点开关状态、网络连接等等信息——正常使用没有问题的话并不需要理解日志中的信息； +| - 当前节点： | 显示当前启用的代理节点名称； +| - 转发端口： | 用于手动配置其他程序的代理，正常使用不一定需要； +| - 网络流量状态： | 实时显示当前经过 NekoRay 处理的网络流量的细节（代理流量与直连流量的上传/下载速度）。 ## 关键配置： - > 关于语言：软件默认语言跟随系统，如果你的系统语言不是中文但需要中文界面，请于 > > `首选项 > 基本设置 > 样式 > Language` > `Preference > Basic Settings > Style > Language` > > 切换语言为中文。 -{:.note} +{:.info} --- {:.break} @@ -115,13 +112,11 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z ![](https://telegra.ph/file/99c1a3d2888320a607ad8.png) ### 首选项 > 基本设置： - 此分类中大部分选项除非有特殊需要否则无需改动 - **\> 样式：**更改语言与界面主题 ### 首选项 > 路由设置： - > **关于分流**：大部分代理客户端都带有分流的功能，可以基于域名、IP、进程名配置**分流规则，指定对应网络流量通过代理或者直连**{:.h}（例：A站 https://acfun.cn/... 无法从国外大部分地区访问，因此可配置域名 acfun.cn 通过直连连接）。 {:.info} @@ -236,23 +231,20 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z domain_keyword:zjtoolbar ### 首选项 > TUN 设置（仅影响 TUN 模式代理）： - > 有关 TUN 代理和其他代理模式的讲解请见下文 {:.info} -| **{::nomarkdown}
    • 启用 Tun IPV6：
    {:/}** | 可开启，除非日后使用 TUN 模式时发现问题； -| **{::nomarkdown}
    • Strict Route (严格路由)：
    {:/}** | 开启。关闭本设置会导致 DNS 泄露； -| **{::nomarkdown}
    • FakeDNS：
    {:/}** | 开启； -| **{::nomarkdown}
    • 绕过CIDR、绕过进程名：
    {:/}** | 按需自行设置（可开启任务管理器 Ctrl Shift ESC，导航至详细信息标签查看进程名）； +| - 启用 Tun IPV6： | 可开启，除非日后使用 TUN 模式时发现问题； +| - Strict Route (严格路由)： | 开启。关闭本设置会导致 DNS 泄露； +| - FakeDNS： | 开启； +| - 绕过CIDR、绕过进程名： | 按需自行设置（可开启任务管理器 Ctrl Shift ESC，导航至详细信息标签查看进程名）； ### 导入节点： - > 假设你已经购买了机场订阅，或者有其他获取节点的渠道（自建节点、免费公开节点等）。 {:.info} #### 从订阅链接导入： - 从机场网站复制好订阅链接后，在界面中简单按下`Ctrl V`，或者导航至 `工具栏 > 服务器 > 从剪贴板添加` ![](https://telegra.ph/file/2b709391fbe731f23fccb.png) @@ -269,7 +261,6 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z 此外，你也可以直接复制节点文本导入节点，本文便不再赘述。 ### 开始使用代理： - 回到程序主界面，切换到刚刚添加的分组标签： ![](https://telegra.ph/file/ce34a7848ea260e1cb2b0.png) @@ -286,12 +277,12 @@ Windows 用户的请从 Release 中的下载文件名为`nekoray-...-windows64.z 界面左下角也会显示当前连接的节点名称 #### 代理模式： - -> 参见：*[^proxy-mode]*{:norm="[>>关于端口转发模式、系统代理与 TUN 模式]"}。 +> 参见：*[^proxy-mode]*{:foot="[>>关于端口转发模式、系统代理与 TUN 模式]"}。 {:.info} [^proxy-mode]: - ##### 关于端口转发模式、系统代理与 TUN 模式 + **关于端口转发模式、系统代理与 TUN 模式：**{:.u} + - **端口转发** 是很多代理客户端的默认模式。在这个模式下客户端不会主动代理设备上的任何流量，**须手动在需要代理的软件中设置使用本机的对应端口进行代理**（如：127.0.0.1:2080，其中127.0.0.1代表本地主机，2080为代理客户端监听的端口）； ![](https://telegra.ph/file/39ff57b95dc0bf9ae44cf.png) @@ -314,7 +305,6 @@ ps: 两个都勾选的话系统代理也会被 TUN 覆盖掉 ### 选择最佳节点、理解设备的网络代理状态 #### 节点测速： - NekoRay 内含多种节点测速的方法。在节点列表中右键或在工具栏打开`服务器`标签，按需求选择`当前选中`或`当前分组`为对应节点选择测速方法。 例：选择全部日本节点并对`当前选中`进行测速 @@ -328,14 +318,12 @@ TCP Ping 之后按照测试结果对节点排序 ![](https://telegra.ph/file/e34b2ea35addb2cb144a0.png) #### 网络流量状态： - 界面的右下角会显示实时更新的当前网络流量状态。 当你发现某个网址无法连接的时候，可以查看这里的状态以确定问题是否由于节点导致，考虑是否需要切换节点。 ![](https://telegra.ph/file/4fffb96f90aba0511774b.png) #### 测试代理效果： - 访问 [ipleak.net](https://ipleak.net/) 查看当前代理的效果。 @@ -348,23 +336,19 @@ DNS 列表中夹杂着来自运营商的DNS地址：DNS泄露，请重新检查 ### 其他：关于网络安全 #### 任何时候都应该使用 HTTPS！ - **通过 HTTP 协议访问网络会面临着遭受中间人攻击的严重风险。**中间人攻击指的是由运营商、CDN 网络、长城防火墙等通过劫持并篡改你接收到的数据包内容进行的欺骗、诈骗等行为。 #### 防止 WebRTC 泄露真实 IP - 由于浏览器实现 WebRTC（网络实时通讯）的方法中存在的严重漏洞，**一个网站只需通过简单的 Javascript 便可以获得用户的真实 IP。**解决方案包括禁用 WebRTC 以及使用插件防止泄露（如 [WebRTC Leak Prevent](https://github.com/aghorler/WebRTC-Leak-Prevent)） 例：使用 WebRTC Leak Prevent 防止泄露真实 IP #### 防止 CDN 泄露隐私 - 防止由使用不安全的 CDN（内容分发网络）所导致的隐私泄露： [Decentraleyes](https://decentraleyes.org/) #### 避免使用不可信的浏览器访问网络 - **任何情况下从原则上都不应使用任何国产商业浏览器，**包括QQ、搜狗、360、“中国特供版”火狐，以及微信 QQ 微企等软件的内置浏览器。不是很推荐使用 Google Chrome 与 Edge，避免被谷歌和微软搜集隐私。推荐使用 Firefox（注意甄别“中国特供版”火狐！）及 Ungoogled Chrome。 --- @@ -373,7 +357,6 @@ DNS 列表中夹杂着来自运营商的DNS地址：DNS泄露，请重新检查 {:.stroke.echorb.bigger} ### 参见： - - [MatsuriDayo/nekoray](https://github.com/MatsuriDayo/nekoray) - [NekoRay 官方文档](https://matsuridayo.github.io/n-configuration/) diff --git a/weblab/index.md b/weblab/index.md new file mode 100644 index 0000000..46f835c --- /dev/null +++ b/weblab/index.md @@ -0,0 +1,6 @@ +--- +title: Web 实验室 +description: 奇迹在此发生 +--- + +- [MarkAround](markaround) \ No newline at end of file diff --git a/md-lab.md b/weblab/markaround.md similarity index 66% rename from md-lab.md rename to weblab/markaround.md index 686b7e5..51d6187 100644 --- a/md-lab.md +++ b/weblab/markaround.md @@ -2,10 +2,30 @@ title: MarkDown 实验室 --- -# MoarDown - *Markdown 语法扩充类*{:.small}！: {#head} +# MarkAround 实验室: {#head} +*基于样式表的 Markdown (Kramdown) 语法扩展*{:.bigger.stroke.echorb.sparkle} + +## 需要在自己网站上使用？ +在网页 sass/scss 格式的样式表中添加以下代码即可： + + @import "https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_sass/markaround.scss"; + + + +或者也可以通过将 [markaround.scss](https://raw.githubusercontent.com/Kirisoup/kirisoup.github.io/main/_sass/markaround.scss) 克隆至你的Jekyl仓库下的`_sass` 文件夹后，在 sass/scss 格式的样式表中添加`@import "markaround";` + +### 如果你的网站不支持构建 sass/scss： +编译完成的css样式表可在 [此处](https://kirisoup.github.io/assets/css/markaround.css) 获取。 + +在页面html文件的``标签下添加以下代码，或者自行克隆到网页的仓库下使用。 + + + +> 注：推荐使用 Kramdown 或类似拥有类似功能的 MD 处理器简化为文章元素添加属性的过程。 +{:.info} -## 目录 {#index} +## 目录 {#index} - 目录 {:toc} @@ -14,11 +34,12 @@ title: MarkDown 实验室 ## 常规分类: {#regular} ### 大小: {#size} -- *.bigger*{:.bigger} *[^how2attr]*{:norm="[>>使用 Kramdown 语法为元素分配特殊属性]"} +- 普通大小（作为对比） +- *.bigger*{:.bigger} [^how2attr] - *.big*{:.big} - *.small*{:.small} - *.smaller*{:.smaller} -- *.size*{:.size style="--s:1.096"} *[^how2var]*{:norm="[>>使用 css 变量设置元素的额外属性配置]"} +- *.size*{:.size style="--s:1.096"} [^how2var] - \-\-s: 1.096 *(自定义大小倍率)* [^how2attr]: @@ -42,8 +63,8 @@ title: MarkDown 实验室 - 为行内元素添加属性： - 段落内容 *\*文字\*\{:.cfuchsia}*{:.cfuchsia} 段落内容。 - *[^how2attr-em]*{:norm="[>>关于斜体与行内属性]"} - + [^how2attr-em] + --- {:.break} @@ -51,7 +72,7 @@ title: MarkDown 实验室 *\{:.bfuchsia.cfuchsia}
    段落内容段落内容段落内容。*{:.bfuchsia.cfuchsia style="padding:.5em"} > \{: } 也可置于段落下方 - {:.note} + {:.info} > 详见：https://kramdown.gettalong.org/syntax.html#attribute-list-definitions {:.info} @@ -73,25 +94,26 @@ title: MarkDown 实验室 {:.info} ### 伪标题: {#fake-title} -- .fake.h1{:.fake.h1} -- .fake.h2{:.fake.h2} -- .fake.h3{:.fake.h3} -- .fake.h4{:.fake.h4} -- .fake.h5{:.fake.h5} -- .fake.h6{:.fake.h6} +- .fake.h1{:.fake.h1} +- .fake.h2{:.fake.h2} +- .fake.h3{:.fake.h3} +- .fake.h4{:.fake.h4} +- .fake.h5{:.fake.h5} +- .fake.h6{:.fake.h6} ### 对齐: {#align} +> *靠左：.l*{:.l} > *居中：.c*{:.c} > *靠右：.r*{:.r} ### 修饰线: {#line} -- ||| 下划线 | 上划线 | 删除线 | 混合 | - |---|---|---|---|---|---| - | 正常线 || *.u*{:.u} | *.ovl*{:.ovl} | *.dll*{:.dll} | *.u.ovl.dll*{:.u.ovl.dll} | - | 段虚线 || *.u.-d*{:.u.-d} | *.ovl.-d*{:.ovl.-d} | *.dll.-d*{:.dll.-d} | *.u.ovl.dll.-d*{:.u.ovl.dll.-d} | - | 点虚线 || *.u.-do*{:.u.-dd} | *.ovl.-do*{:.ovl.-dd} | *.dll.-do*{:.dll.-dd} | *.u.ovl.dll.-do*{:.u.ovl.dll.-dd} | - | 双层线 || *.u.-db*{:.u.-db} | *.ovl.-db*{:.ovl.-db} | *.dll.-db*{:.dll.-db} | *.u.ovl.dll.-db*{:.u.ovl.dll.-db} | - | 波浪线 || *.u.-w*{:.u.-w} | *.ovl.-w*{:.ovl.-w} | *.dll.-w*{:.dll.-w} | *.u.ovl.dll.-w*{:.u.ovl.dll.-w} | +- | | 下划线 | 上划线 | 删除线 | 混合 + |---|---|---|---|---|--- + | 正常线 | *.u*{:.u} | *.ovl*{:.ovl} | *.dll*{:.dll} | *.u.ovl.dll*{:.u.ovl.dll} + | 段虚线 | *.u.-d*{:.u.-d} | *.ovl.-d*{:.ovl.-d} | *.dll.-d*{:.dll.-d} | *.u.ovl.dll.-d*{:.u.ovl.dll.-d} + | 点虚线 | *.u.-do*{:.u.-dd} | *.ovl.-do*{:.ovl.-dd} | *.dll.-do*{:.dll.-dd} | *.u.ovl.dll.-do*{:.u.ovl.dll.-dd} + | 双层线 | *.u.-db*{:.u.-db} | *.ovl.-db*{:.ovl.-db} | *.dll.-db*{:.dll.-db} | *.u.ovl.dll.-db*{:.u.ovl.dll.-db} + | 波浪线 | *.u.-w*{:.u.-w} | *.ovl.-w*{:.ovl.-w} | *.dll.-w*{:.dll.-w} | *.u.ovl.dll.-w*{:.u.ovl.dll.-w} {:.t style="line-height:2em"} - markdown原版语法的删除线: @@ -103,121 +125,135 @@ title: MarkDown 实验室 ### 颜色: {#color} -- *.white*{:.white.hblack} -- *.silver*{:.silver} -- *.gray*{:.gray} -- *.black*{:.black.hwhite} -- *.red*{:.red} -- *.maroon*{:.maroon} -- *.yellow*{:.yellow} -- *.olive*{:.olive} -- *.lime*{:.lime} -- *.green*{:.green} -- *.aqua*{:.aqua} -- *.teal*{:.teal} -- *.blue*{:.blue} -- *.navy*{:.navy} -- *.fuchsia*{:.fuchsia} -- *.purple*{:.purple} +| - *.white*{:.white.hbc} | *.wh*{:.wh.hbc} +| - *.silver*{:.silver} | *.si*{:.si} +| - *.gray*{:.gray} | *.gr*{:.gr} +| - *.black*{:.black.hw} | *.bc*{:.bc.hwh} +| - *.red*{:.red} | *.re*{:.re} +| - *.maroon*{:.maroon} | *.ma*{:.ma} +| - *.yellow*{:.yellow.hbc} | *.ye*{:.ye.hbc} +| - *.olive*{:.olive} | *.ol*{:.ol} +| - *.lime*{:.lime} | *.li*{:.li} +| - *.green*{:.green} | *.gr*{:.gr} +| - *.aqua*{:.aqua} | *.aq*{:.aq} +| - *.teal*{:.teal} | *.te*{:.te} +| - *.blue*{:.blue} | *.bl*{:.bl} +| - *.navy*{:.navy} | *.na*{:.na} +| - *.fuchsia*{:.fuchsia} | *.fu*{:.fu} +| - *.purple*{:.purple} | *.pu*{:.pu} ### 背景色: {#background} - \-\-hd: 0.05em *(背景、边框距离)* - -- *.hwhite*{:.hwhite} -- *.hsilver*{:.hsilver} -- *.hgray*{:.hgray} -- *.hblack*{:.hblack} -- *.hred*{:.hred} -- *.hmaroon*{:.hmaroon} -- *.hyellow*{:.hyellow} -- *.holive*{:.holive} -- *.hlime*{:.hlime} -- *.hgreen*{:.hgreen} -- *.haqua*{:.haqua} -- *.hteal*{:.hteal} -- *.hblue*{:.hblue} -- *.hnavy*{:.hnavy} -- *.hfuchsia*{:.hfuchsia} -- *.hpurple*{:.hpurple} +- *.h*{:.h} + +| - *.hwhite*{:.hwhite} | *.hwh*{:.hwh} +| - *.hsilver*{:.hsilver} | *.hsi*{:.hsi} +| - *.hgray*{:.hgray} | *.hgr*{:.hgr} +| - *.hblack*{:.hblack} | *.hbc*{:.hbc} +| - *.hred*{:.hred} | *.hre*{:.hre} +| - *.hmaroon*{:.hmaroon} | *.hma*{:.hma} +| - *.hyellow*{:.hyellow} | *.hye*{:.hye} +| - *.holive*{:.holive} | *.hol*{:.hol} +| - *.hlime*{:.hlime} | *.hli*{:.hli} +| - *.hgreen*{:.hgreen} | *.hgr*{:.hgr} +| - *.haqua*{:.haqua} | *.haq*{:.haq} +| - *.hteal*{:.hteal} | *.hte*{:.hte} +| - *.hblue*{:.hblue} | *.hbl*{:.hbl} +| - *.hnavy*{:.hnavy} | *.hna*{:.hna} +| - *.hfuchsia*{:.hfuchsia} | *.hfu*{:.hfu} +| - *.hpurple*{:.hpurple} | *.hpu*{:.hpu} ### 边框色: {#border} - \-\-bw: 2px *(边框粗细)* - \-\-bd: 0.05em *(背景、边框距离)* -- *.bwhite*{:.bwhite} -- *.bsilver*{:.bsilver} -- *.bgray*{:.bgray} -- *.bblack*{:.bblack} -- *.bred*{:.bred} -- *.bmaroon*{:.bmaroon} -- *.byellow*{:.byellow} -- *.bolive*{:.bolive} -- *.blime*{:.blime} -- *.bgreen*{:.bgreen} -- *.baqua*{:.baqua} -- *.bteal*{:.bteal} -- *.bblue*{:.bblue} -- *.bnavy*{:.bnavy} -- *.bfuchsia*{:.bfuchsia} -- *.bpurple*{:.bpurple} +| - *.bwhite*{:.bwhite} | *.bwh*{:.bwh} +| - *.bsilver*{:.bsilver} | *.bsi*{:.bsi} +| - *.bgray*{:.bgray} | *.bgr*{:.bgr} +| - *.bblack*{:.bblack} | *.bbc*{:.bbc} +| - *.bred*{:.bred} | *.bre*{:.bre} +| - *.bmaroon*{:.bmaroon} | *.bma*{:.bma} +| - *.byellow*{:.byellow} | *.bye*{:.bye} +| - *.bolive*{:.bolive} | *.bol*{:.bol} +| - *.blime*{:.blime} | *.bli*{:.bli} +| - *.bgreen*{:.bgreen} | *.bgr*{:.bgr} +| - *.baqua*{:.baqua} | *.baq*{:.baq} +| - *.bteal*{:.bteal} | *.bte*{:.bte} +| - *.bblue*{:.bblue} | *.bbl*{:.bbl} +| - *.bnavy*{:.bnavy} | *.bna*{:.bna} +| - *.bfuchsia*{:.bfuchsia} | *.bfu*{:.bfu} +| - *.bpurple*{:.bpurple} | *.bpu*{:.bpu} ### 注音: {#ruby} - *这是文字*{:r="这是注音"} - `*这是文字*{:r="这是注音"}` + *这是文字*{:r="这是注音"} -- *这*{:r="zhe"} *是*{:r="shi"} *文*{:r="zhu"} *字*{:r="yin"} +- *这*{:r="zhè"}*是*{:r="shì"}*文*{:r="zhù"}*字*{:r="yīn"} - ``` - *这*{:r="zhe"} - *是*{:r="shi"} - *文*{:r="zhu"} - *字*{:r="yin"} - ``` + *这*{:r="zhè"} + *是*{:r="shì"} + *文*{:r="zhù"} + *字*{:r="yīn"} -### 悬浮提示: {#tip} +### 隐藏: {#del} +> 将鼠标悬浮到文本上 +{:.info} -- html 自带的悬浮提示：*{:title="这是提示"}*{:title="这是提示"} +- *.del*{:.del} +- *.blur*{:.blur} + - *.blurrier*{:.blurrier} + - \-\-br: 0.1em *(模糊半径)* +- *这是一段普通的文字*{:reveal="{:reveal=\"替换内容\"}"} + +### 悬浮提示: {#tip} +> html 也有自带悬浮提示，即 title="" 属性：*{:title="这是提示"}*{:.u title="这是提示"} +{:.info} -#### 更华丽的提示: {#tip-fancy} - *{:t="这是提示"}*{:t="这是提示"} + - *{:t="这是提示" .above}*{:t="这是提示" .above} + - *{:t="这是提示" style="--tc:#d44"}*{:t="这是提示" style="--tc:#d44"} - \-\-tc: #44d *(提示颜色)* +### 全宽链接: {#full-width-link} +> 用来制作舒适的链接列表效果 +- [\[标题0\](地址0)\{:.ab}](#full-width-link){:.ab} +- [\[标题1\](地址1)\{:.ab}](#full-width-link){:.ab} +- [\[标题2\](地址2)\{:.ab}](#full-width-link){:.ab} +- [\[标题3\](地址3)\{:.ab}](#full-width-link){:.ab} +- [\[标题4\](地址4)\{:.ab}](#full-width-link){:.ab} + ### 表格: {#table} -- 表格默认另开新行，加入 .i 类可转成行内表格 - 平表格 - |1|a|b|c| |2|d|e|f| |3|g|h|i| |4|j|k|l| - {:.i} - ||`|1|a|b|c|`| - ||`|2|d|e|f|`| - ||`|3|g|h|i|`| - ||`|4|j|k|l|`| - {:.i} + |1|a|b|c| + |2|d|e|f| + |3|g|h|i| + |4|j|k|l| - 普通表格 - |1|a|b|c| |2|d|e|f| |3|g|h|i| |4|j|k|l| - {:.t.i} + {:.t} - ||`|1|a|b|c|`| - ||`|2|d|e|f|`| - ||`|3|g|h|i|`| - ||`|4|j|k|l|`| - ||`{:.t}`| - {:.i} + |1|a|b|c| + |2|d|e|f| + |3|g|h|i| + |4|j|k|l| + {:.t}`| - - ||一|二|三| + - | |一|二|三| |--- - |1|a|b|c| - |2|d|e|f| + | 1|a|b|c| + | 2|d|e|f| |--- |1|a|b|c| |2|d|e|f| @@ -225,37 +261,36 @@ title: MarkDown 实验室 |4|j|k|l| |=== |0|z|z|z| - {:.t.i h="这是表格"} - - ||`| |一|二|三|`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|3|g |h |i |`| - ||`|4|j |k |l |`| - ||`|==========|`| - ||`|0|z |z |z |`| - ||`{:.t h="这是表格"}`| - {:.i} + {:.t h="这是表格"} + + | |一|二|三| + |----------| + |1|a |b |c | + |2|d |e |f | + |----------| + |1|a |b |c | + |2|d |e |f | + |3|g |h |i | + |4|j |k |l | + |==========| + |0|z |z |z | + {:.t h="这是表格"}`| + - 简单表格 - |1|a|b|c| |2|d|e|f| |3|g|h|i| |4|j|k|l| - {:.ts.i} + {:.ts} - ||`|1|a|b|c|`| - ||`|2|d|e|f|`| - ||`|3|g|h|i|`| - ||`|4|j|k|l|`| - ||`{:.ts}`| - {:.i} + |1|a|b|c| + |2|d|e|f| + |3|g|h|i| + |4|j|k|l| + {:.ts} - - ||一|二|三| + - | |一|二|三| |--- |1|a|b|c| |2|d|e|f| @@ -266,25 +301,24 @@ title: MarkDown 实验室 |4|j|k|l| |=== |0|z|z|z| - {:.ts.i h="这是表格"} - - ||`| |一|二|三|`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|3|g |h |i |`| - ||`|4|j |k |l |`| - ||`|==========|`| - ||`|0|z |z |z |`| - ||`{:.ts h="这是表格"}`| - {:.i} + {:.ts h="这是表格"} + + | |一|二|三| + |----------| + |1|a |b |c | + |2|d |e |f | + |----------| + |1|a |b |c | + |2|d |e |f | + |3|g |h |i | + |4|j |k |l | + |==========| + |0|z |z |z | + {:.ts h="这是表格"} - --tbc: 调整空表格**以外**的表格颜色 - --tbtc: 调整表格文字颜色 - - ||一|二|三| + - | |一|二|三| |--- |1|a|b|c| |2|d|e|f| @@ -295,21 +329,20 @@ title: MarkDown 实验室 |4|j|k|l| |=== |0|z|z|z| - {:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"} - - ||`| |一|二|三|`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|----------|`| - ||`|1|a |b |c |`| - ||`|2|d |e |f |`| - ||`|3|g |h |i |`| - ||`|4|j |k |l |`| - ||`|==========|`| - ||`|0|z |z |z |`| - ||`{:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"}`| - {:.i} + {:.t h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"} + + | |一|二|三| + |----------| + |1|a |b |c | + |2|d |e |f | + |----------| + |1|a |b |c | + |2|d |e |f | + |3|g |h |i | + |4|j |k |l | + |==========| + |0|z |z |z | + {:.t.i h="这是品红色表格" style="--tbc: #d4d; --tbtc: #d4d"} ### 文本块: {#block} - 平文本块： @@ -319,12 +352,6 @@ title: MarkDown 实验室 > > \{:.info} {:.info} -- 注释块： - > \> 文本 - > - > \{:.note} - {:.note} - - 警告块： > \> 文本 > @@ -352,12 +379,39 @@ title: MarkDown 实验室 > \{:.layer} {:.layer} +### 脚注: {#footnote} + +- 普通（序号）脚注：\[^title] [^title] + + [^title]: + 示例：普通脚注。这是一段文字 + + 另一段文字 + + > 提示文字块 + {:.info} +- 文字脚注：\*\[^title2]\*\{:foot="我是脚注"} *[^title2]*{:foot="我是脚注"} + +[^title]: + 示例：普通（序号）脚注。这是一段文字 + + 另一段文字 + + > 提示文字块 + {:.info} + +[^title2]: + 示例：文字脚注。一段文字 + + 另一段文字 + + > 提示文字块 + {:.info} ## 华丽装饰类！: {#fancy} ### 彩虹: {#rainbow} - {:.warn} > 不兼容阴影 .shadow 与描边 .stroke @@ -416,7 +470,6 @@ title: MarkDown 实验室 --- ## 文字排版测试用 - 午后之时，那银白色的幻想乡。 白雪静静地飘落于尚未开发的自然之中，显现出充满幻想的壮观景象。只能听见妖怪惨叫般的鸣啼声远远传来。