Templates
Making a website like this can be fiddly and time-consuming. I'm making the base HTML, CSS, and Javascript available here for other people to use as templates to customise and make their own websites. If you do use them, linking back here with a credit would be appreciated, thank you!
I've currently got three different templates available - check them out and see which ones you like! Click the provided template links to open them, copy/paste the text into your own files, and fill in the blanks. I've labelled places that need a URL with [link here] for ease of finding and replacing within the html, and anything else in [these square brackets] are also parts that will need to be filled in and adjusted for your own content.
All of these templates are designed to work with both browser and mobile viewing, and will automatically adjust according to the width of the browser window. They're also designed to be fully compatible with keyboard-only navigation.
If you're new to HTML and CSS, or just need a refresher, I highly recommend checking out W3 Schools for reference and examples!
The Index template is for any pages that don't need Previous/Next navigation or Chapters.
The Fic Template is for fics, and include Prev/Next navigation links and a chapter list dropdown. If your fic doesn't have chapters, then the chapters dropdown section can be safely deleted. I've included comments in the html to indicate what can be removed.
The Art Template is for if you want to include some kind of art gallery on your site. Make sure to grab the gallery javascript file to go with it if you do use this one!
I've set up the CSS Style sheet so all you have to do to change the colours is adjust the labelled colour variables at the top of the sheet, no coding knowledge necessary! All you need to do is insert the appropriate hex colour code - it's either a three or six digit number with a # in front of it. I suggest using a website like W3's HTML Colour Picker to choose your colours and find out their corresponding hex codes.
The first set of colour variables is for the default colour scheme, and the second set is for the secondary colour scheme. It's meant to give viewers the option to switch between a dark mode and a light mode, but you can do whatever colours you want with them!
If you're more familiar with HTML and CSS you can of course further customise the HTML templates and CSS to your own tastes.
Main Javascript File: This Javascript file is what makes both the clock in the upper left and the light mode/dark mode toggle in the upper right work. It shouldn't need any modifying unless you want to change the hover text for the clock ("Time check! Do you know what time it is?") to something else.
Art Gallery Javascript File: This Javascript file is what makes the Art Gallery page function. Link to it at the bottom of the Art Gallery page, along with the main javascript file.
Template 1
(Click the images to check out the templates in full and switch between dark/light modes)
This template features centred content with wide margins on desktop, rounded corners, distinctly separated content sections, and top-bar navigation. I've changed the light and dark mode colours for this template's style sheet to demonstrate the customisability of the colours.
Template 2
(Click the images to check out the templates in full and switch between dark/light modes)
This template features a full-width header and top-bar navigation, with sharp corners, centred content with wide margins on desktop, and no distinct separation between different sections.
Template 3
(Click the images to check out the templates in full and switch between dark/light modes)
This template features a full-width header, sticky left side-bar navigation on desktop that switches to top bar navigation on mobile, and full-width content.
Support Me
If you found my website templates useful, or just feel like giving me a lil treat, I have a Ko-Fi here! :3