keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2025-01-14 22:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style redesign.

Browse Source
This commit is contained in:
doncr 2016-12-10 01:08:41 +00:00
parent c3a880b908
commit cfa58d725b
2 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
conjugation/drill.css
View File

@ -1,5 +1,5 @@
body {
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Amaranth', sans-serif;
margin: 0;
}
@ -66,3 +66,82 @@ body {
.incorrect {
background: #f88;
}
div#history,
div#explanation {
margin-left: auto;
margin-right: auto;
display: table;
}
table.syllabary {
border-collapse: collapse;
}
table.syllabary td {
padding: 12px;
font-size: 14px;
color: gray;
border: 1px solid gray;
text-align: center;
width: 32px;
height: 32px;
}
table.syllabary td div:first-child {
color: black;
font-size: 24px;
}
table.syllabary td.empty {
background: #eee;
}
.answer-correct {
color: red;
}
.answer-wrong {
color: blue;
}
div#history table {
border-collapse: collapse;
}
div#history table th,
div#history table td {
padding: 8px;
border: 1px solid gray;
}:
div#history table th {
text-align: left;
}
/* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */
[tooltip]:before {
/* needed - do not touch */
content: attr(tooltip);
position: absolute;
opacity: 0;
/* customizable */
transition: all 0.15s ease;
color: #333;
font-size: 12px;
background: yellow;
}
[tooltip]:hover:before {
/* needed - do not touch */
opacity: 1;
/* customizable */
margin-top: -20px;
}
[tooltip]:not([tooltip-persistent]):before {
pointer-events: none;
}

2
conjugation/drill.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="drill.css" type="text/css" media="screen"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="drill.js"></script>
</head>