tiny art fixes
This commit is contained in:
parent
b01f38af7c
commit
56458b34b8
|
@ -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;
|
||||
|
|
18
index.html
18
index.html
|
@ -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 · 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 ↓
|
||||
DOWNLOAD ALL CARDS
|
||||
</span>
|
||||
<span id="download_all_downloading">
|
||||
DOWNLOADING...
|
||||
</span>
|
||||
<span id="download_all_done">
|
||||
DONE! Check your Downloads folder.
|
||||
</span>
|
||||
|
||||
<!-- Chapter Links -->
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.7 KiB |
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -32,11 +32,12 @@ var CARDNAMES = [
|
|||
];
|
||||
|
||||
var download_btn = $("#download");
|
||||
download_btn.innerHTML = _getLabel("download_all");
|
||||
download_btn.innerHTML = " "+_getLabel("download_all");
|
||||
download_btn.onclick = function(){
|
||||
|
||||
// disable while we wait...
|
||||
download_btn.disabled = true;
|
||||
download_btn.innerHTML = " "+_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 = " "+_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 |
|
@ -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 |
|
@ -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;
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue