public
Last active

  • Download Gist
Back Template.html
HTML
1 2 3 4 5 6 7
<div class="question japanese">
<span>{{furigana:日本語}}</span>
</div>
 
<div class="answer">{{Meaning}}</div>
 
<div class="hidden">{{Audio}}</div>
Card CSS Style.css
CSS
1
@import url("_cards.css");
Front Template.html
HTML
1 2 3 4 5
<div class="question japanese">
<span>{{kanji:日本語}}</span>
</div>
 
<div class="answer"></div>
_style.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
.card {
font-family: Arial;
font-size: 20px;
text-align: center;
color: black;
background-color: #f0f1eb;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
margin: 0;
}
 
.question {
margin: 0;
height: 100px;
position:relative;
}
 
.question span {
bottom: 15px;
width: 100%;
position:absolute;
}
 
.answer {
font-size: 23px;
font-family: 'Helvetica';
padding: 0.6em;
border-bottom: 1px solid #c8c8c6;
border-top: 1px solid #c8c8c6;
background-color: #e7e8e3;
}
 
.box {
background-color: white;
opacity: 0.98;
color: #191919;
border-radius: 6px;
padding: 10px;
padding-top: 15px;
}
 
.japanese {
font-family: IPAMincho;
font-size: 33px;
}
 
ruby rt {
font-size: 0.4em;
font-family: Arial;
opacity: 0.6;
}
 
.question:hover ruby rt {
opacity: 1;
}
 
.hidden {
display: none;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.