Weird behavior when trying to override specific part of the site.

[Fatih20]

I'm currently working on this site (https://xournalpp.github.io/, https://github.com/xournalpp/xournalpp.github.io/) and I'm trying to make an override for the installation page. The site currently already has an override for the home page. Both of these attempts follow this guide (#1996 (comment)). It works perfectly fine with the home page, but I'm having issues with the installation page.

This is the mkdocs.yml:

site_name: Xournal++
repo_url: https://github.com/xournalpp/xournalpp/
repo_name: xournalpp/xournalpp
remote_branch: master
edit_uri: https://github.com/xournalpp/xournalpp.github.io/edit/site/docs
nav:
  - Home: index.md
  - Installation:
      - OS selection: installation/index.md
      - Windows: installation/windows.md
      - MacOS: installation/macos.md
      - Linux: installation/linux.md
  - Guide:
      - Overview: guide/overview.md
      - Configuration: guide/config.md
      - Tools and Editing:
         - Pen and Highlighter tools: guide/tools/pen.md
         - Eraser tool: guide/tools/eraser.md
         - Selection and Snapping tools: guide/tools/selecsnap.md
         - LaTeX tool: guide/tools/latex.md
      - Plugins: 
         - Building plugins: guide/plugins/plugins.md
         - Notable plugins: guide/plugins/notable.md
      - File locations: guide/file-locations.md
      - Tips: guide/tips.md
  - Community: 
      - Getting help & helping out: community/help.md
      - Xournal++ & other software: community/other-software.md
  - "Report a bug": https://github.com/xournalpp/xournalpp/issues 

#Theme config
theme: 
  name: material
  custom_dir: docs/overrides
  favicon: img/favicon.ico
  logo: img/favicon.ico
  icon:
    repo: fontawesome/brands/github
  palette:
    scheme: default
    primary: black
    accent: deep orange
  features:
    - navigation.tabs
    - toc.integrate

# Custom styles
extra_css:
  - css/buttons.css

#Enable macros
plugins:
  - search
  - macros    

extra:
  downloads:
    default: "https://github.com/xournalpp/xournalpp/releases"
    allVersions: "https://github.com/xournalpp/xournalpp/tags"
    nightly: "https://github.com/xournalpp/xournalpp/releases/tag/nightly"
    windows:
      stable: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-windows.zip"
    macos:
      stable: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-macos.zip"
    linux:
      flatpak: "https://flathub.org/apps/details/com.github.xournalpp.xournalpp"
      appimage: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-x86_64.AppImage"
      snap: "https://snapcraft.io/xournalpp"
      debianStable: "https://github.com/xournalpp/xournalpp/releases/tag/1.1.0"
      ubuntuStable: "https://github.com/xournalpp/xournalpp/releases/tag/1.1.0"
  version:
    latest_stable: "1.1.0"
    latest_unstable: "1.1.0+dev"

#code highlighting
markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences
  - pymdownx.tabbed
  - toc:
      permalink: true

This is how the directories are currently structured:

This is docs/index.md, the home page that already uses an override that is working perfectly fine.

---
template: home.html
title: Xournal++
---
{newline}

This is docs/installation/index.md, the installation page that is currently borked.

---
template: installation.html
title: Installation
---
{newline}

The installation page currently looks like this:

As you can see, it seems that the markdown file successfully links to the HTML, but the HTML seems to be blind to the CSS that is in the same directory (and yes I've linked the CSS in the HTML). What is even weirder is the fact that the table of content somehow appears. When I made overrides for the home page, it didn't do this.

Is there something that I did wrong or is there a bug on MkDocs (or the theme) part?

[squidfunk]

That’s hard to say without knowing the contents of installation.html. It looks like the asset paths are broken. You can check the network inspector and see whether the browser resolves the asset paths correctly.

[Fatih20]

That’s hard to say without knowing the contents of installation.html. It looks like the asset paths are broken. You can check the network inspector and see whether the browser resolves the asset paths correctly.

This is the content of the installation.html:

{% extends "base.html" %}
{% block tabs %}
{{ super() }}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="styleseet" href="installation.css">
<link rel="styleseet" href="installation_responsive.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">

<style>
    
    
</style>


<div class="installation">
    <div class="OS-selection">
        <div class="title-container">
            <h1 class="title">Choose Your OS</h1>
        </div>
        <div class="OS-option-container">
            <a class="OS-option button" href="windows">Windows</a>
            <a class="OS-option button" href="linux">Linux</a>
            <a class="OS-option button" href="macos">MacOS</a>
        </div>
    </div>
    <div class="mobile">
        <div class="title-container">
            <h2 class="title">Xournal++ for Mobile is now available in Beta!</h2>
        </div>
        <div class="mobile-button-container">
            <a class="mobile-option button" href="https://github.com/xournalpp/xournalpp_mobile/">Xournal++ Mobile</a>
        </div>
    </div>
</div>

{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
{% endblock %}

[squidfunk]

...
<link rel="styleseet" href="installation.css">
...

I'm pretty sure that this is not correct and you should see an error in the console. You're probably missing the url filter, which ensures correct relative paths. Check Material for MkDocs' overrides to see how this is done:

mkdocs-material/material/overrides/main.html

Line 6 in 13f6ce4

<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.14225c90.min.css' | url }}">

Additionally, do not put your overrides folder inside your docs_dir, as this could cause problems during build time.