commit
b7aebabb6e
@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jichan.org</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://matomo.elnu.com/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '6']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
<header>
|
||||
<h1>jichan<span class="org">.org<span></h1>
|
||||
<p>online Japanese resources</p>
|
||||
</header>
|
||||
<p><b>jichan.org</b> is a collection of interactive online Japanese learning resources, starting with <a href="https://tegakituesady.com">Tegaki Tuesday</a> in 2021.</p>
|
||||
<p>This site is operated by me, Elnu. You can contact me on Discord at <a href="https://discord.com/users/441283734214279178" target="_blank">Elnu#2917</a>.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards">
|
||||
<div>
|
||||
<div>
|
||||
<h4>Tegaki Tuesday</h4>
|
||||
<p>Weekly handwriting challenge run on Discord</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://tegakituesday.com" class="red" target="_blank">Website</a>
|
||||
<a href="https://codeberg.org/tegakituesday/tegakituesday.com" class="blue" target="_blank">Git</a>
|
||||
<a href="https://discord.gg/japanese" target="_blank">Discord</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>Shiritori <span class="badge red">coming soon</span></h4>
|
||||
<p>Online shiritori with friends</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://codeberg.org/tegakituesday/shiritori" class="blue" target="_blank">Git</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Shiritori" target="_blank">Info</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="border: none">
|
||||
<h4>jidict <span class="badge red">coming soon™</span></h4>
|
||||
<p>FOSS online Japanese dictionary with a companion offline Rust crate, using <a href="http://jmdict.org/" target="_blank">JMDict</a> (planned)</p>
|
||||
</div>
|
||||
<div style="display: none"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>nicolator <span class="badge blue">beta</span></h4>
|
||||
<p>Nicola Japanese thumb shift keyboard layout training game</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://tegakituesday.com/109/" class="red" target="_blank">nicolator</a>
|
||||
<a href="https://tegakituesday.com/109/" class="blue" target="_blank">Git</a>
|
||||
<a href="http://xahlee.info/kbd/Japan_thumb_shift_keyboard.html" target="_blank">Info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,188 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Lexend:wght@500&family=Roboto+Slab&family=Roboto:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
:root {
|
||||
--color: slategray;
|
||||
--color-rgb: 112, 128, 144;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: ghostwhite;
|
||||
font-size: 1.5em;
|
||||
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 96ch;
|
||||
max-width: 100%;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.cards > *, .card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid lightgrey;
|
||||
border-radius: 0.25em;
|
||||
width: 100%;
|
||||
background: white;
|
||||
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.125));
|
||||
}
|
||||
|
||||
.cards > * > :not(:last-child) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cards > * > :last-child {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cards > * > :last-child > * {
|
||||
width: 100%;
|
||||
font-size: 0.875em;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
background: rgba(var(--color-rgb), 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cards > * > :last-child > :not(:last-child) {
|
||||
border-right: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
.cards > * > :not(:last-child) {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.cards > * > * > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cards > * > * > :last-child {
|
||||
display:
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: var(--color, slategrey);
|
||||
color: white;
|
||||
border-radius: 0.25em;
|
||||
padding: 0.25em;
|
||||
user-select: none;
|
||||
font-size: 0.75em;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.red {
|
||||
--color: #d94455;
|
||||
--color-rgb: 217, 68, 85;
|
||||
}
|
||||
|
||||
.blue {
|
||||
--color: #4467d9;
|
||||
--color-rgb: 68, 108, 217;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: #d9d244;
|
||||
--color-rgb: 217, 210, 68;
|
||||
}
|
||||
|
||||
header {
|
||||
border-left: 0.25em solid #d94455;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
header > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header > h1 {
|
||||
font-family: 'Lexend', sans-serif;
|
||||
letter-spacing: -0.05em;
|
||||
color: #d94455;
|
||||
}
|
||||
|
||||
header > h1 > .org {
|
||||
color: slategrey;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: smokegrey;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: slategrey;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color, slategray);
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid var(--color);
|
||||
}
|
||||
Loading…
Reference in new issue