Upload 128 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+themes/hugo-brewm/images/screenshot.png filter=lfs diff=lfs merge=lfs -text

themes/hugo-brewm/.github/workflows/hugo.yml

@@ -0,0 +1,78 @@
+# Workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo Site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-24.04-arm
+    env:
+      HUGO_VERSION: 0.143.1
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-arm64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/" 
+      - name: Index pagefind
+        run: npx pagefind --source "./public"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3.0.1
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-24.04-arm
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4.0.5

themes/hugo-brewm/.github/workflows/hugo_exampleSite.yml

@@ -0,0 +1,80 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo exampleSite to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-24.04-arm
+    env:
+      HUGO_VERSION: 0.143.1
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-arm64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --themesDir ../.. \
+            --source exampleSite \
+            --baseURL "${{ steps.pages.outputs.base_url }}/" 
+      - name: Index pagefind
+        run: npx pagefind --source "./exampleSite/public"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3.0.1
+        with:
+          path: ./exampleSite/public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-24.04-arm
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4.0.5

themes/hugo-brewm/.gitignore

@@ -0,0 +1,2 @@
+.hugo_build.lock
+public

themes/hugo-brewm/.gitlab-ci.yml

@@ -0,0 +1,45 @@
+# Use this template if you want to build your site with Gitlab pages.
+
+image:
+  name: golang:1.23.4-bookworm
+
+variables:
+  GIT_DEPTH: 0
+  GIT_STRATEGY: clone
+  GIT_SUBMODULE_STRATEGY: recursive
+  HUGO_VERSION: 0.143.1
+  NODE_VERSION: 23.x
+
+pages:
+  script:
+    # Install brotli
+    - apt-get update
+    - apt-get install -y brotli
+    # Install Dart Sass
+    # hugo-brewm don't use Dart Sass at the moment.
+    # - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+    # - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+    # - cp -r dart-sass/ /usr/local/bin
+    # - rm -rf dart-sass*
+    # - export PATH=/usr/local/bin/dart-sass:$PATH
+    # Install Hugo
+    - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    - apt-get install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    # Install Node.js
+    - curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION} | bash -
+    - apt-get install -y nodejs
+    # Install Node.js dependencies
+    - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+    # Build
+    - hugo --gc --minify --baseURL ${CI_PAGES_URL}
+    # Index with PageFind
+    - npx pagefind --site "public"
+    # Compress
+    - find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec gzip -f -k {} \;
+    - find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec brotli -f -k {} \;
+  artifacts:
+    paths:
+      - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

themes/hugo-brewm/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 foxihd @ github.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

themes/hugo-brewm/README.md

@@ -0,0 +1,228 @@
+# Hugo Brewm
+
+> Fine-brewed Hugo theme made open.
+
+Demosite: [https://foxihd.github.io/hugo-brewm/en/](https://foxihd.github.io/hugo-brewm/en/)
+
+## Feature Highlights
+
+- **Reader-first**: Prioritizes readability and accessibility with personalized settings for colors, fonts, and BionRead mode.
+- **Inclusive**: Graceful degradation design oriented with improved semantic HTML structure & WAI-ARIA attribute, the site remains fully functional even when JavaScript is disabled!
+- **Scalable**: Support for multiple authors and languages, optional Pagefind search, external feed over RSS and Fediverse-powered commenting system.
+- **Frameworkless**: Lower maintenace & carbon footprint by lesser resource usage.
+
+## Installation
+
+1. Create a new Hugo site (for an existing hugo site, skip to step 2) :
+
+```
+hugo new site mysite
+cd mysite
+git init
+```
+
+2. Add this theme as a Git submodule:
+
+```
+git submodule add https://github.com/foxihd/hugo-brewm themes/hugo-brewm
+```
+
+3. Update your site's configuration in `config.toml`:
+
+```
+theme = "hugo-brewm"
+```
+
+## Configuration
+
+### Configuration options
+
+The following configuration options are available for hugo-brewm:
+
+```toml
+## Base URL for the site
+baseURL = 'https://foxihd.github.io/hugo-brewm/'
+## Site title
+title = 'Example'
+## Use hugo-brewm theme
+theme = 'hugo-brewm'
+## Enable Git information for pages, (e.g. lastMod date information)
+enableGitInfo = true
+## Convert all URLs to absolute URLs
+canonifyURLs = true
+## Default language for content
+defaultContentLanguage = 'en'
+## Put default language in subdirectory
+defaultContentLanguageInSubdir = true
+## Use sections for main menu
+# sectionPagesMenu = 'main'
+## Files to ignore when building site
+ignoreFiles = [ '\.redacted', '\.old','\.bak', '\.tmp', '\.swp', '\.DS_Store']
+
+## Enable code fence highlighting
+[markup]
+    [markup.highlight]
+        codeFences = true
+
+## Sitemap configuration
+[sitemap]
+    ## Change frequency setting (will affect posts listings layout): 'always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never'
+    changeFreq = 'monthly'
+
+## Site parameters
+[params]
+    ## Site title
+    title = "Example"
+    ## Site description
+    description = "An ExampleSite built with Hugo and Hugo-Brewm theme"
+    ## Copyright notice
+    copyright = "Copyright 2025 (c) Foxxi"
+    ## Enable extended metadata (social cards)
+    extMeta = true
+    ## Enable coffee metric
+    coffeeStat = true
+
+    ## Author information
+    [params.author]
+        ## site author's name
+        name = 'Author Name'
+        ## Author's email (will be used for RSS feed)
+        email = 'email@example.com'
+        ## Other method to customize author and co-authors information
+        coauthor = [
+            {name = "A.N. Other", bio = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}
+        ]
+
+    ## Comments configuration
+    [params.comments]
+        ## Disable comments (disable fediverse comments)
+        disabled = false
+        ## Comment platform selection, currently only 'fediverse' is supported, further options to be determined
+        # platform = 'fediverse'
+
+    ## Fediverse integration settings
+    [params.fediverse]
+        ## Fediverse instance URL
+        instance = 'example.com'
+        ## Fediverse username
+        username = 'username'
+
+    ## Logo configuration
+    [params.logo]
+        ## Light mode logo mark
+        logoMark = 'https://example.com/logoMark.svg'
+        ## Dark mode logo mark
+        logoMarkDark = 'https://example.com/logoMarkDark.svg'
+        ## Enable logo type
+        logoType = true
+
+    ## Feed display settings
+    [params.feed]
+        ## Enable flowlines
+        flowlines = true
+        ## Limit number of flowlines
+        flowlinesLimit = 21
+
+    ## Home page display settings
+    [params.home]
+        ## Disable slide carousel
+        disableSlide = false
+        ## Disable taxonomy listing carousel
+        disableListing = false
+
+    ## Post display settings
+    [params.posts]
+        ## Enable text justification
+        justifying = false
+        ## Disable paragraph indentation
+        noIndent = false
+        ## Show colophon section (including QR code)
+        colophon = true
+        ## disable redaction history
+        disableHistory = false
+        ## SHow related content
+        related = true
+        ## Show share buttons
+        share = true
+
+    ## Search configuration
+    [params.search]
+        ## Enable search functionality, use duckduckgo (no javascript)
+        enable = true
+        ## Use pagefind search when javascript enabled, currently only 'pagefind' is supported, further options to be determined
+        pagefind = true
+
+    ## Typography settings
+    [params.typeface]
+        ## Use web safe fonts (will overide font selection below)
+        webSafe = false
+        ## Serif font selection
+        roman = 'crimson'
+        ## Sans-serif font selection
+        sans = 'inter'
+
+    ## Extended Metadata and Social card configuration
+    [params.socialCard]
+        ## Enable twitter and opengraph social cards (same as .params.extMeta)
+        enable = true
+        ## Default social card image, recommended resolution: 1200 x 630px
+        # image = "img/social-share.jpg" 
+        ## Enable Twitter cards
+        # twitter = true
+        ## Twitter creator handle
+        # twitterCreator = "@username"
+        ## Twitter site handle
+        # twitterSite = "@username"
+
+        ## Enable OpenGraph
+        # opengraph = true
+        ## Facebook App ID
+        # facebookAppID = "123456789"
+        ## Facebook Admin ID
+        # facebookAdmin = "USER_ID"
+
+        ## Schema.org (EXPERIMENTAL, not fully supported body tags)
+        # schema = true
+        ## JsonLD (EXPERIMENTAL, cannot validate permalink)
+        # jsonLD = true
+```
+
+### Configuration for GitHub Pages Deployment
+
+To deploy your Hugo site with PageFind on GitHub Pages, simply copy the workflow file located at [./themes/hugo-brewm/github/workflows/hugo.yml](https://github.com/foxihd/hugo-brewm/blob/main/.github/workflows/hugo.yml) into your repository's workflow directory and start the GitHub Action.
+
+### Configuration for Gitlab Pages Deployment
+
+To deploy your Hugo site with PageFind on Gitlab Pages, copy the workflow file from [./themes/hugo-brewm/.gitlab-ci.yml](https://github.com/foxihd/hugo-brewm/blob/main/.gitlab-ci.yml) to your repository's workflow directory and start the Gitlab CI/CD pipeline.
+
+## Translation
+
+We currently only support Indonesian and English.
+Please feel free to contribute to additional [translation](https://github.com/foxihd/hugo-brewm/blob/main/i18n/).
+
+
+## Special Thanks
+
+This project could not be made, without a lot efforts of — thank to:
+
+- [Aliftype/amiri](https://github.com/aliftype/amiri) - for Amiri.
+- [Alvarotrigo on Codepen](https://codepen.io/alvarotrigo/pen/rNbxNWg) - for Logotype.
+- [Antijingoist/opendyslexic/](https://github.com/antijingoist/opendyslexic/) - for OpenDyslexic typeface.
+- [Datalog/qrcode-svg](https://github.com/datalog/qrcode-svg) - for page QR code generation.
+- [Dpecos/mastodon-comments](https://github.com/dpecos/mastodon-comments) - for Mastodon comments.
+- [Georgd/EB-Garamond](https://github.com/georgd/EB-Garamond), [Imedadel/typeface-eb-garamond-latest/](https://github.com/imedadel/typeface-eb-garamond-latest/) & [Googlefonts/ebgaramond-specimen/](https://github.com/googlefonts/ebgaramond-specimen/) - for serif typeface.
+- [GoogleFonts/Inconsolata](https://github.com/googlefonts/Inconsolata) - for teletype typeface.
+- [IcoMoon](https://icomoon.io) - for icon font.
+- [JulietaUla/Montserrat](https://github.com/JulietaUla/Montserrat) - for sans-serif typeface.
+- [Markmead/JS Bionic Reading](https://github.com/markmead/js-bionic-reading) - for BionRead support.
+- [Mrozilla on codepen](https://codepen.io/mrozilla/pen/OJJNjRb) - for dark/light mode toggle style.
+- [Msurguy/Flow Lines](https://github.com/msurguy/flow-lines) - for generated feature images.
+- [Omnibus-Type/Rosario](https://github.com/Omnibus-Type/Rosario) - for sans-serif typeface.
+- [Risilab/Cormorant](https://github.com/risilab/cormorant) - for serif typeface.
+- [Rsms/Inter](https://github.com/rsms/inter) - for sans-serif typeface.
+- [Skoch/Crimson](https://github.com/skosch/Crimson) - for serif typeface.
+- [Slashformotion/Hugo Tufte](https://github.com/slashformotion/hugo-tufte) - for figure & marginpar shortcodes.
+
+## License
+
+This theme is released under the MIT License.

themes/hugo-brewm/archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

themes/hugo-brewm/assets/css/component/a11y.css

@@ -0,0 +1,355 @@
+/* a11y button */
+
+#has-a11y {
+    margin-right: auto;
+}
+
+#has-a11y-summary {
+    padding: .6ex 1ex;
+    font-weight: 700;
+}
+
+#has-a11y-summary::before{
+    font-family: 'base-ui';
+    font-weight: 400;
+    content: '\e900';
+}
+
+#has-a11y[open] #a11y {
+    --anm: expand 99ms forwards;
+    --tso: bottom;
+}
+
+/* a11y container */
+#a11y {
+    display: flex;
+    position: fixed;
+    bottom: calc(1rem + var(--vfoot));
+    flex-direction: column;
+    margin: 0;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1rem;
+    max-height: calc(100vh - var(--vhead) - var(--vfoot) - 2rem );
+    overflow-y: auto;
+    gap: var(--medskip);
+}
+
+/* hide input checkbox */
+#a11y input[type=checkbox],
+#a11y input[type=radio],
+#bionReadSwitch {
+    position: absolute;
+    top: -100vh;
+}
+
+#a11y select,
+#a11y input[type=range],
+#setColorScheme label,
+#setOpenDyslexic,
+button {
+    cursor: pointer;
+}
+
+/* range */
+label.range {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+label.range > input {
+    flex: 1;
+    accent-color: var(--ac);
+}
+
+label.range > output {
+    width: 4rem;
+    text-align: center;
+    color: var(--ac);
+    font: 700 var(--large) var(--sf), sans-serif;
+}
+
+#setColorScheme {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1ex;
+}
+
+/* lightswitch */
+#lightSwitch + label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 0.5ex;
+    padding: 1ex;
+    width: 4rem;
+    font-weight: 700;
+    gap: 1ex;
+}
+
+#lightSwitch:hover + label,
+#lightSwitch:focus + label,
+#setContrast > input:hover + label {
+    background: var(--g18s);
+    color: var(--ac);
+}
+
+/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */
+input + label > #lightSwitchIndicator {
+    --ray-size: calc(var(--size) * -0.4);
+    --offset-orthogonal: calc(var(--size) * 0.65);
+    --offset-diagonal: calc(var(--size) * 0.45);
+    --tsf: scale(0.75);
+    --size: 1.414em;
+    display: block;
+    outline: none;
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 var(--size),
+        calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+        var(--offset-orthogonal) 0 0 var(--ray-size),
+        0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+        0 var(--offset-orthogonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+        var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+        var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+    width: var(--size);
+    height: var(--size);
+    color: #ffaa00;
+}
+
+input:checked + label > #lightSwitchIndicator {
+    --tsf: scale(1);
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+}
+
+/* contrast */
+#setContrast {
+    display: flex;
+    position: relative;
+    flex: 1;
+    justify-content: center;
+    margin: 0 0 0 1ex;
+    border: none;
+    border-left: var(--bound);
+    padding: 2.5em 0 0 1ex;
+}
+
+#setContrast legend {
+    position: absolute;
+    top: 0;
+    padding: 1ex;
+}
+
+#setContrast label {
+    -webkit-transition: 99ms;
+       -moz-transition: 99ms;
+         -o-transition: 99ms;
+            transition: 99ms;
+    border-radius: 1rem;
+    padding: 3pt 7pt;
+    font-size: 0.84em !important;
+}
+
+#setContrast > input:checked + label {
+    background: var(--fg);
+    color: var(--bg);
+}
+
+#setContrast > input + label::before {
+    font-family:'base-ui';
+    content: '\e904\a0';
+}
+
+#setContrast > input:checked + label::before {
+    content: '\e903\a0';
+}
+
+/* color palette */
+#setColorPalette {
+    align-items: baseline;
+}
+
+#setColorPalette > *,
+#setOpenDyslexic > * {
+    padding: 1ex 0;
+}
+
+#colorPalette {
+    flex: 1;
+    margin-left: 0.5ex;
+    border: unset;
+    border-radius: 1rem;
+    background: var(--bg);
+    padding: 0.5ex 1.25ex;
+    color: var(--fg);
+    font: inherit !important;
+}
+
+/* font */
+#baselineStretchState::after {
+    font-size: 0.8em;
+    content: '×';
+}
+
+#fontSizeState::after {
+    font-size: 0.8em;
+    content: 'pt';
+}
+
+#setOpenDyslexic > label {
+    display: flex;
+    align-items: center;
+}
+
+#OpenDyslexicState {
+    display: flex;
+    margin-left: auto;
+    border-radius: 1em;
+    background: #80808080;
+    width: 2.4em;
+    height: 0.8em;
+}
+
+#OpenDyslexicIndicator {
+    --tst: 0.5s ease-out;
+    position: relative;
+    align-self: center;
+    border: 1pt solid #80808008;
+    border-radius: 1em;
+    box-shadow: var(--box-shadow-focus);
+    background: #fff;
+    padding: 6pt;
+}
+
+#OpenDyslexic:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:focus + label #OpenDyslexicIndicator {
+    --anm: grab 3s ease-out 3;
+}
+
+#OpenDyslexic:checked:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:checked:focus + label #OpenDyslexicIndicator {
+    --anm: unset;
+}
+
+#OpenDyslexic:checked + label #OpenDyslexicIndicator {
+    left: 1.3em;
+}
+
+@keyframes grab {
+    0%, 10%, 20%, 100% {
+        left: 0;
+    }
+    5%, 15% {
+        left: 3pt;
+    }
+}
+
+@-webkit-keyframes grab {
+    0%, 20%, 40%, 100% {
+        left: 0;
+    }
+    10%, 30% {
+        left: 3pt;
+    }
+}
+
+/* menu */
+#a11y-menu {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    gap: 1ex;
+}
+
+#a11y-menu > button {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    border: unset;
+    padding: 1ex;
+}
+
+#a11y-menu > .has-aria-label {
+    background: unset;
+    color: var(--fg);
+}
+
+#a11y-menu > .has-aria-label::before {
+    margin: auto;
+    padding: 0.25rem 0.5rem;
+}
+
+#a11y-menu .has-aria-label:after {
+    font-size: 0.7em;
+}
+
+#resetButton::before {
+    font-family: 'base-ui';
+    content: '\e90f';
+}
+
+#closeButton::before {
+    font-family: 'base-ui';
+    content: '\e913';
+}
+
+#bionReadButton,
+#saveButton {
+    flex: 1;
+    margin-left: auto;
+    cursor: pointer;
+}
+
+/* bionRead */
+b.k {
+    vertical-align: baseline;
+    letter-spacing: var(--bion);
+    color: var(--off);
+    font-weight: 400 !important;
+    -webkit-text-stroke: var(--bion) var(--off);
+    font-synthesis: weight;
+}
+
+#useBionRead {
+    display: none;
+    margin: auto;
+    letter-spacing: 0.1em;
+    font-size: var(--footnotesize);
+}
+
+legend,
+.has-aria-label-top:before,
+#setColorPalette > label,
+input + label > span {
+    font-weight: 700;
+}
+
+#setContrast > input + label > span {
+    font-weight: 400;
+}
+
+#bionReadButton > span {
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+#noScript,
+#noLocalStorage {
+    margin: auto;
+    border-top: var(--bound);
+    padding-top: 1rem;
+    max-width: 20rem;
+}
+
+@media only screen and (max-width: 640px) {
+
+    #has-a11y > summary > span {
+        display: none;
+    }
+
+}

themes/hugo-brewm/assets/css/component/background.css

@@ -0,0 +1,98 @@
+#background-footer,
+#background-header,
+#background-body {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -2;
+    width: 100vw;
+    height: 100vh;
+}
+
+#background-footer,
+#background-header,
+#background-body,
+#a11y,
+#lightSwitchIndicator,
+#setContrast,
+#colorPalette,
+ul.carousel__viewport > li > a > span::before,
+ul.carousel__viewport > li > a > span::after,
+ul.carousel__viewport > li > a > span,
+#list-categories a:hover::after,
+.letterine > i {
+    -webkit-transition: var(--flashGuard);
+       -moz-transition: var(--flashGuard);
+         -o-transition: var(--flashGuard);
+            transition: var(--flashGuard);
+}
+
+#background-body,
+.background {
+    background-color: var(--bg);
+}
+
+#background-header {
+    /* border-bottom: var(--border); */
+    height: var(--vhead);
+}
+
+#background-footer {
+    top: unset;
+    bottom: 0;
+    /* border-top: var(--border); */
+    height: var(--vfoot);
+}
+
+/* grain */
+
+.grain,
+#grain {
+    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' viewBox='0 0 256 256' width='256' height='256' opacity='1' id='svgrain' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'><defs id='defs'><filter id='grain' x='0' y='0' width='1' height='1' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'><feTurbulence type='turbulence' baseFrequency='0.7' numOctaves='7' seed='42' stitchTiles='stitch' x='-1%' y='-1%' width='102%' height='102%' result='turbulence' id='feTurbulence' /><feSpecularLighting surfaceScale='7' specularConstant='3' specularExponent='10' lighting-color='%23ffffff' x='-1%' y='-1%' width='102%' height='102%' in='turbulence' result='specularLighting' id='feSpecularLighting'><feDistantLight azimuth='3' elevation='163' id='feDistantLight4' /></feSpecularLighting></filter></defs><rect width='320' height='320' fill='%23000000' id='blackbody' x='-32' y='-32' opacity='0.03' /><rect width='320' height='320' fill='%23ffffff' filter='url(%23grain)' id='noise' x='-32' y='-32' opacity='0.03' /></svg>");
+    mix-blend-mode: difference;
+}
+
+#grain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+/* distraction */
+
+#dwclock {
+    opacity: 0.33;
+    margin: auto;
+    width: 100vmin;
+    height: 100vmin;
+    filter: blur(2vmin) saturate(2);
+}
+
+#hour,
+#min {
+    position: absolute;
+    width: 100vmin;
+    height: 100vmin;
+}
+
+.hand {
+    --min: 40vmin;
+    --hour: 28vmin;
+    --tsf: translateY(calc(50vmin - var(--min)));
+    margin: 0 auto auto ;
+    border-right: 2vmin solid transparent;
+    border-bottom: var(--min) solid #60f;
+    border-left: 2vmin solid transparent;
+    border-radius: 2vmin;
+    background-image: linear-gradient(0deg, var(--bg) 0%, #60f 100%);
+    width: 3vmin;
+    height: var(--min);
+}
+
+#hour .hand {
+    --tsf: translateY(calc(50vmin - var(--hour)));
+    border-bottom: var(--hour) solid #20f;
+    background-image: linear-gradient(0deg, var(--bg) 0%, #20f 100%);
+    height: var(--hour);
+}

themes/hugo-brewm/assets/css/component/breadcrumb.css

@@ -0,0 +1,116 @@
+main > header.pagewidth {
+    margin-top: var(--medskip);
+    padding-left: calc(var(--void) - 0.5ex - 4pt);
+    height: 2.5rem;
+}
+
+#back {
+    display: inline-flex;
+    position: relative;
+    top: 2.8pt;
+    float: left;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+
+#back::before,
+header > menu a::before {
+    padding: 6pt 9pt;
+    font-size: var(--large);
+}
+
+#rss-button::before {
+    font-family: 'base-ui';
+    content: '\e910';
+}
+
+#print-button::before {
+    font-family: 'base-ui';
+    content: '\e90c';
+}
+
+#navigatorShare::before {
+    font-family: 'base-ui';
+    content: '\e912';
+}
+
+#copyPermalink::before {
+    font-family: base-ui;
+    content: '\e905';
+}
+
+main > header > menu {
+    float: right;
+    visibility: hidden;
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+    font-size: 1.1rem;
+}
+
+main#term > header > menu,
+main#page > header > menu {
+    visibility: visible;
+}
+
+main#term #print-button {
+    visibility: hidden;
+}
+
+main > header > menu > li,
+ul.breadcrumb > li {
+    display: inline;
+}
+
+main > header > menu > li > a {
+    opacity: 0.86;
+    color: var(--fg) !important;
+}
+
+.pagination .rfill a::before,
+.carousel__viewport__slide:last-child > nav a::before,
+#back::before {
+    --tsf: rotate(-90deg) translateX(1pt);
+    font-family: base-ui;
+    content: '\e902';
+}
+
+#has-breadcrumb a {
+    margin: 2pt;
+    padding: 0.5ex;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    color: var(--fg);
+    font-size: var(--small);
+}
+
+ul.breadcrumb {
+    display: block;
+    padding: 5pt 0;
+    overflow: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+header > menu a {
+    display: inline-flex;
+    position: relative;
+}
+
+ul.breadcrumb > li:last-child a {
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -webkit-touch-callout: none;
+}
+
+ul.breadcrumb > li + li:before {
+    color: var(--mid);
+    content: '/';
+}

themes/hugo-brewm/assets/css/component/card.css

@@ -0,0 +1,167 @@
+.feed-item {
+    position: relative;
+    transition: 99ms;
+    margin: var(--medskip) auto var(--medskip) 0;
+    padding: 1rem;
+    width: var(--golden-ratio);
+    font-size: var(--small);
+}
+
+.feed-item:hover,
+.feed-item:focus-within {
+    --tsf: scale(1.01);
+}
+
+.feed-item * {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.feed-item h1 {
+    margin: 8pt 0 0 0;
+    font-size: var(--Large);
+    font-weight: 700;
+}
+
+.feed-item img {
+    width: auto;
+    height: auto;
+    max-height: 38vh;
+    aspect-ratio: 10/8;
+    object-fit: cover;
+}
+
+.feed-item .par {
+    --grd: linear-gradient(var(--off) 50%, transparent 100%);
+    opacity: 0.86;
+    margin-right: auto;
+    -webkit-mask-image: var(--grd);
+            mask-image: var(--grd);
+    clip-path: text;
+}
+
+.feed-item img + .par {
+    width: var(--golden-ratio);
+}
+
+.feed-item > a {
+    position: absolute;
+    top: 2.5rem;
+    right: 0;
+    bottom: 3rem;
+    left: 0;
+    transition: 0.2s;
+    z-index: 1;
+}
+
+.feed-item > a:hover,
+.feed-item > a:focus {
+    top: 0;
+    bottom: 0;
+    background-color: #80808008;
+}
+
+.feed-item > hgroup {
+    display: flex;
+    flex-direction: column;
+}
+
+.feed-item > section {
+    display: flex;
+    flex-direction: row-reverse;
+    margin: 8pt 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    gap: 1rem;
+}
+
+.feed-item > section.has-cover {
+    aspect-ratio: 10/3;
+}
+
+.feed-item > footer,
+.feed-item > hgroup > div {
+    display: flex;
+    flex-flow: nowrap;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.feed-item > footer > ul,
+.feed-item > hgroup > div > span {
+    display: block;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    text-overflow: ellipsis;
+}
+
+.feed-item > hgroup > div > div {
+    margin-left: auto;
+    padding-left: 1rem;
+}
+
+.feed-item > footer > ul {
+    text-align: right;
+    font-size: var(--scriptsize);
+}
+
+.readingTime {
+    margin-right: auto;
+    padding-right: 1rem;
+}
+
+.readingTime + .baselineskip {
+    height: 1em;
+}
+
+.flowlines {
+    border: var(--border);
+    object-fit: none !important;
+}
+
+ul.pagination {
+    display: flex;
+    margin: var(--medskip) 1ex;
+}
+
+.pagination a {
+    display: flex;
+    padding: 1ex 1em;
+    text-transform: uppercase;
+    letter-spacing: 0.2ex;
+    color: var(--ac);
+    gap: 1ex;
+}
+
+@media only screen and (max-width: 640px) {
+
+    .feed-item {
+        width: unset;
+    }
+
+    aside + #list-posts .feed-item {
+        width: var(--golden-ratio);
+    }
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset;
+    }
+
+    aside + #list-posts .feed-item .par {
+        max-height: 25vh;
+        width: unset;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset !important;
+    }
+
+}

themes/hugo-brewm/assets/css/component/carousel.css

@@ -0,0 +1,299 @@
+/*
+<!----- V container ----->
+<div class='has-carousel'>
+    <!--- H container --->
+    <div class='carousel'>
+        <div>----  <div>----  <div>----  <div>---- <div>----
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        ---</div>  |       |  ---</div>  |       |  ---</div>
+                   ---</div>             ---</div>
+    </div>
+<div>
+*/
+.carousel {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.carousel__nav {
+    display: flex;
+    position: absolute;
+    right: 2rem;
+    bottom: 2rem;
+    justify-content: flex-end;
+    z-index: 1;
+    width: calc(100% - 4rem);
+    font-size: var(--small);
+}
+
+.carousel__nav > ul {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.carousel__viewport nav a {
+    display: flex;
+    z-index: 2;
+    font-size: var(--small);
+}
+
+.carousel__viewport {
+    display: flex;
+    height: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+}
+
+ul.carousel__viewport {
+    border: none;
+    padding: 0;
+}
+
+.carousel__viewport > div,
+.carousel__viewport > section,
+ul.carousel__viewport > li,
+.carousel__viewport__slide {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+}
+
+ul.carousel__viewport > li {
+    position: relative;
+    margin: 1ex;
+    border-radius: 1ex;
+    background-size: cover;
+    width: 16rem;
+    height: 12.8rem;
+}
+
+ul.carousel__viewport > li > a {
+    position: absolute;
+    top: -1px;
+    right: 0;
+    bottom: 0;
+    left: -1px;
+    border-radius: 0.82ex;
+    overflow: clip;
+    color: var(--fg);
+    font-size: var(--small);
+    font-weight: bold;
+}
+
+ul.carousel__viewport > li:hover,
+ul.carousel__viewport > li:focus-within {
+    --tsf: scale(0.96);
+    opacity: 0.86;
+}
+
+ul.carousel__viewport > li > a > span {
+    display: inline-block;
+    position: relative;
+    border-radius: 0 0 1ex 0;
+    background-color: var(--bg);
+    padding: 0.7ex 2ex;
+    max-width: 12.8rem;
+}
+
+ul.carousel__viewport > li > a > span::before,
+ul.carousel__viewport > li > a > span::after {
+    position: absolute;
+    border-top-left-radius: 1ex;
+    box-shadow: 0 -1ex 0 0 var(--bg);
+    background-color: transparent;
+    width: 1ex;
+    height: 2ex;
+    content: '';
+}
+
+ul.carousel__viewport > li > a > span::before {
+    bottom: -2ex;
+    left: 0;
+}
+
+ul.carousel__viewport > li > a > span::after {
+    top: 0;
+    right: -1ex;
+}
+
+.carousel__viewport__slide__cover {
+    flex: 1 1 40%;
+    padding: 1.5rem 0 5rem 1.5rem;
+    height: 100%;
+    max-height: 1024px;
+}
+
+.carousel__viewport__slide__content {
+    margin-bottom: auto;
+    padding: 0 2rem;
+    width: 100%;
+    max-height: calc(100% - 5rem);
+    overflow-y: auto;
+}
+
+.carousel__viewport__slide__content h1.section-title {
+    margin: 0 !important;
+    padding: var(--smallskip) 0 1ex;
+    font: italic var(--Large) var(--rm), serif;
+}
+
+.carousel__viewport__slide__content h2 {
+    font-size: var(--large);
+}
+
+.carousel__viewport__slide__content h3 {
+    font-size: var(--normalsize);
+}
+
+.carousel__viewport__slide__content p {
+    max-width: var(--canonic);
+}
+
+.carousel__viewport__slide__content .footnotes p {
+    max-width: unset;
+}
+
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+    flex: 1 1 60%;
+    margin-bottom: 5rem;
+}
+
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content p {
+    width: unset;
+}
+
+.carousel__viewport__slide__cover img {
+    border-radius: 1ex;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 2 item */
+
+#list-tags > nav a,
+.carousel__viewport__slide > nav a {
+    display: inline-flex;
+    padding: 1ex;
+    gap: 1ex;
+}
+
+.carousel__viewport__slide > nav a {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--fg);
+}
+
+.pagination .lfill a::after,
+#list-tags > nav a::after,
+.carousel__viewport__slide:first-child > nav a::after {
+    /* -> */
+    --tsf: rotate(90deg);
+    font-family: base-ui;
+    content: '\e902';
+}
+
+.carousel__viewport .rfill {
+    display: inline-block !important;
+}
+
+#list-taxonomy > .carousel__viewport {
+    flex-direction: column;
+    height: calc(14.8rem + 2ex);
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+#list-taxonomy #list-series,
+#list-taxonomy #list-categories {
+    padding: 1rem 0;
+}
+
+#list-series ul.carousel__viewport,
+#list-categories ul.carousel__viewport,
+#list-author ul.carousel__viewport {
+    scrollbar-width: thin;
+}
+
+#list-categories a:hover::after {
+    position: absolute;
+    right: 1ex;
+    bottom: 1ex;
+    border-radius: 0.7ex;
+    background: var(--bg);
+    padding: 0.7ex 0;
+    width: calc(3.2rem - 2ex);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    content: attr(data-post-counter);
+}
+
+@media only screen and (max-width: 960px) {
+
+    aside.carousel {
+        width: unset;
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    .carousel__nav {
+        right: 0;
+        bottom: 0;
+        background: var(--bg);
+        width: unset;
+    }
+
+    .carousel__viewport__slide > .carousel__nav {
+        position: sticky;
+        position: -webkit-sticky;
+    }
+
+    aside .carousel__viewport > div,
+    aside .carousel__viewport > section,
+    aside .carousel__viewport__slide {
+        display: block;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .carousel__viewport__slide__cover {
+        padding: unset;
+        height: unset;
+    }
+
+    .carousel__viewport__slide__cover img {
+        border-radius: 0;
+        padding: 0 1rem;
+        height: unset;
+    }
+
+    .carousel__viewport__slide__content {
+        padding: 0 1rem 5rem;
+        max-height: unset;
+    }
+
+    .carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+        margin-bottom: 1rem;
+    }
+
+    .carousel__nav > ul.rounded {
+        padding: 1ex 0;
+        width: calc(100vw - 2rem);
+        text-align: right;
+    }
+
+}

themes/hugo-brewm/assets/css/component/column.css

@@ -0,0 +1,69 @@
+.column {
+    /* auto column count */
+    --col: 16rem;
+    display: block;
+    -webkit-column-gap: 1.618rem;
+       -moz-column-gap: 1.618rem;
+            column-gap: 1.618rem;
+    column-fill: balance;
+    -webkit-column-width: var(--col);
+       -moz-column-width: var(--col);
+            column-width: var(--col);
+}
+
+.column--multicols {
+    /* modify column count on element inline:
+        <e class='column column--multicols' style='--multicols:2'></e> */
+    --col: unset;
+    --multicols: 3;
+    -webkit-column-count: var(--multicols);
+       -moz-column-count: var(--multicols);
+            column-count: var(--multicols);
+}
+
+.column__span {
+    column-span: all;
+}
+
+.column > *,
+.column__item {
+    margin-bottom: 1.618rem;
+    break-after: auto;
+    break-before: auto;
+    break-inside: avoid;
+}
+
+.column img {
+    width: 100%;
+    height: auto;
+}
+
+.column.pin {
+    --col: 12rem;
+}
+
+.has-quote {
+    display: flex;
+    flex-direction: column-reverse;
+    color: var(--fg);
+}
+
+.has-quote::after {
+    margin: unset;
+}
+
+.has-quote > div {
+    margin-left: auto;
+}
+
+.has-quote > img {
+    margin: 1ex 0;
+}
+
+@media screen and (max-width: 640px) {
+
+    .column.pin {
+        --col: 10rem;
+    }
+
+}

themes/hugo-brewm/assets/css/component/fediverse.css

@@ -0,0 +1,88 @@
+/* this style is used inline in fediverse.js */
+
+#comments > * {
+    width: var(--golden-ratio);
+}
+
+#comments noscript {
+    margin: var(--medskip) 0;
+}
+
+#discussion-starter {
+    margin-bottom: var(--medskip);
+}
+
+#discussion-starter > footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mastodon-comment {
+    margin: 1rem 0 1rem calc(var(--mul) * var(--indent));
+    border: 1pt solid #fff4;
+    border-left: 2pt solid var(--ac);
+    box-shadow: 0 0.5pt 1pt 0 var(--g18s);
+    background: #80808008;
+    padding: 1rem 1rem 1ex;
+    overflow: auto;
+}
+
+.mastodon-comment .content {
+    margin-left: 4rem;
+    line-height: calc(var(--baselineStretch) * 1.272);
+}
+
+.mastodon-comment .par a {
+    max-width: 100%;
+    vertical-align: bottom;
+    white-space: break-spaces;
+}
+
+.mastodon-comment .attachments * {
+    width: 100%;
+    height: auto;
+}
+
+.mastodon-comment > footer {
+    margin-top: 1rem;
+    margin-left: 3.5rem;
+}
+
+.mastodon-comment > footer .stat {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 5pt;
+}
+
+.stat a {
+    display: inline-flex;
+    align-items: center;
+    padding: 2pt;
+    color: var(--mid);
+    gap: 2pt;
+}
+
+.stat a::before {
+    vertical-align: text-top;
+}
+
+a.favourites.active {
+    color: var(--i3i);
+}
+
+.mastodon-comment .date {
+    margin-left: auto;
+    padding-left: 1rem;
+    color: var(--mid);
+    font-size: calc(10pt * var(--fontScale));;
+}
+
+@media only screen and (max-width: 960px) {
+
+    .mastodon-comment .content,
+    .mastodon-comment > footer {
+      margin-left: 0;
+    }
+
+}

themes/hugo-brewm/assets/css/component/hero.css

@@ -0,0 +1,92 @@
+/*
+<!----- V container ----->
+<div class='has-carousel'>
+    <!--- H container --->
+    <div class='carousel'>
+        <div>----  <div>----  <div>----  <div>---- <div>----
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        ---</div>  |       |  ---</div>  |       |  ---</div>
+                   ---</div>             ---</div>
+    </div>
+<div>
+*/
+.hero {
+    display: flex;
+    position: relative;
+}
+
+.hero__image {
+    display: flex;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    float: left;
+    height: calc(var(--vbody) - 14.8rem - 1rem - 2ex);
+    max-height: 1024px;
+}
+
+.hero > * {
+    width: 50%;
+}
+
+.hero img {
+    margin-left: auto;
+    padding: 2rem;
+    max-width: 100%;
+    max-height: calc(var(--vbody) - 14.8rem - 1rem - 2ex);
+    object-fit: cover;
+}
+
+.hero__content {
+    --col: 27rem;
+    padding: 2rem 0;
+    max-width: var(--col);
+    font-size: var(--small);
+}
+
+.hero__content h1,
+.hero__content h2,
+.hero__content h3 {
+    margin: 4pt 0;
+    font: italic var(--Large) var(--rm), serif;
+    line-height: 1.618;
+}
+
+@media only screen and (max-width: 960px) {
+
+    .hero {
+        width: 100%;
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    .hero {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hero > * {
+        align-self: center;
+        width: 86%;
+    }
+
+    .hero__image {
+        position: inherit;
+        width: unset;
+        height: unset;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    .hero img {
+        padding: 1rem;
+    }
+
+}

themes/hugo-brewm/assets/css/component/keyframe.css

@@ -0,0 +1,85 @@
+@keyframes ellipsis {
+    0% {content: '...';}
+    25% {content: '';}
+    50% {content: '.';}
+    100% {content: '..';}
+}
+
+@-webkit-keyframes ellipsis {
+    0% {content: '...';}
+    25% {content: '';}
+    50% {content: '.';}
+    100% {content: '..';}
+}
+
+@-webkit-keyframes idle {
+    from, to {border-color: var(--paper);}
+    50% {border-color: transparent;}
+}
+
+@keyframes idle {
+    from, to {border-color: var(--paper);}
+    50% {border-color: transparent;}
+}
+
+@-webkit-keyframes blinking {
+    from, to {visibility: visible;}
+    50% {visibility: hidden;}
+}
+
+@keyframes blinking {
+    from, to {visibility: visible;}
+    50% {visibility: hidden;}
+}
+
+@keyframes expand {
+    from {
+        -webkit-transform: scale(1 , 0);
+           -moz-transform: scale(1 , 0);
+            -ms-transform: scale(1 , 0);
+             -o-transform: scale(1 , 0);
+                transform: scale(1 , 0);
+    }
+    to {
+        -webkit-transform: scale(1 , 1);
+           -moz-transform: scale(1 , 1);
+            -ms-transform: scale(1 , 1);
+             -o-transform: scale(1 , 1);
+                transform: scale(1 , 1);
+    }
+}
+
+@-webkit-keyframes expand {
+    from {
+        -webkit-transform: scale(1 , 0);
+                transform: scale(1 , 0);
+    }
+    to {
+        -webkit-transform: scale(1 , 1);
+                transform: scale(1 , 1);
+    }
+}
+
+@media (prefers-reduced-motion) {
+
+    @keyframes expand {
+        from {
+            -webkit-transform: unset;
+               -moz-transform: unset;
+                -ms-transform: unset;
+                 -o-transform: unset;
+                    transform: unset;
+        }
+    }
+
+    @-webkit-keyframes expand {
+        from {
+            -webkit-transform: unset;
+               -moz-transform: unset;
+                -ms-transform: unset;
+                 -o-transform: unset;
+                    transform: unset;
+        }
+    }
+
+}

themes/hugo-brewm/assets/css/component/link.css

@@ -0,0 +1,81 @@
+a {
+    text-decoration: none;
+    color: var(--ac);
+}
+
+#bionReadSwitch + label,
+#join-discussion,
+#saveButton,
+#share,
+a.cta {
+    border-radius: 2em;
+    background: var(--fg);
+    padding: 6pt 12pt;
+    color: var(--bg);
+    font-weight: 700;
+    text-align: center;
+}
+
+#has-a11y-summary,
+a.underline {
+    border: 2pt solid transparent;
+    border-width: 0 0 2pt 0;
+}
+
+#to-top:focus,
+#has-a11y-summary:hover,
+#has-a11y-summary:focus,
+#has-a11y[open] #has-a11y-summary,
+a.underline:hover,
+a.underline:focus {
+    --anm: underline 127ms ease-in;
+    border-color: var(--ac);
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+ul.rounded li {
+    margin: 0.5ex;
+    display: inline-block;
+}
+
+ul.rounded a {
+    display: inline-flex;
+    opacity: 0.86;
+    border: var(--border);
+    border-radius: 2rem;
+    background: #80808008;
+    padding: 0.5ex 1em;
+    color: var(--fg);
+    gap: 1pt;
+}
+
+ul.rounded a:hover {
+    border-color: #80808022;
+    box-shadow: var(--box-shadow-active);
+    background: #80808016;
+}
+
+ul.invert a {
+    opacity: 0.86;
+    border: unset;
+    background: var(--fg) !important;
+    color: var(--bg) !important;
+}
+
+ul.invert a:visited {
+    color: var(--bg);
+}
+
+ul.has-hash a {
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    font-size: 0.9em;
+}
+
+#term .section-title > .tag::before,
+ul.has-hash a::before {
+    content: '#';
+}

themes/hugo-brewm/assets/css/component/logotype.css

@@ -0,0 +1,105 @@
+/*  _____     _      _   _    ____  __   __
+    |  ___|  / \    | \ | |  / ___| \ \ / /
+    | |_    / _ \   |  \| | | |      \ V /
+    |  _|  / ___ \  | |\  | | |___    | |
+    |_|   /_/   \_\ |_| \_|  \____|   |_|
+
+    <svg id='logotype__svg'
+        xmlns...
+        width='<!--estimated width-->'
+        >
+        <text id='logotype__svg__text'y='74%'>
+         FANCY LOGOTYPE
+        </text>
+    </svg>
+
+    simplified from :
+    https://codepen.io/alvarotrigo/pen/rNbxNWg */
+
+#logo {
+    --h: calc(3.33rem - 10pt);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5pt 0;
+    height: var(--h);
+}
+
+#logo > * {
+    height: var(--h);
+}
+
+#logo #logotype__text {
+    --anm: dash 30s infinite alternate;
+    text-transform: uppercase;
+    letter-spacing: 0.2ex;
+    font-family: var(--sf), sans-serif;
+    font-size: calc(27pt * var(--fontScale));
+    font-weight: 700;
+    stroke: var(--off);
+    stroke-width: 1px;
+}
+
+#logo:focus #logotype__text {
+    --anm: unset;
+    outline-color: var(--off);
+    stroke: none;
+}
+
+@-webkit-keyframes dash {
+    0% {
+        fill:var(--off);
+        stroke-dasharray: 0 50%;
+        stroke-dashoffset: 20%;
+    }
+
+    100% {
+        fill: #0000;
+        stroke-dasharray: 50% 0;
+        stroke-dashoffset: -20%;
+    }
+}
+
+@keyframes dash {
+    0% {
+        fill: var(--off);
+        stroke-dasharray: 0 50%;
+        stroke-dashoffset: 20%;
+    }
+
+    100% {
+        fill: #0000;
+        stroke-dasharray: 50% 0;
+        stroke-dashoffset: -20%;
+    }
+}
+
+/* logomark default */
+
+#logomark--dark + #logomark {
+    display: inline-block;
+}
+
+@media (prefers-color-scheme: light) {
+
+    #logomark--dark {
+        display: none;
+    }
+
+    #logomark--dark + #logomark {
+        display: inline-block;
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+    #logomark--dark {
+        display: inline-block;
+    }
+
+    #logomark--dark + #logomark {
+        display: none;
+    }
+
+}

themes/hugo-brewm/assets/css/component/marginpar.css

@@ -0,0 +1,51 @@
+.marginpar {
+    left: var(--golden-ratio);
+    margin-right: 0;
+    margin-left: calc(var(--marginparwidth) * -1);
+    font-size: var(--small);
+    font-style: italic;
+}
+
+.marginpar.abs {
+    /* will ignore clear attribute */
+    position: absolute;
+    right: var(--void);
+    left: unset;
+}
+
+.marginpar-ctrl,
+.marginpar-ctrl + label::before {
+    position: absolute;
+    top: -100vh;
+}
+
+@media screen and (max-width: 640px) {
+
+    .marginpar-ctrl + label {
+        display: inline-flex;
+        padding: 2pt;
+    }
+
+    .marginpar-ctrl + label::before {
+        position: unset;
+        display: block !important;
+        left: 0;
+    }
+
+    .marginpar-ctrl:checked + label::before {
+        --anm: unset;
+        color: var(--ac);
+    }
+
+    .marginpar {
+        display: none;
+        float: unset;
+    }
+
+    .marginpar-ctrl:checked + label + .marginpar {
+        display: block;
+        position: unset;
+        margin: 1ex 0;
+    }
+
+}

themes/hugo-brewm/assets/css/component/menu.css

@@ -0,0 +1,560 @@
+ul.delimiter,
+ul.breadcrumb,
+nav > ul,
+ul[role=presentation] {
+    margin: 0;
+    list-style: none;
+    font-size: inherit;
+}
+
+ul.delimiter,
+ul.delimiter li,
+ul.inline,
+ul.inline li,
+nav > ul,
+nav > ul > li {
+    display: inline;
+    padding: 0;
+}
+
+/* container */
+
+body > header,
+body > header > nav {
+    display: flex;
+    z-index: 2;
+}
+
+#top-nav {
+    margin-left: auto;
+    font-weight: bold;
+}
+
+#top-nav[open],
+#has-main-menu {
+    flex: 1;
+}
+
+#top-nav > nav {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1ex;
+}
+
+#logo + #top-nav #main-menu,
+#logo + #top-nav #main-menu .l1 {
+    /* flush item to right-end when logotype on the left */
+    justify-content: flex-end;
+}
+
+#main-menu .l1 {
+    display: flex;
+    gap: 1ex;
+}
+
+/* menu icon */
+
+.menu-icon::before {
+    content: '\e90b';
+    font-family: 'base-ui';
+}
+
+.keydown .menu-icon::before {
+    border: var(--border);
+}
+
+#has-more-menu > summary {
+    width: 43pt;
+}
+
+#has-a11y[open] > summary .icon::before,
+#has-search[open] .icon::before,
+details[open] > summary > .menu-icon::before {
+    --anm: blinking 2s step-end infinite;
+    color: var(--ac);
+}
+
+/* on 'hull' viewport */
+
+#i18n-menu,
+#more-menu,
+.on-hull,
+.screening {
+    /* 'hull' --vbody container */
+    position: fixed;
+    top: var(--vhead);
+    left: 0;
+    width: 100vw;
+    height: var(--vbody);
+}
+
+.screening {
+    /* obscure main body  */
+    --blur: blur(0.2vmin);
+    --dim: brightness(0.96);
+    z-index: -1;
+    background-color: #80808008;
+    -webkit-backdrop-filter: var(--blur) var(--dim);
+            backdrop-filter: var(--blur) var(--dim);
+}
+
+/* item on 'deck' */
+
+.on-deck,
+a#has-i18n {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto 0;
+    padding: unset;
+    min-width: var(--vhead);
+    height: calc(var(--vhead) - 12pt);
+    max-height: 4.2rem;
+}
+
+#has-i18n > .on-deck {
+    padding: 0 1ex;
+    width: unset;
+}
+
+/* item on 'plank' */
+
+.on-plank {
+    /* add on-plank */
+    display: flex;
+    flex-direction: column;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1.414ex;
+    width: fit-content;
+    max-height: calc(var(--vbody) - 2rem);
+    overflow-y: auto;
+    gap: 1ex;
+}
+
+.on-plank ul {
+    display: flex;
+    flex-direction: column;
+    margin: 0 1ex;
+    border-right: var(--bound);
+    padding: 1ex;
+    gap: 1ex;
+}
+
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar {
+    --anm: expand 99ms forwards;
+    --tso: top;
+}
+
+#main-menu .on-plank {
+    position: fixed;
+    top: calc(var(--vhead) + 1rem);
+    max-width: 20rem;
+    translate: -1.414ex;
+}
+
+#i18n-menu > .on-plank,
+#more-menu > .on-plank {
+    /* .on-hull > .on-plank */
+    margin: 1rem var(--void) 1rem auto;
+    max-width: var(--max-width);
+}
+
+/* visible menu item */
+
+#has-l10n a,
+#top-nav a,
+.anchor {
+    display: flex;
+    align-items: baseline;
+    border: 2pt solid transparent;
+    border-width: 0 0 2pt 0;
+    padding: 1ex;
+    width: 100%;
+    color: var(--fg);
+}
+
+#top-nav a > .icon::after {
+    content: '\a0';
+}
+
+#top-nav a.has-desc {
+    flex-direction: column;
+}
+
+.anchor {
+    align-items: center;
+}
+
+#has-l10n a:hover,
+#has-l10n a:focus,
+#top-nav a:hover,
+#top-nav a:focus,
+.anchor:hover,
+.anchor:focus {
+    --anm: underline 127ms ease-in;
+    color: var(--ac);
+    border-color: var(--ac);
+}
+
+@-webkit-keyframes underline {
+    from {
+        border-image: linear-gradient(to right, var(--ac), transparent 100%) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent 50%) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), transparent 0%) 1;
+    }
+}
+
+@keyframes underline {
+    from {
+        border-image: linear-gradient(to right, transparent, transparent) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), var(--ac)) 1;
+    }
+}
+
+.marginpar-ctrl + label::before,
+.anchor:after {
+    /* add indicator [v] */
+    --tst: 200ms ease-out;
+    position: relative;
+    top: 0.23em;
+    left: 0.43em;
+    margin-left: auto;
+    background: linear-gradient(to top, transparent 49%, var(--g18) 51%);
+    -webkit-background-clip: text;
+            background-clip: text;
+    color: transparent;
+    font: 8pt 'base-ui';
+    content: '\e913';
+}
+
+.anchor:hover::after {
+    background: linear-gradient(to top, transparent 49%, var(--ac) 51%);
+    -webkit-background-clip: text;
+            background-clip: text;
+    color: transparent;
+}
+
+#has-i18n .anchor::after {
+    left: unset;
+}
+
+.marginpar-ctrl:checked + label::before,
+details[open] > .anchor:after {
+    /* change indicator state [x] */
+    --anm: blinking 3s step-end infinite;
+    background: unset;
+    top: 0;
+    color: var(--g18);
+}
+
+details[open] > .anchor.on-deck:after {
+    /* make opened <details> element more prominent */
+    color: red;
+}
+
+/* bilingual */
+
+a#has-i18n {
+    width: auto;
+    font-weight: 700;
+    font-size: 0.9em;
+    gap: 3pt;
+}
+
+a#has-i18n > .alt,
+a#has-i18n:hover > .act,
+a#has-i18n:focus > .act,
+a#has-i18n:active > .act {
+    /* active/current language */
+    color: var(--g18);
+}
+
+a#has-i18n:hover > .alt,
+a#has-i18n:focus > .alt,
+a#has-i18n:active > .alt {
+    /* alternate language */
+    color: var(--fg);
+}
+
+/* multilingual */
+
+#has-i18n .on-deck {
+    gap: 3pt;
+}
+
+#has-l10n {
+    display: inline-block;
+}
+
+#has-l10n summary {
+    display: block !important;
+    padding: 3.5pt 1.4ex 3.5pt 3.5pt;
+    font-size: 0.9em;
+}
+
+#has-l10n > summary::before {
+    font-family: 'base-ui';
+    content: '\e90a\a0';
+}
+
+#has-l10n a,
+#i18n-menu a {
+    align-items: center;
+    gap: 1ex;
+}
+
+#has-l10n img,
+#has-i18n img {
+    border-radius: 2pt;
+    width: auto;
+    height: 8pt;
+    object-fit: cover;
+}
+
+#has-l10n .on-plank {
+    position: absolute;
+    z-index: 1;
+    margin-top: 1ex;
+    border: var(--border);
+    background: var(--bg);
+    width: auto;
+}
+
+.parent-anchor a::after,
+#i18n-menu a::after,
+#content a::after {
+    --tsf: rotate(45deg);
+    display: inline-block;
+    margin-top: 0.3em;
+    margin-left: auto;
+    font: 0.7em 'base-ui';
+    content: '\e902';
+}
+
+.parent-anchor a::after,
+#i18n-menu a::after {
+    color: var(--g18);
+}
+
+.hero nav a {
+    color: var(--fg);
+    position: relative;
+}
+
+.hero nav .t {
+    top: 150%;
+}
+
+.hero nav a .icon {
+    display: inline-flex;
+    margin: 2pt;
+    padding: 6pt;
+    font-size: var(--large);
+}
+
+@media only screen and (max-width: 640px) {
+
+    /* container behaviour */
+
+    #top-nav * {
+        outline: none !important;
+    }
+
+    #top-nav[open] > nav {
+        --anm: expand 99ms forwards;
+        --tso: top;
+    }
+
+    #main-menu {
+        display: unset;
+    }
+
+    #main-menu .l1 {
+        flex-direction: column;
+    }
+
+    /* swap menu-icon */
+
+    #top-nav > summary,
+    #top-nav[open] > summary  {
+        display: flex !important;
+        margin-left: auto;
+        width: 43pt;
+    }
+
+    #has-more-menu > summary {
+        width: 100%;
+    }
+
+    #has-more-menu .t,
+    #has-search .t {
+        display: initial;
+        position: unset;
+        visibility: unset;
+        background: unset;
+        width: 100%;
+        color: inherit;
+        font: inherit;
+    }
+
+    /* swap screen element */
+
+    #top-nav-screen.screening {
+        display: block;
+        background-color: var(--bg);
+        backdrop-filter: blur(5vmin);
+    }
+
+    /* swap hull element */
+
+    #top-nav > nav {
+        position: fixed;
+        top: var(--vhead);
+        left: 0;
+        flex-direction: column;
+        justify-content: unset;
+        z-index: 3;
+        padding: 1.414ex;
+        width: 100vw;
+        height: var(--vbody);
+        overflow-y: auto;
+    }
+
+    #i18n-menu,
+    #more-menu,
+    #hasDuckDuckGo,
+    #main-menu .on-plank {
+        /* also unset main menu plank */
+        position: unset;
+        width: unset;
+        max-width: unset;
+        height: unset;
+    }
+
+    /* reorder hull item */
+
+    #has-search {
+        order: 1;
+    }
+
+    #has-main-menu {
+        flex: unset;
+        order: 2;
+    }
+
+    #has-more-menu {
+        order: 3;
+    }
+
+    #has-i18n {
+        order: 4;
+        margin: auto 1ex 2rem;
+    }
+
+    /* redefine deck element */
+
+    #top-nav > nav  .on-deck {
+        justify-content: unset;
+        height: unset;
+    }
+
+    #top-nav > nav #has-i18n .on-deck {
+        padding: 1ex;
+    }
+
+    /* swap plank element */
+
+    .on-plank {
+        border: unset;
+        background: unset;
+        min-width: unset;
+        max-height: unset;
+    }
+
+    #main-menu .on-plank {
+        margin: 0 1ex;
+        border-right: var(--bound);
+        border-radius: 0;
+        padding: 1ex;
+        translate: unset;
+    }
+
+    #i18n-menu > .on-plank ,
+    #more-menu > .on-plank {
+        /* .on-hull > .on-plank */
+        margin: unset;
+        padding: 0;
+        width: 100%;
+    }
+
+    #has-main-menu,
+    #has-more-menu,
+    #has-search {
+        /* make as plank */
+        margin: 1ex;
+        border: var(--border);
+        border-radius: 1ex;
+        background: var(--bg);
+        padding: 1ex;
+    }
+
+    details[open] > .anchor.on-deck:after {
+        color: var(--g18);
+    }
+
+    /* bilingual */
+
+    a#has-i18n::after {
+        margin: 0 auto 0 1.5ex;
+        content: attr(aria-label);
+    }
+
+    a#has-i18n > img {
+        display: initial;
+    }
+
+    /* multilingual */
+
+    #has-i18n img {
+        height: 12pt;
+    }
+
+    #i18n-menu {
+        margin-top: 1ex;
+    }
+
+    .languangeName {
+        display: block !important;
+        margin-left: 0.5ex;
+    }
+
+    /* hide desktop element */
+
+    #top-nav > nav .screening,
+    #top-nav > summary > .t,
+    #has-search[open] > summary,
+    #has-more-menu[open] > summary,
+    #has-more-menu .menu-icon,
+    #has-search .icon,
+    .iso639 {
+        display: none;
+    }
+
+}

themes/hugo-brewm/assets/css/component/search.css

@@ -0,0 +1,196 @@
+#has-search > summary::before {
+    padding: 0 1ex;
+    font-family: 'base-ui';
+    font-weight: 400;
+    content: '\e911';
+}
+
+#duckduckgo,
+.pagefind-ui {
+    margin: 1rem var(--void) 1rem auto;
+    width: calc(var(--marginparwidth) - 1rem);
+    min-width: 17rem;
+    max-height: calc(var(--vbody) - 2rem);
+    font-weight: normal;
+}
+
+.pagefind-ui {
+    display: flex;
+    flex-direction: column;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1.414ex;
+    overflow-y: auto;
+    gap: 1ex;
+}
+
+#has-search[open] > summary > .t,
+.pagefind-ui__search-clear {
+    display: none;
+}
+
+.pagefind-ui__drawer p {
+    margin: 0;
+}
+
+#duckduckgo {
+    flex-direction: row;
+}
+
+.form {
+    align-items: center;
+}
+
+/* the search box */
+
+.form__input {
+    flex: 1;
+    border: none;
+    border-radius: 2rem 0 0 2rem;
+    background: none;
+    padding: 0;
+    padding-left: 1em;
+    color: var(--fg);
+    font-family: var(--sf), sans-serif;
+}
+
+#duckduckgo .form__input {
+    --ac: #de5833;
+    flex: 1;
+    border-bottom: 2pt solid var(--g18s);
+    border-radius: 0.25ex;
+    padding: 1ex;
+}
+
+.pagefind-ui__search-input:hover,
+.pagefind-ui__search-input:focus,
+#duckduckgo .form__input:hover,
+#duckduckgo .form__input:focus {
+    --anm: underline 127ms ease-in;
+    outline: none !important;
+    border-color: var(--ac);
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+/* the search button */
+
+.pagefind-ui__button,
+.form__reset,
+.form__button {
+    display: inline-flex;
+    position: relative;
+    border: none;
+    border-radius: 0 50% 50% 0;
+    background: none;
+    padding: 0;
+}
+
+#duckduckgo .form__button,
+#duckduckgo .form__button > img {
+    width: 2rem;
+    height: 2rem;
+}
+
+#duckduckgo .form__input:hover + .form__button,
+#duckduckgo .form__input:focus + .form__button {
+    --tsf: scaleX(-1);
+}
+
+#duckduckgo .form__button:hover,
+#duckduckgo .form__button:focus {
+    --tsf: scale(1.1);
+}
+
+.form:invalid .form__reset {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.form:valid .form__reset {
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* additional pagefind styles */
+
+.pagefind-ui__form {
+    display: flex;
+    flex-direction: column;
+    gap: 1ex;
+}
+
+.pagefind-ui__search-input {
+    margin: 1ex 1ex 0.5ex;
+    border: 0;
+    border-bottom: 2pt solid var(--g18s);
+    background: none;
+    padding: 1ex !important;
+    color: var(--fg);
+}
+
+.pagefind-ui__drawer {
+    margin: 0 1ex;
+    padding: 0 1ex;
+}
+
+p.pagefind-ui__message {
+    margin: 1ex 0;
+}
+
+.pagefind-ui__result-excerpt {
+    color: var(--mid);
+    font-size: var(--small);
+}
+
+ol.pagefind-ui__results {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.pagefind-ui__result {
+    margin-bottom: 1rem;
+}
+
+a.pagefind-ui__result-link {
+    border-bottom: 0 !important;
+    padding: 1ex 1ex 0.5ex !important;
+    font-weight: 700;
+}
+
+.pagefind-ui__result-excerpt {
+    padding: 0 1ex;
+    font-size: 0.9em;
+}
+
+@media only screen and (max-width: 640px) {
+
+    #has-search .on-deck {
+        flex-direction: row-reverse;
+    }
+
+    #has-search .t {
+        padding: 1ex;
+        text-align: unset;
+    }
+
+    #search,
+    #hasDuckDuckGo {
+        position: unset;
+        padding: 0;
+        width: unset;
+        height: unset;
+    }
+
+    .pagefind-ui,
+    #duckduckgo {
+        margin: 1ex;
+        padding: 0;
+        border: unset;
+    }
+
+}

themes/hugo-brewm/assets/css/component/share.css

@@ -0,0 +1,150 @@
+.form#mastodon {
+    display: inline-flex;
+    width: 100%;
+}
+
+#mastodonInstance {
+    /* passive mode; display as button */
+    display: none;
+    height: 2.654rem;
+}
+
+#has-mastodon.active {
+    /* active mode display as form */
+    flex: 1;
+}
+
+#has-mastodon.active #mastodonInstance {
+    display: initial !important;
+}
+
+#has-mastodon.active #mastodon {
+    border: 3pt solid #563acc02;
+    border-radius: 2rem;
+    background: #563acc22;
+}
+
+#mastodonInstance ~ button:focus .mastodon,
+#mastodonInstance:focus ~ button .mastodon {
+    background: #4f36b5;
+    color: #fff;
+}
+
+#has-share {
+    margin:var(--vskip);
+    padding-bottom: 2pt;
+}
+
+#has-share[open] {
+    padding-bottom: 0;
+}
+
+#share {
+    float: left;
+    margin: 1pt 0;
+}
+
+#has-share[open] #share {
+    background: unset;
+    padding-left: 0;
+    color: unset;
+}
+
+#has-share[open] #share::after {
+    content: ':';
+}
+
+#has-share ul {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#has-share a {
+    display: inline-flex;
+    position: relative;
+}
+
+#has-share i {
+    border-radius: 2rem;
+    padding: 0.62rem;
+    font-size: var(--Large);
+}
+
+#has-share i:hover {
+    --tst: 200ms ease-in;
+    opacity: 1;
+}
+
+#has-share a:focus i,
+#has-share i:hover {
+    color: #fff !important;
+}
+
+/* Social sharing button */
+#has-share .email {color: var(--mid)}
+#has-share a:focus .email,
+#has-share .email:hover {background: var(--mid)}
+#has-share .bluesky {color: #1185fe}
+#has-share a:focus .bluesky,
+#has-share .bluesky:hover {background: #0072ce}
+#has-share .facebook {color: #3b5998}
+#has-share a:focus .facebook,
+#has-share .facebook:hover {background: #2d4373}
+#has-share .hackernews {color: #FF6600}
+#has-share a:focus .hackernews,
+#has-share .hackernews:hover {background: #FB6200}
+#has-share .linkedin {color: #0077b5}
+#has-share a:focus .linkedin,
+#has-share .linkedin:hover {background: #046293}
+#has-share .mastodon {color: #563acc}
+#has-share a:focus .mastodon,
+#has-share .mastodon:hover {background: #4f36b5}
+#has-share .pinterest {color: #bd081c}
+#has-share a:focus .pinterest,
+#has-share .pinterest:hover {background: #8c0615}
+#has-share .reddit {color: #5f99cf}
+#has-share a:focus .reddit,
+#has-share .reddit:hover {background: #3a80c1}
+#has-share .telegram {color: #54A9EB}
+#has-share a:focus .telegram,
+#has-share .telegram:hover {background: #4B97D1}
+#has-share .tumblr {color: #35465C}
+#has-share a:focus .tumblr,
+#has-share .tumblr:hover {background: #222d3c}
+#has-share .twitter {color: #55acee}
+#has-share a:focus .twitter,
+#has-share .twitter:hover {background: #2795e9}
+#has-share .vk {color: #507299}
+#has-share a:focus .vk,
+#has-share .vk:hover {background: #43648c}
+#has-share .whatsapp {color: #25D366}
+#has-share a:focus .whatsapp,
+#has-share .whatsapp:hover {background: #1DA851}
+#has-share .xing {color: #1a7576}
+#has-share a:focus .xing,
+#has-share .xing:hover {background: #114C4C}
+
+@media only screen and (max-width: 844px) {
+
+    #share {
+        float: unset;
+    }
+
+    #has-share[open] #share {
+        padding-left: 16.18pt;
+    }
+
+    #has-mastodon.active {
+        flex: 0 0 100%;
+    }
+
+    #has-mastodon.active #mastodon {
+        margin-bottom: 1ex;
+        max-width: 27em;
+    }
+
+}

themes/hugo-brewm/assets/css/component/skipper.css

@@ -0,0 +1,44 @@
+#to-content {
+    /* displayed to screen reader,
+        but visually removed to oustide canvas */
+    --tsf: translateY(-100vmax);
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    outline: none !important;
+    background: var(--bg) !important;
+    width: 100vw;
+    height: var(--vhead);
+    }
+
+#to-content:focus {
+    /* replace top nav on focus */
+    --tsf: translate(0);
+}
+
+body > footer > nav {
+    margin-left: auto;
+}
+
+#to-top {
+    padding: 1ex;
+    color: var(--fg);
+    overflow: hidden;
+}
+
+#to-top::before {
+    --tsf: rotate(-45deg);
+    display: inline-flex;
+    transition: 0.2s;
+    font-family: 'base-ui';
+    content: '\e902';
+}
+
+#to-top:hover::before,
+#to-top:focus::before {
+    --tsf: unset;
+}

themes/hugo-brewm/assets/css/custom.css

@@ -0,0 +1,28 @@
+:root {
+    /* default contrast */
+    --ac-light: #36c;
+    --fg-light: #111;
+    --bg-light: #f9f9fb; 
+    --midtone: gray;
+    --fg-dark: #f9f9fb;
+    --bg-dark: #111;
+    --ac-dark: #fa0;
+    
+    /* less contrast */
+    --ac-light-less: var(--ac-light);
+    --fg-light-less: #13253d;
+    --bg-light-less: #e7e2e2; 
+    --midtone-less: #7d8490;
+    --fg-dark-less: #e7e2e2;
+    --bg-dark-less: #13253d;
+    --ac-dark-less: var(--ac-dark);
+
+    /* more contrast */
+    --ac-light-more: var(--ac-light);
+    --fg-light-more: #000;
+    --bg-light-more: #fff;
+    --midtone-more: gray;
+    --fg-dark-more: #fff;
+    --bg-dark-more: #000;
+    --ac-dark-more: var(--ac-dark);
+}

themes/hugo-brewm/assets/css/layout/_default/baseof.css

@@ -0,0 +1,318 @@
+/*
+    <body
+        id='$layout'
+        class='$colorpalette'
+        >
+        <header>=====[sticky]======</header>
+        <main id='$kind'>
+            <footer id=main-footer></footer>
+        </main>
+        <footer>=====[sticky]======<</footer>
+    </body>
+*/
+
+:root {
+    --golden-ratio: 61.803398%;
+    --canonic: 70.710678%;
+    --max-width: 1024px;
+    --void: calc((100vw - var(--canonic) - 1rem) / 2);
+    --vhead: 4.2rem;
+    --vfoot: 3.33rem;
+    --vbody: calc(100vh - var(--vhead) - var(--vfoot));
+    --marginparwidth: 27vw; /* --canonic - ( --canonic * --golden-ratio) */
+    --g18: #80808080;
+    --g18s: #80808022;
+    --bound: 1pt dotted var(--g18);
+    --border: 1pt solid var(--g18s);
+    --box-shadow-hover: 0 1px 0.5px var(--g18);
+    --box-shadow-focus: 0 0.5px 1px var(--g18);
+    --box-shadow-active: 0 0.5px 0.5px var(--mid);
+    font-size: calc(var(--fontScale) * 10pt);
+}
+
+::-webkit-scrollbar {
+    /* width: 8pt;
+    height: 8pt; */
+    scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 9pt !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--g18);
+    opacity: 0.86;
+    border-radius: 9pt !important;
+}
+
+* {
+    box-sizing: border-box;
+    scroll-margin-top: calc(var(--vhead) + 4.118rem);
+    scroll-behavior: smooth;
+    scrollbar-color: var(--g18) transparent;
+    scrollbar-width: thin;
+    text-rendering: optimizeLegibility;
+    kerning: auto;
+    font-kerning: auto;
+    -webkit-font-feature-settings: 'kern' 1;
+       -moz-font-feature-settings: 'kern' 1;
+            font-feature-settings: 'kern' 1;
+    -webkit-hyphens: auto;
+       -moz-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-after: 3;
+            hyphenate-after: 3;
+    -webkit-hyphenate-before: 3;
+            hyphenate-before: 3;
+    -webkit-hyphenate-lines: 2;
+            hyphenate-lines: 2;
+    orphans: 2;
+    widows: 2;
+}
+
+body {
+    margin: 0 !important;
+    padding: unset !important;
+    line-height: calc(var(--baselineStretch) * 1.414);
+    color: var(--fg);
+    font-family: var(--sf), sans-serif;
+    font-size: var(--normalsize);
+    --y6a: #af7c9d; --w8u: #628618; --s8i: #ed7495; --n8e: #6c80b3;
+    --m4i: #355240; --y4i: #921823; --f8a: #7972b6; --s4n: #018ace;
+    --d3u: #654b3c; --r6a: #534b1a; --y4a: #13355b; --k8i: #ee850f;
+    --y6i: #00728c; --o5a: #8d2f4a; --c3u: #5b516a; --s5o: #365b75;
+    --s5e: #493280; --y7i: #00b1dd; --i3i: #e9142a; --t9u: #014d1f;
+}
+
+body {
+    max-width: unset !important;
+    padding: unset !important;
+}
+
+body > header {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--vhead);
+}
+
+body > main {
+    min-height: var(--vbody);
+}
+
+.marginpar,
+body > main > aside {
+    position: relative;
+    float: right;
+    clear: right;
+    padding-left: var(--indent);
+    width: var(--marginparwidth);
+}
+
+body > main > #main-footer {
+    position: relative;
+    margin: var(--bigskip) 1ex 1rem;
+    border: var(--border);
+    border-radius: 1ex;
+    background: #000;
+    width: calc(100% - 2ex);
+    color: #fff;
+}
+
+body > footer {
+    display: flex !important;
+    position: -webkit-sticky;
+    position: sticky;
+    bottom: 0;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 2;
+    height: var(--vfoot);
+    font-size: var(--small);
+}
+
+#top,
+.pagewidth {
+    padding-right: var(--void);
+    padding-left: var(--void);
+    /* width: var(--canonic);
+    max-width: var(--max-width); */
+}
+
+.textwidth {
+    width: var(--golden-ratio);
+}
+
+#main-footer .pagewidth {
+    padding: 0 calc(var(--void) - 1ex - 1rem);
+    margin: 1ex 1ex 2ex;
+}
+
+#main-footer .column > *,
+#main-footer .column__item {
+    /* margin: 1ex 0; */
+    border: 0.1pt solid transparent;
+}
+
+#main-footer .section-title,
+#menu-footer::before {
+    display: block;
+    margin: 1ex 0 0;
+    font-size: var(--small);
+}
+
+#main-footer-primary,
+#main-footer-secondary > *  {
+    break-inside: avoid-column;
+}
+
+#main-footer p {
+    margin: 0;
+    font-size: var(--small);
+}
+
+#menu-footer a {
+    display: inline-flex;
+    position: relative;
+    padding: 0.62rem;
+    color: #fff;
+    font-size: var(--large);
+}
+
+#menu-footer a .t{
+    --tsf: translate(-3em);
+}
+
+hr {
+    border-top: var(--border);
+    border-width: 1pt 0 0 0;
+}
+
+@media only screen and (min-width: 1440px) {
+
+    :root {
+        --void: calc((100vw - var(--max-width) - 1rem) / 2) !important;
+        --marginparwidth: 391.13320448px !important;
+        /* --max-width - (100% - --golden-ratio) */
+    }
+
+}
+
+@media only screen and (max-width: 960px) {
+
+    :root {
+        --void: calc((100vw - var(--canonic) - var(--vfoot) - var(--vhead)) / 2);
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    :root {
+        --void: var(--vfoot) !important;
+        --marginparwidth: 100% !important;
+        --canonic: 86%;
+        --golden-ratio: 100%;
+    }
+
+    #main-footer .pagewidth {
+        padding-right: calc(var(--void) / 2);
+        padding-left: calc(var(--void) / 2);
+    }
+
+}
+
+@media only screen and (max-width: 540px) {
+
+    :root {
+        --void: calc(var(--vfoot) / 1.414) !important;
+    }
+
+    #main-footer-primary,
+    #main-footer-secondary {
+        column-span: all;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    :root {
+        --void: calc(var(--vfoot) / 2) !important;
+    }
+
+}
+
+@media (prefers-color-scheme: light) {
+
+    body {
+        --bg: var(--bg-light);
+        --mid: var(--midtone);
+        --fg: var(--fg-light);
+        --ac: var(--ac-light);
+        --off: #000;
+    }
+
+    @media (prefers-contrast: more),
+    (-ms-high-contrast: active) {
+
+        body {
+            --bg: var(--bg-light-more);
+            --mid: var(--midtone-more);
+            --fg: var(--fg-light-more);
+            --ac: var(--ac-light-more);
+        }
+
+    }
+
+    @media (prefers-contrast: less) {
+
+        body {
+            --bg: var(--bg-light-less);
+            --mid: var(--midtone-less);
+            --fg: var(--fg-light-less);
+            --ac: var(--ac-light-less);
+        }
+
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+    body {
+        --bg: var(--bg-dark);
+        --mid: var(--midtone);
+        --fg: var(--fg-dark);
+        --ac: var(--ac-dark);
+        --off: #fff;
+    }
+
+    @media (prefers-contrast: more),
+    (-ms-high-contrast: active) {
+
+        body {
+            --bg: var(--bg-dark-more);
+            --mid: var(--midtone-more);
+            --fg: var(--fg-dark-more);
+            --ac: var(--ac-dark-more);
+        }
+
+    }
+
+    @media (prefers-contrast: less) {
+
+        body {
+            --bg: var(--bg-dark-less);
+            --mid: var(--midtone-less);
+            --fg: var(--fg-dark-less);
+            --ac: var(--ac-dark-less);
+        }
+
+    }
+
+}

themes/hugo-brewm/assets/css/layout/_default/home.css

@@ -0,0 +1,141 @@
+/* this style is used inline in list.html */
+
+body {
+    margin: auto;
+    max-width: 2560px;
+}
+
+body > footer.pagewidth,
+body > header.pagewidth {
+    padding: 0 calc(1.5rem + 1ex);
+}
+
+body > aside.carousel {
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0;
+    float: left;
+    /* border: var(--border);
+    border-radius: 1ex; */
+    padding: 1rem;
+    width: 38vw;
+    height: var(--vbody);
+}
+
+body > main#home {
+    height: var(--vbody);
+    overflow-y: auto;
+}
+
+body > main#home > aside#list-tags {
+    top: 0;
+    right: 0;
+    margin: 1rem auto;
+    width: calc(100% - var(--golden-ratio))
+}
+
+#home #top {
+    padding: 1rem;
+}
+
+#home #list-posts {
+    padding: 1rem;
+    width: var(--golden-ratio);
+}
+
+div[role='feed'] {
+    padding: 1ex;
+}
+
+.carousel .feed-item,
+#home .feed-item,
+hr.ldots {
+    width: unset;
+}
+
+#main-footer > .pagewidth {
+    padding: 0 1ex;
+}
+
+#duckduckgo,
+#i18n-menu > .on-plank,
+#more-menu > .on-plank,
+.pagefind-ui {
+    margin-right: 1rem;
+}
+
+#hasDuckDuckGo.pagewidth {
+    padding-right: 1rem;
+}
+
+#grain {
+    display: none;
+}
+
+@media only screen and (max-width: 960px) {
+
+    body > footer,
+    body > header {
+        background: var(--bg);
+    }
+
+    body > aside.carousel {
+        float: unset;
+        margin: 0 1rem;
+        padding: 1rem 0;
+        width: unset;
+    }
+
+    body > main#home {
+        height: unset;
+        overflow-y: unset;
+    }
+
+    body > main#home > aside#list-tags {
+        top: var(--vhead);
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    #main-footer > .pagewidth {
+        padding: 0 calc(var(--void) / 2);
+    }
+
+    body > main#home > aside#list-tags {
+        padding: unset;
+        width: var(--canonic);
+    }
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: row-reverse;
+        aspect-ratio: 10/3;
+    }
+
+    #home #list-posts {
+        margin: var(--bigskip) auto;
+        padding: unset;
+        width: var(--canonic);
+    }
+
+    #list-posts .section-title {
+        padding-left: unset;
+    }
+
+    #duckduckgo,
+    .pagefind-ui {
+        margin-right: 1ex;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset;
+    }
+
+}
+

themes/hugo-brewm/assets/css/layout/_default/list.css

@@ -0,0 +1,145 @@
+hr.ldots {
+    margin-left: 0;
+    border: none;
+    width: var(--golden-ratio);
+}
+
+hr.ldots::after {
+    --tsf: translateY(-2.3rem);
+    display: block;
+    width: 100%;
+    height: 1rem;
+    text-align: center;
+    color: var(--g18s);
+    font-size: 3rem;
+    content: '…';
+}
+
+#list-subsection {
+    padding: 0 calc(1rem - 1ex);
+}
+
+#list-subsection .carousel__viewport,
+#taxonomy .carousel__viewport,
+#taxonomy #list-tags ul {
+    padding: 0 1rem;
+}
+
+#list-series,
+#list-categories {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+}
+
+#list-series .section-title,
+#list-categories .section-title {
+    margin: var(--smallskip);
+    writing-mode: tb;
+}
+
+#list-tags {
+    position: sticky;
+    position: -webkit-sticky;
+    top: var(--vhead);
+    right: var(--void);
+}
+
+.section-title,
+#list-tags > ul {
+    margin: var(--medskip) 0 1ex;
+}
+
+#term section.pagewidth,
+#taxonomy section.pagewidth,
+#list-posts  {
+    min-height: calc(var(--vbody) - 7.258rem);
+}
+
+#taxonomy #list-tags {
+    position: unset;
+    float: unset;
+    margin: unset;
+    padding: 0 var(--void);
+    width: unset;
+}
+
+#taxonomy #list-series,
+#taxonomy #list-categories {
+    display: unset;
+}
+
+#taxonomy #list-tags .section-title,
+#taxonomy #list-series .section-title,
+#taxonomy #list-categories .section-title {
+    margin: var(--bigskip) 0 var(--smallskip);
+    writing-mode: unset;
+}
+
+#has-pagination {
+    margin-top: 1in;
+}
+
+.section-title#series {
+    margin-left: auto;
+    width: var(--golden-ratio);
+}
+
+.list-year.textwidth {
+    display: flex;
+    position: relative;
+    align-items: baseline;
+    margin-left: auto;
+}
+
+.list-year > .section-title {
+    padding: 8pt;
+    width: 5rem;
+    text-align: right;
+}
+
+.list-year > div {
+    flex: 1;
+}
+
+.list-month > summary {
+    padding-left: 1rem;
+    list-style: none;
+}
+
+.list-day a {
+    display: block;
+    margin: 1ex 1rem;
+    padding: 1ex 0;
+    width: 100%;
+    font-size: var(--normalsize);
+}
+
+.list-day a.has-pre::before {
+    position: absolute;
+    left: -9pt;
+    padding: 0.25rem 0;
+    width: 5rem;
+    text-align: right;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: var(--footnotesize);
+}
+
+#feed ul.rounded.invert a {
+    font-size: var(--footnotesize);
+}
+
+@media only screen and (max-width: 640px) {
+
+    body > main > aside#list-tags {
+        position: unset;
+        position: unset;
+        float: unset;
+        margin: var(--bigskip) auto;
+        padding: 0;
+        width: var(--canonic);
+    }
+
+}

themes/hugo-brewm/assets/css/layout/_default/single.css

@@ -0,0 +1,344 @@
+#main-article {
+    margin-top: 1in;
+    line-height: calc(var(--baselineStretch) * 1.618);
+    font-family: var(--rm), serif;
+}
+
+/* article frontmatter */
+
+#main-article > header {
+    display: flex;
+    flex-direction: column;
+    margin:var(--vskip);
+    gap: 1rem;
+}
+
+.subtitle {
+    opacity: 0.86;
+    margin: 1ex 0 0;
+    font-style: italic;
+}
+
+#main-article [role=doc-credit],
+#main-article [role=doc-colophon] {
+    font-size: var(--small);
+}
+
+#doc-cover > img {
+    margin: 2rem 0;
+    aspect-ratio: 10 / 8;
+}
+
+figure img,
+figure svg {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+#doc-author,
+#doc-author a {
+    color: var(--fg);
+    font-style: italic;
+}
+
+/* with avatar */
+#avatar,
+.author,
+.mastodon-comment > footer {
+    display: flex;
+    align-items: center;
+    line-height: 1.272;
+}
+
+#doc-author .has-aria-label::after {
+    font: 1rem var(--sf);
+}
+
+.mastodon-comment > .author > img,
+#avatar {
+    margin-right: 12pt;
+}
+
+.author img {
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+}
+
+.author > a::after {
+    font-size: 0.9em;
+    color: var(--mid);
+}
+
+.author > a > span {
+    color: var(--fg);
+    font-weight: bold;
+}
+
+.author > a > span img {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+}
+
+header time {
+    font-style: italic;
+    -webkit-font-feature-settings:'onum' 1;
+       -moz-font-feature-settings:'onum' 1;
+            font-feature-settings:'onum' 1;
+    font-variant-numeric: oldstyle-nums;
+}
+
+#page .date-has-label > time:before {
+    content: attr(data-time-label)' ';
+}
+
+#page .date-has-label > time,
+#keywords li {
+    text-transform: lowercase;
+}
+
+.doc-publish-date::before {
+    text-transform: initial;
+}
+
+#has-TableOfContents,
+#comments-error {
+    margin: var(--medskip) 0;
+}
+
+#has-TableOfContents ul {
+    list-style: none;
+    font-style: italic;
+}
+
+#main-article audio {
+    border-radius: 2rem;
+}
+
+#main-article audio,
+#main-article section > p {
+    margin: 0.618pc 0;
+    width: var(--golden-ratio);
+}
+
+/* article mainmatter */
+
+#content hr {
+    display: block;
+    margin: 0.618pc 0;
+    border: 0;
+    border-bottom: var(--bound);
+}
+
+#content table {
+    margin: 0.618pc 0;
+    width: 100%;
+    overflow-x: auto;
+}
+
+#content figure {
+    clear: both;
+    max-width: var(--golden-ratio);
+    overflow: auto;
+}
+
+#content figure.fullwidth {
+    max-width: none;
+}
+
+#content p:not(:first-of-type) {
+    text-indent: var(--indent);
+}
+
+#content p img {
+    width: calc(100% - var(--indent));
+}
+
+/* article backmatter */
+
+#main-article > footer {
+    margin:var(--vskip);
+    border-bottom: var(--bound) ;
+}
+
+.footnote-ref {
+    padding: 0 0.5ex;
+    font-size: var(--footnotesize);
+}
+
+.footnotes {
+    font-size: var(--footnotesize);
+}
+
+.footnotes hr {
+    margin: 3rem 0 0;
+    border-bottom: 1px solid;
+    width: 16.18rem;
+}
+
+#has-timeline > p,
+.footnotes ol {
+    margin-top: 0;
+    padding: 0;
+}
+
+.footnotes li::marker {
+    font-feature-settings: 'sups' 1;
+    font-variant-position: super;
+}
+
+#content,
+#keywords,
+#contentinfo {
+    margin: var(--vskip);
+    overflow-wrap: break-word;
+}
+
+.verbose {
+    font: 1rem/2rem monospace;
+    overflow-wrap: anywhere;
+}
+
+#colophon{
+    grid-column: 1;
+}
+
+#colophon > div {
+    display: flex;
+    margin-top: 1ex;
+    gap: 1rem;
+}
+
+#qr {
+    padding-top: 4pt;
+}
+
+#contribute {
+    grid-column: 2;
+    border-radius: 1ex;
+    background-color: var(--g18s);
+    padding: 1.4rem 1.4rem 1rem;
+    height: fit-content;
+    line-height: 1.618;
+    font-family: var(--sf);
+    font-size: var(--small);
+}
+
+#contrib-menu li {
+    margin: 1ex 1ex 1ex 0;
+}
+
+#contrib-menu a {
+    display: inline-block;
+    border-radius: 1ex;
+    background: var(--ac);
+    padding: 4pt 9pt 3pt 7pt;
+    color: var(--bg);
+}
+
+#contentinfo ol {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 2.5rem;
+    list-style: none;
+    counter-reset: li;
+}
+
+#contentinfo ol li {
+    margin-bottom: 1ex;
+    padding-bottom: 1ex;
+}
+
+#contentinfo ol li::before {
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    border-radius: 2rem;
+    background: var(--g18s);
+    padding: 4pt 7pt;
+    color: var(--mid);
+    font: 0.7em monospace;
+    content: counter(li);
+    counter-increment: li;
+}
+
+#contentinfo ol li.see-more::before {
+    content: '>';
+}
+
+#has-timeline ol {
+    margin: 1ex 0 0 1rem;
+    border-left: 2.5pt solid var(--g18s);
+    padding: 1ex 0 0 1rem;
+}
+
+#has-timeline ol li::before {
+    left: -1rem;
+    border: 4pt solid var(--bg);
+    background: var(--mid);
+    padding: 0 3pt;
+    font-size: 0.6em;
+    content: '\a0';
+}
+
+#TableOfContents,
+.letterine {
+    text-transform: lowercase;
+    letter-spacing: 0.1em;
+    font-variant: small-caps;
+    -webkit-font-feature-settings: 'smcp' 1;
+       -moz-font-feature-settings: 'smcp' 1;
+            font-feature-settings: 'smcp' 1;
+}
+
+.letterine::before {
+    display: block;
+    border-bottom: 2pt solid var(--ac);
+    content: '';
+}
+
+.letterine > i {
+    /*  <span class='letterine'><i>e</i>xample</span>
+        inconsistence result across browsers
+        */
+    position: relative;
+    top: -0.2rem;
+    float: left;
+    background: var(--bg);
+    padding-right: .1em;
+    line-height: 0.5;
+    color: var(--ac);
+    font-size: 6em;
+}
+
+#has-timeline .has-aria-label-top {
+    margin: 5pt 0;
+}
+
+#contentinfo {
+    display: grid;
+    grid-template-columns: 6fr 4fr;
+    gap: var(--medskip);
+}
+
+#has-share,
+#comments {
+    grid-column: 1 / 3;
+}
+
+@media screen and (max-width: 640px) {
+
+    #contentinfo {
+        display: block;
+    }
+
+    #contentinfo > * {
+        margin-bottom: var(--bigskip) ;
+    }
+    .katex-display {
+        overflow-x: auto;
+    }
+
+}

themes/hugo-brewm/assets/css/media/print.css

@@ -0,0 +1,204 @@
+@media print {
+
+    :root {
+        font-size: 10pt;
+    }
+
+    @page {
+        margin: 10vmin;
+    }
+
+    body {
+        background: none;
+        padding-left: 0;
+        max-width: 100vw;
+    }
+
+    body > header,
+    body > footer,
+    body > footer *,
+    body > div,
+    body > aside,
+    body > main > header,
+    audio,
+    #has-share,
+    #background-body,
+    #contribute,
+    #related,
+    #coffee-counter,
+    #menu-footer
+     {
+        display: none;
+    }
+
+    body > main {
+        height: unset;
+    }
+
+    body > main > #main-footer {
+        border: unset;
+        margin:var(--vskip);
+        padding: unset;
+    }
+
+    .pagewidth,
+    #main-footer .pagewidth {
+        padding: 0;
+    }
+
+    body > main > #main-footer {
+        background: none;
+        color: var(--fg);
+    }
+
+    body h1:first-of-type {
+        margin-top: 0;
+    }
+
+    /* dont work properly on firefox
+    h1,
+    section > h1,
+    .section-title {
+        page-break-before: always;
+        break-before: always;
+
+    header > h1 {
+        page-break-before: avoid !important;
+        break-before: avoid !important;
+    }
+    } */
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .section-title {
+        page-break-after: avoid;
+        break-after: avoid;
+    }
+
+    table,
+    img,
+    svg,
+    figure,
+    .sidenote,
+    .marginnote,
+    #comments article,
+    article#feed-item {
+        page-break-inside: avoid;
+        break-inside: avoid;
+    }
+
+    pre > code {
+        margin-left: 0;
+        min-width: 62%;
+        max-width: 100%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+    }
+
+    article #content a::after {
+        --tsf: unset;
+        -webkit-transform: var(--tsf);
+           -moz-transform: var(--tsf);
+            -ms-transform: var(--tsf);
+             -o-transform: var(--tsf);
+                transform: var(--tsf);
+        font: unset;
+        content: '\a0('attr(href)')';
+    }
+
+    #keywords a::after {
+        content: unset;
+    }
+
+    .marginpar {
+        width: var(--golden-ratio);
+        margin-left: calc(var(--golden-ratio) * -1);
+    }
+
+    .marginpar.abs {
+        right: 0;
+        width: 38%;
+    }
+
+    #contentinfo {
+        display: block;
+    }
+}
+
+/* font-size scaling = 1/sqrt(640/device-width)
+@media (max-width: 640px) {
+    :root {
+        font-size: calc(var(--fontScale)*100%);
+    }
+}
+
+@media (max-width: 601px) {
+    :root {
+        font-size: calc(var(--fontScale)*96.9%);
+    }
+}
+
+@media (max-width: 576px) {
+    :root {
+        font-size: calc(var(--fontScale)*94.8%);
+    }
+}
+
+@media (max-width: 540px) {
+    :root {
+        font-size: calc(var(--fontScale)*91.8%);
+    }
+}
+
+@media (max-width: 512px) {
+    :root {
+        font-size: calc(var(--fontScale)*89.4%);
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        font-size: calc(var(--fontScale)*86.6%);
+    }
+}
+
+@media (max-width: 428px) {
+    :root {
+        font-size: calc(var(--fontScale)*81.7%);
+    }
+}
+
+@media (max-width: 414px) {
+    :root {
+        font-size: calc(var(--fontScale)*80.4%);
+    }
+}
+
+@media (max-width: 390px) {
+    :root {
+        font-size: calc(var(--fontScale)*78%);
+    }
+}
+
+@media (max-width: 375px) {
+    :root {
+        font-size: calc(var(--fontScale)*76.5%);
+    }
+}
+
+@media (max-width: 360px) {
+    :root {
+        font-size: calc(var(--fontScale)*75%);
+    }
+}
+
+@media (max-width: 320px) {
+    :root {
+        font-size: calc(var(--fontScale)*70.7%);
+    }
+} */

themes/hugo-brewm/assets/css/optimize.css

@@ -0,0 +1,191 @@
+#setContrast > input:checked:focus + label,
+#OpenDyslexic:checked + label #OpenDyslexicState,
+#saveButton:hover,
+#saveButton:focus,
+#bionReadSwitch:hover + label,
+#bionReadSwitch:focus + label,
+#bionReadSwitch:active + label,
+#bionReadSwitch:checked + label,
+#join-discussion:hover,
+#join-discussion:focus,
+a.cta:hover,
+a.cta:focus {
+    background: var(--ac);
+}
+
+#has-a11y[open] > #has-a11y-summary,
+#lightSwitch:hover + label span::after,
+#lightSwitch:focus + label span::after,
+#a11y-menu > .has-aria-label:focus,
+#a11y-menu > .has-aria-label:hover,
+#menu-footer a:hover,
+#menu-footer a:focus,
+a.replies.active,
+a.reblogs.active,
+#has-author-name-menu a:hover,
+#has-author-name-menu a:focus,
+#related a:hover,
+#related a:focus {
+    color: var(--ac);
+}
+
+.feed-item > hgroup > div a,
+#related a {
+    color: var(--fg);
+}
+
+.readingTime,
+.feed-item > section > div,
+.feed-item > hgroup > div,
+.feed-item:hover img,
+#contrib-menu a:hover,
+#contrib-menu a:focus {
+    opacity: 0.86;
+}
+
+main > header > menu > li > a:hover,
+main > header > menu > li > a:focus,
+.feed-item:hover .par,
+.feed-item:focus .par,
+ul.invert a:hover,
+::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+
+main#page + footer #setBaselineStretch,
+main#page + footer #useBionRead,
+input[type=checkbox] + label .off,
+input[type=checkbox]:checked + label .on,
+#TableOfContents + nav > ul,
+#TableOfContents + nav > ul > li,
+.has-desc:after {
+    display: block;
+}
+
+input[type=checkbox]:checked + label .off,
+input[type=checkbox] + label .on,
+#setBaselineStretch,
+#has-breadcrumb summary,
+#has-pagination summary,
+#page #back,
+.feed-item > footer > ul::-webkit-scrollbar,
+.feed-item > hgroup > div > span::-webkit-scrollbar,
+.feed-item .date-has-label .doc-publish-date,
+.carousel__viewport::-webkit-scrollbar,
+#logomark--dark,
+#top-nav[open] > summary,
+#top-nav-screen,
+#has-more-menu[open] > summary > .t,
+.languangeName,
+a#has-i18n > img,
+.list-month > summary::marker,
+.list-month > summary::-webkit-details-marker,
+#series ~ .list-year .has-post::after,
+#content a.footnote-ref::after,
+#content a.footnote-backref::after,
+details.presentation > summary::-webkit-details-marker,
+details.presentation > summary::marker,
+td.lntd:first-child code.hljs {
+    display: none;
+}
+
+#has-a11y[open] #a11y,
+#OpenDyslexic:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:focus + label #OpenDyslexicIndicator,
+#logo #logotype__text,
+.marginpar-ctrl:checked + label::before,
+details[open] > .anchor:after,
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar,
+#has-l10n a:hover,
+#has-l10n a:focus,
+#top-nav a:hover,
+#top-nav a:focus,
+.anchor:hover,
+.anchor:focus,
+#has-a11y[open] > summary .icon::before,
+#has-search[open] .icon::before,
+details[open] > summary > .menu-icon::before,
+.loading:after,
+#top-nav[open] > nav {
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+hr.ldots::after,
+#to-top::before,
+input + label > #lightSwitchIndicator,
+.hand,
+.pagination .rfill a::before,
+.carousel__viewport__slide:last-child > nav a::before,
+#back::before,
+.feed-item:hover,
+.feed-item:focus-within,
+ul.carousel__viewport > li:hover,
+ul.carousel__viewport > li:focus-within,
+.pagination .lfill a::after,
+#list-tags > nav a::after,
+.carousel__viewport__slide:first-child > nav a::after,
+.parent-anchor a::after,
+#i18n-menu a::after,
+#content a::after,
+#duckduckgo .form__button,
+#to-content,
+.t {
+    -webkit-transform: var(--tsf);
+       -moz-transform: var(--tsf);
+        -ms-transform: var(--tsf);
+         -o-transform: var(--tsf);
+            transform: var(--tsf);
+}
+
+#OpenDyslexicIndicator,
+.marginpar-ctrl + label::before,
+.anchor:after,
+#has-share i:hover {
+    -webkit-transition: var(--tst);
+       -moz-transition: var(--tst);
+         -o-transition: var(--tst);
+            transition: var(--tst);
+}
+
+#has-a11y[open] #a11y,
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar,
+#top-nav[open] > nav {
+    -webkit-transform-origin: var(--tso);
+       -moz-transform-origin: var(--tso);
+        -ms-transform-origin: var(--tso);
+         -o-transform-origin: var(--tso);
+            transform-origin: var(--tso);
+}
+
+#has-share a:focus,
+.form > *:focus {
+    outline: none !important;
+}
+
+hgroup,
+hgroup > h1,
+figure,
+#setOpenDyslexic > label::before,
+#main-footer-secondary,
+#menu-footer {
+    margin: 0;
+}
+
+ul.rounded,
+.list-day {
+    padding: 0;
+}
+
+ul.delimiter:first-child li:first-child:before,
+.feed-item > hgroup ul.delimiter:first-child li:last-child::after,
+#content a.has-img::after,
+#doc-author .delimiter li:last-child::after {
+    content: '';
+}

themes/hugo-brewm/assets/css/typeface-local/Cormorant.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Regular.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Italic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Bold.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-BoldItalic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+:root {
+    --rm: 'Cormorant';
+}

themes/hugo-brewm/assets/css/typeface-local/Crimson.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Roman'),
+     url(/css/fonts/crimson-roman-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Italic'),
+         url(/css/fonts/crimson-italic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson Bold'),
+         url(/css/fonts/crimson-bold-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson BoldItalic'),
+         url(/css/fonts/crimson-bolditalic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+:root {
+    --rm: 'crimson';
+}

themes/hugo-brewm/assets/css/typeface-local/EBGaramond.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Regular.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Italic.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Bold.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-BoldItalic.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+:root {
+    --rm: 'EB Garamond';
+}

themes/hugo-brewm/assets/css/typeface-local/Inconsolata.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inconsolata'),
+         url(/css/fonts/Inconsolata-Regular.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inconsolata Bold'),
+         url(/css/fonts/Inconsolata-Bold.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+:root {
+    --tt: 'Inconsolata';
+}

themes/hugo-brewm/assets/css/typeface-local/Inter.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter'),
+         url(/css/fonts/Inter-Regular.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter Italic'),
+         url(/css/fonts/Inter-Italic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold'),
+         url(/css/fonts/Inter-Bold.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold Italic'),
+         url(/css/fonts/Inter-BoldItalic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+:root {
+    --sf: 'Inter';
+}

themes/hugo-brewm/assets/css/typeface-local/Montserrat.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Regular.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Italic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Bold.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-BoldItalic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+:root {
+    --sf: 'Montserrat';
+}

themes/hugo-brewm/assets/css/typeface-local/OpenDyslexic.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic'),
+         url(/css/fonts/OpenDyslexic-Regular.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic Italic'),
+         url(/css/fonts/OpenDyslexic-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold'),
+         url(/css/fonts/OpenDyslexic-Bold.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold Italic'),
+         url(/css/fonts/OpenDyslexic-Bold-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+:root {
+    --od: 'OpenDyslexic';
+}

themes/hugo-brewm/assets/css/typeface-local/Rosario.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Rosario-Regular.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Rosario-Italic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Rosario-Bold.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Rosario-BoldItalic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+:root {
+    --sf: 'Rosario';
+}

themes/hugo-brewm/assets/css/typeface-local/icon.css

@@ -0,0 +1,184 @@
+/* Icon Fonts */
+@font-face {
+    font-family: 'base-ui';
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+    src: url('/css/fonts/base-ui.woff2') format('woff2');
+}
+
+/* fallback setting for websafefonts */
+
+@font-face {
+    font-family: 'Times New Roman';
+    src: local('Times New Roman');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Arial';
+    src: local('Arial');
+    size-adjust: 87%;
+    ascent-override: 101%;
+    descent-override: 34%;
+}
+
+@font-face {
+    font-family: 'Courier New';
+    src: local('Courier New');
+    size-adjust: 107%;
+    ascent-override: 83%;
+    descent-override: 28%;
+}
+
+#mastodonInstance::before,
+#has-share i,
+.stat a::before,
+.icon {
+    font-family: 'base-ui' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: 'liga';
+       -moz-font-feature-settings: 'liga=1';
+       -moz-font-feature-settings: 'liga';
+        -ms-font-feature-settings: 'liga' 1;
+            font-feature-settings: 'liga';
+    -webkit-font-variant-ligatures: discretionary-ligatures;
+            font-variant-ligatures: discretionary-ligatures;
+}
+
+.emoji {
+    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
+}
+
+.icon.accessibility:before {content: '\e900';}
+.icon.arrow:before {content: '\e902';}
+.icon.circle-checked:before {content: '\e903';}
+.icon.circle-unchecked:before {content: '\e904';}
+.icon.copyleft:before {content: '\e906';}
+#has-share .email:before,
+.icon.email:before {content: '\e907';}
+a.favourites::before,
+.icon.heart:before {content: '\e908';}
+.icon.internationalization:before {content: '\e909';}
+.icon.localization:before {content: '\e90a';}
+.icon.menu:before {content: '\e90b';}
+#has-share .print:before,
+.icon.print:before {content: '\e90c';}
+.reblogs::before,
+.icon.reblog:before {content: '\e90d';}
+a.replies::before,
+.icon.reply:before {content: '\e90e';}
+.icon.reset:before {content: '\e90f';}
+.icon.rss:before {content: '\e910';}
+.icon.search:before {content: '\e911';}
+.icon.share:before {content: '\e912';}
+.icon.xmark:before {content: '\e913';}
+.icon.behance:before {content: '\e914';}
+.icon.bigcartel:before {content: '\e915';}
+.icon.bitbucket:before {content: '\e916';}
+.icon.blogger:before {content: '\e917';}
+#has-share .bluesky:before,
+.icon.bluesky:before {content: '\e918';}
+.icon.bukalapak:before {content: '\e919';}
+.icon.buymeacoffee:before {content: '\e91a';}
+.icon.clubhouse:before {content: '\e91b';}
+.icon.codepen:before {content: '\e91c';}
+.icon.creativefabrica:before {content: '\e91d';}
+.icon.dailymotion:before {content: '\e91e';}
+.icon.dev:before {content: '\e91f';}
+.icon.deviantart:before {content: '\e920';}
+.icon.digg:before {content: '\e921';}
+.icon.discord:before {content: '\e922';}
+.icon.dribbble:before {content: '\e923';}
+.icon.ebay:before {content: '\e924';}
+.icon.etsy:before {content: '\e925';}
+#has-share .facebook:before,
+.icon.facebook:before {content: '\e926';}
+.icon.figma:before {content: '\e927';}
+.icon.flickr:before {content: '\e928';}
+.icon.flipkart:before {content: '\e929';}
+.icon.github:before {content: '\e92a';}
+.icon.githubsponsors:before {content: '\e92b';}
+.icon.gitlab:before {content: '\e92c';}
+.icon.gnusocial:before {content: '\e92d';}
+.icon.goodreads:before {content: '\e92e';}
+.icon.googlescholar:before {content: '\e92f';}
+.icon.gumroad:before {content: '\e930';}
+#has-share .hackernews:before,
+.icon.hackernews:before {content: '\e931';}
+.icon.hashnode:before {content: '\e932';}
+.icon.icon--500px:before {content: '\e933';}
+.icon.instagram:before {content: '\e934';}
+.icon.jsfiddle:before {content: '\e935';}
+.icon.karyakarsa:before {content: '\e936';}
+.icon.keybase:before {content: '\e937';}
+.icon.keycdn:before {content: '\e938';}
+.icon.kickstarter:before {content: '\e939';}
+.icon.kofi:before {content: '\e93a';}
+.icon.lazada:before {content: '\e93b';}
+.icon.liberapay:before {content: '\e93c';}
+#has-share .linkedin:before,
+.icon.linkedin:before {content: '\e93d';}
+.icon.mastodon:before {content: '\e93e';}
+.icon.medium:before {content: '\e93f';}
+.icon.olx:before {content: '\e940';}
+.icon.opencollective:before {content: '\e941';}
+.icon.openid:before {content: '\e942';}
+.icon.orcid:before {content: '\e943';}
+.icon.patreon:before {content: '\e944';}
+.icon.paypal:before {content: '\e945';}
+.icon.peertube:before {content: '\e946';}
+#has-share .pinterest:before,
+.icon.pinterest:before {content: '\e947';}
+.icon.pleroma:before {content: '\e948';}
+.icon.publons:before {content: '\e949';}
+.icon.quora:before {content: '\e94a';}
+#has-share .reddit:before,
+.icon.reddit:before {content: '\e94b';}
+.icon.researchgate:before {content: '\e94c';}
+.icon.saweria:before {content: '\e94d';}
+.icon.sellfy:before {content: '\e94e';}
+.icon.shopee:before {content: '\e94f';}
+.icon.shopify:before {content: '\e950';}
+.icon.signal:before {content: '\e951';}
+.icon.snapchat:before {content: '\e952';}
+.icon.soundcloud:before {content: '\e953';}
+.icon.stackexchange:before {content: '\e954';}
+.icon.stackoverflow:before {content: '\e955';}
+.icon.stripe:before {content: '\e956';}
+.icon.substack:before {content: '\e957';}
+#has-share .telegram:before,
+.icon.telegram:before {content: '\e958';}
+.icon.threads:before {content: '\e959';}
+.icon.tiktok:before {content: '\e95a';}
+.icon.tokopedia:before {content: '\e95b';}
+#has-share .tumblr:before,
+.icon.tumblr:before {content: '\e95c';}
+.icon.twitch:before {content: '\e95d';}
+#has-share .twitter:before,
+.icon.twitter:before {content: '\e95e';}
+.icon.vimeo:before {content: '\e95f';}
+.icon.vine:before {content: '\e960';}
+#has-share .vk:before,
+.icon.vk:before {content: '\e961';}
+.icon.wattpad:before {content: '\e962';}
+.icon.weibo:before {content: '\e963';}
+#has-share .whatsapp:before,
+.icon.whatsapp:before {content: '\e964';}
+.icon.wikipedia:before {content: '\e965';}
+.icon.wordpress:before {content: '\e966';}
+.icon.write-dot-as:before {content: '\e967';}
+.icon.x:before {content: '\e968';}
+#has-share .xing:before,
+.icon.xing:before {content: '\e969';}
+.icon.xmpp:before {content: '\e96a';}
+.icon.youtube:before {content: '\e96b';}

themes/hugo-brewm/assets/css/typeface/Cormorant.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Regular.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Italic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Bold.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-BoldItalic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+:root {
+    --rm: 'Cormorant';
+}

themes/hugo-brewm/assets/css/typeface/Crimson.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Roman'),
+     url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-roman-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Italic'),
+         url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-italic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson Bold'),
+         url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-bold-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson BoldItalic'),
+         url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-bolditalic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+:root {
+    --rm: 'crimson';
+}

themes/hugo-brewm/assets/css/typeface/EBGaramond.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/EBGaramond12-Regular.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/EBGaramond12-Italic.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/fonts/EBGaramond12-Bold.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/fonts/EBGaramond12-BoldItalic.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+:root {
+    --rm: 'EB Garamond';
+}

themes/hugo-brewm/assets/css/typeface/Inconsolata.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inconsolata'),
+         url(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/Inconsolata-Regular.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inconsolata Bold'),
+         url(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/Inconsolata-Bold.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+:root {
+    --tt: 'Inconsolata';
+}

themes/hugo-brewm/assets/css/typeface/Inter.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter'),
+         url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Regular.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter Italic'),
+         url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Italic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold'),
+         url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Bold.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold Italic'),
+         url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-BoldItalic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+:root {
+    --sf: 'Inter';
+}

themes/hugo-brewm/assets/css/typeface/Montserrat.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Regular.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Italic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Bold.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-BoldItalic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+:root {
+    --sf: 'Montserrat';
+}

themes/hugo-brewm/assets/css/typeface/OpenDyslexic.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic'),
+         url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Regular.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic Italic'),
+         url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold'),
+         url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Bold.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold Italic'),
+         url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Bold-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+:root {
+    --od: 'OpenDyslexic';
+}

themes/hugo-brewm/assets/css/typeface/Rosario.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Regular.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Italic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Bold.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-BoldItalic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+:root {
+    --sf: 'Rosario';
+}

themes/hugo-brewm/assets/css/typeface/icon.css

@@ -0,0 +1,184 @@
+/* Icon Fonts */
+@font-face {
+    font-family: 'base-ui';
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+    src: url(https://raw.githubusercontent.com/foxihd/hugo-brewm/main/static/css/fonts/base-ui.woff2) format('woff2');
+}
+
+/* fallback setting for websafefonts */
+
+@font-face {
+    font-family: 'Times New Roman';
+    src: local('Times New Roman');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Arial';
+    src: local('Arial');
+    size-adjust: 87%;
+    ascent-override: 101%;
+    descent-override: 34%;
+}
+
+@font-face {
+    font-family: 'Courier New';
+    src: local('Courier New');
+    size-adjust: 107%;
+    ascent-override: 83%;
+    descent-override: 28%;
+}
+
+#mastodonInstance::before,
+#has-share i,
+.stat a::before,
+.icon {
+    font-family: 'base-ui' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: 'liga';
+       -moz-font-feature-settings: 'liga=1';
+       -moz-font-feature-settings: 'liga';
+        -ms-font-feature-settings: 'liga' 1;
+            font-feature-settings: 'liga';
+    -webkit-font-variant-ligatures: discretionary-ligatures;
+            font-variant-ligatures: discretionary-ligatures;
+}
+
+.emoji {
+    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
+}
+
+.icon.accessibility:before {content: '\e900';}
+.icon.arrow:before {content: '\e902';}
+.icon.circle-checked:before {content: '\e903';}
+.icon.circle-unchecked:before {content: '\e904';}
+.icon.copyleft:before {content: '\e906';}
+#has-share .email:before,
+.icon.email:before {content: '\e907';}
+a.favourites::before,
+.icon.heart:before {content: '\e908';}
+.icon.internationalization:before {content: '\e909';}
+.icon.localization:before {content: '\e90a';}
+.icon.menu:before {content: '\e90b';}
+#has-share .print:before,
+.icon.print:before {content: '\e90c';}
+.reblogs::before,
+.icon.reblog:before {content: '\e90d';}
+a.replies::before,
+.icon.reply:before {content: '\e90e';}
+.icon.reset:before {content: '\e90f';}
+.icon.rss:before {content: '\e910';}
+.icon.search:before {content: '\e911';}
+.icon.share:before {content: '\e912';}
+.icon.xmark:before {content: '\e913';}
+.icon.behance:before {content: '\e914';}
+.icon.bigcartel:before {content: '\e915';}
+.icon.bitbucket:before {content: '\e916';}
+.icon.blogger:before {content: '\e917';}
+#has-share .bluesky:before,
+.icon.bluesky:before {content: '\e918';}
+.icon.bukalapak:before {content: '\e919';}
+.icon.buymeacoffee:before {content: '\e91a';}
+.icon.clubhouse:before {content: '\e91b';}
+.icon.codepen:before {content: '\e91c';}
+.icon.creativefabrica:before {content: '\e91d';}
+.icon.dailymotion:before {content: '\e91e';}
+.icon.dev:before {content: '\e91f';}
+.icon.deviantart:before {content: '\e920';}
+.icon.digg:before {content: '\e921';}
+.icon.discord:before {content: '\e922';}
+.icon.dribbble:before {content: '\e923';}
+.icon.ebay:before {content: '\e924';}
+.icon.etsy:before {content: '\e925';}
+#has-share .facebook:before,
+.icon.facebook:before {content: '\e926';}
+.icon.figma:before {content: '\e927';}
+.icon.flickr:before {content: '\e928';}
+.icon.flipkart:before {content: '\e929';}
+.icon.github:before {content: '\e92a';}
+.icon.githubsponsors:before {content: '\e92b';}
+.icon.gitlab:before {content: '\e92c';}
+.icon.gnusocial:before {content: '\e92d';}
+.icon.goodreads:before {content: '\e92e';}
+.icon.googlescholar:before {content: '\e92f';}
+.icon.gumroad:before {content: '\e930';}
+#has-share .hackernews:before,
+.icon.hackernews:before {content: '\e931';}
+.icon.hashnode:before {content: '\e932';}
+.icon.icon--500px:before {content: '\e933';}
+.icon.instagram:before {content: '\e934';}
+.icon.jsfiddle:before {content: '\e935';}
+.icon.karyakarsa:before {content: '\e936';}
+.icon.keybase:before {content: '\e937';}
+.icon.keycdn:before {content: '\e938';}
+.icon.kickstarter:before {content: '\e939';}
+.icon.kofi:before {content: '\e93a';}
+.icon.lazada:before {content: '\e93b';}
+.icon.liberapay:before {content: '\e93c';}
+#has-share .linkedin:before,
+.icon.linkedin:before {content: '\e93d';}
+.icon.mastodon:before {content: '\e93e';}
+.icon.medium:before {content: '\e93f';}
+.icon.olx:before {content: '\e940';}
+.icon.opencollective:before {content: '\e941';}
+.icon.openid:before {content: '\e942';}
+.icon.orcid:before {content: '\e943';}
+.icon.patreon:before {content: '\e944';}
+.icon.paypal:before {content: '\e945';}
+.icon.peertube:before {content: '\e946';}
+#has-share .pinterest:before,
+.icon.pinterest:before {content: '\e947';}
+.icon.pleroma:before {content: '\e948';}
+.icon.publons:before {content: '\e949';}
+.icon.quora:before {content: '\e94a';}
+#has-share .reddit:before,
+.icon.reddit:before {content: '\e94b';}
+.icon.researchgate:before {content: '\e94c';}
+.icon.saweria:before {content: '\e94d';}
+.icon.sellfy:before {content: '\e94e';}
+.icon.shopee:before {content: '\e94f';}
+.icon.shopify:before {content: '\e950';}
+.icon.signal:before {content: '\e951';}
+.icon.snapchat:before {content: '\e952';}
+.icon.soundcloud:before {content: '\e953';}
+.icon.stackexchange:before {content: '\e954';}
+.icon.stackoverflow:before {content: '\e955';}
+.icon.stripe:before {content: '\e956';}
+.icon.substack:before {content: '\e957';}
+#has-share .telegram:before,
+.icon.telegram:before {content: '\e958';}
+.icon.threads:before {content: '\e959';}
+.icon.tiktok:before {content: '\e95a';}
+.icon.tokopedia:before {content: '\e95b';}
+#has-share .tumblr:before,
+.icon.tumblr:before {content: '\e95c';}
+.icon.twitch:before {content: '\e95d';}
+#has-share .twitter:before,
+.icon.twitter:before {content: '\e95e';}
+.icon.vimeo:before {content: '\e95f';}
+.icon.vine:before {content: '\e960';}
+#has-share .vk:before,
+.icon.vk:before {content: '\e961';}
+.icon.wattpad:before {content: '\e962';}
+.icon.weibo:before {content: '\e963';}
+#has-share .whatsapp:before,
+.icon.whatsapp:before {content: '\e964';}
+.icon.wikipedia:before {content: '\e965';}
+.icon.wordpress:before {content: '\e966';}
+.icon.write-dot-as:before {content: '\e967';}
+.icon.x:before {content: '\e968';}
+#has-share .xing:before,
+.icon.xing:before {content: '\e969';}
+.icon.xmpp:before {content: '\e96a';}
+.icon.youtube:before {content: '\e96b';}

themes/hugo-brewm/assets/css/typeface/websafe.css

@@ -0,0 +1,13 @@
+:root {
+    --rm: 'Times New Roman';
+    --rmosf: 'Palatino';
+    --sf: Arial;
+    --tt: 'Courier New';
+}
+
+/* :root {
+    --rm: Garamond, Palatino, 'Times New Roman';
+    --rmosf: 'Palatino';
+    --sf: Helvetica, Verdana, Arial;
+    --tt: Courier, Consolas, 'Courier New';
+} */