diff --git a/css/MengNaYaPiJianTi-1.ttf b/css/MengNaYaPiJianTi-1.ttf new file mode 100644 index 0000000..707f9d2 Binary files /dev/null and b/css/MengNaYaPiJianTi-1.ttf differ diff --git a/css/comic-zh-Hans.css b/css/comic-zh-Hans.css new file mode 100644 index 0000000..b24a1c5 --- /dev/null +++ b/css/comic-zh-Hans.css @@ -0,0 +1,335 @@ +/* FONT FACE */ +@font-face { + font-family: "MengNaYaPiJianTi-1"; + font-style: normal; + font-weight: 400; + src: url(MengNaYaPiJianTi-1.ttf) format('truetype'); +} + +/* HTML & BODY */ +html, body{ + width:100%; + height:100%; + scroll-behavior: smooth; +} +body{ + background: #eeeeee; + margin:0; + font-family: "MengNaYaPiJianTi-1", Helvetica, Arial; + font-size: 22px; + line-height: 1.2em; + overflow-x:hidden; +} +/* fake bold */ +b, strong{ + font-weight: normal; + text-shadow:1px 0 0 currentColor; + letter-spacing: 1px; +} + +a{ + color:#5b8df1; +} +a:hover{ + color:#8aadf5; +} + +/**********/ +/* SPLASH */ +/**********/ + +.divider{ + position: relative; + width: 100%; + color: #fff; + text-align: center; + background: #000; +} +.divider_title{ + height: 280px; +} +.divider_small_height{ + height: 220px; +} +.divider_big_height{ + height: 300px; +} +@media (max-width:1000px) { + .divider_title{ + height: 370px; + } + .divider_small_height{ + height: 290px; + } + .divider_big_height{ + height: 370px; + } +} +@media (max-width:800px) { + .divider_title{ + height: 450px; + } +} +.divider > #divider_container{ + width: 100%; + position: absolute; + margin-top: 25px; + pointer-events: none; +} +.divider > #divider_container > div{ + width: calc(100% - 100px); + min-width: 550px; + max-width: 960px; + margin: 0 auto; +} +.divider > #divider_container > #chapter_name{ + font-size: 100px; + line-height: 0.95em; + text-align: left; + margin-bottom: 10px; +} +.divider > #divider_container > #chapter_links{ + text-align: right; + pointer-events: all; +} +.divider > #divider_container > .small_of{ + font-size:0.75em; line-height:0; +} +.divider > #divider_container > #chapter_subtitle{ + text-align: right; + font-size: 30px; +} +.divider > iframe{ + width:100%; + height:100%; + position: absolute; + border: none; + top:0; left:0; +} + + +/*********/ +/* COMIC */ +/*********/ + +.comic{ + position: relative; + overflow:hidden; + width:610px; + margin: 50px auto; + text-align: center; +} +.comic panel{ + display: inline-block; + width: 400px; + height: 300px; + /*border: 2px solid #ccc;*/ + margin: 5px; + position: relative; + overflow: hidden; + transition: opacity 0.5s ease-in-out; +} +.comic panel[fadeInOn]{ + opacity: 0; +} +.comic panel pic{ + display: block; + position: absolute; + top:0; + left:0; + width: 100%; + height: 100%; + /*background: #bada55;*/ + background: #ccc; +} +.comic panel words{ + display: block; + position: absolute; + top:0; + left:0; + background: #fff; + /*text-align: left;*/ + padding: 15px; +} +.comic panel words[no-bg]{ + background: none; +} +.comic panel sim{ + display: block; + position: absolute; +} +.comic panel sim > iframe{ + border: none; + width: 100%; + height: 100%; + position: absolute; + top:0; left:0; +} +.comic panel sim > label{ + display:none; +} +.small_card{ + transform: scale(0.6, 0.6); +} +.comic_text{ + color: rgba(0,0,0,0.5); + line-height: 1em; +} +.comic_text.smaller{ + color: rgb(48, 49, 51); + font-size: 18px; + line-height: 1em; +} + +.comic_text.white{ + color: rgba(255,255,255, 0.8); + font-size: 20px; + line-height: 1em; +} + +/* from https://stackoverflow.com/a/16410273 */ +.strikeout { + position: relative; +} +.strikeout::after { + border-bottom: 0.2em solid #ff4040; + content: ""; + left: 0; + margin-top: calc(0.0em / 2 * -1); + position: absolute; + right: 0; + top: 50%; +} + +/**********/ +/* LABELS */ +/**********/ + +#labels{ + display: none; +} + +/********/ +/* MISC */ +/********/ + +#wallpaper_image{ + max-width: 400px; + max-height: 250px; +} + + +/**********/ +/* CREDITS */ +/**********/ + +#credits{ + background: #000; + overflow: hidden; +} +#credits > div{ + color:white; + margin: 50px auto 100px auto; + width: 550px; +} +#credits hr{ + border: none; + border-bottom: 10px dashed rgba(255,255,255,0.25); + margin: 1.5em 0; +} +#credits li{ + list-style-type: none; + text-indent: -1.25em; +} +#credits iframe{ + display:block; + background:#fff; + border:none; + width:500px; + height:350px; + margin:0 auto; + border-radius: 25px; +} + +#share_buttons{ + text-align: center; + margin-top: 90px; + padding-bottom: 50px; +} +#share_buttons a{ + position: relative; + transition: top 0.1s ease-in-out; + top:0px; +} +#share_buttons a:hover{ + top:-3px; +} +#share_buttons img{ + width: 40px; + height: 40px; + margin: 0 5px; + border-radius: 23px; + overflow: hidden; +} + + +/*******************/ +/* LANGUAGE PROMPT */ +/*******************/ + +#prompt{ + + width: 100%; + + background:#5b8df1; + color:#fff; + + position: fixed; + top:0; + transition: top 0.5s ease-in-out; + + text-align: center; + font-size: 30px; + padding: 15px 0 20px 0; + line-height: 1.3em; + +} +#prompt[hide=yes]{ + top:-150px; +} +#prompt a{ + + color:#5b8df1; + background: #fff; + display: inline-block; + border-radius: 5px; + + padding: 0 8px; + text-decoration: none; + cursor: pointer; + +} +#prompt a:hover{ + color:#8aadf5; +} +#translation_credits{ + pointer-events: all; +} + +#language_options{ + + position: absolute; + width: 80px; + text-align: left; + top: 8px; + left: 520px; + font-size: 21px; + line-height: 1.4em; + +} +#language_options a{ + color: #a8a8a8; +} +#language_options a:hover{ + color: #ccc; +} diff --git a/translations.txt b/translations.txt index 679dd3d..c359790 100644 --- a/translations.txt +++ b/translations.txt @@ -3,18 +3,18 @@ // (make sure there's two newlines between yours and the other sections) // and translate that. Here's what the lines in each section means // -// 1: your language 2-letter code: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes -// 2: your language's name, in its native language -// 3: the URL of your page. in most cases it'll be ./[2-letter code].html, +// 1: your language 2-letter code: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes +// 2: your language's name, in its native language +// 3: the URL of your page. in most cases it'll be ./[2-letter code].html, // but if for whatever reason your translation exists on a different domain altogether, // (say, you need to make significant changes to the code for your translation to work) // you can also link to an absolute URL elsewhere -// 4: the prompt to ask to switch to your language +// 4: the prompt to ask to switch to your language // (shows if the user's browser's language is set to yours and they're not already there) -// 5: a *casual* yes -// 6: a *casual* no -// 7: where you can credit yourself! -// 8: the link to the original English version +// 5: a *casual* yes +// 6: a *casual* no +// 7: where you can credit yourself! +// 8: the link to the original English version en English @@ -32,6 +32,15 @@ Nah translated by Your Name original in english +zh +简体中文 +./zh.html +想要切换成简体中文吗? +好的! +算了 +由Shaoliang Nie翻译 Chih-Yu Chin校对 +原文为英语 + fr Français ./fr.html @@ -56,4 +65,4 @@ Español ¿Querrías cambiar a la versión en español? ¡Vale! Nanai -traducido por SantiagoGnzlz \ No newline at end of file +traducido por SantiagoGnzlz diff --git a/zh.html b/zh.html new file mode 100644 index 0000000..da8255d --- /dev/null +++ b/zh.html @@ -0,0 +1,2680 @@ + + + + +
+ + ++ + 而且这个互动式连环画属于 + + + + + 公有领域 + + + + 也就是说你可以免费把它用于教育,个人,甚至商业目的。 + 而且你已经有了我的许可! + + (下载代码) + + (翻译这个连环画) + +
+ ++ 但是,多亏我的1000+的Patreon支持者我才能做成这个。 + 他们让我继续做我爱做的。谢谢你们!💖 + + (你也想要加码?点我!) + +
+ ++ 延伸阅读 +
+ ++ 有句话叫什么什么巨人的肩膀。 + 这些阅读让间隔重复成为了我生活的一部分: +
+ ++ 如果你想要边玩边学习更多的东西, + + 记得去看可探索解释(Explorable Explanations)! 🕹️ +
+ ++ 更多感谢 +
+ ++ 👀 谢谢我所有的测试玩家,是你们让这个项目不糟糕: + + Aatish Bhatia, Adam Filinovich, Aimee Jarboe, Alex Jaffe, Amit Patel, Andy Matuschak, B Cavello, Chris Walker, Frank Lantz, Gal Green, Glen Chiacchieri, Hamish Todd, Henry Reich, Jacque Goupil, James Lytle, + Jez Swanson, Josh Comeau, Kayle Sawyer, Levi Robertson, Marcelo Gallardo, Martyna Wasiluk, Michael Nielsen, Mikayla Hutchinson, Mike Gifford, Monica Srivastava, Owen Landgren, + Paul Butler, Paul Simeon, Philipp Wacker, Pontus Granström, Rowan, Sebastian Morr, SpacieCat, Tanya Short, Tim & Alexandra Swast, Tom Hermans, Toph Tucker, Will Harris-Braun, Zeno Rogue + +
+ ++ 📹 谢谢Chris Walker制作 + + Leitner盒手工制作视频! + (P.S: + + Chris也创作互动的东西!) +
+ ++ 🐞 谢谢Omar Rizwan帮助我搞清Safari移动端无尽的bug +
+ ++ 🔊 这个项目使用了来自Wikimedia Commons and FreeSounds + 的Creative Commons的资源。 + + (查看完整来源) +
+ ++ 💖 再一次的,十分感谢我所有的Patreon支持者使之成为可能: +
+ + + ++ 🙏 最后,谢谢像你 这样耐着性子看完所有来源和出处的人! + 你可以 + + 玩更多我做的东西, + + 在推特上关注我, + 或者 + + 在Patreon上支持我。 + 我真心希望这个连环画可以对你有所帮助,无论是帮助有多小。 +
+ +
+ 学习快乐!
+ ~ Nicky Case
+