Add mobile layouts

This commit is contained in:
Thom Dickson 2022-03-24 15:27:03 -04:00
parent 236b0e5eeb
commit a92ee83b87
Signed by untrusted user: boots
GPG Key ID: 40BE2AF8EBF8D2BB
4 changed files with 26 additions and 3 deletions

View File

@ -1,4 +1,6 @@
$sidebar_width: 20%; $sidebar_width: 20%;
$sidebar_background: rgba(255, 0, 0, .1);
$body_background: rgba(0, 255, 0, .1);
body { body {
margin: 0; margin: 0;
@ -6,8 +8,9 @@ body {
height: 100%; height: 100%;
position: fixed; position: fixed;
width: $sidebar_width; width: $sidebar_width;
background: rgba(255, 0, 0, .1); background: $sidebar_background;
padding-top: 32px; padding-top: 32px;
padding-bottom: 16px;
img { img {
width: 100%; width: 100%;
} }
@ -17,8 +20,9 @@ body {
} }
main { main {
height: 100%; height: 100%;
box-sizing: border-box;
margin-left: $sidebar_width; margin-left: $sidebar_width;
background: rgba(0, 255, 0, .1); background: $body_background;
padding-top: 50px; padding-top: 50px;
article { article {
margin: auto; margin: auto;
@ -28,3 +32,7 @@ body {
} }
} }
} }
@media screen and (max-width: 1000px) {
@import "mobile.scss";
}

11
sass/mobile.scss Normal file
View File

@ -0,0 +1,11 @@
body {
nav {
position: unset;
height: auto;
width: 100%;
}
main {
margin-left: 0;
height: auto;
}
}

4
templates/404.html Normal file
View File

@ -0,0 +1,4 @@
{% extends "base.html" %}
{% block content %}
<h1><em>Insert epic 404 page here</em></h1>
{% endblock %}

View File

@ -1,6 +1,6 @@
<nav> <nav>
<div> <div>
<img src="{{ get_url(path='logo.png') }}"> <a href="/"><img src="{{ get_url(path='logo.png') }}"></a>
</div> </div>
<div> <div>
<ul> <ul>