A Pen by Karl Svartholm on CodePen.
Last active
February 19, 2016 03:48
-
-
Save gorbiz/252f5c6ac19879dfbda9 to your computer and use it in GitHub Desktop.
Latin declensions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| html(lang="en") | |
| head | |
| title= pageTitle | |
| link(rel="stylesheet" href="style.css") | |
| body | |
| .tabs | |
| a.dec(declension="dec1" ) 1st | |
| a.dec(declension="dec2" ) 2nd | |
| a.dec(declension="dec3" ) 3rd | |
| a.dec(declension="dec3i") 3i | |
| a.dec(declension="dec4" ) 4th | |
| a.dec(declension="dec5" ) 5th | |
| table.declension.dec1 | |
| tr | |
| th(colspan=3) 1st decl. (f) | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td a | |
| td ae | |
| tr | |
| th gen | |
| td ae | |
| td ārum | |
| tr | |
| th dat | |
| td ae | |
| td īs | |
| tr | |
| th acc | |
| td am | |
| td ās | |
| tr | |
| th abl | |
| td ā | |
| td īs | |
| table.declension.dec2 | |
| tr | |
| th(colspan=3) 2nd decl. (m/n) | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td us/um | |
| td ī /a | |
| tr | |
| th gen | |
| td ī | |
| td ōrum | |
| tr | |
| th dat | |
| td ō | |
| td īs | |
| tr | |
| th acc | |
| td um | |
| td ōs/a | |
| tr | |
| th abl | |
| td ō | |
| td īs | |
| table.declension.dec3 | |
| tr | |
| th(colspan=3) 3rd decl. (m/n) | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td - /-- | |
| td ēs/a | |
| tr | |
| th gen | |
| td is | |
| td um | |
| tr | |
| th dat | |
| td ī | |
| td ibus | |
| tr | |
| th acc | |
| td em/-- | |
| td ēs/a | |
| tr | |
| th abl | |
| td e | |
| td ibus | |
| table.declension.dec3i | |
| tr | |
| th(colspan=3) 3rd-i decl. (m/n) | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td is/e | |
| td ēs/ia | |
| tr | |
| th gen | |
| td is | |
| td ium | |
| tr | |
| th dat | |
| td ī | |
| td ibus | |
| tr | |
| th acc | |
| td em/e | |
| td ēs/ia | |
| tr | |
| th abl | |
| td e /i | |
| td ibus | |
| table.declension.dec4 | |
| tr | |
| th(colspan=3) 4th decl. (f/n) | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td us/ū | |
| td ūs/ua | |
| tr | |
| th gen | |
| td ūs | |
| td uum | |
| tr | |
| th dat | |
| td ūi/ū | |
| td ibus | |
| tr | |
| th acc | |
| td um/ū | |
| td ūs/ua | |
| tr | |
| th abl | |
| td ū | |
| td ibus | |
| table.declension.dec5 | |
| tr | |
| th(colspan=3) 5th decl. (f) | |
| a(href="https://en.wiktionary.org/wiki/dies#Inflection" title="Watch out for diēs") ⚠ | |
| tr | |
| th | |
| th singular | |
| th plural | |
| tr | |
| th nom | |
| td ēs | |
| td ēs | |
| tr | |
| th gen | |
| td ēi | |
| td ērum | |
| tr | |
| th dat | |
| td eī | |
| td ēbus | |
| tr | |
| th acc | |
| td em | |
| td ēs | |
| tr | |
| th abl | |
| td ē | |
| td ēbus | |
| p Click a tab to "pin it" (as to ease comparison). | |
| p | |
| span Use the number keys | |
| kbd 1-6 | |
| span for swift switching. | |
| script(src="script.js") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function addClass(cls, query, exceptClass) { | |
| [].forEach.call(document.querySelectorAll(query), function(node) { | |
| node.classList.toggle(cls, !node.classList.contains(exceptClass)); | |
| }); | |
| } | |
| function removeClass(cls, query) { | |
| [].forEach.call(document.querySelectorAll(query), function(node) { | |
| node.classList.remove(cls); | |
| }); | |
| } | |
| var pinned; | |
| [].forEach.call(document.querySelectorAll('a.dec'), function(node) { | |
| node.onmouseover = function(e) { | |
| addClass('hidden', 'table.declension', e.target.getAttribute('declension')); | |
| } | |
| node.onclick = function(e) { | |
| removeClass('pinned', 'a.dec'); | |
| this.classList.add('pinned'); | |
| pinned = this; | |
| } | |
| node.onmouseout = function(e) { | |
| pinned && addClass('hidden', 'table.declension', pinned.getAttribute('declension')); | |
| } | |
| }); | |
| // keyboard navigation 1-6 | |
| document.body.onkeydown = function(e) { | |
| var pick = ['dec1', 'dec2', 'dec3', 'dec3i', 'dec4', 'dec5'][e.keyCode-49]; | |
| pick && addClass('hidden', 'table.declension', pick); | |
| } | |
| addClass('hidden', 'table.declension', 'dec1'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import 'nib'; | |
| .hidden | |
| display none | |
| .tabs | |
| a.dec | |
| font-size 1.5em | |
| padding 3px | |
| border 2px solid green | |
| border-width 2px 0 0 2px | |
| background green | |
| &:last-child | |
| border-right-width 2px | |
| &:hover | |
| background lightgreen | |
| cursor pointer | |
| &.pinned | |
| color #a00 | |
| .declension | |
| font-family monospace | |
| background green | |
| th | |
| background lightgreen | |
| td | |
| background lightyellow |
Author
Author
Idea:
~~When hovering an ending in a table
- Show all tables below (highlight the current one), miniature:
□■□□□ - Highlight the ending in all of the tables!~~
Show all the tables below, side by side (highlight the current one).
...consider fancy hover (or tap 4 📱s) on ending; highlight the ending in all declensions (or one can just use search).
- Let's do it!
Author
Ideas:
- Add ~10 common example nouns for each declension.
- Add and approximation of how common the different declensions are...
- Yey. Let's do this!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Idea:
Make possible to gray out some cases (perhaps starting with nom, then gen+acc etc., much like Novo Modo Latina).
PS.
Remember to explain why & perhaps also reveal on hovering a row (and make it stay unrevealed clicking it?)