Menu for navigation on mobile

README.md

@@ -3,10 +3,12 @@
 ## Screenshot
 
 ![screenshot](screenshot.png)
+![screenshot mobile](screenshotMobile.png)
 
 ## Options
 
-Theme inspired by the mkdocs default theme, without all the datadealer (Google, Twitter, Facebook) stuff. [Federation Widget](https://github.com/LubuWest/federation-widget) in sidebar (works currently only with Friendica). Social links to Mastodon, Matrix, Friendica, Diaspora, Misskey,...
+Theme inspired by the mkdocs default theme, without all the datadealer (Google, Twitter, Facebook) stuff. [Federation Widget](https://git.friendi.ca/lubuWest/Federation-widget) in sidebar (works currently only with Friendica). Social links to Mastodon, Matrix, Friendica, Diaspora, Misskey,...
+It has a menu for easy navigation on mobile.
 EMail and License is displayed in the footer.
 
 Javascript only used for Federation Widget.

static/css/main.css

@@ -43,14 +43,13 @@ header {
 }
 
 [role=banner]{
-  background-image: linear-gradient(#54b4eb, #2FA4E7 60%, #1d9ce5);
+  background-color: #54b4eb /*linear-gradient(#54b4eb, #2FA4E7 60%, #1d9ce5)*/;
   height: auto;
   line-height: 50px;
   padding: 0 1%;
   position: fixed;
   width: 100%;
   margin: 0;
-
 }
 
 .wrapper {
@@ -130,18 +129,13 @@ header a.title {
 
 header .feeds {
   float: right;
-  text-align: right;
-  width: 25%;
-  height: 41px;
   padding-top: 9px;
-  padding-right: 9px;
+  padding-right: 1.5em;
 }
 
 header .feeds a {
-  display: block;
+  display: inline-block;
-  float: right;
   padding-right: 5px;
-  width: 40px;
 }
 
 header .feeds a:hover,
@@ -157,7 +151,26 @@ header .pages a {
   font-size: 1.1em;
 }
 
+#openmenu{
+  display: inline-block;
+  width: 1.5em;
+}
+#openmenu svg{
+  height: 1.7em;
+}
 
+#closemenu{
+  float: right;
+  width: 1.5em;
+}
+#closemenu svg{
+  height: 1.7em;
+}
+
+.menu-content{
+  display: none;
+  color: #4D4D4C;
+}
 /* Sidebar */
 
 /* Titles */
@@ -241,7 +254,7 @@ article.summary .metadata {
 .metadata p {
   margin: 0;
 }
-*/
+
 /* Listings */
 
 ol.archive li {
@@ -273,27 +286,27 @@ ol.archive li .tags
     border-bottom: none;
 }
 
-.social a[id*='Buddycloud']::before {content: url('../images/icons/buddycloud-18px.png'); margin-right: 5px; vertical-align: -15%; }
+a[id*='Buddycloud']::before {content: url('../images/icons/buddycloud-18px.png'); margin-right: 5px; vertical-align: -15%; }
-.social a[id*='Diaspora']::before {content: url('../images/icons/Diaspora-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Diaspora']::before {content: url('../images/icons/Diaspora-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Friendica']::before {content: url('../images/icons/friendica-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Friendica']::before {content: url('../images/icons/friendica-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Forgejo']::before {content: url('../images/icons/forgejo-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Forgejo']::before {content: url('../images/icons/forgejo-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gitea']::before {content: url('../images/icons/gitea-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Gitea']::before {content: url('../images/icons/gitea-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Github']::before {content: url('../images/icons/github-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Github']::before {content: url('../images/icons/github-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gitlab']::before {content: url('../images/icons/gitlab-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Gitlab']::before {content: url('../images/icons/gitlab-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gnusocial']::before {content: url('../images/icons/gnusocial-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Gnusocial']::before {content: url('../images/icons/gnusocial-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Misskey']::before {content: url('../images/icons/misskey-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Misskey']::before {content: url('../images/icons/misskey-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Movim']::before {content: url('../images/icons/movim-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Movim']::before {content: url('../images/icons/movim-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Peertube']::before {content: url('../images/icons/peertube-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Peertube']::before {content: url('../images/icons/peertube-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pixelfed']::before {content: url('../images/icons/pixelfed-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Pixelfed']::before {content: url('../images/icons/pixelfed-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Plume']::before {content: url('../images/icons/plume-16.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Plume']::before {content: url('../images/icons/plume-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pump.io']::before {content: url('../images/icons/pumpio-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='Pump.io']::before {content: url('../images/icons/pumpio-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='XMPP']::before {content: url('../images/icons/xmpp-18px.png'); margin-right: 5px; vertical-align: -15%;}
+a[id*='XMPP']::before {content: url('../images/icons/xmpp-18px.png'); margin-right: 5px; vertical-align: -15%;}
 .social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
 .social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
 
@@ -392,7 +405,7 @@ display: block;
 position: absolute;
 left: 0; top: 10%;
 margin: 20px 0 0;
-width: 200px;
+width: 300px;
 font-size: 0.7em;
 color: #4D4D4C;
 border: thin solid #eeeeee;
@@ -438,6 +451,38 @@ background: white;
  }
 
 
+/* Menu */
+input {
+  display: none;
+}
+.menu {
+  position: fixed;
+  right: 0;
+  float: left;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+  height: 100%;
+  overflow: auto;
+  z-index: 2;
+  background: #54b4eb;
+  transition: transform 0.4s ease;
+  transform: translateX(110%);
+}
+
+.menu ul {
+  list-style-type: none;
+  padding-top: 1.5em;
+}
+
+.menu a {
+  color: #E5E5E3;
+}
+
+input:checked ~ nav{
+  transform: translateX(0%);
+}
+
 /* Responsive */
 
 @media (max-width: 900px) {
@@ -446,6 +491,30 @@ background: white;
     min-width: 300px;
   }
 
+  header a.title {
+    font-size: 1.3em;
+  }
+
+  .menu-content{
+    display: block;
+  }
+
+  .sidebar nav{
+    display: none;
+  }
+  .social {
+    display: none;
+  }
+  h1 {
+    font-size: 1.4em;
+    margin: 0.3em 0;
+    padding: 0.3em 0 0.1em;
+  }
+
+  h2 {
+    font-size: 1.2em;
+  }
+
   .container {
     border-right: none;
   }  

static/images/icons/Hamburger_icon_white.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" style="fill:#fff;"/></svg>

static/images/icons/close-md-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> </g>
+
</svg>

templates/base.html

@@ -44,6 +44,42 @@
 </head>
 
 <body>
+    <input type="checkbox" data-menu id="menu-opener" />
+    <nav class="menu">
+    <label for="menu-opener" role="button" id="closemenu">
+    <svg id="menu-close" class="menu-close" viewBox="0 0 20 20">
+    <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#E5E5E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    </label>
+    <ul class="menu-content">
+    {% for cat, null in categories %}
+    {% if cat != DEFAULT_CATEGORY %}
+    <li {% if cat == category %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
+    {% else %}
+    {% for article in articles %}
+    <li><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></li>
+    {% endfor %}
+    {% endif %}
+    {% endfor %}
+    </ul>
+
+    <ul>
+    {% if pages %}
+    {% for p in pages %}
+    <li class="menu-content"><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a><li>
+    {% endfor %}
+    {% endif %}
+    <li><a href="{{ SITEURL }}/tags.html">Tags</a><li>
+    <li><a href="{{ SITEURL }}/authors.html">Authors</a><li>
+    <li><a href="{{ SITEURL }}/archives.html">Archives</a><li>
+    </ul>
+    <ul class="menu-content">
+    {% for name, link in SOCIAL %}
+    <li><a href="{{ link }}" id="{{ name }}">{{ link }}</a><i></i></li>
+    {% endfor %}
+    </ul>
+    </nav>
+
 {{ FEED_ATOM }}
     <div class="container"><header role="banner">
     {% if SITELOGO %}
@@ -56,8 +92,14 @@
     {% if FEED_ALL_RSS %}
     <a href="{{ SITEURL }}/{{ FEED_ALL_RSS }}" rel="alternate"><img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/feed-32px.png" alt="rss feed"/></a>
     {% endif %}
+    <label for="menu-opener" role="button" id="openmenu">
+        <svg id="menu-icon" class="menu-icon" viewBox="0 4 35 30">
+        <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" style="fill:#E5E5E3;"/>
+        </svg>
+    </label>
     </div>
     <a href="{{ SITEURL }}" class="title">{{ SITENAME }}</a>
+
     {% if pages %}
     <nav class="pages">
     {% for p in pages %}
@@ -84,6 +126,7 @@
     </ul>
     </nav>
     </div>
+
     {% endif %}
     <div role="main" class="content">
     {% block content %}{% endblock %}
@@ -116,9 +159,9 @@
     <script type="text/javascript" src="{{ SITEURL }}/theme/js/federation_widget.js"></script>
     {% endif %}
     {% if SOCIAL %}
-    <aside>
+    <aside class="social">
     <h2>Social Networks</h2>
-    <ul class="social">
+    <ul >
     {% for name, link in SOCIAL %}
         <li><a href="{{ link }}" id="{{ name }}">{{ link }}</a><i></i></li>
     {% endfor %}