diff --git a/assets/scss/_events.scss b/assets/scss/_events.scss
new file mode 100644
index 0000000..9d6d26f
--- /dev/null
+++ b/assets/scss/_events.scss
@@ -0,0 +1,102 @@
+div.events {
+    margin: 0 auto;
+    padding: 20px 30px;
+    background: transparent;
+    p {
+      color: $font_default;
+      font-size: $font_size_default;
+    }
+    a, a:link, a:visited {
+        text-decoration: none;
+        color: $font_accent_4;
+    }
+    a:hover, a:active {
+       color: $font_accent_3;
+    }
+
+    code {
+      color: $font_accent_4;
+      font-size: $font_size_code;
+    }
+    .headline a {
+        color: $font_accent_3;
+        font-size: $font_size_h2;
+        text-shadow: 0px 0px 1px black;
+        text-decoration: none;
+    }
+    .meta {
+        color: silver;
+        font-style: italic;
+    }
+    .blog-post {
+        background: rgba(128,128,128,0.15);
+        padding: 16px;
+        margin-top: 50px;
+        box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
+    }
+    h2 {
+        color: $font_accent_3;
+        text-shadow: 0px 0px 1px black;
+    }
+    img {
+        max-width: 94%;
+        margin: 3%;
+        box-shadow: 5px 5px 4px 3px grey;
+    }
+}
+
+@media (min-width: $large_view) {
+    div.events {
+        max-width: $large_min_width;
+        p {
+            font-size: $font_size_default_large;
+        }
+        .headline a {
+            font-size: $font_size_h2_large;
+        }
+        code {
+            font-size: $font_size_code_large;
+        }
+        img:hover {
+            box-shadow: 8px 8px 6px 5px silver;
+        }
+    }
+}
+
+@media (max-width: $mobile_view) {
+    div.events {
+        p {
+            font-size: $font_size_default_mobile;
+        }
+        img {
+            max-width: 98%;
+            margin: 1%;
+            box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6);
+        }
+        code {
+            font-size: $font_size_code_mobile;
+        }
+        .headline a {
+            font-size: $font_size_h2_mobile;
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    div.events {
+        p {
+            font-size: $font_size_default_tiny;
+        }
+        .headline a {
+            font-size: $font_size_h2_tiny;
+        }
+    }
+}
+
+@media (max-width: $pico_view) {
+    div.events {
+        .headline a {
+            font-size: $font_size_h2_pico;
+        }
+    }
+}
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
new file mode 100644
index 0000000..c3fbe4c
--- /dev/null
+++ b/assets/scss/_footer.scss
@@ -0,0 +1,42 @@
+footer {
+    @if $hide_footer == true {
+        display: none;
+    }
+    margin: 0 auto;
+    background: $background_accent_2;
+    padding: 20px 30px;
+    font-size: $font_size_default;
+    color: $font_default;
+    text-align: center;
+    a, a:link, a:visited {
+        color: $font_accent_4;
+    }
+    a:hover {
+        color: $font_accent_3;
+    }
+}
+
+@media (min-width: $large_view) {
+    footer {
+        font-size: $font_size_default_large;
+    }
+}
+
+@media (max-width: $mobile_view) {
+    footer {
+        font-size: $font_size_default_mobile;
+        color: silver;
+        a, a:link, a:visited {
+            color: grey;
+        }
+        a:hover {
+            color: white;
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    footer {
+        font-size: $font_size_default_pico;
+    }
+}
diff --git a/assets/scss/_general.scss b/assets/scss/_general.scss
new file mode 100644
index 0000000..00c6169
--- /dev/null
+++ b/assets/scss/_general.scss
@@ -0,0 +1,5 @@
+body {
+    font-family: $main_font, sans-serif;
+    margin: 25px 25px 50px 25px;
+    background: $background_accent_2;
+}
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
new file mode 100644
index 0000000..a51d472
--- /dev/null
+++ b/assets/scss/_header.scss
@@ -0,0 +1,86 @@
+header {
+    margin: -25px -25px 0px -25px;
+    background: $background_accent_1;
+    padding: 20px 30px;
+    box-shadow: 5px 5px 5px 10px $background_accent_1;
+    h1 a, h1 a:hover, h1 a:link, h1 a:visited {
+        font-family: $headline_font, sans-serif;
+        color: $font_accent_1;
+        margin: 0;
+        font-weight: bold;
+        font-size: $font_size_h1;
+        text-decoration: none;
+    }
+    nav ul {
+        font-size: $font_size_default;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        a, a:link, a:visited {
+            color: $font_accent_2;
+            text-decoration: none;
+            background: $shadow_accent_1;
+            padding: 8px 24px;
+            border-radius: 5px;
+            text-transform: $menu_text_transform;
+        }
+        a:hover, a:active {
+            color: $font_accent_2_hover;
+            box-shadow: 0px 0px 1px 1px $shadow_accent_1;
+        }
+        li {
+            display: inline;
+            margin: 0 8px 0 0;
+            padding: 0;
+        }
+    }
+}
+
+@media (min-width: $large_view) {
+    header {
+        max-width: $large_min_width;
+        margin: auto;
+        box-shadow: 0px -10000px 0px 10000px $background_accent_1;
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_large;
+        }
+        nav ul {
+            font-size: $font_size_default_large;
+        }
+    }
+}
+
+@media (max-width: $mobile_view) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_mobile;
+        }
+        nav ul {
+            font-size: $font_size_default_mobile;
+            a, a:link, a:visited {
+                display: block;
+                padding: 5px 8px;
+                margin: -6px 0px;
+            }
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_tiny;
+        }
+        nav ul {
+            font-size: $font_size_default_tiny;
+        }
+    }
+}
+
+@media (max-width: $pico_view) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_pico;
+        }
+    }
+}
diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss
new file mode 100644
index 0000000..170bde7
--- /dev/null
+++ b/assets/scss/_page.scss
@@ -0,0 +1,71 @@
+div.page {
+    margin: 0 auto;
+    padding: 20px 30px;
+    background: transparent;
+    p, code{
+      color: $font_default;
+      font-size: $font_size_default;
+    }
+
+    a, a:link, a:visited, a:active {
+        color: $font_default;
+    }
+
+    h1 {
+        color: $font_accent_3;
+        font-size: $font_size_h1;
+        text-shadow: 0px 0px 1px black;
+    }
+    h2 {
+        color: $font_accent_3;
+        font-size: $font_size_h2;
+        text-shadow: 0px 0px 1px black;
+    }
+    img {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: $large_view) {
+    div.page {
+        margin: auto;
+        max-width: $large_min_width;
+        p {
+            font-size: $font_size_default_large;
+        }
+        h1 {
+            font-size: $font_size_h1_large;
+        }
+        h2 {
+            font-size: $font_size_h2_large;
+        }
+    }
+}
+
+@media (max-width: $mobile_view) {
+    div.page {
+        p, a{
+          font-size: $font_size_default_mobile;
+        }
+        code {
+            font-size: $font_size_code_mobile;
+        }
+        img {
+            max-width: 90%;
+        }
+        h1 {
+            font-size: $font_size_h1_mobile;
+        }
+        h2 {
+            font-size: $font_size_h2_mobile;
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    div.page {
+        p, a{
+          font-size: $font_size_default_tiny;
+        }
+    }
+}
diff --git a/assets/scss/_pagination.scss b/assets/scss/_pagination.scss
new file mode 100644
index 0000000..97da011
--- /dev/null
+++ b/assets/scss/_pagination.scss
@@ -0,0 +1,39 @@
+.pagination {
+    background: transparent;
+    font-size: $font_size_default;
+    text-align: center;
+    margin-top: 50px;
+    a, a:link, a:visited {
+        background: $font_accent_1;
+        padding: 3px 9px;
+        text-decoration: none;
+        color: $font_accent_4;
+        border-radius: 3px;
+    }
+    a:hover, a:active {
+        color: $font_accent_3;
+        background: $font_accent_2;
+        box-shadow: 0px 0px 2px 2px $font_accent_2;
+    }
+    .disabled {
+        background: $font_accent_2;
+    }
+}
+
+@media (min-width: $large_view) {
+    .pagination {
+        font-size: $font_size_default_large;
+    }
+}
+
+@media (max-width: $mobile_view) {
+    .pagination {
+        font-size: $font_size_default_mobile;
+    }
+}
+
+@media (max-width: $tiny_view) {
+    .pagination {
+        font-size: $font_size_default_tiny;
+    }
+}
diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss
new file mode 100644
index 0000000..39ba0dc
--- /dev/null
+++ b/assets/scss/_start.scss
@@ -0,0 +1,88 @@
+div.start {
+    margin: 0 auto;
+    padding: 50px 0px;
+    background: transparent;
+    display: flex;
+    .left {
+        flex: 45%;
+        text-align: center;
+        background: rgba(128,128,128,0.15);
+        padding: 12px;
+        box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
+    }
+    .right {
+        flex: 55%;
+    }
+    img {
+        max-width: 100%;
+    }
+
+    p, a {
+      color: $font_default;
+      font-size: $font_size_default;
+    }
+
+    code {
+      color: $font_accent_4;
+      font-size: $font_size_code;
+    }
+
+    h2 {
+        color: $font_accent_3;
+        font-size: $font_size_h2;
+        text-shadow: 0px 0px 1px black;
+    }
+}
+
+@media (min-width: $large_view) {
+    div.start {
+        margin: auto;
+        max-width: $large_min_width;
+        .right, .left {
+            flex: 50%;
+        }
+        p, a {
+            font-size: $font_size_default_large;
+        }
+        code {
+            font-size: $font_size_code_large;
+        }
+
+        h2 {
+            font-size: $font_size_h2_large;
+            text-shadow: 0px 0px 4px black;
+        }
+        img {
+            max-width: 100%;
+        }
+
+    }
+}
+
+@media (max-width: $mobile_view) {
+    div.start {
+        display: initial;
+        p, a {
+          font-size: $font_size_default_mobile;
+        }
+        code {
+            font-size: $font_size_code_mobile;
+        }
+        .left, .right {
+            text-align: center;
+            margin-top: 40px;
+        }
+        img {
+            max-width: 90%;
+
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    div.start {
+        p, a {
+            font-size: $font_size_default_tiny;
+        }
+    }
+}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
new file mode 100644
index 0000000..71d3186
--- /dev/null
+++ b/assets/scss/_variables.scss
@@ -0,0 +1,42 @@
+$background_accent_1: rgb(247, 196, 24 );
+$background_accent_2: black;
+
+$font_accent_1: red;
+$font_accent_2: maroon;
+$font_accent_2_hover: orangered;
+$font_accent_3: orangered;
+$font_accent_4: rgb(247, 196, 24);
+$font_default: white;
+
+$shadow_accent_1: rgba(255, 190, 14, 0.5);
+$font_size_default: 1.3em;
+$font_size_default_large: 2.2em;
+$font_size_default_mobile: 1em;
+$font_size_default_tiny: 0.9em;
+$font_size_default_pico: 0.7em;
+$font_size_code: 1.6em;
+$font_size_code_large: 2.6em;
+$font_size_code_mobile: 1.1em;
+$font_size_h1: 2.3em;
+$font_size_h1_large: 4.5em;
+$font_size_h1_mobile: 1.4em;
+$font_size_h1_tiny: 1em;
+$font_size_h1_pico: 0.8em;
+$font_size_h2: 1.9em;
+$font_size_h2_large: 3.2em;
+$font_size_h2_mobile: 1.25em;
+$font_size_h2_tiny: 0.9em;
+$font_size_h2_pico: 0.75em;
+
+$headline_font: '';
+$main_font: '';
+
+$large_min_width: 2200px;
+
+$large_view: 1920px;
+$mobile_view: 950px;
+$tiny_view: 450px;
+$pico_view: 320px;
+
+$menu_text_transform: none;
+$hide_footer: false;
diff --git a/assets/scss/events.scss b/assets/scss/events.scss
new file mode 100644
index 0000000..aa602a2
--- /dev/null
+++ b/assets/scss/events.scss
@@ -0,0 +1,9 @@
+@import "_variables";
+@import "_fonts";
+
+@import "_events";
+@import "_pagination";
+
+@import "_general";
+@import "_header";
+@import "_footer";
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 0000000..75baf3f
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,8 @@
+@import "_variables";
+@import "_fonts";
+
+@import "_page";
+
+@import "_general";
+@import "_header";
+@import "_footer";
diff --git a/assets/scss/sitemap.scss b/assets/scss/sitemap.scss
new file mode 100644
index 0000000..037451a
--- /dev/null
+++ b/assets/scss/sitemap.scss
@@ -0,0 +1,16 @@
+@import "_variables";
+
+urlset {
+  background-color: $background_accent_2;
+  url {
+    color: $font_default;
+    &:after {
+      content: '\a';
+      white-space: pre;
+    }
+    &:before {
+      content: '> ';
+      white-space: pre;
+    }
+  }
+}
diff --git a/assets/scss/start.scss b/assets/scss/start.scss
new file mode 100644
index 0000000..7bd2335
--- /dev/null
+++ b/assets/scss/start.scss
@@ -0,0 +1,8 @@
+@import "_variables";
+@import "_fonts";
+
+@import "_start";
+
+@import "_general";
+@import "_header";
+@import "_footer";
diff --git a/configs/scss.ini b/configs/scss.ini
new file mode 100644
index 0000000..bfb57cf
--- /dev/null
+++ b/configs/scss.ini
@@ -0,0 +1,6 @@
+source_dir = assets/scss/
+output_dir = assets/css/
+output_style = compressed
+source_comments = false
+precision = 5
+name_prefix = .min