FINAL FIXES

This commit is contained in:
Nicky Case 2018-10-26 15:00:02 -04:00
parent 9c40f20a3a
commit fa19f06242
13 changed files with 86 additions and 11 deletions

View File

@ -35,6 +35,8 @@ and was made possible thanks to [my Patreon supporters](https://www.patreon.com/
**Font:** [Patrick Hand](https://fonts.google.com/specimen/Patrick+Hand) by Patrick Wagesreiter
**Share Buttons:** [Social Flat Rounded Rects](http://www.aha-soft.com/free-icons/) by Aha-Soft (CC BY)
## How To Translate:
**[IMPORTANT:

View File

@ -244,6 +244,27 @@ a:hover{
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 */

View File

@ -34,7 +34,7 @@ Good luck, and many thanks again!
<!-- Meta Stuff -->
<title>How To Remember Anything Forever-ish</title>
<!-- TRANSLATOR NOTE: Translate the "content" attribute -->
<meta name="description" content="an interactive comic on the science of memory"/>
<meta name="description" content="an interactive comic on the art & science of memory"/>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
@ -42,18 +42,18 @@ Good luck, and many thanks again!
<!-- Sharing Card Stuff -->
<meta itemprop="name" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta itemprop="description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta itemprop="description" content="an interactive comic on the art & science of memory"> <!-- TRANSLATE "content" -->
<meta itemprop="image" content="https://ncase.me/remember/sharing/thumbnail.png">
<meta name="twitter:title" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta name="twitter:description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta name="twitter:description" content="an interactive comic on the art & science of memory"> <!-- TRANSLATE "content" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="https://ncase.me/remember/sharing/thumbnail.png">
<meta property="og:title" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta property="og:description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta property="og:description" content="an interactive comic on the art & science of memory"> <!-- TRANSLATE "content" -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ncase.me/remember/">
<meta property="og:image" content="https://ncase.me/remember/sharing/thumbnail.png">
@ -799,8 +799,8 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
<!--
TRANSLATOR NOTE:
this is a pun that may not work in all languages.
If it doesn't translate to your language, replace this line with:
"TODO"
If it doesn't translate to your language, try coming up with your own pun!
Or, replace this line with: "they help me go far"
-->
</words>
<words x=367 y=116 w=120 no-bg class="comic_text smaller" style="font-size:22px">
@ -2002,6 +2002,9 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
~ Nicky Case
</p>
<!-- Share buttons, text generated from labels -->
<div id="share_buttons"></div>
</div>
</div>
@ -2267,6 +2270,13 @@ When you translate, make sure the [N] is there if it was there in the original.
DONE! Check your Downloads folder.
</span>
<!-- Social Sharing -->
<span id="share_title">
How To Remember Anything Forever-ish
</span>
<span id="share_desc">
an interactive comic on the art & science of memory
</span>
@ -2376,7 +2386,7 @@ Good luck!
</span>
<span id="flashcard_sci_b_back">
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=240></div>
<div id="fc_words" style="position: absolute; width: 280px; top: 70px; right: 20px; font-size:20px; line-height: 1.1em;">
<div id="fc_words" style="position: absolute; width: 280px; top: 70px; left: 100px; font-size:20px; line-height: 1.1em;">
(note: it decays quickly, then slowly - "exponential decay")
</div>
</span>

View File

@ -515,4 +515,40 @@ xhr.open("GET", "translations.txt");
xhr.send();
/////////////////////////////
// SHARE BUTTONS ////////////
/////////////////////////////
var share_title = encodeURIComponent( $("#share_title").innerText.trim() );
var share_desc = encodeURIComponent( $("#share_desc").innerText.trim() );
var share_url = encodeURIComponent( /*window.location.origin+window.location.pathname*/ "https://ncase.me/remember/" );
var hrefs = {
facebook: "https://www.facebook.com/sharer/sharer.php?u="+share_url,
twitter: "https://twitter.com/intent/tweet?source="+share_url+"&text="+share_title+" "+share_desc+":%20"+share_url,
tumblr: "http://www.tumblr.com/share?v=3&u="+share_url+"&t=+share_title+&s=",
reddit: "http://www.reddit.com/submit?url="+share_url+"&title="+share_title,
email: "mailto:?subject="+share_title+"&body="+share_desc+":%20"+share_url
};
var platforms = [
"facebook",
"twitter",
"tumblr",
"reddit",
"email"
];
platforms.forEach(function(platform){
// Link
var link = document.createElement("a");
link.href = hrefs[platform];
link.target = "_blank";
$("#share_buttons").appendChild(link);
// Image
var img = new Image();
img.src = "./sharing/"+platform+".svg";
link.appendChild(img);
});

1
sharing/email.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="512" viewBox="0 0 512 512" width="512"><rect height="512" rx="64" ry="64" width="512" fill="#6b6b6b"/><path d="M84.4612061 146.0922837c-2.98152108 2.82053627-4.8425682 6.82226322-4.8425682 11.26719494v184.26408652c0 8.54833644 6.7474311 15.47812374 15.42008497 15.47812374h322.7360869c8.516284 0 15.42009113-6.91701243 15.42009113-15.47812374V157.35947864c0-4.45404784-1.8318325-8.46868032-4.81335665-11.29259862L256.4067694 295.6101649 84.4612061 146.0922837zm10.58557677-19.5838098c-17.0109368 0-30.80102597 13.7512542-30.80102597 30.6544517v184.6571972c0 16.92998476 13.6782238 30.6544471 30.80102597 30.6544471H417.7667544c17.01093833 0 30.8010275-13.75125727 30.8010275-30.6544471V157.1629256c0-16.92998628-13.67822072-30.6544517-30.8010275-30.6544517H95.04678286zM256.4067694 275.62560407l153.72881-133.74424917h-307.45762l153.72881 133.74424917z" fill="#fff" stroke="#fff" fill-rule="evenodd" stroke-width="15.372881"/></svg>

After

Width:  |  Height:  |  Size: 980 B

1
sharing/facebook.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="64" ry="64" width="512" fill="#3b5998"/><path d="M286.96783 455.99972V273.53753h61.244l9.1699-71.10266h-70.41246v-45.39493c0-20.58828 5.72066-34.61942 35.23496-34.61942l37.6554-.0112V58.807915c-6.5097-.87381-28.8571-2.80794-54.8675-2.80794-54.28803 0-91.44995 33.14585-91.44995 93.998125v52.43708h-61.40181v71.10266h61.40039v182.46219h73.42707z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 475 B

1
sharing/reddit.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

1
sharing/tumblr.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="64" ry="64" width="512" fill="#44556b"/><path d="M351.70748483 375.5074978c-7.43475117 3.54637494-21.65870888 6.63125414-32.2648697 6.89908648-32.02725435.850196-38.23821773-22.4992904-38.49918258-39.42354753V218.45610528h80.3263537v-60.56307373H281.2208794V55.9999934H222.642512c-.96831693 0-2.65360045.836461-2.8898423 2.98049327-3.42550702 31.18529933-18.01618902 85.93023045-78.70150417 107.8114462v51.6641724h40.48663592v130.6884489c0 44.75684492 33.00930627 108.3292554 120.14546902 106.82939427 29.40387087-.5040742 62.05744085-12.81474754 69.26556465-23.44013735l-19.2413503-57.0263133" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 724 B

1
sharing/twitter.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="64" ry="64" width="512" fill="#00abf1"/><path d="M456.0000005 131.94143215c-14.71678187 6.53070494-30.52721568 10.93793784-47.12774564 12.92381684 16.93529242-10.1563526 29.9498923-26.243391 36.08058446-45.39719395-15.85582533 9.40455555-33.42376205 16.2260499-52.12081284 19.90843697-14.9607613-15.9522823-36.29619418-25.91430246-59.89269215-25.91430246-45.3248512 0-82.07212362 36.7472724-82.07212362 82.06644967 0 6.4299925.72768282 12.6897668 2.129146 18.7041432-68.20785123-3.4313152-128.67077435-36.0947693-169.14724383-85.75309218-7.06547378 12.12095433-11.110993 26.2136028-11.110993 41.26231017 0 28.47183092 14.48273185 53.58610784 36.50471147 68.30288972-13.4458193-.42838247-26.09728703-4.11644347-37.16998094-10.2613205-.00425545.33759944-.00425545.68370978-.00425545 1.02982012 0 39.75871606 28.29026484 72.92431385 65.8276334 80.476328-6.88674468 1.86530776-14.1394585 2.87526908-21.61487444 2.87526908-5.2952045 0-10.43153868-.5290949-15.43737224-1.47664288 10.4400496 32.5967853 40.75023708 56.32662086 76.6535109 56.98905336-28.07891056 22.0148872-63.46585586 35.13587345-101.92382118 35.13587345-6.61723252 0-13.14935595-.39008338-19.5736745-1.15748376 36.32598235 23.29436068 79.46069272 36.8820285 125.80259767 36.8820285 150.94382582 0 233.4911419-125.04796367 233.4911419-233.49114192 0-3.5660713-.08227212-7.1023544-.23405002-10.62445265 16.02178808-11.5734191 29.94421835-26.02068884 40.94031407-42.48078878z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -7,13 +7,13 @@
}
body{
/*background:#bada55;*/
background:#bada55;
font-family: "PatrickHand", Helvetica, Arial;
background: none;
margin: 0;
}
canvas{
width:150px;
width:50px;
margin: 5px;
}
#download{

View File

@ -76,12 +76,13 @@ download_btn.onclick = function(){
var filename = results[0];
var canvas = results[1];
zip.file(filename+".png", canvas.toDataURL().substr(22), {base64: true});
document.body.appendChild(canvas);
//document.body.appendChild(canvas);
});
// Download...
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "flashcards.zip");
// Done!

View File

@ -105,7 +105,7 @@
<div><img src="peeps/t.png"><img src="polygons/t.png"><span>T</span></div>
<div><img src="peeps/yuhan_kuo.png"><img src="polygons/yuhan_kuo.png"><span>Yu-Han Kuo</span></div>
<div><img src="peeps/zach_smith.png"><img src="polygons/zach_smith.png"><span>Zach Smith</span></div>
<div><img src="peeps/_underscore.png"><img src="polygons/_underscore.png"><span>_Underscore</span></div>
<div><img src="peeps/underscore.png"><img src="polygons/underscore.png"><span>_Underscore</span></div>
<div><img src="peeps/ljt.png"><img src="polygons/ljt.png"><span>ljt</span></div>
</div>

View File

Before

Width:  |  Height:  |  Size: 566 KiB

After

Width:  |  Height:  |  Size: 566 KiB