Menu for navigation on mobile
This commit is contained in:
parent
10d885b2cf
commit
03e2367a68
|
|
@ -3,10 +3,12 @@
|
|||
## Screenshot
|
||||
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
BIN
screenshotMobile.png
Normal file
BIN
screenshotMobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -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;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
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%; }
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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%;}
|
||||
.social 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*='Buddycloud']::before {content: url('../images/icons/buddycloud-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%;}
|
||||
a[id*='Friendica']::before {content: url('../images/icons/friendica-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%;}
|
||||
a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Gitea']::before {content: url('../images/icons/gitea-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%;}
|
||||
a[id*='Gitlab']::before {content: url('../images/icons/gitlab-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%;}
|
||||
a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Misskey']::before {content: url('../images/icons/misskey-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%;}
|
||||
a[id*='Peertube']::before {content: url('../images/icons/peertube-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%;}
|
||||
a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Plume']::before {content: url('../images/icons/plume-16.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%;}
|
||||
a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-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,15 +451,71 @@ 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) {
|
||||
|
||||
body {
|
||||
body {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.container {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
1
static/images/icons/Hamburger_icon_white.svg
Normal file
1
static/images/icons/Hamburger_icon_white.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 625 B |
7
static/images/icons/close-md-svgrepo-com.svg
Normal file
7
static/images/icons/close-md-svgrepo-com.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 633 B |
|
|
@ -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 %}
|
||||
|
|
@ -51,13 +87,19 @@
|
|||
{% endif %}
|
||||
<div class="feeds">
|
||||
{% if FEED_ALL_ATOM %}
|
||||
<a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate"><img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/feed-32px.png" alt="atom feed"/></a>
|
||||
<a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate"><img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/icons/feed-32px.png" alt="atom feed"/></a>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
<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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue