diff --git a/css/index.css b/css/index.css index a97ff66..03058a8 100644 --- a/css/index.css +++ b/css/index.css @@ -4,7 +4,6 @@ font-style: normal; font-weight: 400; src: url(PatrickHand-Regular.ttf) format('truetype'); - /*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/ } /* HTML & BODY */ @@ -17,7 +16,7 @@ html, body{ body{ margin:0; - font-family: "PatrickHand"; + font-family: "PatrickHand", Helvetica, Arial; font-size: 23px; line-height: 1.5em; @@ -294,18 +293,25 @@ a:hover{ user-select: none; } #sound{ + position: absolute; + left:0; top:0; color: #fff; width: 150px; font-size: 30px; height: 60px; } +#sound[mute=yes]{ + opacity: 0.5; +} #sound_icon{ + background: url(../sprites/ui/sound.png); + background-size: auto 100%; width: 60px; height: 60px; position: absolute; } #sound_on, #sound_off{ position: absolute; - left:60px; + left:65px; padding: 15px 0; display: block; line-height: 28px; @@ -313,10 +319,12 @@ a:hover{ letter-spacing: 2px; } #sound[mute=no] > #sound_icon{ - background: rgba(255,255,255,0.5); + /*background: rgba(255,255,255,0.5);*/ + background-position: 0px 0px; } #sound[mute=yes] > #sound_icon{ - background: rgba(255,255,255,0.25); + /*background: rgba(255,255,255,0.25);*/ + background-position: -60px 0px; } #sound[mute=no] > #sound_on{ display: block; @@ -324,6 +332,32 @@ a:hover{ #sound[mute=yes] > #sound_off{ display: block; } +#sharing{ + position: absolute; + right:10px; top:0; + width: 150px; + overflow: hidden; +} +#sharing > a{ + float: left; + display: block; + width: 50px; + height: 60px; + background: url(../sprites/ui/sharing.png); + background-size: auto 100%; +} +#sharing #fb{ + background-position: 0px 0px; +} +#sharing #tw{ + background-position: -50px 0px; +} +#sharing #em{ + background-position: -100px 0px; +} +#share_desc{ + display: none; +} #translations{ position: absolute; top: 14px; @@ -423,6 +457,15 @@ a:hover{ } /* PENCIL */ +#pencil_container{ + position: absolute; + top:0; left:0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + cursor: none; +} #pencil{ position: absolute; width:100px; diff --git a/index.html b/index.html index 1d47026..0a9bbbb 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,34 @@ THE WISDOM AND/OR MADNESS OF CROWDS by Nicky Case | apr 2018 -MY "WHY" FOR MAKING THIS: -+ to build a foundation for further curiosity about networks, group dynamics -+ to practice teaching with problem-solving, a pre-req for skills -+ to instill transcendent sense of "fundamentally people", of Humanity's Brain <3 +- - - - - - - - - - - + +FAN TRANSLATION GUIDE: +https://github.com/ncase/crowds#how-to-translate-this-thing + +Hello fan-translaters! Thank you so, so much for your help. +I hope you know what you've gotten yourself into. +There's about 4000 WORDS to translate, including +the Bonus Boxes and References. + +To make things easier (or less painful, anyway) I've marked +what needs to be translated and how with big "TRANSLATE" comments. +Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated! + +BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS: +1) Look up the two-letter code of the language you're translating to: + https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes +2) *COPY* index.html, and rename it [two-letter-code].html + For example: de.html, ar.html, zh.html, etc... +3) Translate *THAT* page. Do NOT modify the original index.html! + +And once you're done, go to "translations.txt", and follow the +instructions there to let this game "know" your translation exists. + +Good luck, and thanks again! + +<3, +~ Nicky Case --> @@ -14,34 +38,31 @@ MY "WHY" FOR MAKING THIS: - - The Wisdom and/or Madness of Crowds - + + The Wisdom and/or Madness of Crowds + - - - - + + + - + + - - - - + + - @@ -66,7 +87,7 @@ MY "WHY" FOR MAKING THIS: - +