FINAL FIXES
This commit is contained in:
Nicky Case
parent
9c40f20a3a
commit
fa19f06242
13 changed files with 86 additions and 11 deletions
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
24
index.html
24
index.html
|
|
@ -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>
|
||||
|
|
|
|||
36
js/comic.js
36
js/comic.js
|
|
@ -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
1
sharing/email.svg
Normal 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
1
sharing/facebook.svg
Normal 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
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
1
sharing/tumblr.svg
Normal 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
1
sharing/twitter.svg
Normal 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 |
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 566 KiB After Width: | Height: | Size: 566 KiB |
Loading…
Reference in a new issue