I'm very new to drupal, so I apologize if this is a dumb question.

I'm trying to set up a drupal theme to use for my webcomic, however I'm struggling with the logic for the page navigation.
How do I point to the next/previous and first/last items? I found some resources using php, but I don't know where it would go in the code and I'm not sure if I should be setting up the page navigation as part of the custom theme.

this is not the drupal theme (though I do hope to get it here) I started in react before I abandoned my original idea of hooking a react front end to a drupal back end and instead just decided to do the whole thing in drupal

The goal is for each page to have buttons at the bottom that point to the next comic page, previous comic page, first page, and latest page (which is also the home page). I saw a post from 6 years ago with a similar question, but the top comment only said to 'theme it in HTML/CSS/JS' first, but I'm stuck on how to set up the page logic, which would be interacting with the cms?
I set up my project with composer and am currently using ddev if that is relevant.

I'm new to Drupal development and recently migrated a Drupal 7 theme to Drupal 10. In Drupal 7, the file fields displays file-type icons (e.g., icons/application-pdf.png) next to file links, but after migrating to Drupal 10, those icons are no longer displayed, and I’m unsure how file-type icons are handled in the newer versions of Drupal. While searching the codebase, I found the following icon files:

$ find . -type f -iname "application-pdf.png" ./core/themes/claro/images/classy/icons/application-pdf.png ./core/themes/starterkit_theme/images/icons/application-pdf.png ./core/profiles/demo_umami/themes/umami/images/classy/icons/application-pdf.png 

I can confirm that file metadata (such as file size) is still available and rendered correctly via my custom Twig template my_custom_theme/templates/field/file-link.html.twig (this file is a copy of core/modules/file/templates/file-link.html.twig without any change. I can remove it when suggested) as shown below:

<!-- BEGIN OUTPUT from 'core/modules/system/templates/field.html.twig' --> <div> <div>Paper</div> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'file_link' --> <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/my_custom_theme/templates/field/file-link.html.twig' --> <span class="file file--mime-application-pdf file--application-pdf"><a href="/sites/default/files/manual/computer.pdf" type="application/pdf">computer.pdf</a></span> <span>(2.26 MB)</span> <!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/my_custom_theme/templates/field/file-link.html.twig' --> </div> </div> <!-- END OUTPUT from 'core/modules/system/templates/field.html.twig' --> 

However, there is no CSS style named file in Chrome developer tools. See the screenshot below:

Screenshot of the Chrome developer tools

What I’d like to achieve is to display a file-type icon (say icons/application-pdf.png or svg whatever Drupal 10 default is) before the file link, similar to Drupal 7.

A workaround would be to copy the icons from core/themes/claro/images/classy/ into my custom theme and adjust the CSS in my_custom_theme accordingly, but this doesn’t feel like a clean or recommended solution.

What is the proper way to display standard file-type icons next to file links in Drupal 10?