Added a bunch of shit

This commit is contained in:
Sofia 2018-04-19 23:56:31 +03:00
parent bd0aae2e70
commit a61c8b6e13
19 changed files with 98 additions and 22 deletions

View File

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

View File

@ -93,6 +93,7 @@ nav li:last-child a {
nav ul a:hover { nav ul a:hover {
background-color: var(--color-navbar-button-hover); background-color: var(--color-navbar-button-hover);
border-left: solid 5px var(--color-navbar-button-hover);
} }
nav ul a:focus { nav ul a:focus {
@ -132,6 +133,40 @@ article {
font-size: var(--content-text-size); 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 > * { article > * {
margin: 0; margin: 0;
} }
@ -139,3 +174,7 @@ article > * {
article a { article a {
color: var(--highlight-color); color: var(--highlight-color);
} }
article img {
max-width: calc(100% - var(--content-side-padding));
}

View File

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

View File

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

View File

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

View File

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

View File

@ -5,7 +5,7 @@ description = "This is the .. other page"
content_path = "other.md" content_path = "other.md"
favicon = "/img/square_trans.png" favicon = "/img/square_trans.png"
#before_navbar_url = "/navbar.html" #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" #after_content_url = "/after_content.html"
javascript = ["test_additional.js"] javascript = ["test_additional.js"]
css = ["test_additional.css"] css = ["test_additional.css"]

View File

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

View File

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

View File

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

View File

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

View File

@ -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;
}

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

Before

Width:  |  Height:  |  Size: 347 B

After

Width:  |  Height:  |  Size: 347 B

View File

@ -1 +0,0 @@
Hello!

View File

@ -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);
}

View File

@ -1 +0,0 @@
Toinen!

View File

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