diff --git a/README.md b/README.md index 6ddab0a..62ce747 100644 --- a/README.md +++ b/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. diff --git a/screenshotMobile.png b/screenshotMobile.png new file mode 100644 index 0000000..898f5ad Binary files /dev/null and b/screenshotMobile.png differ diff --git a/static/css/main.css b/static/css/main.css index ee81e1a..518fcc3 100644 --- a/static/css/main.css +++ b/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; - 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; } diff --git a/static/images/icons/Hamburger_icon_white.svg b/static/images/icons/Hamburger_icon_white.svg new file mode 100644 index 0000000..cb39d07 --- /dev/null +++ b/static/images/icons/Hamburger_icon_white.svg @@ -0,0 +1 @@ + diff --git a/static/images/icons/close-md-svgrepo-com.svg b/static/images/icons/close-md-svgrepo-com.svg new file mode 100644 index 0000000..c90b67c --- /dev/null +++ b/static/images/icons/close-md-svgrepo-com.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 4710544..513b23f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -44,6 +44,42 @@
+ + + {{ FEED_ATOM }}