From c122acf9689aa9d7b4572b9392163f4b408107a6 Mon Sep 17 00:00:00 2001
From: Sunpy <jonas_steinsvik@hotmail.no>
Date: Sat, 13 Jan 2018 20:16:16 +0100
Subject: [PATCH] Header changes

---
 templates/layout.html | 55 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)
diff --git a/templates/layout.html b/templates/layout.html
index 1b372fd..74303af 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -2,10 +2,63 @@
     <head>
         <title>osu!wayback</title>
         <link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="semantic.min.css") }}">
+        <style>
+        .secondary.pointing.menu .toc.item {
+            display: none;
+        }
+        @media only screen and (max-width: 400px) {
+            .ui.fixed.menu {
+            display: none !important;
+            }
+            .secondary.pointing.menu .item,
+            .secondary.pointing.menu .menu {
+            display: none;
+            }
+            .secondary.pointing.menu .toc.item {
+            display: block;
+            }
+            .masthead.segment {
+            min-height: 73px;
+            }
+            .masthead h1.ui.header {
+            font-size: 2em;
+            margin-top: 1.5em;
+            }
+            .masthead h2 {
+            margin-top: 0.5em;
+            font-size: 1.5em;
+            }
+        }
+        </style>
         <script src="{{ url_for("static", filename="jquery-3.2.1.min.js") }}"></script>
         <script src="{{ url_for("static", filename="semantic.min.js") }}"></script>
+        <script>
+        $(document).ready(function() {
+            $('.masthead').visibility({
+                once: false,
+                onBottomPassed: function() {
+                $('.fixed.menu').transition('fade in');
+                },
+                onBottomPassedReverse: function() {
+                $('.fixed.menu').transition('fade out');
+                }
+            });
+            $('.ui.sidebar').sidebar('attach events', '.toc.item');
+        });
+        </script>
+        {% block headextra %}{% endblock %}
     </head>
-    <body>
+    <body class="pushable">
+        <div class="ui large top fixed inverted menu transition hidden">
+            <div class="ui container">
+                <a class="active item">Home</a>
+                <a class="item">Downloader</a>
+            </div>
+        </div>
+        <div class="ui vertical inverted sidebar menu left" style="">
+            <a class="active item">Home</a>
+            <a class="item">Downloader</a>
+        </div>
         <div class="pusher">
             <div class="ui inverted vertical masthead center aligned segment">
                 <div class="ui container">
