core 11/16

back.html

<div class="reading">
  <a href="http://jisho.org/search/{{text:kanji:Expression}}">
     <span id="expression-content">{{kanji:Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>

<hr>

<div class="snapshot">
  <span class='audio' >{{Audio}}</span>
</div>
<div id="phonetics"><a href="http://jisho.org/search/{{text:kanji:Phonetics}}%23kanji">{{Phonetics}}</a></div>

<div  class="answer">
<div class="dim info">  
  {{furigana:Meaning}}
</div>
{{#vocab}}
<br>
<div class="dim info">
  <a class="dimmer small" href="http://jisho.org/search/{{text:kanji:vocab}}">
     <span id="expression-content1">{{morphHighlight:kanji:vocab}}</span>
  </a>
</div>
{{/vocab}}
{{#Word}}
<div class="dim info">
  <a id="explanation" class="dimmer small" href="http://jisho.org/search/{{text:kanji:Word}}">
     <span id="expression-content1">{{morphHighlight:kanji:Word}}</span>
  </a>
</div>
{{/Word}}

<div id="explanation">
<span class="">{{Notes}}</span>
</div>

<br>
<div class="info">
<span class="dimmer">{{furigana:Rule}}</span>
</div>
{{#Keyword}}
  <div id="keyword">{{Keyword}}</div>
{{/Keyword}}


<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>

corefront.html

<div class="reading front">
  <a href="http://jisho.org/search/{{text:kanji:Expression}}">
     <span id="expression-content">{{kanji:Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>

<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>

css.css

body, .night_mode, body a{
background-color: #202020 !important;
text-decoration: none;
color: #FFFFFF;
font-size: 32px

}

.snapshot{
display:block
width: 50%;
height:50%;
padding-bottom: 1em;
}
.reading{
padding-bottom: 1em;
}
.hidden{
display: none;
}

.card
{
color: #FFFFFF;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}

div [id^=hint] {
color: #b6d7a2;;
text-decoration: none !important; 
font-size: 1em !important;
}
.hint{
font-size: 22px;
text-decoration: underline !important;
color: #BFBFBF;
}

.small{
font-size: .75em !important;
}
.light{
color: #FFFFFF;
}

.video{
margin-right: 25%

}
u, b{
text-decoration:none;
color: #6abedb;
}

[mtype=unknown]{
//color: #D92B48 !important;
}

[mtype=seen]{
//color: #6ABED8 !important;
}

[mtype=known]{
//color: #b6d7a2 !important;
}

[mtype=mature]{
//color: #FFFFFF;
}

hr{
height: 0;
border: 0;
border-bottom: 2px solid #333;
border-top: 2px solid black;
}

.dim{
color: #BFBFBF;
}
.big{
font-size: 40px;
}
.info{
margin-top: 20px;

}
.index{
position: fixed;
bottom: 0;
right: 0;
margin: 0;
}
.index-left{
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.smaller {
font-size: .5em;
}

.image{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 5em;
max-height: 5em;
}

.image:hover{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 20em;
max-height: 20em;
}

#vocab-pos{
position: fixed;
top: 0;
right: 0;
margin: 0;
}

#phonetics b{
color: #f0c674 ;
}

#explanation{
color: #b294bb;
}
.dimmer{
  color: #569056 ;

}
#keyword{
padding-top: 1em;
color: #b6d7a2;
}
#phonetics b{
color: #f0c674 ;
}