Implement the columns layout that claude wants :)

No javascript was required.
I love the new CSS calc().

user/config/system.yaml

 absolute_urls: false
-
+timezone: ''
+default_locale: null
+param_sep: ':'
+wrapped_site: false
+reverse_proxy_setup: false
+force_ssl: false
+force_lowercase_urls: true
+custom_base_url: ''
+username_regex: '^[a-z0-9_-]{3,16}$'
+pwd_regex: '.{3,}'
+intl_enabled: false
+languages:
+  supported:
+  include_default_lang: true
+  translations: true
+  translations_fallback: true
+  session_store_active: false
+  http_accept_language: false
+  override_locale: false
 home:
-  alias: '/fr/optique/la-nature-de-la-lumiere'
-
+  alias: /home
+  hide_in_urls: false
 pages:
   theme: textbook
-  markdown:
-    # todo check what this does
-    extra: true
-
+  order:
+    by: default
+    dir: asc
+  list:
+    count: 100
+  dateformat:
+    default: null
+    short: 'jS M Y'
+    long: 'F jS \a\t g:ia'
+  publish_dates: true
   process:
     markdown: true
     twig: false
-
+  twig_first: false
+  never_cache_twig: false
+  events:
+    page: true
+    twig: true
+  markdown:
+    extra: true
+    auto_line_breaks: false
+    auto_url_links: true
+    escape_markup: false
+    special_chars:
+      '>': gt
+      '<': lt
+  types:
+    - txt
+    - xml
+    - html
+    - htm
+    - json
+    - rss
+    - atom
+  append_url_extension: ''
+  expires: 604800
+  cache_control: null
+  last_modified: false
+  etag: false
+  vary_accept_encoding: false
+  redirect_default_route: false
+  redirect_default_code: '302'
+  redirect_trailing_slash: true
+  ignore_files:
+    - .DS_Store
+  ignore_folders:
+    - .git
+    - .idea
+  ignore_hidden: true
+  url_taxonomy_filters: true
+  frontmatter:
+    process_twig: false
+    ignore_fields:
+      - form
+      - forms
 cache:
-  # re-enable after plugin is done
   enabled: false
   check:
     method: file
   driver: auto
-  prefix: 'g'
-
+  prefix: g
+  clear_images_by_default: true
+  cli_compatibility: false
+  lifetime: 604800
+  gzip: false
+  allow_webserver_gzip: false
+  redis:
+    socket: false
 twig:
   cache: true
   debug: true
   auto_reload: true
   autoescape: false
-
+  undefined_functions: true
+  undefined_filters: true
+  umask_fix: false
 assets:
   css_pipeline: false
+  css_pipeline_include_externals: true
+  css_pipeline_before_excludes: true
   css_minify: true
+  css_minify_windows: false
   css_rewrite: true
   js_pipeline: false
+  js_pipeline_include_externals: true
+  js_pipeline_before_excludes: true
   js_minify: true
-
+  enable_asset_timestamp: false
+  collections:
+    jquery: 'system://assets/jquery/jquery-2.x.min.js'
 errors:
-  display: true
+  display: 1
   log: true
-
 debugger:
   enabled: false
-  twig: true
   shutdown:
     close_connection: true
+  twig: true
+images:
+  default_image_quality: 85
+  cache_all: false
+  cache_perms: '0755'
+  debug: false
+  auto_fix_orientation: false
+media:
+  enable_media_timestamp: false
+  unsupported_inline_types: {  }
+  allowed_fallback_types: {  }
+  auto_metadata_exif: false
+  upload_limit: 2097152
+session:
+  enabled: true
+  initialize: true
+  timeout: 1800
+  name: m3p2-grav-site
+  secure: false
+  httponly: true
+  split: true
+  path: null
 gpm:
   releases: stable
+  proxy_url: null
+  method: auto
   verify_peer: true
+  official_gpm_only: true
+strict_mode:
+  yaml_compat: true
+  twig_compat: true

user/config/themes/quark.yaml

+enabled: true
+production-mode: true
+grid-size: grid-lg
+header-fixed: false
+header-animated: false
+header-dark: false
+header-transparent: false
+sticky-footer: false
+blog-page: /blog
+spectre:
+  exp: false
+  icons: true
+custom_logo:
+  user/themes/textbook/images/logo/logo.png:
+    name: logo.png
+    type: image/png
+    size: 59253
+    path: user/themes/textbook/images/logo/logo.png
+custom_logo_mobile:
+  user/themes/textbook/images/logo/logo.png:
+    name: logo.png
+    type: image/png
+    size: 59253
+    path: user/themes/textbook/images/logo/logo.png

user/config/themes/textbook.yaml

+streams:
+  schemes:
+    theme:
+      type: ReadOnlyStream
+      prefixes:
+        '': [user/themes/textbook, user/themes/quark]
+
+enabled: true
+production-mode: true
+grid-size: grid-lg
+header-fixed: false
+header-animated: false
+header-dark: false
+header-transparent: false
+sticky-footer: false
+blog-page: /blog
+spectre:
+  exp: false
+  icons: true
+custom_logo:
+  user/themes/textbook/images/logo/logo.png:
+    name: logo.png
+    type: image/png
+    size: 59253
+    path: user/themes/textbook/images/logo/logo.png
+custom_logo_mobile:
+  user/themes/textbook/images/logo/logo.png:
+    name: logo.png
+    type: image/png
+    size: 59253
+    path: user/themes/textbook/images/logo/logo.png

user/themes/textbook/css/columns.css

+.claude-columns {
+    display: flex;
+}
+.claude-column {
+    padding: 0.5em 1em;
+    max-height: calc(100vh - 4rem - 3rem);
+    overflow-y: scroll;
+}
+
+@media screen and (max-width: 1024px) {
+    .claude-columns {
+        flex-direction: column;
+    }
+    .claude-column {
+        max-height: initial;
+        overflow-y: initial;
+    }
+}
+
+
+#footer {
+    height: 3rem;
+}
+#footer p {
+    margin-bottom: 0;
+}
+

user/themes/textbook/templates/annex.html.twig

+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+    {{ page.content|raw }}
+{% endblock %}

user/themes/textbook/templates/columns.html.twig

-{% extends 'modular.html.twig' %}
+{% extends 'partials/base.html.twig' %}
+
+
+
+{% block stylesheets %}
+    {% do assets.addCss('theme://css/columns.css') %}
+    {{ parent() }}
+{% endblock %}
+
+{% block body %}
+
+    <div class="claude-columns">
+    {% for column in page.collection() %}
+        <section id="{{ macro.pageLinkName(column.menu) }}" class="claude-column">
+        {{ column.content|raw }}
+        </section>
+    {% endfor %}
+    </div>
+    {#{{ page.content|raw }}#}
+{% endblock %}

[Goutte]

@cmeny With this kind of CSS instead of javascript, you maintain a manageable page load time.