Add basic base layout

2022-03-20 14:24:55 -04:00 · 2022-03-20 14:24:55 -04:00 · 488e853ec2
parent bf4d599ccd
commit 488e853ec2
4 changed files with 56 additions and 2 deletions
--- a/config.toml
+++ b/config.toml
@ -14,3 +14,7 @@ highlight_code = true

 [extra]
 # Put all your custom variables here
+toolbar_pages = [ 
+    ["About Us", "about"],
+    ["Contact", "contact"],
+]
--- a/sass/main.scss
+++ b/sass/main.scss
@ -0,0 +1,30 @@
+$sidebar_width: 20%;
+
+body {
+    margin: 0;
+    nav {
+        height: 100%;
+        position: fixed;
+        width: $sidebar_width;
+        background: rgba(255, 0, 0, .1);
+        padding-top: 32px;
+        img {
+            width: 100%;
+        }
+        div {
+            padding: 0 16px 0 16px;
+        }
+    }
+    main {
+        height: 100%;
+        margin-left: $sidebar_width;
+        background: rgba(0, 255, 0, .1);
+        padding-top: 50px;
+        article {
+            margin: auto;
+            border: 1px solid blue;
+            padding: 16px;
+            max-width: 1000px;
+        }
+    }
+}
--- a/templates/base.html
+++ b/templates/base.html
@ -7,10 +7,16 @@
            Mountain Linux Club
            {% endif %}
        </title>
+        <link rel="stylesheet" href="{{ get_url(path='main.css') }}">
    </head>
    <body>
+        {% include "sidebar.html" %}
+        <main>
+            <article>
            {% block content %}
            {% endblock %}
+            </article>
+        </main>
    </body>
 </html>

--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@ -0,0 +1,14 @@
+<nav>
+    <div>
+        <img src="{{ get_url(path='logo.png') }}">
+    </div>
+    <div>
+        <ul>
+        {% for page in config.extra.toolbar_pages %}
+        <li>
+        <a href="{{ get_url(path=page[1]) }}">{{ page[0] }}</a>
+        </li>
+        {% endfor %}
+        </ul>
+    </div>
+</nav>