diff --git a/sass/main.scss b/sass/main.scss index d4106b4..eb921eb 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,4 +1,6 @@ $sidebar_width: 20%; +$sidebar_background: rgba(255, 0, 0, .1); +$body_background: rgba(0, 255, 0, .1); body { margin: 0; @@ -6,8 +8,9 @@ body { height: 100%; position: fixed; width: $sidebar_width; - background: rgba(255, 0, 0, .1); + background: $sidebar_background; padding-top: 32px; + padding-bottom: 16px; img { width: 100%; } @@ -17,8 +20,9 @@ body { } main { height: 100%; + box-sizing: border-box; margin-left: $sidebar_width; - background: rgba(0, 255, 0, .1); + background: $body_background; padding-top: 50px; article { margin: auto; @@ -28,3 +32,7 @@ body { } } } + +@media screen and (max-width: 1000px) { + @import "mobile.scss"; +} diff --git a/sass/mobile.scss b/sass/mobile.scss new file mode 100644 index 0000000..656e9b3 --- /dev/null +++ b/sass/mobile.scss @@ -0,0 +1,11 @@ +body { + nav { + position: unset; + height: auto; + width: 100%; + } + main { + margin-left: 0; + height: auto; + } +} diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000..fca4400 --- /dev/null +++ b/templates/404.html @@ -0,0 +1,4 @@ +{% extends "base.html" %} +{% block content %} +

Insert epic 404 page here

+{% endblock %} diff --git a/templates/sidebar.html b/templates/sidebar.html index ba80c63..c4f6072 100644 --- a/templates/sidebar.html +++ b/templates/sidebar.html @@ -1,6 +1,6 @@