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

View File

@ -17,11 +17,11 @@
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<a name="0"></a>
<div class="divider divider_small_height">
<div class="divider divider_title">
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
<div id="divider_container">
<div id="chapter_name">
[todo: some friggin' title]
HOW TO REMEMBER ANYTHING FOREVER-ISH
</div>
<div style="text-align:right;">
by nicky case &middot; oct 2018
@ -1669,8 +1669,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</words>
</panel>
<panel w=400 h=50>
<sim x=0 y=0 w=400 h=50 src="sims/downloads/all.html"></sim>
<panel w=400 h=100>
<sim x=0 y=0 w=400 h=100 src="sims/downloads/all.html"></sim>
</panel>
<panel w=600 h=120>
@ -1809,7 +1809,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<div>
<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;">
Written, drawn, and programmed by
<br>
@ -1981,7 +1981,13 @@ Happy learning!<br>
<div id="labels">
<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>
<!-- 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{
/*background:#bada55;*/
font-family: "PatrickHand", Helvetica, Arial;
background: none;
margin: 0;
}
@ -16,7 +17,20 @@ canvas{
margin: 5px;
}
#download{
background: url(download_button.png);
background-size: 100% 100%;
width: 400px;
height: 50px;
height: 100px;
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">
</head>
<body>
<button id="download">DOWNLOAD</button>
<div id="download">DOWNLOAD</div>
</body>
</html>

View File

@ -32,11 +32,12 @@ var CARDNAMES = [
];
var download_btn = $("#download");
download_btn.innerHTML = _getLabel("download_all");
download_btn.innerHTML = "&nbsp;"+_getLabel("download_all");
download_btn.onclick = function(){
// disable while we wait...
download_btn.disabled = true;
download_btn.innerHTML = "&nbsp;"+_getLabel("download_all_downloading");
download_btn.style.opacity = 0.5;
// Loads
var CARD_HTMLS = [];
@ -81,8 +82,14 @@ download_btn.onclick = function(){
// Download...
zip.generateAsync({type:"blob"})
.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 -->
<div id="card_bg" class="card">
<div id="card_bg_smiley"></div>
<div id="card_bg_smiley"></div>
</div>
<!-- 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);
}
#card_bg_smiley{
color: rgba(255,255,255,0.5);
font-size: 100px;
text-align: center;
line-height: 230px;
font-size: 200px;
display: none;
width: 150px;
height: 150px;
margin: 40px auto;
background: url(multi_smiley.png);
background-size: auto 100%;
display: none;
}
#next_card{
display: none;

View File

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