Commit 489e5568 authored by Thomas Dennis's avatar Thomas Dennis

More CSS improvements + add initial version of the "kana" page.

parent 3a88ccc5
......@@ -10,9 +10,9 @@
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
......
......@@ -10,9 +10,9 @@
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
......
......@@ -25,6 +25,7 @@ body {
display:table-row;
width:100%;
white-space: nowrap;
/*box-shadow: 0 0 4px #444;*/
}
.custom-navbar > * {
......@@ -56,9 +57,18 @@ body {
h1 { margin: 0; text-align: center; }
h1, h2, h3 { color:#800; }
.centered-box {
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* These classes are used to create button-like links, similar to Bootstrap. */
.jslink {
cursor: pointer;
display: inline-block;
padding: 8px;
......@@ -70,10 +80,19 @@ h1, h2, h3 { color:#800; }
text-decoration: none;
font: normal sans-serif;
overflow: hidden;
}
.jslink:hover { background: #EEE; }
.jslink-huge {
font-size: 32pt;
font-weight: bold;
margin: 8px;
width: 100%;
}
.jslink-primary {
border-color: #148;
color: #FFF;
......@@ -83,11 +102,15 @@ h1, h2, h3 { color:#800; }
.jslink-primary:hover { background: #48C; }
/* These classes are used to style the "answer" text-boxes. */
/* These classes are used for the kana grids on the kana page. */
.blank_answer { background: #FFF; color: #000; }
.right_answer { background: #AFA; color: #000; }
.wrong_answer { background: #FAA; color: #000; }
.kana-grid td {
background: #FFF;
font-size: 24pt;
}
td.kana-special { color: #00F; }
td.kana-blank { background: none; };
/* This is used to style the "Score" text at the bottom of the page. */
......@@ -98,18 +121,7 @@ h1, h2, h3 { color:#800; }
font-weight: bold;
}
th {
font-weight: bold;
font-size: 12pt;
padding: 4px;
}
input {
padding: 8px;
border-radius: 8px;
border: 1px solid #BBB;
font: large sans-serif;
}
/* Used in various places. */
.section-box {
background: #DDF;
......@@ -120,6 +132,14 @@ input {
margin: 16px;
}
th {
font-weight: bold;
font-size: 12pt;
padding: 4px;
}
/* These classes are used by the big kanji boxes on the Kanji page. */
.kanji-box {
text-align: center;
display: table-cell;
......@@ -132,6 +152,8 @@ input {
.big-kanji { font: bold 64px sans-serif; }
/* Used on the Kanji page. */
.answer-grid {
display: table-cell;
vertical-align: top;
......@@ -139,10 +161,36 @@ input {
.answer-grid th { padding: 16px; }
/* Used to highlight important text containers. */
.warning-box {
background: #FFB;
color: #000;
border: 1px solid #886;
border-radius: 8px;
padding: 8px;
}
\ No newline at end of file
}
/* Used for the header text on index.html */
.logo-text {
text-align: center;
font: bold 64pt sans-serif;
color: #AAF;
text-shadow: 4px 4px 0px #444;
}
.logo-text > span { color: #FAA; }
/* These classes are used to style the "answer" text-boxes. */
input {
padding: 8px;
border-radius: 8px;
border: 1px solid #BBB;
font: large sans-serif;
}
.blank_answer { background: #FFF; color: #000; }
.right_answer { background: #AFA; color: #000; }
.wrong_answer { background: #FAA; color: #000; }
......@@ -10,9 +10,9 @@
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
......@@ -22,14 +22,15 @@
<div class="body-content">
<!--content-->
<h1>naniJSore</h1>
<ul>
<!--<li><a href="kana.html">Hiragana and Katakana</a></li>-->
<li><a href="kanji.html">Kanji</a></li>
<li><a href="nouns.html">Nouns (Multi-lingual)</a></li>
<li><a href="conjugate.html">Verb/Adjective Conjugations</a></li>
<!--<li><a href="particles.html">Particles</a></li>-->
</ul>
<div class="logo-text">nani<span>JS</span>ore</div>
<div class="centered-box">
<a class="jslink jslink-huge jslink-primary" href="kana.html">Kana</a><br>
<a class="jslink jslink-huge jslink-primary" href="kanji.html">Kanji</a><br>
<a class="jslink jslink-huge jslink-primary" href="nouns.html">Nouns</a><br>
<a class="jslink jslink-huge jslink-primary" href="conjugate.html">Conjugations</a><br>
<a class="jslink jslink-huge" onclick="alert('Unimplemented :(')">Particles</a>
</div>
<!--content-->
</div>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
あ naniJSore
</a>
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<!--<a href="particles.html">Particles</a>-->
<span class="custom-expand"></span>
</div>
<div class="body-content">
<!--content-->
<h1>Kana - Hiragana and Katakana</h1>
<p>
Japanese is written using a combination of "Kanji" and "Kana" characters.
"Kanji" are Chinese symbols, used to represent <i>words or ideas</i> -
either on their own, or in groups. "Kana" are more like the alphabet used
by English speakers, in that they represent <i>sounds, not concepts</i>.
</p>
<p>
Just as the alphabet is made up of upper and lower case, Kana is split
into Hiragana and Katakana. Katakana is mainly used for words of foreign
origin, such as "America", "banana", or "pink":
</p>
<table>
<tr><th>Katakana</th><th>Romaji</th></tr>
<tr><td>アメリカ</td><td>Amerika</td></tr>
<tr><td>バナナ</td><td>Banana</td></tr>
<tr><td>ピンク</td><td>Pinku</td></tr>
</table>
<p>
Hiragana is used for anything else - words, grammatical particles, etc.
It can be even be used as an alternative to Kanji, for situations where
a word is known, but the Kanji symbol to represent it isn't. For example,
consider the word "nihongo", which means "Japanese language" in Japanese:
</p>
<table>
<tr><th>Kanji</th><th>Hiragana</th><th>Romaji</th></tr>
<tr><td>日本語</td><td>にひんご</td><td>Nihongo</td></tr>
</table>
<p class="warning-box">
TODO: Explain alternative transliteration systems (Hepburn system + Kunrei-shiki) here...
</p>
<h2>Basic Kana (Unvoiced)</h2>
<table class="kana-grid">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="kana-blank"> </td><td></td><td class="kana-special"></td><td class="kana-blank"> </td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="kana-blank"> </td><td class="kana-blank"> </td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="kana-blank"> </td><td></td><td class="kana-special"></td><td class="kana-blank"> </td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="kana-blank"> </td></tr>
</table>
<h2>Basic Kana (Voiced)</h2>
<table class="kana-grid">
<tr><td class="kana-blank">  </td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class="kana-blank">  </td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class="kana-special"></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class="kana-blank">  </td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class="kana-blank">  </td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<h2>Compounds (Unvoiced)</h2>
<table class="kana-grid">
<tr><td>きゃ</td><td>しゃ</td><td>ちゃ</td><td>にゃ</td><td>ひゃ</td><td>みゃ</td><td>りゃ</td></tr>
<tr><td>きゅ</td><td>しゅ</td><td>ちゅ</td><td>にゅ</td><td>ひゅ</td><td>みゅ</td><td>りゅ</td></tr>
<tr><td>きょ</td><td>しょ</td><td>ちょ</td><td>にょ</td><td>ひょ</td><td>みょ</td><td>りょ</td></tr>
</table>
<h2>Compounds (Voiced)</h2>
<table class="kana-grid">
<tr><td>ぎゃ</td><td>じゃ</td><td>ぢゃ</td><td>びゃ</td><td>ぴゃ</td></tr>
<tr><td>ぎゅ</td><td>じゅ</td><td>ぢゅ</td><td>びゅ</td><td>ぴゅ</td></tr>
<tr><td>ぎょ</td><td>じょ</td><td>ぢょ</td><td>びょ</td><td>ぴょ</td></tr>
</table>
<h2>Miscellaneous</h2>
<h3>Doubled Consonants and Extended Vowels</h3>
<p class="warning-box">
TODO: Explain っ/ッ and ー here.
</p>
<h3>F- sounds</h3>
<p>
The basic "fu" (ふ or フ) sound can be modified by a small vowel character:
</p>
<table>
<tr><th>Katakana</th><th>Romaji</th></tr>
<tr><td>ファ</td><td>fa</td></tr>
<tr><td>フィ</td><td>fi</td></tr>
<tr><td>フェ</td><td>fe</td></tr>
<tr><td>フォ</td><td>fo</td></tr>
</table>
<p>
Examples: Family Mart
</p>
<h3>L- and R- sounds</h3>
<p>
ラリルレロ are used for both ra/ri/ru/re/ro and la/li/lu/le/lo.
</p>
<h3>V- sounds</h3>
<p>
Usually replaced with B.
</p>
<p>
Alternatively, can be written as a "voiced" U, with a small vowel following it, similar to fa/fi/fu/fo
</p>
<p>
Katakana characters for va/vi/ve/vo were defined, but never actually used. They
are represented as "voiced" versions of the wa/wi/we/wo katakana characters.
</p>
<table>
<tr><td>ヴァ</td><td></td><td>va</td></tr>
<tr><td>ヴィ</td><td></td><td>vi</td></tr>
<tr><td>ヴェ</td><td></td><td>ve</td></tr>
<tr><td>ヴォ</td><td></td><td>vo</td></tr>
</table>
<p>
Examples: Vocalist
</p>
<h3>W- sounds</h3>
<p>
The "wa" kana (わ/ワ) are pretty much the only real "w" characters in Japanese.
The "wo" kana (を/ヲ) are actually pronounced more like "o", and are rather less
common than the usual お/オ kana.
</p>
<p>
The "wi" (ゐ/ヰ) and "we" (ゑ/ヱ) kana are obsolete and are almost never used. If
they <em>are</em> used, it's generally for "effect" rather than pronunciation;
they sound identical to "i" (い/イ) and "e" (え/エ) in modern Japanese. For example,
<a href="http://www.evangelion.co.jp/3_0" target="_blank">ヱヴァンゲリヲン</a> would be
transliterated as "Evangelion", not "Wevangelion" (also, notice that ヲ is used
instead of オ for the "o" sound - as with ゑ, the "w" isn't actually pronounced).
</p>
<p>
Instead, w- sounds (other than "wa") tend to be represented as a "u" followed by
a small vowel:
</p>
<table>
<tr><th>Katakana</th><th>Romaji</th></tr>
<tr><td>ウィ</td><td>wi</td></tr>
<tr><td>ウェ</td><td>we</td></tr>
<tr><td>ウォ</td><td>wo</td></tr>
</table>
<p>
For example, "wetsuit" would be written as ウェットスーツ
</p>
<h3>TH- sounds</h3>
<p>
Usually replaced with S or Z.
</p>
<p>
Gareth = Garesu
</p>
<p>
The = Za
</p>
<h3>Ye</h3>
<p>
A "ye" sound can be written as a katakana "i" followed by small "e" character.
For example, "yellow" would be written as イェロー
</p>
<h3>Closed syllables</h3>
<p>
Except for "n" (ん/ン), all syllables end with a vowel sound (ん/ン is also unusual
in that it cannot be the first syllable of a word - probably for this reason).
</p>
<p>
As such, it's common for words to have vowels added on to the end when they're
imported from other languages. For example, "test" becomes テスト ("tesuto").
</p>
<h3>Particles</h3>
<p>
couple of exceptions to the usual rule:
</p>
<table>
<tr><th>Particle</th><th>Wrong</th><th>Correct</th></tr>
<tr><td>wa</td><td></td><td></td></tr>
<tr><td>e</td><td></td><td></td></tr>
</table>
<p>
How can you tell when they're being used as particles? Context.
</p>
<!--content-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
......@@ -10,9 +10,9 @@
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
......
......@@ -10,9 +10,9 @@
<div id="navbar" class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
naniJSore
</a>
<!--<a href="kana.html">Kana</a>-->
<a href="kana.html">Kana</a>
<a href="kanji.html">Kanji</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment