diff --git a/.eleventy.js b/.eleventy.js index c2d3ac3..5953f43 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -190,6 +190,24 @@ module.exports = function (eleventyConfig) { // use like {{ eleventyImage "images/blah.jpg" "classes" "alt" 300 }} eleventyConfig.addShortcode("eleventyImage", imageShortcode); + eleventyConfig.addShortcode("nav", function (url, label) { + let isActive = false; + if (url == "/") { + isActive = this.page.url == "/" || this.page.url.startsWith("/lipu/"); + } else { + isActive = this.page.url.startsWith(url); + } + const content = label + .split(" ") + .map((word) => { + return `${word}`; + }) + .join(" "); + return `
  • ${content}
    • `; + }); + return { markdownTemplateEngine: "hbs", }; diff --git a/_data/redirects.yaml b/_data/redirects.yaml index db38c5e..e37398b 100644 --- a/_data/redirects.yaml +++ b/_data/redirects.yaml @@ -177,4 +177,5 @@ - /author/jan-sonatan/: /sona/ - /author/kulupu-pi-lipu-tenpo/: /sona/ - /author/jan-alonola/: /sona/ -- /feed: /lipu/feed.xml \ No newline at end of file +- /feed: /lipu/feed.xml +- /lipu-ante/: /sona#lipu-ante diff --git a/_includes/page.hbs b/_includes/page.hbs index 81a1d43..24e0a49 100644 --- a/_includes/page.hbs +++ b/_includes/page.hbs @@ -40,22 +40,6 @@ scripts: [] {{/each}} - - - @@ -67,41 +51,35 @@ scripts: [] -
    -
    -

    - lipu tenpo li lon ma Patreon! - o lukin! -

    - -
    -
    -
    - - - lipu tenpo logo -

    lipu tenpo

    -     - -
    +
    +
    +
    + + + +
    +

    lipu tenpo

    +
    li alasa e jan pali sin
    +
    +
    + +
    + +
    +
    {{{ content }}}
    diff --git a/lipu-ante.hbs b/lipu-ante.hbs deleted file mode 100644 index 3752f7a..0000000 --- a/lipu-ante.hbs +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: page -title: "lipu tenpo - lipu ante" -css: - - stylesheet-lipu-ante.css ---- -
    -

    lipu ante

    -
    -
    - {{#each lipu_ante}} -
    -

    {{@key}}

    - -
    - {{/each}} -
    diff --git a/public/stylesheet-lipu-ante.css b/public/stylesheet-lipu-ante.css deleted file mode 100644 index a5d2e46..0000000 --- a/public/stylesheet-lipu-ante.css +++ /dev/null @@ -1,32 +0,0 @@ -.h2 { - text-align: center; - font-size: 3rem; - - display: flex; - justify-content: center; - align-items: center; -} -.h2 h2 { - padding: 0.5rem 2rem; - margin: 1rem 0 0; - - background-color: var(--colour-laso-walo); - color: var(--colour-laso-pimeja); - border-radius: var(--blob-border-radius-04); -} - -.lipu-ante { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: start; - margin: 0 1rem 1rem; -} -.lipu-ante .list { - max-width: 15rem; - margin: 1rem; -} -.lipu-ante li { - margin: 0.5rem; -} diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css index 72a05a5..05b3d9d 100644 --- a/public/stylesheet-sona.css +++ b/public/stylesheet-sona.css @@ -15,6 +15,17 @@ border-radius: var(--blob-border-radius-03); } +.esun-tawa-ni { + text-align: center; + font-size: 2rem; +} +.esun-tawa-ni img.icon { + height: 2rem; + width: auto; + filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(112deg) + brightness(106%) contrast(109%); +} + .ni-li-seme { display: flex; flex-direction: column; @@ -117,6 +128,36 @@ overflow-y: auto; } +.lipu-ante { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.lipu-ante h3 { + margin: 4rem 0 1rem; + font-size: 2rem; + padding: 0.5rem 2rem; + background-color: var(--colour-unu-walo); + color: var(--colour-unu-pimeja); + border-radius: var(--blob-border-radius-01); +} +.lipu-ante h4 { + text-align: center; +} +.lipu-ante .lists { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 1rem; +} +.lipu-ante .lipu-ante-wan { + margin: 0.5rem; +} +.lipu-ante li { + margin: 0.5rem; +} + .sona { text-align: center; margin-bottom: 2rem; diff --git a/public/stylesheet-toki-wan.css b/public/stylesheet-toki-wan.css index fe4ca20..f8cce19 100644 --- a/public/stylesheet-toki-wan.css +++ b/public/stylesheet-toki-wan.css @@ -3,12 +3,13 @@ flex-direction: column; justify-content: center; align-items: center; - margin: 1rem 1rem 3rem; + margin: 0 1rem 3rem; } h1 { font-size: 3rem; margin-bottom: 0; + margin-top: 0; text-align: center; } diff --git a/public/stylesheet.css b/public/stylesheet.css index 4403de6..b6029f6 100644 --- a/public/stylesheet.css +++ b/public/stylesheet.css @@ -74,6 +74,11 @@ body { min-height: 100vh; position: relative; } + +body { + background-color: var(--background); +} + h2, h3, h4, @@ -82,56 +87,23 @@ h6 { font-family: "Bricolage Grotesque", sans-serif; } -.patreon-banner { - position: fixed; - top: -10rem; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - z-index: 100; - transition: top 1s cubic-bezier(0.21, -0.53, 0.82, 1.43); -} -.patreon-banner.visible { - top: 0; -} -.patreon-banner div { - background-color: var(--logo-primary); - color: white; - padding: 0.5rem; - margin: 0.5rem 2rem; - border-radius: 1rem; - box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black; +.poki-insa { + align-self: center; display: flex; + flex-direction: column; justify-content: center; -} -.patreon-banner p { - margin: 0; -} -.patreon-banner a { - color: var(--logo-secondary); - text-decoration: underline; -} -.patreon-banner a:hover { - color: var(--logo-secondary-dark); -} -.patreon-banner button.close { - background-color: transparent; - border: none; - color: white; - margin-left: 1rem; - cursor: pointer; + max-width: 60rem; + padding: 0 2rem; + width: 100%; } header { - font-family: "Bogface", sans-serif; - padding: 1rem 1rem 0; - display: grid; - grid-template-columns: fit-content(100%); - justify-content: center; - position: relative; + align-items: flex-start; + display: flex; + flex-flow: row wrap; + font-family: "Bricolage Grotesque", sans-serif; + justify-content: space-evenly; + margin-top: 3rem; } header #banner { position: absolute; @@ -144,78 +116,98 @@ header #banner { z-index: -5; background-color: var(--background); } -header a.title { - text-decoration: none; - color: white; -} -header .title { - background-color: var(--background); - display: flex; +header .sewi-lipu { align-items: center; - justify-content: center; - padding: 1rem 1rem 0; - border-top-left-radius: 2rem; - border-top-right-radius: 2rem; - position: relative; -} -header .title::before { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - border-top-left-radius: 2rem; - border-top-right-radius: 2rem; - box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black; + display: flex; + margin: 0 4rem 1.5rem 1.5rem; } -header .title img { +header .logo { width: 5rem; height: auto; } -header .title h1 { +header h1 { font-size: 2rem; - margin: 0; - margin-left: 1rem; + margin: 0 0 0.2rem 1rem; + text-align: left; } -header nav { - background-color: var(--background); - padding: 0 1rem 1rem; - position: relative; +header h1 a { + color: white; + text-decoration: none; } -header nav::before { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - border-bottom-left-radius: 2rem; - border-bottom-right-radius: 2rem; - box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black; +header .subtitle { + font-size: 1.4rem; + font-weight: bold; + margin: 0 0 0.5rem 1rem; +} +header .subtitle a { + color: var(--colour-kiwen); + text-decoration: none; +} +header .subtitle a:hover { + text-decoration: underline; } header nav ul { + align-items: flex-start; + display: flex; + flex-wrap: wrap; list-style: none; margin: 0; padding: 0; - display: grid; - grid-template-columns: 1fr; - align-items: center; +} +header nav { + margin: 1rem 0.5rem 0 0; +} +header nav li { + line-height: 1; + position: relative; + top: -1.5rem; +} +header nav li a { + padding: 1.5rem; + display: block; + border-radius: var(--blob-border-radius-02); +} +header nav li.active a { + background-color: var(--colour-unu-walo); +} +header nav li.active a { + color: var(--primary-700); +} +header nav li.active .sitelen-tu::before { + color: var(--primary-700); } header nav a { color: white; + font-size: 1.4rem; + text-align: left; + text-decoration: none; +} +.sitelen-tu::before { + color: var(--primary-200); + content: attr(data-text); + display: inline-block; + font-family: "sitelen seli kiwen", sans-serif; + margin-right: 0.5rem; text-align: center; + width: 1.5rem; +} +.sitelen-tu { display: block; - width: 100%; - font-size: 1.5rem; - text-decoration: none; - padding: 1rem; - border-radius: 0.5rem; } -header nav a:hover { - background-color: var(--primary-300); +header nav a:hover .sitelen-tu { + text-decoration: underline; +} + +hr.anpa-sewi { + background-color: var(--colour-pimeja-lili); + height: 4px; + border-width: 0; + border-bottom: 2px solid black; + margin: 0 0 1rem; } main { - background-color: var(--background); - padding: 1rem 0 3rem; - box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black; + padding: 0 0 1rem 0; flex-grow: 1; } @@ -226,46 +218,6 @@ main a:hover { color: var(--primary-200); } -@media (min-width: 15rem) { - header nav ul { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: 35rem) { - header nav ul { - grid-template-columns: repeat(4, 1fr); - } -} - -@media (min-width: 52rem) { - header { - height: 20rem; - display: flex; - justify-content: space-between; - align-items: end; - padding: 0; - } - header .title { - border-top-left-radius: 0; - height: 7rem; - } - header nav { - border-radius: 2rem 0 0; - padding: 1rem; - height: 7rem; - display: flex; - justify-content: space-between; - align-items: center; - } - header nav ul { - height: 100%; - } - header nav::before { - border-radius: 2rem 0 0; - } -} - footer { font-family: "Andika", sans-serif; background-color: var(--logo-primary); diff --git a/sona.hbs b/sona.hbs index 1527060..fb7bc64 100644 --- a/sona.hbs +++ b/sona.hbs @@ -9,23 +9,32 @@ css:

    sona

    -
    +
    +

    + + patreon icon + esun tawa mi! (Patreon) + +

    +
    + +

    ni li seme?

    {{#each sona.[ni-li-seme]}}

    {{question}}

    {{{markdown answer}}} {{/each}} -
    + -
    +

    FAQ

    {{#each sona.faq}}

    {{question}}

    {{{markdown answer}}} {{/each}} -
    + -
    +

    nimi pi pu ala

    o lukin e linluwi...

    -
    + -
    +

    jan pali

    {{#each jan_pali}} @@ -61,7 +70,30 @@ css:

    jan jelo li pali lon tenpo ni. jan walo li pali lon tenpo pini.

    -
    + + +
    +

    lipu ante

    +
    + {{#each lipu_ante}} +
    +

    {{@key}}

    + +
    + {{/each}} +
    +
    +