Skip to content
Snippets Groups Projects
Commit 78afd398 authored by tilcreator's avatar tilcreator
Browse files

Improve Katakana Keyboard

Yes, it's bigger now!
parent 54c4d62d
Branches
No related tags found
No related merge requests found
......@@ -126,8 +126,8 @@
overflow-x: auto;
overflow-y: hidden;
display: grid;
grid-template-columns: repeat(12, 50px);
grid-template-rows: repeat(6, 60px);
grid-template-columns: repeat(18, 50px);
grid-template-rows: repeat(9, 60px);
grid-gap: 4px;
padding-left: 4px;
padding-bottom: 4px;
......@@ -142,17 +142,16 @@
width: 100%;
height: 100%;
border: none;
margin: -4px;
border-radius: 3px;
background: #0E0E0F;
color: #FFEBD8;
}
.katakana > div > button > span {
display: block;
display: grid;
grid-template-columns: auto;
grid-template-rows: 35px auto;
}
.katakana > div > button > span:first-child {
font-size: 170%;
line-height: 115%;
line-height: 35px;
}
.container-background {
background: #241B2B;
......@@ -265,11 +264,6 @@
background: #1F1C2A;
margin-bottom: -4px; /* Very hacky, but is needed for some reason */
}
#text-table {
display: grid;
grid-template-columns: repeat(auto-fit, 700px);
grid-template-rows: auto;
}
@media screen and (prefers-color-scheme: light) {
body {
color: #0E0E0F;
......@@ -618,7 +612,6 @@
</div>
<div class="container-distance">
<h2>Customize text</h2>
<div id="text-table">
<div class="container">
<div>
<div class="input-with-label">
......@@ -635,84 +628,177 @@
<summary>
katakana keyboard
</summary>
<div class="katakana" id="headline_katakana" for="headline_text">
<div class="katakana" id="sub_headline_katakana" for="headline_text">
<div></div>
<div></div>
<div>v</div>
<div>k</div>
<div>s</div>
<div>t</div>
<div>n</div>
<div>w</div>
<div>r</div>
<div>y</div>
<div>m</div>
<div>h</div>
<div>n</div>
<div>t</div>
<div>s</div>
<div>k</div>
<div></div>
<div>m</div>
<div>y</div>
<div>r</div>
<div>w</div>
<div>g</div>
<div>z</div>
<div>d</div>
<div>b</div>
<div>p</div>
<div></div>
<div><button value="ン"><span></span><span>n</span></button></div>
<div><button value="ワ"><span></span><span>wa</span></button></div>
<div><button value="ラ"><span></span><span>ra</span></button></div>
<div><button value="ヤ"><span></span><span>ya</span></button></div>
<div><button value="マ"><span></span><span>ma</span></button></div>
<div><button value="ハ"><span></span><span>ha</span></button></div>
<div><button value="ナ"><span></span><span>na</span></button></div>
<div><button value="タ"><span></span><span>ta</span></button></div>
<div><button value="サ"><span></span><span>sa</span></button></div>
<div><button value="カ"><span></span><span>ka</span></button></div>
<div><button value="ア"><span></span><span>a</span></button></div>
<div>a</div>
<div><button value="ア"><span></span><span>a</span></button></div>
<div><button value="ァ"><span></span><span>&nbsp;</span></button></div>
<div><button value="カ"><span></span><span>ka</span></button></div>
<div><button value="サ"><span></span><span>sa</span></button></div>
<div><button value="タ"><span></span><span>ta</span></button></div>
<div><button value="ナ"><span></span><span>na</span></button></div>
<div><button value="ハ"><span></span><span>ha</span></button></div>
<div><button value="マ"><span></span><span>ma</span></button></div>
<div><button value="ヤ"><span></span><span>ya</span></button></div>
<div><button value="ラ"><span></span><span>ra</span></button></div>
<div><button value="ワ"><span></span><span>wa</span></button></div>
<div><button value="ガ"><span></span><span>ga</span></button></div>
<div><button value="ザ"><span></span><span>za</span></button></div>
<div><button value="ダ"><span></span><span>da</span></button></div>
<div><button value="バ"><span></span><span>ba</span></button></div>
<div><button value="パ"><span></span><span>pa</span></button></div>
<div><button value="ャ"><span></span><span></span></button></div>
<div></div>
<div>i</div>
<div><button value="イ"><span></span><span>i</span></button></div>
<div><button value="ィ"><span></span><span></span></button></div>
<div><button value="キ"><span></span><span>ki</span></button></div>
<div><button value="シ"><span></span><span>shi</span></button></div>
<div><button value="チ"><span></span><span>chi</span></button></div>
<div><button value="ニ"><span></span><span>ni</span></button></div>
<div><button value="ヒ"><span></span><span>hi</span></button></div>
<div><button value="ミ"><span></span><span>mi</span></button></div>
<div></div>
<div><button value="リ"><span></span><span>ri</span></button></div>
<div><button value="ヰ"><span></span><span>wi</span></button></div>
<div><button value="ギ"><span></span><span>gi</span></button></div>
<div><button value="ジ"><span></span><span>ji</span></button></div>
<div><button value="ヂ"><span></span><span>dji</span></button></div>
<div><button value="ビ"><span></span><span>bi</span></button></div>
<div><button value="ピ"><span></span><span>pi</span></button></div>
<div></div>
<div><button value="ミ"><span></span><span>mi</span></button></div>
<div><button value="ヒ"><span></span><span>hi</span></button></div>
<div><button value="ニ"><span></span><span>ni</span></button></div>
<div><button value="チ"><span></span><span>chi</span></button></div>
<div><button value="シ"><span></span><span>shi</span></button></div>
<div><button value="キ"><span></span><span>ki</span></button></div>
<div><button value="イ"><span></span><span>i</span></button></div>
<div>i</div>
<div>u</div>
<div><button value="ウ"><span></span><span>u</span></button></div>
<div><button value="ゥ"><span></span><span></span></button></div>
<div><button value="ク"><span></span><span>ku</span></button></div>
<div><button value="ス"><span></span><span>su</span></button></div>
<div><button value="ツ"><span></span><span>tsu</span></button></div>
<div><button value="ヌ"><span></span><span>nu</span></button></div>
<div><button value="フ"><span></span><span>fu</span></button></div>
<div><button value="ム"><span></span><span>mu</span></button></div>
<div><button value="ユ"><span></span><span>yu</span></button></div>
<div><button value="ル"><span></span><span>ru</span></button></div>
<div></div>
<div><button value="グ"><span></span><span>gu</span></button></div>
<div><button value="ズ"><span></span><span>zu</span></button></div>
<div><button value="ヅ"><span></span><span>dyu</span></button></div>
<div><button value="ブ"><span></span><span>bu</span></button></div>
<div><button value="プ"><span></span><span>pu</span></button></div>
<div><button value="ュ"><span></span><span></span></button></div>
<div>e</div>
<div><button value="エ"><span></span><span>e</span></button></div>
<div><button value="ェ"><span></span><span></span></button></div>
<div><button value="ケ"><span></span><span>ke</span></button></div>
<div><button value="セ"><span></span><span>se</span></button></div>
<div><button value="テ"><span></span><span>te</span></button></div>
<div><button value="ネ"><span></span><span>ne</span></button></div>
<div><button value="ヘ"><span></span><span>he</span></button></div>
<div><button value="メ"><span></span><span>me</span></button></div>
<div></div>
<div><button value="ル"><span></span><span>ru</span></button></div>
<div><button value="ユ"><span></span><span>yu</span></button></div>
<div><button value="ム"><span></span><span>mu</span></button></div>
<div><button value="フ"><span></span><span>fu</span></button></div>
<div><button value="ヌ"><span></span><span>nu</span></button></div>
<div><button value="ツ"><span></span><span>tsu</span></button></div>
<div><button value="ス"><span></span><span>su</span></button></div>
<div><button value="ク"><span></span><span>ku</span></button></div>
<div><button value="ウ"><span></span><span>u</span></button></div>
<div>u</div>
<div><button value="レ"><span></span><span>re</span></button></div>
<div><button value="ヱ"><span></span><span>we</span></button></div>
<div><button value="ゲ"><span></span><span>ge</span></button></div>
<div><button value="ゼ"><span></span><span>ze</span></button></div>
<div><button value="デ"><span></span><span>de</span></button></div>
<div><button value="ベ"><span></span><span>be</span></button></div>
<div><button value="ペ"><span></span><span>pe</span></button></div>
<div></div>
<div>o</div>
<div><button value="オ"><span></span><span>o</span></button></div>
<div><button value="ォ"><span></span><span></span></button></div>
<div><button value="コ"><span></span><span>ko</span></button></div>
<div><button value="ソ"><span></span><span>so</span></button></div>
<div><button value="ト"><span></span><span>to</span></button></div>
<div><button value="ノ"><span></span><span>no</span></button></div>
<div><button value="ホ"><span></span><span>ho</span></button></div>
<div><button value="モ"><span></span><span>mo</span></button></div>
<div><button value="ヨ"><span></span><span>yo</span></button></div>
<div><button value="ロ"><span></span><span>ro</span></button></div>
<div><button value="ヲ"><span></span><span>wo</span></button></div>
<div><button value="ゴ"><span></span><span>go</span></button></div>
<div><button value="ゾ"><span></span><span>zo</span></button></div>
<div><button value="ド"><span></span><span>do</span></button></div>
<div><button value="ボ"><span></span><span>bo</span></button></div>
<div><button value="ポ"><span></span><span>po</span></button></div>
<div><button value="ョ"><span></span><span></span></button></div>
<div></div>
<div></div>
<div><button value="レ"><span></span><span>re</span></button></div>
<div><button value="ヴ"><span></span><span>v</span></button></div>
<div></div>
<div></div>
<div><button value="ッ"><span></span><span></span></button></div>
<div><button value="ン"><span></span><span>n</span></button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><button value="メ"><span></span><span>me</span></button></div>
<div><button value="ヘ"><span></span><span>he</span></button></div>
<div><button value="ネ"><span></span><span>ne</span></button></div>
<div><button value="テ"><span></span><span>te</span></button></div>
<div><button value="セ"><span></span><span>se</span></button></div>
<div><button value="ケ"><span></span><span>ke</span></button></div>
<div><button value="エ"><span></span><span>e</span></button></div>
<div>e</div>
<div></div>
<div><button value="ヲ"><span></span><span>wo</span></button></div>
<div><button value="ロ"><span></span><span>ro</span></button></div>
<div><button value="ヨ"><span></span><span>yo</span></button></div>
<div><button value="モ"><span></span><span>mo</span></button></div>
<div><button value="ホ"><span></span><span>ho</span></button></div>
<div><button value="ノ"><span></span><span>no</span></button></div>
<div><button value="ト"><span></span><span>to</span></button></div>
<div><button value="ソ"><span></span><span>so</span></button></div>
<div><button value="コ"><span></span><span>ko</span></button></div>
<div><button value="オ"><span></span><span>o</span></button></div>
<div>o</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><button value="・"><span></span><span></span></button></div>
<div><button value="ー"><span></span><span></span></button></div>
<div><button value="ヽ"><span></span><span></span></button></div>
<div><button value="ヾ"><span></span><span></span></button></div>
<div><button value="、"><span></span><span></span></button></div>
<div><button value="。"><span></span><span></span></button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</details>
</div>
......@@ -734,89 +820,181 @@
katakana keyboard
</summary>
<div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
<div></div>
<div></div>
<div>v</div>
<div>k</div>
<div>s</div>
<div>t</div>
<div>n</div>
<div>w</div>
<div>r</div>
<div>y</div>
<div>m</div>
<div>h</div>
<div>n</div>
<div>t</div>
<div>s</div>
<div>k</div>
<div></div>
<div>m</div>
<div>y</div>
<div>r</div>
<div>w</div>
<div>g</div>
<div>z</div>
<div>d</div>
<div>b</div>
<div>p</div>
<div></div>
<div><button value="ン"><span></span><span>n</span></button></div>
<div><button value="ワ"><span></span><span>wa</span></button></div>
<div><button value="ラ"><span></span><span>ra</span></button></div>
<div><button value="ヤ"><span></span><span>ya</span></button></div>
<div><button value="マ"><span></span><span>ma</span></button></div>
<div><button value="ハ"><span></span><span>ha</span></button></div>
<div><button value="ナ"><span></span><span>na</span></button></div>
<div><button value="タ"><span></span><span>ta</span></button></div>
<div><button value="サ"><span></span><span>sa</span></button></div>
<div><button value="カ"><span></span><span>ka</span></button></div>
<div><button value="ア"><span></span><span>a</span></button></div>
<div>a</div>
<div><button value="ア"><span></span><span>a</span></button></div>
<div><button value="ァ"><span></span><span></span></button></div>
<div><button value="カ"><span></span><span>ka</span></button></div>
<div><button value="サ"><span></span><span>sa</span></button></div>
<div><button value="タ"><span></span><span>ta</span></button></div>
<div><button value="ナ"><span></span><span>na</span></button></div>
<div><button value="ハ"><span></span><span>ha</span></button></div>
<div><button value="マ"><span></span><span>ma</span></button></div>
<div><button value="ヤ"><span></span><span>ya</span></button></div>
<div><button value="ラ"><span></span><span>ra</span></button></div>
<div><button value="ワ"><span></span><span>wa</span></button></div>
<div><button value="ガ"><span></span><span>ga</span></button></div>
<div><button value="ザ"><span></span><span>za</span></button></div>
<div><button value="ダ"><span></span><span>da</span></button></div>
<div><button value="バ"><span></span><span>ba</span></button></div>
<div><button value="パ"><span></span><span>pa</span></button></div>
<div><button value="ャ"><span></span><span></span></button></div>
<div></div>
<div>i</div>
<div><button value="イ"><span></span><span>i</span></button></div>
<div><button value="ィ"><span></span><span></span></button></div>
<div><button value="キ"><span></span><span>ki</span></button></div>
<div><button value="シ"><span></span><span>shi</span></button></div>
<div><button value="チ"><span></span><span>chi</span></button></div>
<div><button value="ニ"><span></span><span>ni</span></button></div>
<div><button value="ヒ"><span></span><span>hi</span></button></div>
<div><button value="ミ"><span></span><span>mi</span></button></div>
<div></div>
<div><button value="リ"><span></span><span>ri</span></button></div>
<div><button value="ヰ"><span></span><span>wi</span></button></div>
<div><button value="ギ"><span></span><span>gi</span></button></div>
<div><button value="ジ"><span></span><span>ji</span></button></div>
<div><button value="ヂ"><span></span><span>dji</span></button></div>
<div><button value="ビ"><span></span><span>bi</span></button></div>
<div><button value="ピ"><span></span><span>pi</span></button></div>
<div></div>
<div><button value="ミ"><span></span><span>mi</span></button></div>
<div><button value="ヒ"><span></span><span>hi</span></button></div>
<div><button value="ニ"><span></span><span>ni</span></button></div>
<div><button value="チ"><span></span><span>chi</span></button></div>
<div><button value="シ"><span></span><span>shi</span></button></div>
<div><button value="キ"><span></span><span>ki</span></button></div>
<div><button value="イ"><span></span><span>i</span></button></div>
<div>i</div>
<div>u</div>
<div><button value="ウ"><span></span><span>u</span></button></div>
<div><button value="ゥ"><span></span><span></span></button></div>
<div><button value="ク"><span></span><span>ku</span></button></div>
<div><button value="ス"><span></span><span>su</span></button></div>
<div><button value="ツ"><span></span><span>tsu</span></button></div>
<div><button value="ヌ"><span></span><span>nu</span></button></div>
<div><button value="フ"><span></span><span>fu</span></button></div>
<div><button value="ム"><span></span><span>mu</span></button></div>
<div><button value="ユ"><span></span><span>yu</span></button></div>
<div><button value="ル"><span></span><span>ru</span></button></div>
<div></div>
<div><button value="グ"><span></span><span>gu</span></button></div>
<div><button value="ズ"><span></span><span>zu</span></button></div>
<div><button value="ヅ"><span></span><span>dyu</span></button></div>
<div><button value="ブ"><span></span><span>bu</span></button></div>
<div><button value="プ"><span></span><span>pu</span></button></div>
<div><button value="ュ"><span></span><span></span></button></div>
<div>e</div>
<div><button value="エ"><span></span><span>e</span></button></div>
<div><button value="ェ"><span></span><span></span></button></div>
<div><button value="ケ"><span></span><span>ke</span></button></div>
<div><button value="セ"><span></span><span>se</span></button></div>
<div><button value="テ"><span></span><span>te</span></button></div>
<div><button value="ネ"><span></span><span>ne</span></button></div>
<div><button value="ヘ"><span></span><span>he</span></button></div>
<div><button value="メ"><span></span><span>me</span></button></div>
<div></div>
<div><button value="レ"><span></span><span>re</span></button></div>
<div><button value="ヱ"><span></span><span>we</span></button></div>
<div><button value="ゲ"><span></span><span>ge</span></button></div>
<div><button value="ゼ"><span></span><span>ze</span></button></div>
<div><button value="デ"><span></span><span>de</span></button></div>
<div><button value="ベ"><span></span><span>be</span></button></div>
<div><button value="ペ"><span></span><span>pe</span></button></div>
<div></div>
<div><button value="ル"><span></span><span>ru</span></button></div>
<div><button value="ユ"><span></span><span>yu</span></button></div>
<div><button value="ム"><span></span><span>mu</span></button></div>
<div><button value="フ"><span></span><span>fu</span></button></div>
<div><button value="ヌ"><span></span><span>nu</span></button></div>
<div><button value="ツ"><span></span><span>tsu</span></button></div>
<div><button value="ス"><span></span><span>su</span></button></div>
<div><button value="ク"><span></span><span>ku</span></button></div>
<div><button value="ウ"><span></span><span>u</span></button></div>
<div>u</div>
<div>o</div>
<div><button value="オ"><span></span><span>o</span></button></div>
<div><button value="ォ"><span></span><span></span></button></div>
<div><button value="コ"><span></span><span>ko</span></button></div>
<div><button value="ソ"><span></span><span>so</span></button></div>
<div><button value="ト"><span></span><span>to</span></button></div>
<div><button value="ノ"><span></span><span>no</span></button></div>
<div><button value="ホ"><span></span><span>ho</span></button></div>
<div><button value="モ"><span></span><span>mo</span></button></div>
<div><button value="ヨ"><span></span><span>yo</span></button></div>
<div><button value="ロ"><span></span><span>ro</span></button></div>
<div><button value="ヲ"><span></span><span>wo</span></button></div>
<div><button value="ゴ"><span></span><span>go</span></button></div>
<div><button value="ゾ"><span></span><span>zo</span></button></div>
<div><button value="ド"><span></span><span>do</span></button></div>
<div><button value="ボ"><span></span><span>bo</span></button></div>
<div><button value="ポ"><span></span><span>po</span></button></div>
<div><button value="ョ"><span></span><span></span></button></div>
<div></div>
<div></div>
<div><button value="レ"><span></span><span>re</span></button></div>
<div><button value="ヴ"><span></span><span>v</span></button></div>
<div></div>
<div></div>
<div><button value="ッ"><span></span><span></span></button></div>
<div><button value="ン"><span></span><span>n</span></button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><button value="メ"><span></span><span>me</span></button></div>
<div><button value="ヘ"><span></span><span>he</span></button></div>
<div><button value="ネ"><span></span><span>ne</span></button></div>
<div><button value="テ"><span></span><span>te</span></button></div>
<div><button value="セ"><span></span><span>se</span></button></div>
<div><button value="ケ"><span></span><span>ke</span></button></div>
<div><button value="エ"><span></span><span>e</span></button></div>
<div>e</div>
<div></div>
<div><button value="ヲ"><span></span><span>wo</span></button></div>
<div><button value="ロ"><span></span><span>ro</span></button></div>
<div><button value="ヨ"><span></span><span>yo</span></button></div>
<div><button value="モ"><span></span><span>mo</span></button></div>
<div><button value="ホ"><span></span><span>ho</span></button></div>
<div><button value="ノ"><span></span><span>no</span></button></div>
<div><button value="ト"><span></span><span>to</span></button></div>
<div><button value="ソ"><span></span><span>so</span></button></div>
<div><button value="コ"><span></span><span>ko</span></button></div>
<div><button value="オ"><span></span><span>o</span></button></div>
<div>o</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><button value="・"><span></span><span></span></button></div>
<div><button value="ー"><span></span><span></span></button></div>
<div><button value="ヽ"><span></span><span></span></button></div>
<div><button value="ヾ"><span></span><span></span></button></div>
<div><button value="、"><span></span><span></span></button></div>
<div><button value="。"><span></span><span></span></button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</details>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>CC-BY design: betalars, evlli; translation: kimera7790, pliess; programming: tilcreator, stuebinm</p>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment