~lectronice/pimeja

1caf5882f37a6734f9fca4b0746886c30fd1e18c — lectronice 9 months ago e60228a
Mobile tweaks, cleaned up a bit, added a readme file.
3 files changed, 95 insertions(+), 179 deletions(-)

M index.html
A readme.md
M style.css
M index.html => index.html +10 -14
@@ 1,15 1,12 @@
<!--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
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta charset="utf-8"/>
    <title>pimeja</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <body id ="top">
    <div class="main">
      <input type="radio" id="all-letters" name="letters" value="all-letters" checked>
      <input type="radio" id="a" name="letters" value="a">


@@ 741,14 738,13 @@
          <div class="l en"><em>pre-verb</em>must, need, require, should, want, wish</div>
          <div class="l fr"><em>auxiliaire</em>devoir, avoir besoin de, vouloir</div>
        </li>
        <!-- empty
        <li class="card" data-category="">
          <div class="g"></div><div class="n"></div>
          <div class="l en"><em></em></div>
          <div class="l fr"><em></em></div>
        </li>-->
      </ul>
			<ul class="filler"></ul>
      <ul class="filters footer">
        <li><div class="title"><a href="https://git.sr.ht/~lectronice/pimeja">pimeja<span> 0.3</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>
      </ul>
    </div>
  </body>
</html>

A readme.md => readme.md +20 -0
@@ 0,0 1,20 @@
# 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.

## 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.

## Who?
- Inter font by Rasmus Andersson.
- sitelen pona pona font by Jack Humbert.
- linja pona font by David A Roberts.

Special thanks to Russ Sharek for his feedback and suggestions.

## Inspiration
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

M style.css => style.css +65 -165
@@ 7,91 7,25 @@
  --b_med: #131313;
  --b_low: #111;
  --b_inv:;
  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: 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");}

html {scroll-behavior: smooth; box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
html, body {margin: 0; padding: 0; height: 100%;}

html { scroll-behavior: smooth; box-sizing: border-box; }
*, *:before, *:after {box-sizing: inherit; }
body { font-family: "Inter"; background: var(--b_low);}
label { cursor: pointer; }
input { position: absolute; left: -9999px; }

ul {
    color: var(--f_med);
    background: var(--b_low);
    list-style: none;
    margin: 0;
    padding: 0;
}


ul, .g, .n, .l {
  transition: .5s;
}

.main {
  height: 100%;
}

.filters {
  text-align: center;
  padding: 1rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.5rem 1rem;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
  border-bottom: 2px solid transparent;
}

.filters label:hover {
  border-bottom: 2px solid;
}

.options, .menu { font-size: 1.5em; }

nav {
  z-index: 1;
  top: 0;
  position: fixed;
  width: 100%;
}

.menu, .letters, .types, .options {
}

.cards {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 5em 8em 2em 8em;
}

.card {
  background: var(--b_med);
  xborder: 1px solid rgba(0, 0, 0, 0.1);
  padding: .75em 1em;
  border-radius: .5em;
}

.filler {
    background: var(--b_low);
}
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;}

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


@@ 108,7 42,6 @@ nav {
[value="t"]:checked ~ .filters [for="t"],
[value="u"]:checked ~ .filters [for="u"],
[value="w"]:checked ~ .filters [for="w"],

[value="all-types"]:checked ~ .filters [for="all-types"],
[value="adjective"]:checked ~ .filters [for="adjective"],
[value="noun"]:checked ~ .filters [for="noun"],


@@ 116,14 49,10 @@ nav {
[value="particle"]:checked ~ .filters [for="particle"],
[value="pre-verb"]:checked ~ .filters [for="pre-verb"],
[value="preposition"]:checked ~ .filters [for="preposition"],
[value="verb"]:checked ~ .filters [for="verb"] {
  border-bottom: 2px solid;
}
[value="verb"]:checked ~ .filters [for="verb"] {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"]),


@@ 145,87 74,58 @@ nav {
[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;
}

em {
    font-style: normal;
    margin-right: .5em;
    color: var(--f_low);
    text-transform: uppercase;
    font-size: .75em;
}

.g {
    font-family: pona-pona;
    float: left;
    font-size: 1.5em;
    line-height: .5em;
    padding: 1em;
}

.n {
    font-size: 1.25em;
    line-height: 3em;
}

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 { filter: invert(100%); transition: .5s; }
[value="verb"]:checked ~ .cards .card:not([data-category~="verb"]) {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;}

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);}

@media screen and (max-width: 1600px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 4em;
    padding-right: 4em;
  }
  body {font-size: .95em;}
  .cards {grid-gap: 1.25em; padding-left: 3em; padding-right: 3em;}
}

@media screen and (max-width: 1300px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 3em;
    padding-right: 3em;
  }
  .cards {grid-gap: 1em; padding-left: 2em; padding-right: 2em;}
  #ilo:checked ~ .cards {padding-top: 18em;}
}

@media screen and (max-width: 800px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media screen and (max-width: 750px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
    padding-left: 1em;
    padding-right: 1em;
  }
  #ilo:checked ~ .cards { padding-top: 23em; }
}

/*
.card {
    padding: .8em 1em;
    border-radius: 4em;
    margin: 1em 0;

    display: grid;
    grid-template-columns: 8em 9.5em auto 2em;
    grid-template-columns: 8em 9.5em auto;
    grid-template-rows: 1fr;
    grid-column-gap: .25em;
    grid-row-gap: 0px;
  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;}
}
*/