1 files changed, 148 insertions, 4 deletions
diff --git a/src/hydrilla_website/templates/website_base.html.jinja b/src/hydrilla_website/templates/website_base.html.jinja
index f706faa..777a3d3 100644
--- a/src/hydrilla_website/templates/website_base.html.jinja
+++ b/src/hydrilla_website/templates/website_base.html.jinja
@@ -13,14 +13,158 @@ Available under the terms of Creative Commons Zero v1.0 Universal.
 
 {% block head %}
   {{ super() }}
-
+  <link rel="icon" type="image/x-icon" href="static/haketilo-favicon.ico">
   <title>
-    {% block title required %}{% endblock %}
-    -
-    {{ _('base.title.haketilo') }}
+    {% block title %}
+      {{ _('base.title.haketilo') }}
+    {% endblock %}
   </title>
+  <meta http-equiv="Content-Security-Policy"
+        content="script-src 'none'; default-src 'self'">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 {% endblock head %}
 
 {% block style %}
   {{ super() }}
+
+  .nav-container {
+      display: block;
+      padding: 20px 10px;
+  }
+
+  nav {
+      display: inline-flex;
+      flex-direction: column;
+      padding: 0;
+      margin: auto;
+      min-height: calc(100vh - 40px);
+      justify-content: space-evenly;
+  }
+
+  nav > a {
+      margin: 0;
+  }
+
+  .navigation-dots {
+      display: none;
+      padding: 20px 10px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      opacity: 0.75;
+  }
+
+  .navigation-dots img {
+      width: 10px;
+      height: auto;
+  }
+
+  body {
+      width: 100%;
+  }
+
+  .subpage {
+      width: calc(100% - 20px);
+      overflow: hidden;
+      padding: 0 10px;
+  }
+
+  .subpage-layout {
+      display: flex;
+      width: calc(700px + 300px);
+      margin: auto;
+      position: relative;
+      overflow: hidden;
+  }
+
+  @media screen and (max-width: 1020px) {
+      .subpage-layout {
+          width: 100%;
+      }
+  }
+
+  .subpage:nth-child(2n) {
+      background-color: #f6fff9;
+  }
+
+  .subpage-left-part {
+      min-height: calc(100vh - 20px);
+      flex: 1 1 700px;
+      max-width: 700px;
+      padding: 10px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+  }
+
+  .subpage-main-contents {
+      margin: 10px;
+  }
+
+  @media screen and (max-width: 500px) {
+      .nav-container {
+          position: absolute;
+          right: -340px;
+          /* border will cover the 3 dots */
+          border-right: 30px solid white;
+          border-left: 2px solid #f4f4f4;
+          padding-right: 0;
+          background-color: #ffffffc0;
+          z-index: 1;
+      }
+
+      .subpage:nth-child(2n) .nav-container {
+            background-color: #f6fff9c0;
+            border-right: 30px solid #f6fff9;
+      }
+
+      .nav-container:target {
+          right: -10px;
+      }
+
+      .navigation-dots {
+          display: block;
+      }
+  }
+
+  h3 {
+      text-align: center;
+  }
+
+  li {
+      margin-bottom: 10px;
+  }
 {% endblock style %}
+
+{% macro nav(current_subpage_id) %}
+  <div id="nav-{{ current_subpage_id }}" class="nav-container">
+    <nav>
+      {% for subpage_id, href, text in nav_links_data %}
+        {% set attrs = {'href': href, 'draggable': 'false'} %}
+        {% if current_subpage_id == subpage_id %}
+          {% do attrs.update({'class': 'blue-button'}) %}
+        {% else %}
+          {% do attrs.update({'class': 'green-button'}) %}
+        {% endif %}
+        <a{{ attrs|xmlattr }}>{{ text }}</a>
+      {% endfor %}
+    </nav>
+  </div>
+  <a class="navigation-dots" href="#nav-{{ current_subpage_id }}">
+    <img alt="Three dots, click to view mobile navigation panel"
+         src="static/three-green-dots.svg" draggable="false">
+  </a>
+{% endmacro %}
+
+{% macro subpage(subpage_id) %}
+  <div id="{{ subpage_id }}" class="subpage">
+    <div class="subpage-layout">
+      <div class="subpage-left-part">
+        <div class="subpage-main-contents">
+          {{ caller() }}
+        </div>
+      </div>
+      {{ nav(subpage_id) }}
+    </div>
+  </div>
+{% endmacro %}