Tweaked the style

_config.yml

@@ -2,7 +2,6 @@ title: The Toy Programming Language
 description: Documentation For The Toy Programming Language
 keywords: programming,coding
 author: Kayne Ruse (Ratstail91)
-version: 2.x
 
 collections:
   getting_started:

_includes/elements/attribution.html

@@ -0,0 +1,9 @@
+<table class="ui unstackable very basic collapsing table">
+	<tbody>
+		<tr>
+		<td class="smaller text">
+			Theme adapted from <strong>programming pages</strong> theme v{{ layout.theme_version }} (<a href="{{ layout.theme_url }}" title="a jekyll theme for publishing code documentation to GitHub pages">{{ layout.theme_url }}</a>)
+		</td>
+		</tr>
+	</tbody>
+</table>

_includes/elements/title.html

@@ -0,0 +1,8 @@
+<a class="borderless toggle item">{% include icon.liquid id='bars' %} Menu</a>
+
+<a class="borderless item" href="{{ site.baseurl }}/">{% include icon.liquid id='home' %} Home</a>
+
+<div class="borderless header item">
+<span class="larger text">{{ site.title }}</span>
+<img src="https://github.com/Ratstail91/Toy/actions/workflows/continuous-integration-v2.yml/badge.svg" width="231" height="30" style="width: unset; height: unset;">
+</div>

_layouts/page.html

@@ -0,0 +1,59 @@
+---
+layout: base
+theme_version: 0.5.22
+theme_url: https://github.com/pixeldroid/programming-pages
+---
+
+<!-- top menu -->
+<div id="site-title" class="ui top fixed menu">
+{% include elements/title.html %}
+</div>
+
+<!-- animated sidebar (can be revealed in mobile view) -->
+<div id="sidebar-retractable" class="ui vertical inverted sidebar menu">
+  <!-- #sidebar-collection-indices is re-parented here for mobile view -->
+</div>
+
+<!-- pushing container (will be pushed right when retractable sidebar opens) -->
+<div class="pusher">
+
+<div class="ui left attached internal rail">
+<!-- static sidebar (visible in non-mobile view) -->
+<div id="sidebar-fixed" class="ui vertical inverted menu">
+<div id="sidebar-collection-indices">
+{% include elements/indices.html %}
+</div>
+</div>
+</div>
+
+<!-- main contents -->
+<div id="page-container">
+<div class="ui left aligned fluid container">
+<div id="page-content" class="ui basic segment" style="margin-bottom: 6em;">
+{{ content }}
+</div>
+
+<!-- The style attribute here, and in the div above, ensure the footer works as expected -->
+<!-- footer -->
+<div id="site-attribution" class="ui basic segment" style="position: absolute; bottom: 0">
+{% include elements/attribution.html %}
+</div>
+</div>
+</div>
+
+</div>
+
+<!-- help modal -->
+<div id="site-help" class="ui small modal">
+{% include elements/help.html %}
+</div>
+
+<script>
+{% include scripts/indices.js %}
+{% include scripts/search.js %}
+{% include scripts/page.js %}
+{% include scripts/help.js %}
+
+{% comment %} provide user extension / override point {% endcomment %}
+{% include scripts/custom.js %}
+</script>

index.md

@@ -7,12 +7,6 @@ title: The Toy Programming Language
 	<image src="assets/toylogo.png" width="250" height="250" />
 </div>
 
-<div style="justify-self: center;">
-	<img src="https://github.com/Ratstail91/Toy/actions/workflows/continuous-integration-v1.yml/badge.svg">
-	<br>
-	<img src="https://github.com/Ratstail91/Toy/actions/workflows/continuous-integration-v2.yml/badge.svg">
-</div>
-
 The Toy Programming Language is an imperative, bytecode-interpreted, embeddable scripting language. Rather than functioning independently, it serves as part of another program, the "host". This design allows for straightforward customization by both the host's developers and end users, achieved by exposing program logic through text files.
 
 This website presents the documentation for Toy version 2.x.