diff --git a/Makefile b/Makefile
index 9c80bdd..a740d3e 100644
--- a/Makefile
+++ b/Makefile
@@ -11,13 +11,15 @@ STATIC_DIR=static
OUTPUT_DIR=output
# The pandoc template to use
-TEMPLATE=template.html
-
-## You should not need to change anything beyond this line
+TEMPLATE=utils/template.html
# The pandoc lua filter to use
# The language code and file extension will be appended later
-FILTER=filters/link-filter.
+FILTER=utils/link-filter.
+
+## You should not need to change anything beyond this line
+
+
STATIC=$(patsubst $(STATIC_DIR)/%,$(OUTPUT_DIR)/%,$(shell find $(STATIC_DIR) -type f))
OUTPUT=$(patsubst $(INPUT_DIR)/%.md,$(OUTPUT_DIR)/%/index.html,$(shell find $(INPUT_DIR) -type f))
@@ -53,7 +55,7 @@ test:
cd $(OUTPUT_DIR); python3 -m http.server 9000
mon:
- @echo "find $(INPUT_DIR)/ $(STATIC_DIR)/ $(dir $(TEMPLATE))/ -type f | entr make"
+ @echo "find $(INPUT_DIR)/ $(STATIC_DIR)/ $(dir $(TEMPLATE)) -type f | entr make"
.PHONY: clean test
diff --git a/content/en/guides/mastodon.md b/content/en/guides/mastodon.md
index 62439cd..219ea2b 100644
--- a/content/en/guides/mastodon.md
+++ b/content/en/guides/mastodon.md
@@ -12,7 +12,7 @@ Anyways, this tutorial will focus on how to use Mastodon and some basic Fedivers
If you haven't already then go register an account over at ~vern, there is also a guide for doing that [here](/guides/register) (Make sure to enable Mastodon as a service or [contact the ~vern administrators](/admins/) to have them create it for you)
-===== Logging in =====
+## Logging in
Open up your web browser and go to [fedi.vern.cc](https://fedi.vern.cc), you will see a login screen here. Simply input the email address and password you used for registration, if you are having issues logging in then [contact the ~vern administrators](/admins/) who will help you out.
diff --git a/static/index.html b/static/index.html
index 757406b..e221454 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,7 +4,7 @@
A redirect to the english homepage
-
+
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..05d1ce8
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,95 @@
+/* This stylesheet was specifically made for the ~vern wiki */
+/* And it will only suit the layout of the ~vern wiki */
+/* Copyright © Leo Gavilieau, licensed under CC-BY-SA 4.0 International */
+
+:root {
+ /* Font stacks */
+ --casualFonts: DejaVu Sans Mono, monospace;
+ --bgColor: #282c34;
+ --txtColor: #bbc2cf;
+ --linkColor: #ff6c6b;
+ --headerColor: #51afef;
+}
+/* responsiveness */
+@media screen and (min-width: 820px) {
+ :root { --mainSize: 65vw; }
+ header {
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ white-space:nowrap;
+ flex-wrap: wrap;
+ }
+ nav {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 1rem;
+ }
+}
+@media screen and (max-width: 820px) { :root { --mainSize: 85vw; } }
+@media screen and (max-width: 620px) { :root { --mainSize: 95vw; } }
+@media screen and (max-width: 560px) {
+ :root { --mainSize: 100vw; }
+ header { display: initial; text-align:center; }
+ #logo { background-position: center; }
+}
+
+body {
+ font-family: var(--casualFonts);
+ background: var(--bgColor);
+ color: var(--txtColor);
+ line-height: 1.5rem;
+ word-wrap: break-word;
+}
+
+header,main,footer {
+ margin: auto;
+ width: var(--mainSize);
+}
+
+/* Header styling (logo, nav etc.) */
+
+header {
+ border-bottom: 4px solid var(--linkColor);
+ border-radius: 1rem;
+ padding-bottom:1rem;
+}
+
+#logo {
+ width: 50px;
+ height: 50px;
+ background: url(/verntrans.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+footer {
+ border-top: 4px solid var(--linkColor);
+ border-radius: 1rem;
+ padding-top:1rem;
+}
+footer p { margin: 0.2em 0 0.2em 0; }
+
+/* text styling */
+h1,h2,h3,h4,h5.h6 {
+ color: var(--headerColor);
+ line-height: 1.2;
+}
+h1 { font-size: 1.95rem}
+h2 { font-size:1.45rem; }
+h3 { font-size:1.3rem; }
+h4 { font-size: 1.1rem;}
+h5 { font-size: 0.9rem; }
+h6 { font-size: 0.7rem; }
+
+pre,code { font-size: 0.85rem; }
+
+/* link styling */
+a {
+ color: var(--linkColor);
+ text-decoration: none;
+}
+
+a:hover { text-decoration: underline; }
\ No newline at end of file
diff --git a/static/verntrans.svg b/static/verntrans.svg
new file mode 100644
index 0000000..8efad82
--- /dev/null
+++ b/static/verntrans.svg
@@ -0,0 +1 @@
+
diff --git a/filters/link-filter.da.lua b/utils/link-filter.da.lua
similarity index 100%
rename from filters/link-filter.da.lua
rename to utils/link-filter.da.lua
diff --git a/filters/link-filter.en.lua b/utils/link-filter.en.lua
similarity index 100%
rename from filters/link-filter.en.lua
rename to utils/link-filter.en.lua
diff --git a/filters/link-filter.pt-BR.lua b/utils/link-filter.pt-BR.lua
similarity index 100%
rename from filters/link-filter.pt-BR.lua
rename to utils/link-filter.pt-BR.lua
diff --git a/template.html b/utils/template.html
similarity index 87%
rename from template.html
rename to utils/template.html
index c358a83..aca0545 100644
--- a/template.html
+++ b/utils/template.html
@@ -10,10 +10,12 @@