Skip to content

Instantly share code, notes, and snippets.

@PatrickLerner
Created February 1, 2014 21:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatrickLerner/8759408 to your computer and use it in GitHub Desktop.
Save PatrickLerner/8759408 to your computer and use it in GitHub Desktop.
<div id="floater">
<div id="content">
<div class="question japanese">{{furigana:Japanese}}</div>
<div class="answer">{{English}}</div>
<div class="hidden">{{Audio}}</div>
</div>
</div>
<div id="floater">
<div id="content">
<div class="question japanese hiddenfuri">{{furigana:Japanese}}</div>
<div class="answer"></div>
</div>
</div>
.card {
padding: 0;
margin: 0;
}
.hiddenfuri rt {
visibility: hidden;
}
.question, .answer {
font-family: 'Aller Light';
color: #302f30;
line-height: 1.5em;
}
.japanese {
font-family: IPAexGothic;
word-break: keep-all;
line-break: strict;
}
.question {
font-size: 37px;
margin-bottom: 0.5em;
color: #191819;
}
.question ruby rt {
font-size: 16px;
opacity: 0.85;
}
.hidden {
display: none;
}
.answer {
font-size: 23px;
font-weight: 100;
padding: 0 1em;
}
#floater {
/* Position at top of page */
position:fixed;
top:0;
/* Position halfway down page (in supporting browsers) */
-moz-transform:translate(0, 50%);
-webkit-transform:translate(0, 50%);
-ms-transform:translate(0, 50%);
-o-transform:translate(0, 50%);
transform:translate(0, 50%);
/* Prevent hidden content */
height:100%;
width:100%;
}
#content {
/* Prevent hidden content */
max-height:100%;
max-width:100%;
overflow:auto;
padding: 0 1em;
/* Position in center of page (in supporting browsers) */
-moz-transform:translate(0, -50%);
-webkit-transform:translate(0, -50%);
-ms-transform:translate(0, -50%);
-o-transform:translate(0, -50%);
transform:translate(0, -50%);
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment