NormandErwan · NormandErwan · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026 · Apr 18, 2026
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -4,27 +4,49 @@ on:
   push:
     branches:
       - main
+  pull_request:
+
+concurrency:
+  group: pages-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
-  build-deploy:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Dart Sass
+        run: sudo snap install dart-sass
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: 'latest'
+          extended: true
+
+      - name: Build
+        working-directory: ./exampleSite
+        run: hugo --minify --themesDir ../.. --baseURL https://normanderwan.github.io/Blogpaper/
+
+      - name: Upload artifact
+        if: github.ref == 'refs/heads/main'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./exampleSite/public
+
+  deploy:
+    if: github.ref == 'refs/heads/main'
+    needs: build
     runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     steps:
-    - name: Checkout
-      uses: actions/checkout@v1
-
-    - name: Setup Hugo
-      uses: peaceiris/actions-hugo@v2
-      with:
-        hugo-version: 'latest'
-        extended: true
-
-    - name: Build
-      working-directory: ./exampleSite
-      run: hugo --minify --themesDir ../.. --baseURL https://normanderwan.github.io/Blogpaper/
-
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v2
-      env:
-        PERSONAL_TOKEN: ${{ secrets.PersonalAccessToken }}
-        PUBLISH_BRANCH: gh-pages
-        PUBLISH_DIR: ./exampleSite/public
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,10 @@
 # Hugo default output directory
 **/public
 
+# Hugo build artifacts
+**/.hugo_build.lock
+**/resources/_gen/
+
 # Hugo binaries for local testing
 bin
 

diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019-2020 Erwan Normand <normand.erwan@protonmail.com>
+Copyright (c) 2019-2026 Erwan Normand <normand.erwan@protonmail.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

diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ See the [style guide](https://normanderwan.github.io/Blogpaper/posts/style-guide
     git submodule add https://github.com/NormandErwan/Blogpaper themes/Blogpaper
     ```
 
-4. Edit your `config.yml`:
+4. Edit your `hugo.yaml`:
 
     ```yml
     theme: Blogpaper
@@ -43,27 +43,27 @@ the next section to configure your site and add banner images on your pages.
 
 ## Configure
 
-1. Edit your `config.yml`:
+1. Edit your `hugo.yaml`:
 
     ```yml
     theme: Blogpaper
     title: # Your site title
-    author:
-      name: # Your name
     baseURL: # Hostname (and path) to the root, e.g. https://bep.is/
     copyright: # Optional, will be displayed on site's footer, if this line is removed an default copyright will be generated
     languageCode: en # The language code of your site, by default "en"
-    menu:
+    menus:
       main: # Optional, the menu to display on top-right of your site, see https://gohugo.io/templates/menu-templates/#site-config-menus
         - name: About
           url: /about
     params:
       description: # The description of your site (used on a <meta> tag)
       subtitleLength: 25 # The number of words on the subtitle of a page
+      author:
+        name: # Your name
     ```
 
     See <https://gohugo.io/getting-started/configuration/> for more configuration settings (such as `datetimeFormat`,
-    `mainSections` or `paginate`).
+    `mainSections` or `pagination.pagerSize`).
     See also how to configure [post summaries](https://gohugo.io/content-management/summaries/) on the homepage.
 
     Every page can have a subtitle, displayed bellow the title on the header of the page.
@@ -122,8 +122,8 @@ the next section to configure your site and add banner images on your pages.
 ## Troubleshooting / FAQ
 
 - I can't generate the site.
-  - Problem: I have the error: `Problem: Building sites … ERROR Transformation failed: TOCSS: failed to transform "blogpaper.scss" (text/x-scss)`.
-  - Solution: [Reinstall Hugo](https://gohugo.io/getting-started/installing/), the *extended* version not the standard one.
+  - Problem: I have the error: `Error: error building site: SASS: failed to transform "blogpaper.scss"`.
+  - Solution: Install [Dart Sass](https://sass-lang.com/install/) and make sure it's on your `PATH`. This theme requires Dart Sass, not the deprecated LibSass. Also ensure you're using the [Hugo extended](https://gohugo.io/getting-started/installing/) version.
 
 - I want to customize the CSS.
   - Use your own CSS or SCSS files. Simply add the files in your `/assets/` folder.

diff --git a/archetypes/posts.md b/archetypes/posts.md
@@ -8,7 +8,7 @@ categories: # Optional, will be displayed above the title of the page
 tags: # Optional, will be displayed at the bottom end of the post
 - First tag
 - Second tag
-summary: # Optional, will be diplayed on the homepage; remove this line to generate an automatic summary (see https://gohugo.io/content-management/summaries/)
+summary: # Optional, will be displayed on the homepage; remove this line to generate an automatic summary (see https://gohugo.io/content-management/summaries/)
 draft: true
 banner:
   #src: {{ .TranslationBaseName }}.jpg # Optional, the filename of the banner, by default {{ .TranslationBaseName }}.jpg

diff --git a/assets/css/blogpaper.scss b/assets/css/blogpaper.scss
@@ -1,5 +1,7 @@
+@use "sass:color";
+
 @function to-rgb($hex) {
-  @return red($hex), green($hex), blue($hex);
+  @return color.channel($hex, "red", $space: rgb), color.channel($hex, "green", $space: rgb), color.channel($hex, "blue", $space: rgb);
 }
 
 @mixin set-links-color($color-rgb, $link-underline-opacity, $color-opacity: 1) {
@@ -17,18 +19,24 @@
   --color-background: #fff;
   --color-text: #333;
   --color-text-rgb: #{to-rgb(#333)};
-  --color-metadata: #666;
-  --color-metadata-rgb: #{to-rgb(#666)};
+  --color-metadata: #595959;
+  --color-metadata-rgb: #{to-rgb(#595959)};
   --color-link-underline-opacity: 0.5;
 
   --font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Times, serif;
   --font-family-metadata: system-font;
   --font-size: 2rem;
-  --font-line-height: 2;
+  --font-line-height: 1.75;
 
   --inline-list__item-margin-left: 2rem;
   --container-padding: 1rem;
 
+  --transition-duration: 200ms;
+  --transition-easing: ease;
+  --border-radius: 0.25rem;
+  --focus-outline-width: 2px;
+  --focus-outline-offset: 3px;
+
   --nav-max-width: 100rem;
   --nav-height: 8rem;
 
@@ -76,6 +84,7 @@
   font-family: system-font;
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
 }
 
@@ -101,6 +110,34 @@ body {
   color: var(--color-text);
 }
 
+/* Skip to content */
+
+.skip-to-content {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+
+  &:focus-visible {
+    position: fixed;
+    top: 0.5rem;
+    left: 0.5rem;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    padding: 0.5rem 1rem;
+    background: var(--color-background);
+    color: var(--color-text);
+    border: var(--focus-outline-width) solid var(--color-text);
+    border-radius: var(--border-radius);
+    font-family: var(--font-family-metadata);
+    font-size: calc(0.8 * var(--font-size));
+    text-decoration: none;
+    z-index: 9999;
+  }
+}
+
 /* General items */
 
 a {
@@ -113,6 +150,12 @@ a {
   }
 }
 
+:focus-visible {
+  outline: var(--focus-outline-width) solid var(--color-text);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--border-radius);
+}
+
 .banner {
   position: relative;
   margin: 0;
@@ -354,3 +397,54 @@ a {
   font-size: var(--footer-font-size);
   margin-top: var(--footer-margin-top);
 }
+
+/* Dark mode */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #1a1a1a;
+    --color-text: #e8e8e8;
+    --color-text-rgb: #{to-rgb(#e8e8e8)};
+    --color-metadata: #a8a8a8;
+    --color-metadata-rgb: #{to-rgb(#a8a8a8)};
+    --header--main-color-background: #111;
+    --table__tr-border-bottom: 1px solid #444;
+  }
+}
+
+/* Print */
+
+@media print {
+  .nav,
+  .footer--main {
+    display: none;
+  }
+
+  .header--main {
+    background: none;
+    color: inherit;
+    padding-top: 0;
+  }
+
+  .header--main .banner {
+    display: none;
+  }
+
+  a {
+    color: inherit;
+    border-bottom: none;
+    text-decoration: underline;
+  }
+}
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
diff --git a/exampleSite/content/posts/rich-content/index.md b/exampleSite/content/posts/rich-content/index.md
@@ -25,14 +25,6 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 
 ---
 
-## Twitter Simple Shortcode
+## Vimeo Shortcode
 
-{{< twitter_simple 1085870671291310081 >}}
-
-<br>
-
----
-
-## Vimeo Simple Shortcode
-
-{{< vimeo_simple 48912912 >}}
+{{< vimeo 48912912 >}}
diff --git a/exampleSite/content/posts/style-guide/index.md b/exampleSite/content/posts/style-guide/index.md
@@ -154,7 +154,7 @@ Table examples are from here: <https://github.com/adam-p/markdown-here/wiki/Mark
 
 ## Videos
 
-{{< vimeo_simple 137643135 >}}
+{{< vimeo 137643135 >}}
 
 [This Mountain](https://vimeo.com/137643135) from [Evan Mann / OWP Denver](https://vimeo.com/evanmann) on
 [Vimeo](https://vimeo.com).

diff --git a/exampleSite/config.yml → exampleSite/hugo.yaml b/exampleSite/config.yml → exampleSite/hugo.yaml
@@ -1,12 +1,19 @@
-author:
-  name: Erwan Normand
 baseURL: https://example.com
 languageCode: en
-menu:
+title: Blogpaper
+theme: Blogpaper
+
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+
+params:
+  description: Example site for the Hugo's Blogpaper theme
+  author:
+    name: Erwan Normand
+
+menus:
   main:
     - name: About
       url: /about
-params:
-  description: Example site for the Hugo's Blogpaper theme
-title: Blogpaper
-theme: Blogpaper
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -2,10 +2,11 @@
 <html {{ with .Site.Language.Lang -}} lang="{{ . }}" {{- end }}>
 {{ partial "head" . }}
 <body>
+  <a class="skip-to-content" href="#main">Skip to content</a>
   {{ partial "nav" . }}
-  <main>
+  <main id="main" tabindex="-1">
     {{- block "main" . -}}{{- end -}}
   </main>
   {{ partial "footer" . }}
 </body>
-</html>
+</html>
diff --git a/layouts/partials/banner-figure.html b/layouts/partials/banner-figure.html
@@ -3,7 +3,7 @@
   <a href="{{ . }}">
   {{- end -}}
 
-  <img src="{{ .resource.RelPermalink }}" alt="{{ .alt }}" />
+  <img src="{{ .resource.RelPermalink }}" alt="{{ .alt }}" loading="lazy" decoding="async" />
 
   {{- with .page_href -}}
   </a>
@@ -13,7 +13,7 @@
     <figcaption class="metadata">
 
       {{- with .href -}}
-      <a href="{{ . }}">
+      <a href="{{ . }}" rel="noopener noreferrer">
       {{- end -}}
 
         {{- with .caption -}} {{ . }} {{- end -}}

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -3,7 +3,7 @@
   {{- with .Site.Copyright -}}
   {{ . }}
   {{- else -}}
-  &copy; {{ now.Year }} {{- with .Site.Author }} {{ .name }}. {{- end }} <a href='{{ "" | relURL }}'>{{ .Site.Title }}</a>
+  &copy; {{ now.Year }} {{- with .Site.Params.author }} {{ .name }}. {{- end }} <a href='{{ "" | relURL }}'>{{ .Site.Title }}</a>
   {{- end -}}
 </footer>
 {{- end }}