~lectronice/pimeja

e221f068ca650ebc18407fb58c78659cfb5bec35 — lectronice 8 months ago 65acddb
- Added a non-pu filter and 10 unofficial/old words.
- Removed the sitelen pona pona font.
- Various small tweaks.
4 files changed, 143 insertions(+), 78 deletions(-)

D fonts/sitelen-pona-pona.otf
M index.html
M readme.md
M style.css
D fonts/sitelen-pona-pona.otf => fonts/sitelen-pona-pona.otf +0 -0
M index.html => index.html +64 -12
@@ 31,6 31,7 @@
      <input type="radio" id="pre-verb" name="type" value="pre-verb">
      <input type="radio" id="preposition" name="type" value="preposition">
      <input type="radio" id="verb" name="type" value="verb">
      <input type="radio" id="non-pu" name="type" value="non-pu">
      <input type="checkbox" id="ilo">
      <input type="checkbox" id="lukin">
      <input type="checkbox" id="nimi">


@@ 40,7 41,7 @@
      <input type="checkbox" id="toki">
      <nav>
      <ul class="filters menu">
        <li><label for="ilo" class="pona-pona">ilo</label></li>
        <li><label for="ilo" class="linja-pona">ilo</label></li>
      </ul>
      <ul class="filters collapsible letters">
        <li><label for="all-letters">*</label></li>


@@ 69,16 70,17 @@
        <li><label for="pre-verb"><span class="en">pre-verb</span><span class="fr">auxiliaire</span></label></li>
        <li><label for="preposition"><span class="en">preposition</span><span class="fr">préposition</span></label></li>
        <li><label for="verb"><span class="en">verb</span><span class="fr">verbe</span></label></li>
        <li><label for="non-pu"><span class="en">non-pu</span><span class="fr">non-pu</span></label></li>
      </ul>
      <ul class="filters collapsible options">
        <li><label for="lukin" class="pona-pona">lukin</label></li>
        <li><label for="nimi" class="pona-pona">nimi</label></li>
        <li><label for="sona" class="pona-pona">sona</label></li>
        <li><label for="sitelen" class="pona-pona">sitelen</label></li>
        <li><label for="kule" class="pona-pona">kule</label></li>
        <li><label for="toki" class="pona-pona">toki</label></li>
        <li><label for="lukin" class="linja-pona">lukin</label></li>
        <li><label for="nimi" class="linja-pona">nimi</label></li>
        <li><label for="sona" class="linja-pona">sona</label></li>
        <li><label for="kule" class="linja-pona">kule</label></li>
        <li><label for="toki" class="linja-pona">toki</label></li>
      </ul>
      </nav>
      <!-- kapa kapesi majuna pasila pata powe tuli po mulapisu yupekosi -->
      <ul class="cards">
        <!-- a -->
        <li class="card" data-category="a particle">


@@ 117,6 119,11 @@
          <div class="l en"><em>adjective</em>bowing down, downward, humble, lowly, dependent</div>
          <div class="l fr"><em>adjectif</em>incliné vers le bas, humble, qui dépend</div>
        </li>
        <li class="card non-pu" data-category="a noun non-pu">
          <div class="g">apeja</div><div class="n">apeja<hr></div>
          <div class="l en"><em>noun</em><b>old word, removed</b>shame, guilt</div>
          <div class="l fr"><em>nom</em><b>mot ancien, retiré</b>honte, culpabilité</div>
        </li>
        <li class="card" data-category="a adjective">
          <div class="g">ante</div><div class="n">ante</div>
          <div class="l en"><em>adjective</em>different, altered, changed, other</div>


@@ 227,11 234,26 @@
          <div class="l en"><em>preposition</em>to use, with, by mean of</div>
          <div class="l fr"><em>préposition</em>en utilisant, avec, au moyen de</div>
        </li>
        <li class="card" data-category="k noun non-pu">
          <div class="g linja-pona">kijetesantakalu</div><div class="n">kijetesantakalu<hr></div>
          <div class="l en"><em>noun</em><b>joke word</b>racoon</div>
          <div class="l fr"><em>nom</em><b>mot blague</b>raton laveur</div>
        </li>
        <li class="card" data-category="k noun pu2">
          <div class="g">kili</div><div class="n">kili</div>
          <div class="l en"><em>noun</em>fruit, vegetable, mushroom</div>
          <div class="l fr"><em>nom</em>fruit, légume, champignon</div>
        </li>
        <li class="card non-pu" data-category="k particle non-pu">
          <div class="g">kin</div><div class="n">kin<hr></div>
          <div class="l en"><em>particle</em><b>old word, merged</b>(emphasis, emotion or confirmation: really, indeed)</div>
          <div class="l fr"><em>particule</em><b>mot ancien, fusionné</b>(accent, émotion ou confirmation: vraiment, en effet)</div>
        </li>
        <li class="card non-pu" data-category="k verb non-pu">
          <div class="g">kipisi</div><div class="n">kipisi<hr></div>
          <div class="l en"><em>verb</em><b>old word, removed</b>to divide, cut, slice</div>
          <div class="l fr"><em>verbe</em><b>mot ancien, retiré</b>diviser, couper, trancher</div>
        </li>
        <li class="card" data-category="k noun">
          <div class="g">kiwen</div><div class="n">kiwen</div>
          <div class="l en"><em>noun</em>hard object, metal, rock, stone</div>


@@ 287,6 309,11 @@
          <div class="l en"><em>verb</em>to control, direct, guide, lead, own, plan, regulate, rule</div>
          <div class="l fr"><em>verbe</em>dominer, diriger, guider, mener, posséder, régler</div>
        </li>
        <li class="card non-pu" data-category="l noun non-pu">
          <div class="g">leko</div><div class="n">leko<hr></div>
          <div class="l en"><em>noun</em><b>old word, removed</b>block, square; stairs</div>
          <div class="l fr"><em>nom</em><b>mot ancien, retiré</b>bloc, carré ; escaliers</div>
        </li>
        <li class="card" data-category="l noun">
          <div class="g">len</div><div class="n">len</div>
          <div class="l en"><em>noun</em>cloth, clothing, fabric, textile; cover, layer of privacy</div>


@@ 334,7 361,7 @@
          <div class="l en"><em>number</em>5</div>
          <div class="l fr"><em>nombre</em>5</div>
        </li>
        <li class="card" data-category="l verb pre-verb">
        <li class="card" data-category="l noun verb pre-verb">
          <div class="g">lukin</div><div class="n">lukin / oko</div>
          <div class="l en"><em>noun</em>eye</div>
          <div class="l fr"><em>nom</em>œil</div>


@@ 394,6 421,11 @@
          <div class="l en"><em>noun</em>back, behind, rear</div>
          <div class="l fr"><em>nom</em>dos, derrière, arrière</div>
        </li>
        <li class="card non-pu" data-category="m noun non-pu">
          <div class="g">monsuta</div><div class="n">monsuta<hr></div>
          <div class="l en"><em>noun</em><b>old word, removed</b>monster; fear</div>
          <div class="l fr"><em>nom</em><b>mot ancien, retiré</b>monstre ; peur</div>
        </li>
        <li class="card" data-category="m particle">
          <div class="g">mu</div><div class="n">mu</div>
          <div class="l en"><em>particle</em>(animal noise or communication)</div>


@@ 419,6 451,11 @@
          <div class="l fr"><em>nombre</em>20</div>
        </li>
        <!-- n -->
        <li class="card non-pu" data-category="s adjective non-pu">
          <div class="g">namako</div><div class="n">namako<hr></div>
          <div class="l en"><em>adjective</em><b>old word, merged</b>spicy; additional</div>
          <div class="l fr"><em>adjectif</em><b>mot ancien, fusionné</b>épicé ; en plus</div>
        </li>
        <li class="card" data-category="n particle noun">
          <div class="g">nanpa</div><div class="n">nanpa</div>
          <div class="l en"><em>particle</em>-th (ordinal number)</div>


@@ 462,6 499,11 @@
          <div class="l en"><em>particle</em>hey! O! (vocative or imperative)</div>
          <div class="l fr"><em>particule</em>hé ! ô ! (vocatif ou impératif)</div>
        </li>
        <li class="card non-pu" data-category="l noun non-pu">
          <div class="g">oko</div><div class="n">oko<hr></div>
          <div class="l en"><em>noun</em><b>old word, merged</b>eye</div>
          <div class="l fr"><em>nom</em><b>mot ancien, fusionné</b>œil</div>
        </li>
        <li class="card" data-category="o verb">
          <div class="g">olin</div><div class="n">olin</div>
          <div class="l en"><em>verb</em>to love, have compassion for, respect, show affection to</div>


@@ 483,6 525,11 @@
          <div class="l en"><em>adjective</em>botched, broken, damaged, harmed, messed up</div>
          <div class="l fr"><em>adjectif</em>brisé, cassé, abîmé, bâclé, gâché</div>
        </li>
        <li class="card non-pu" data-category="p verb non-pu">
          <div class="g">pake</div><div class="n">pake<hr></div>
          <div class="l en"><em>verb</em><b>old word, removed</b>to stop, block</div>
          <div class="l fr"><em>verbe</em><b>mot ancien, retiré</b>arrêter, bloquer</div>
        </li>
        <li class="card" data-category="p verb">
          <div class="g">pali</div><div class="n">pali</div>
          <div class="l en"><em>verb</em>to do, take action on, work on; build, make, prepare</div>


@@ 684,6 731,11 @@
          <div class="l en"><em>noun</em>indoor space; building, home, house, room</div>
          <div class="l fr"><em>nom</em>espace intérieur, lieu couvert ; maison, bâtiment, édifice, pièce, chambre, chez soi, demeure</div>
        </li>
        <li class="card non-pu" data-category="t noun non-pu">
          <div class="g linja-pona">tonsi</div><div class="n">tonsi<hr></div>
          <div class="l en"><em>noun</em><b>unofficial word</b>LGBT+ person</div>
          <div class="l fr"><em>nom</em><b>mot non-officiel</b>personne LGBT+</div>
        </li>
        <li class="card" data-category="t number">
          <div class="g">tu</div><div class="n">tu</div>
          <div class="l en"><em>number</em>2</div>


@@ 740,10 792,10 @@
        </li>
      </ul>
      <ul class="filters footer">
        <li><div class="title"><a href="https://git.sr.ht/~lectronice/pimeja">pimeja<span> 0.3.1</span></a></div></li>
        <li><div class="top"><a href="#top">sewi</a></div></li>
        <li><div class="author"><a href="https://merveilles.town/@ice">toki lipu ma</a></div></li>
        <li><div class="forum"><a href="https://tokipona.lectronice.com">kulupu lipu ma</a><div></li>
        <li><div class="title linja-pona"><a href="https://git.sr.ht/~lectronice/pimeja">pimeja<span> 0.4</span></a></div></li>
        <li><div class="top linja-pona"><a href="#top">sewi</a></div></li>
        <li><div class="author linja-pona"><a href="https://merveilles.town/@ice">lipu jan ma</a></div></li>
        <li><div class="forum linja-pona"><a href="https://tokipona.lectronice.com">lipu kulupu ma</a><div></li>
      </ul>
    </div>
  </body>

M readme.md => readme.md +16 -5
@@ 1,7 1,7 @@
# Pimeja

## What?
Pimeja is a Toki Pona dictionary that currently supports English and French definitions taken from the official Toki Pona book by Sonja Lang. It also includes two different glyph fonts, and a simple way to hide or show word names, glyphs and definitions. At some point, pimeja may also include sitelen sitelen glyphs, and some light spaced repetition features.
Pimeja is a Toki Pona dictionary that currently supports English and French definitions taken from the official Toki Pona book by Sonja Lang. It also includes two different glyph fonts, and a simple way to hide or show word names, glyphs and definitions. At some point, pimeja may also include sitelen sitelen glyphs. A similar companion app with light spaced repetition features will also probably be released, stay tuned.

## Why?
The primary goal is to offer a convenient way to access the vocabulary anywhere, online and offline, on desktop and on mobile. It's still a work in progress, so everything isn't bundled into a single HTML file yet, but the idea is to provide a lightweight digital Toki Pona tool that can be easily accessed and shared on most devices by anyone interested in the language.


@@ 9,14 9,12 @@ The primary goal is to offer a convenient way to access the vocabulary anywhere,
## How?
- Filter words with the letter and type buttons in the top menu.
- Hide or show columns with the sitelen / nimi / sona buttons.
- Switch to sitelen linja pona or sitelen pona pona with the sitelen button.
- Switch to French or English definitions with the toki button.
- ~~Drag & drop themes from the 100 Rabbits ecosystem to change colors.~~ (May be reimplemented in the future)
- Feel free to say hi on [Mastodon](https://merveilles.town/@ice) or join our [Toki Pona forum](https://tokipona.lectronice.com).

## Who?
- [Inter](https://rsms.me/inter) font  by Rasmus Andersson.
- [sitelen pona pona](https://jackhumbert.github.io/sitelen-pona-pona) font by Jack Humbert.
- [Inter](https://rsms.me/inter) font  by Rasmus Andersson (will probably be removed to reduce file size.)
- [linja pona](https://github.com/janSame/linja-pona) font by jan Same & David A Roberts.

Special thanks to Russ Sharek for his feedback and suggestions.


@@ 25,4 23,17 @@ Special thanks to Russ Sharek for his feedback and suggestions.
The current CSS-only approach was made possible thanks to these articles:
- https://webdevtrick.com/pure-css-content-filter/
- https://css-tricks.com/the-checkbox-hack/
- https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111
\ No newline at end of file
- https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111

## Change log
### 0.4
#### Added
- Non-pu filter
- 10 unofficial or removed words supported by the linja pona font: apeja, kijetesantakalu, kin, kipisi, leko, monsuta, namako, oko, pake, tonsi.

#### Removed
- Font change button
- sitelen pona pona font (too confusing for beginners)

#### Fixed
- Tiny mostly cosmetic tweaks
\ No newline at end of file

M style.css => style.css +63 -61
@@ 2,7 2,7 @@
  --f_high: #eee;
  --f_med: #ccc;
  --f_low: #888;
  --f_inv:;
  --f_inv: #555;
  --b_high: #333;
  --b_med: #131313;
  --b_low: #111;


@@ 10,22 10,20 @@
  counter-reset: cards-sum;
}

@font-face {font-family: pona-pona; src: url("fonts/sitelen-pona-pona.otf");}
.pona-pona {font-family: pona-pona;}
@font-face {font-family: linja-pona; src: url('fonts/linja-pona-4.2.woff') format('woff'); font-weight: normal; font-style: normal;}
.linja-pona {font-family: linja-pona; font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "kern" 1, "mark" 1; text-rendering: optimizeLegibility;}
@font-face {font-family: "Inter"; src: url("fonts/Inter.otf");}
@font-face { font-family: linja-pona; src: url('fonts/linja-pona-4.2.woff') format('woff'); font-weight: normal; font-style: normal; }
.linja-pona { font-family: linja-pona!important; font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "kern" 1, "mark" 1; text-rendering: optimizeLegibility; }
@font-face { font-family: "Inter"; src: url("fonts/Inter.otf"); }

html {scroll-behavior: smooth; box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
html, body {margin: 0; padding: 0; height: 100%;}
body {font-family: "Inter"; background: var(--b_low);}
label {cursor: pointer;}
input {position: absolute; left: -9999px;}
nav {z-index: 1; top: 0; position: fixed; width: 100%;}
ul {color: var(--f_med); background: var(--b_low); list-style: none; margin: 0; padding: 0;}
ul, .g, .n, .l {transition: .5s;}
em {color: var(--f_low); font-style: normal; margin-right: .5em; text-transform: uppercase; font-size: .75em;}
html { scroll-behavior: smooth; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; height: 100%; }
body, .title span { font-family: "Inter", "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: var(--b_low); }
label { cursor: pointer; }
input { position: absolute; left: -9999px; }
nav { z-index: 1; top: 0; position: fixed; width: 100%; }
ul { color: var(--f_med); background: var(--b_low); list-style: none; margin: 0; padding: 0; }
ul, .g, .n, .l { transition: .5s; }
em, b { color: var(--f_low); font-style: normal; margin-right: .5em; text-transform: uppercase; font-size: .75em; }

[value="all-letters"]:checked ~ nav .filters [for="all-letters"],
[value="a"]:checked ~  nav .filters [for="a"],


@@ 49,10 47,11 @@ em {color: var(--f_low); font-style: normal; margin-right: .5em; text-transform:
[value="particle"]:checked ~  nav .filters [for="particle"],
[value="pre-verb"]:checked ~  nav .filters [for="pre-verb"],
[value="preposition"]:checked ~  nav .filters [for="preposition"],
[value="verb"]:checked ~  nav .filters [for="verb"] {border-bottom: 2px solid;}
[value="verb"]:checked ~  nav .filters [for="verb"],
[value="non-pu"]:checked ~  nav .filters [for="non-pu"] { border-bottom: 2px solid; }

[value="all-letters"]:checked ~ .cards [data-category],
[value="all-types"]:checked ~ .cards [data-category] {display: block;}
[value="all-types"]:checked ~ .cards [data-category] { display: block; }

[value="a"]:checked ~ .cards .card:not([data-category~="a"]),
[value="e"]:checked ~ .cards .card:not([data-category~="e"]),


@@ 74,58 73,61 @@ em {color: var(--f_low); font-style: normal; margin-right: .5em; text-transform:
[value="particle"]:checked ~ .cards .card:not([data-category~="particle"]),
[value="pre-verb"]:checked ~ .cards .card:not([data-category~="pre-verb"]),
[value="preposition"]:checked ~ .cards .card:not([data-category~="preposition"]),
[value="verb"]:checked ~ .cards .card:not([data-category~="verb"]) {display: none;}
[value="verb"]:checked ~ .cards .card:not([data-category~="verb"]),
[value="non-pu"]:checked ~ .cards .card:not([data-category~="non-pu"]) { display: none; }

.main {height: 100%;}
.filters {text-align: center;padding: 1rem;}
.filters * {display: inline-block;}
.filters label, .footer a {padding: 0.5rem 1rem; line-height: normal; cursor: pointer; border-bottom: 2px solid transparent;}
.filters label:hover {border-bottom: 2px solid;}
.options, .menu {font-size: 1.5em;}
.cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-gap: 1.5rem; padding: 5.25em 8em 2em 8em;}
.cards ~ ::before {content: '-> ' counter(cards-sum) ' word(s)'; display: block; text-align: center; margin: 0 0 1.5em 0;}
.card {counter-increment: cards-sum;}
.card {background: var(--b_med); padding: .75em 1em; border-radius: .5em;}
.g {font-family: pona-pona; float: left; font-size: 1.5em; line-height: .5em; padding: 1em;}
.n {font-size: 1.25em; line-height: 3em;}
.main { height: 100%; }
.filters { text-align: center;padding: 1rem; }
.filters * { display: inline-block; }
.filters label, .footer a { padding: 0.5rem 1rem; line-height: normal; cursor: pointer; border-bottom: 2px solid transparent; }
.filters label:hover { border-bottom: 2px solid; }
.types label { padding: .5em .569rem; }
.options, .menu { font-size: 1.5em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-gap: 1.5rem; padding: 5.25em 8em 2em 8em; }
.cards ~ ::before { content: '⇢ ' counter(cards-sum) ' word(s)'; display: block; text-align: center; margin: 0 0 1.5em 0; }
.card { counter-increment: cards-sum; }
.card { background: var(--b_med); padding: .75em 1em; border-radius: .5em; }
.g { font-family: linja-pona; float: left; font-size: 2em; line-height: .9em; padding: .5em .7em .4em; }
.n { font-size: 1.25em; line-height: 3em; display: inline-block; }
.n hr { margin: -1.5em 0 1.4em; border: 1px solid var(--f_inv); }

ul li div.fr, span.fr, .collapsible {display: none;}
#toki:checked ~ ul li div.fr, #toki:checked ~ label span.fr {display: block;}
#toki:checked ~ ul li div.en, #toki:checked ~ label span.en {display: none;}
#ilo:checked ~ nav .collapsible {display: block;}
#ilo:checked ~ .cards {padding-top: 19em;}
#lukin:checked ~ ul li .g {filter: blur(.4em);}
#nimi:checked ~ ul li .n {filter: blur(.4em);}
#sona:checked ~ ul li .l {filter: blur(.4em);}
#sitelen:checked ~ ul li .g {font-family: linja-pona;}
#kule:checked ~ ul, #kule:checked ~ nav {filter: invert(100%); transition: .5s;}
ul li div.fr, span.fr, .collapsible { display: none; }
#toki:checked ~ ul li div.fr, #toki:checked ~ label span.fr { display: block; }
#toki:checked ~ ul li div.en, #toki:checked ~ label span.en { display: none; }
#ilo:checked ~ nav .collapsible { display: block; }
#ilo:checked ~ .cards { padding-top: 19em; }
#lukin:checked ~ ul li .g { filter: blur(.4em); }
#nimi:checked ~ ul li .n { filter: blur(.4em); }
#sona:checked ~ ul li .l { filter: blur(.4em); }
#sitelen:checked ~ ul li .g { font-family: linja-pona; }
#kule:checked ~ ul, #kule:checked ~ nav { filter: invert(100%); transition: .5s; }

.footer li {font-family: pona-pona; font-size: 1.5em;}
.title span {font-size: .8em; margin-left: .2em;}
.footer a {color: var(--f_low); text-decoration: none; border-bottom: 2px solid transparent;}
.footer a:hover {color: var(--f_high); text-decoration: none; border-bottom: 2px solid var(--f_high);}
.footer li { font-size: 1.5em; }
.title span { font-size: .8em; margin-left: .2em; }
.footer a { color: var(--f_low); text-decoration: none; border-bottom: 2px solid transparent; }
.footer a:hover { color: var(--f_high); text-decoration: none; border-bottom: 2px solid var(--f_high); }

@media screen and (max-width: 1600px) {
  body {font-size: .95em;}
  .cards {grid-gap: 1.25em; padding-left: 3em; padding-right: 3em;}
  body { font-size: .95em; }
  .cards { grid-gap: 1.25em; padding-left: 3em; padding-right: 3em; }
}
@media screen and (max-width: 1300px) {
  .cards {grid-gap: 1em; padding-left: 2em; padding-right: 2em;}
  #ilo:checked ~ .cards {padding-top: 18em;}
  .cards { grid-gap: 1em; padding-left: 2em; padding-right: 2em; }
  #ilo:checked ~ .cards { padding-top: 18em; }
}
@media screen and (max-width: 800px) {
  body {font-size: .8.5em;}
  .filters {padding: .25em 1em;}
  .filters label {padding: .85em}
  .cards {grid-gap: .75em; padding-left: 1em; padding-right: 1em;}
  #ilo:checked ~ .cards {padding-top: 17em;}
  body { font-size: .8.5em; }
  .filters { padding: .25em 1em; }
  .filters label { padding: .85em }
  .cards { grid-gap: .75em; padding-left: 1em; padding-right: 1em; }
  #ilo:checked ~ .cards { padding-top: 17em; }
}
@media screen and (max-width: 600px) {
  body {font-size: .8em ;}
  .filters {padding: .25em .5em;}
  .filters label {padding: .4em}
  #ilo:checked ~ nav .letters {display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25vw, 1fr));}
  .cards {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: .5em; padding-left: .5em; padding-right: .5em;}
  .cards {padding-top: 4em;}
  #ilo:checked ~ .cards {padding-top: 15em;}
  body { font-size: .8em ; }
  .filters { padding: .25em .5em; }
  .filters label { padding: .4em }
  #ilo:checked ~ nav .letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25vw, 1fr)); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: .5em; padding-left: .5em; padding-right: .5em; }
  .cards { padding-top: 4em; }
  #ilo:checked ~ .cards { padding-top: 15em; }
}