commit b7aebabb6e1c190b7bf68ecb5604974b8914484f Author: ElnuDev Date: Wed Apr 26 14:26:53 2023 -0700 Initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..23b88e1 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + jichan.org + + + + + + +
+
+
+

jichan.org

+

online Japanese resources

+
+

jichan.org is a collection of interactive online Japanese learning resources, starting with Tegaki Tuesday in 2021.

+

This site is operated by me, Elnu. You can contact me on Discord at Elnu#2917.

+
+
+
+
+
+

Tegaki Tuesday

+

Weekly handwriting challenge run on Discord

+
+
+ Website + Git + Discord +
+
+
+
+

Shiritori coming soon

+

Online shiritori with friends

+
+
+ Git + Info +
+
+
+
+

jidict coming soon™

+

FOSS online Japanese dictionary with a companion offline Rust crate, using JMDict (planned)

+
+
+
+
+
+

nicolator beta

+

Nicola Japanese thumb shift keyboard layout training game

+
+
+ nicolator + Git + Info +
+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d7efd82 --- /dev/null +++ b/style.css @@ -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); +}