tiny art fixes

This commit is contained in:
Nicky Case 2018-10-25 10:31:20 -04:00
parent b01f38af7c
commit 56458b34b8
11 changed files with 61 additions and 19 deletions

View File

@ -18,6 +18,7 @@ body{
font-family: "PatrickHand", Helvetica, Arial; font-family: "PatrickHand", Helvetica, Arial;
font-size: 25px; font-size: 25px;
line-height: 1.2em; line-height: 1.2em;
overflow-x:hidden;
} }
/* fake bold */ /* fake bold */
b, strong{ b, strong{
@ -44,6 +45,9 @@ a:hover{
text-align: center; text-align: center;
background: #000; background: #000;
} }
.divider_title{
height: 280px;
}
.divider_small_height{ .divider_small_height{
height: 220px; height: 220px;
} }
@ -51,6 +55,9 @@ a:hover{
height: 300px; height: 300px;
} }
@media (max-width:1000px) { @media (max-width:1000px) {
.divider_title{
height: 370px;
}
.divider_small_height{ .divider_small_height{
height: 290px; height: 290px;
} }
@ -58,6 +65,11 @@ a:hover{
height: 370px; height: 370px;
} }
} }
@media (max-width:800px) {
.divider_title{
height: 450px;
}
}
.divider > #divider_container{ .divider > #divider_container{
width: 100%; width: 100%;
position: absolute; position: absolute;

View File

@ -17,11 +17,11 @@
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<a name="0"></a> <a name="0"></a>
<div class="divider divider_small_height"> <div class="divider divider_title">
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe> <iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
<div id="divider_container"> <div id="divider_container">
<div id="chapter_name"> <div id="chapter_name">
[todo: some friggin' title] HOW TO REMEMBER ANYTHING FOREVER-ISH
</div> </div>
<div style="text-align:right;"> <div style="text-align:right;">
by nicky case &middot; oct 2018 by nicky case &middot; oct 2018
@ -1669,8 +1669,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</words> </words>
</panel> </panel>
<panel w=400 h=50> <panel w=400 h=100>
<sim x=0 y=0 w=400 h=50 src="sims/downloads/all.html"></sim> <sim x=0 y=0 w=400 h=100 src="sims/downloads/all.html"></sim>
</panel> </panel>
<panel w=600 h=120> <panel w=600 h=120>
@ -1809,7 +1809,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<div> <div>
<p style="font-size:30px; margin-bottom:0"> <p style="font-size:30px; margin-bottom:0">
<img style="background:#bada55" width="100" height="100" /> <img src="pics/nicky_credits.png" width="100" height="100" />
<span style="display:inline-block; position: relative; top: -14px; left: 14px;"> <span style="display:inline-block; position: relative; top: -14px; left: 14px;">
Written, drawn, and programmed by Written, drawn, and programmed by
<br> <br>
@ -1981,7 +1981,13 @@ Happy learning!<br>
<div id="labels"> <div id="labels">
<span id="download_all"> <span id="download_all">
DOWNLOAD ALL CARDS &darr; DOWNLOAD ALL CARDS
</span>
<span id="download_all_downloading">
DOWNLOADING...
</span>
<span id="download_all_done">
DONE! Check your Downloads folder.
</span> </span>
<!-- Chapter Links --> <!-- Chapter Links -->

BIN
pics/nicky_credits.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -8,6 +8,7 @@
body{ body{
/*background:#bada55;*/ /*background:#bada55;*/
font-family: "PatrickHand", Helvetica, Arial;
background: none; background: none;
margin: 0; margin: 0;
} }
@ -16,7 +17,20 @@ canvas{
margin: 5px; margin: 5px;
} }
#download{ #download{
background: url(download_button.png);
background-size: 100% 100%;
width: 400px; width: 400px;
height: 50px; height: 100px;
cursor: pointer; cursor: pointer;
text-align: left;
font-size: 33px;
line-height: 100px;
transition: top 0.2s ease-in-out;
position: relative;
top:0;
}
#download:hover{
top:-5px;
} }

View File

@ -15,7 +15,7 @@ The Process:
<link rel="stylesheet" type="text/css" href="all.css"> <link rel="stylesheet" type="text/css" href="all.css">
</head> </head>
<body> <body>
<button id="download">DOWNLOAD</button> <div id="download">DOWNLOAD</div>
</body> </body>
</html> </html>

View File

@ -32,11 +32,12 @@ var CARDNAMES = [
]; ];
var download_btn = $("#download"); var download_btn = $("#download");
download_btn.innerHTML = _getLabel("download_all"); download_btn.innerHTML = "&nbsp;"+_getLabel("download_all");
download_btn.onclick = function(){ download_btn.onclick = function(){
// disable while we wait... // disable while we wait...
download_btn.disabled = true; download_btn.innerHTML = "&nbsp;"+_getLabel("download_all_downloading");
download_btn.style.opacity = 0.5;
// Loads // Loads
var CARD_HTMLS = []; var CARD_HTMLS = [];
@ -81,8 +82,14 @@ download_btn.onclick = function(){
// Download... // Download...
zip.generateAsync({type:"blob"}) zip.generateAsync({type:"blob"})
.then(function(content) { .then(function(content) {
saveAs(content, "flashcards.zip"); saveAs(content, "flashcards.zip");
});
// Done!
download_btn.innerHTML = "&nbsp;"+_getLabel("download_all_done");
download_btn.style.opacity = 1.0;
download_btn.style.fontSize = "22px";
});
}); });

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -16,7 +16,7 @@
<!-- BG --> <!-- BG -->
<div id="card_bg" class="card"> <div id="card_bg" class="card">
<div id="card_bg_smiley"></div> <div id="card_bg_smiley"></div>
</div> </div>
<!-- Next card is behind --> <!-- Next card is behind -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -44,12 +44,12 @@ body{
border-color: rgba(0,0,0,0); border-color: rgba(0,0,0,0);
} }
#card_bg_smiley{ #card_bg_smiley{
color: rgba(255,255,255,0.5); width: 150px;
font-size: 100px; height: 150px;
text-align: center; margin: 40px auto;
line-height: 230px; background: url(multi_smiley.png);
font-size: 200px; background-size: auto 100%;
display: none; display: none;
} }
#next_card{ #next_card{
display: none; display: none;

View File

@ -98,6 +98,9 @@ function showNextCard(){
$("#next_card").innerHTML = nextCard.front; $("#next_card").innerHTML = nextCard.front;
}else{ }else{
$("#card_bg_smiley").style.display = "block"; $("#card_bg_smiley").style.display = "block";
if(IS_FINAL_MULTICARD){
$("#card_bg_smiley").style.backgroundPosition = "-150px 0px";
}
} }
} }