Added a bunch of shit

config.toml

@@ -3,11 +3,11 @@ website_name = "Test Website Name!"
 built_pages = ["test_page/about.toml", "test_page/other.toml"]
 use_default_css = true
 use_default_js = true
-javascript = ["test.js"]
-css = ["test.css"]
-before_navbar_url = "test_page/resources/before_navbar.html"
-before_content_url = "test_page/resources/before_content.html"
-after_content_url = "test_page/resources/after_content.html"
+javascript = ["/js/loadbar.js"]
+css = ["/css/loadbar.css"]
+before_navbar_url = "test_page/resources/load_bar.html"
+#before_content_url = "test_page/resources/before_content.html"
+#after_content_url = "test_page/resources/after_content.html"
 favicon = "/img/global.png"
 
 charset = "utf-8"
@@ -41,5 +41,5 @@ items = ["about", "other", "google"]
     link = "https://google.com"
 
 [resource.test]
-source = "test_page/resources/img"
-destination = "img"
+source = "test_page/resources/copied_resources"
+destination = ""

src/templates/default-css.css

@@ -93,6 +93,7 @@ nav li:last-child a {
 
 nav ul a:hover {
     background-color: var(--color-navbar-button-hover);
+    border-left: solid 5px var(--color-navbar-button-hover);
 }
 
 nav ul a:focus {
@@ -132,10 +133,48 @@ article {
     font-size: var(--content-text-size);
 }
 
+@media (max-width: 900px) {
+    :root {
+        --content-side-padding: 5%;
+        --content-width: 90%;
+        --navbar-text-size: 30px;
+        --content-text-size: 1.5em;
+        --navbar-width: 100%;
+    }
+
+    nav {
+        height: auto;
+    }
+
+    nav li {
+        display: block;
+    }
+
+    nav li a {
+        text-align: center;
+        padding-top: 0.2em;
+        padding-bottom: 0.2em;
+        border: solid 3px var(--color-navbar-button-hover);
+    }
+}
+
+@media (max-width: 1500px) and (min-width: 900px) {
+    :root {
+        --content-width: 70% !important;
+        --navbar-text-size: 30px;
+        --navbar-height: 5vw;
+    }
+}
+
+
 article > * {
     margin: 0;
 }
 
 article a {
     color: var(--highlight-color);
+}
+
+article img {
+    max-width: calc(100% - var(--content-side-padding));
 }

src/templates/default-js.js

@@ -2,7 +2,7 @@
 var _default_js_pageloader = {
     begin: (url) => { console.log("Started to load " + url); },
     progress: (url, current, total) => { console.log("Progress of " + url + ": " + current + "/" + current + " (" + ((current / total) * 100) + "%)"); },
-    loaded: (url) => { console.log("Loaded " + url); }
+    loaded: (url, after_load) => { console.log("Loaded " + url); after_load(); }
 }
 
 function _default_js_main() {
@@ -35,10 +35,11 @@ function _default_js_open_page(url, no_pop_state) {
         _default_js_pageloader.progress(url, progress.loaded, progress.total);
     });
     request.addEventListener("loadend", (progress) => {
-        _default_js_pageloader.loaded(url);
-        let parser = new DOMParser();
-        let new_document = parser.parseFromString(request.responseText, "text/html");
-        change_page(new_document, url, no_pop_state);
+        _default_js_pageloader.loaded(url, () => {
+            let parser = new DOMParser();
+            let new_document = parser.parseFromString(request.responseText, "text/html");
+            change_page(new_document, url, no_pop_state);
+        });
     });
     request.open("GET", url);
     request.send();

src/templates/meta_tags/js_tag.html

@@ -1 +1 @@
-<script class="._default_js_meta" type="text/javascript" src="{{link}}"></script>
+<script class="._default_js_meta" type="application/javascript" src="{{link}}"></script>

test_page/about.md

@@ -1,2 +1,4 @@
 # About!
-This is the test about for this page!
+This is the test about for this page!
+
+![kitten](/img/kitten.jpg)

test_page/other.md

@@ -2,4 +2,8 @@
 This page is not like the others
 
 Example stuff that makes this site different:
-- This list
+- This list
+
+[Hello! This is an internal link](/)
+
+[from_toml$/test_page/config.toml]

test_page/other.toml

@@ -5,7 +5,7 @@ description = "This is the .. other page"
 content_path = "other.md"
 favicon = "/img/square_trans.png"
 #before_navbar_url = "/navbar.html"
-before_content_url = "test_page/resources/before_content_other.html"
+#before_content_url = "test_page/resources/before_content_other.html"
 #after_content_url = "/after_content.html"
 javascript = ["test_additional.js"]
 css = ["test_additional.css"]

test_page/resources/after_content.html

@@ -1 +0,0 @@
-<h1>Hi! I'm after the content!</h1>

test_page/resources/before_content.html

@@ -1 +0,0 @@
-<h1>Hi! I'm before the content!</h1>

test_page/resources/before_content_other.html

@@ -1 +0,0 @@
-<h1>I'm different :)</h1>

test_page/resources/before_navbar.html

@@ -1 +0,0 @@
-<h1>Hi! I'm before the navbar!</h1>

test_page/resources/copied_resources/css/loadbar.css

@@ -0,0 +1,16 @@
+#loadbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0.2em;
+    background-color: rgb(46, 223, 40);
+    z-index: 1;
+    transition: 0.1s;
+
+    width: 0%;
+    opacity: 0;
+}
+
+#loadbar.loading {
+    opacity: 1;
+}

test_page/resources/copied_resources/joku.txt

@@ -1 +0,0 @@
-Hello!

test_page/resources/copied_resources/js/loadbar.js

@@ -0,0 +1,19 @@
+
+_default_js_pageloader.begin = () => {
+    let loadbar = document.getElementById("loadbar");
+    loadbar.classList = "loading";
+    loadbar.style.width = "5%";
+}
+
+_default_js_pageloader.progress = (url, current, total) => {
+    let loadbar = document.getElementById("loadbar");
+    let percent = (current / total) * 100;
+    loadbar.style.width = percent + "%";
+}
+
+_default_js_pageloader.loaded = (url, after_load) => {
+    let loadbar = document.getElementById("loadbar");
+    loadbar.style.width = "100%";
+    loadbar.classList = "";
+    setTimeout(after_load, 100);
+}

test_page/resources/copied_resources/toinen.txt

@@ -1 +0,0 @@
-Toinen!

test_page/resources/load_bar.html

@@ -0,0 +1 @@
+<div id="loadbar"></div>