From bb789eadc4c7c9ab1dd5e7fcd39fbe69dbfcdbdb Mon Sep 17 00:00:00 2001
From: Paul Tolstoi <paul.tolstoi@gmail.com>
Date: Sat, 21 Apr 2018 15:15:04 +0200
Subject: [PATCH] nav changes, description, globe icon
---
content/about.de.md | 3 +-
content/about.en.md | 1 +
content/impressum.md | 1 +
i18n/de.toml | 5 +-
i18n/en.toml | 5 +-
layouts/_default/baseof.html | 36 +++-----
layouts/partials/lang-dropdown.html | 23 +++++
static/globe.svg | 19 +++++
static/globe.up.svg | 19 +++++
static/styles.css | 127 +++++++++++++++++++++++-----
10 files changed, 187 insertions(+), 52 deletions(-)
create mode 100644 layouts/partials/lang-dropdown.html
create mode 100644 static/globe.svg
create mode 100644 static/globe.up.svg
diff --git a/content/about.de.md b/content/about.de.md
index 61bf79a..cb3b7cc 100644
--- a/content/about.de.md
+++ b/content/about.de.md
@@ -1,5 +1,6 @@
---
title: StuStaNet e.V.
+description: Information über den StuStaNet e. V. in der Studentenstadt Freimann, München
type: page
color: green
---
@@ -18,7 +19,7 @@ Für Interessierte, die mehr wollen, als nur "surfen", gibt es die Möglichkeit,
Bewohner der Studentenstadt Freimann, die dem Verein beitreten möchten, müssen einen Aufnahmeantrag ausfüllen, den sie in der Sprechstunde des Vereins erhalten und abgeben können. Die Sprechstunde im Vereinsbüro im "Blauen Haus" (Zimmer 028) ist auch erste Anlaufstelle für weitere Informationen zum Verein und bei Problemen mit dem wohnheimweiten LAN. Die Sprechzeiten hängen an den schwarzen Brettern der Häuser sowie am Sprechstundenraum aus.
## Vorstand
-Die Kontaktadressen des aktuellen Vorstands finden sich im [Impressum]({{< ref "impressum.md" >}}).
+Die Kontaktadressen des aktuellen Vorstands findet sich im [Impressum]({{< ref "impressum.md" >}}).
## Satzung
Die aktuelle Satzung des StuStaNet e.V. ist [hier einsehbar](https://vereinsanzeiger.stustanet.de/satzung.pdf).
diff --git a/content/about.en.md b/content/about.en.md
index 59fc665..405f201 100644
--- a/content/about.en.md
+++ b/content/about.en.md
@@ -1,5 +1,6 @@
---
title: StuStaNet e.V.
+description: Information about StuStaNet in Studentenstadt Freiman, Munich, Germany
type: page
color: green
---
diff --git a/content/impressum.md b/content/impressum.md
index 1600ecb..bf6d309 100644
--- a/content/impressum.md
+++ b/content/impressum.md
@@ -1,5 +1,6 @@
---
title: Impressum
+description: Impressum für stustanet.de
type: page
noindex: true
color: yellow
diff --git a/i18n/de.toml b/i18n/de.toml
index 690d9c8..d047fd7 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -2,4 +2,7 @@
other = "Diese Seite bearbeiten"
[imprint]
-other = "Impressum"
\ No newline at end of file
+other = "Impressum"
+
+[toHomepage]
+other = "Zur Startseite"
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
index e27b33f..e278d42 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -2,4 +2,7 @@
other = "Edit this Page"
[imprint]
-other = "Imprint"
\ No newline at end of file
+other = "Imprint"
+
+[toHomepage]
+other = "To Homepage"
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index afb112c..36a06e3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -4,6 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
+ {{ if .Params.Description }}
+ <meta name="description" content="{{ .Params.Description }}" />
+ {{ end }}
<meta name="viewport" content="width=device-width,minimum-scale=1">
{{ if and (isset .Params "noindex") .Params.noindex }}
<meta name="robots" content="noindex">
@@ -25,7 +28,7 @@
<nav id="top-bar">
<div class="container">
<div class="logo">
- <a href="/" title="To Homepage"><img src="/logo.png" alt="StuStaNet" /></a>
+ <a href="/" title="{{ i18n "toHomepage" }}"></a>
</div>
<ul class="menu">
{{ $currentPage := . }}
@@ -33,10 +36,12 @@
<li><a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
{{ end }}
</ul>
+ {{ $.Scratch.Set "nav-orientation" "" }}
+ {{ partial "lang-dropdown.html" . }}
</div>
</nav>
- <main aria-role="main">
+ <article>
<header class="{{ .Params.Color | default "blue" }}">
<h1>{{.Title}}</h1>
{{ with .Params.subtitle }}
@@ -46,7 +51,7 @@
<div class="container">
{{ block "main" . }}{{.Content}}{{ end }}
</div>
- </main>
+ </article>
<footer>
<div class="editPage">
@@ -56,29 +61,8 @@
<a href="{{ ref . "impressum.md" }}">{{ i18n "imprint" }}</a>
</div>
<div class="lang-dropdown-container">
- <div class="lang-dropdown">
- <span><i class="globe"></i>{{ .Site.Language.LanguageName }} ▴</span>
- <ul class="up">
- {{ if .Site.IsMultiLingual }}
- {{ $lang := .Site.Language }}
- {{ range .Site.Languages }}
- <li>
- {{ $translated := where $.Translations "Lang" .Lang }}
- {{ if $translated }}
- {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
- {{ else if eq .Lang $.Page.Lang }}
- {{ $.Scratch.Set "url" $.Permalink }}
- {{ else }}
- {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
- {{ end }}
- <a href="{{ $.Scratch.Get "url" }}" class="lang">
- <span class="shorthand">{{ .Lang }}</span>{{ .LanguageName }}
- </a>
- </li>
- {{ end }}
- {{ end }}
- </ul>
- </div>
+ {{ $.Scratch.Set "nav-orientation" "up" }}
+ {{ partial "lang-dropdown.html" . }}
</div>
</footer>
</body>
diff --git a/layouts/partials/lang-dropdown.html b/layouts/partials/lang-dropdown.html
new file mode 100644
index 0000000..a762827
--- /dev/null
+++ b/layouts/partials/lang-dropdown.html
@@ -0,0 +1,23 @@
+<div class="lang-dropdown {{ default "" ($.Scratch.Get "nav-orientation") }}">
+ <span><i class="globe"></i>{{ .Site.Language.Lang }}</span>
+ <ul>
+ {{ if .Site.IsMultiLingual }}
+ {{ $lang := .Site.Language }}
+ {{ range .Site.Languages }}
+ <li>
+ {{ $translated := where $.Translations "Lang" .Lang }}
+ {{ if $translated }}
+ {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
+ {{ else if eq .Lang $.Page.Lang }}
+ {{ $.Scratch.Set "url" $.Permalink }}
+ {{ else }}
+ {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
+ {{ end }}
+ <a href="{{ $.Scratch.Get "url" }}" class="lang">
+ <span class="shorthand">{{ .Lang }}</span>{{ .LanguageName }}
+ </a>
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+</div>
\ No newline at end of file
diff --git a/static/globe.svg b/static/globe.svg
new file mode 100644
index 0000000..b71eece
--- /dev/null
+++ b/static/globe.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 760 760">
+ <path
+ d="m760 380a380 380 0 1 1 -760 0 380 380 0 1 1 760 0z"
+ class="land"
+ style="fill:#1b54ac" />
+ <path
+ d="m10 380c0 69 19 133 52 188l5-90c-42-59-52-84-53-154-3 18-4 37-4 56zm87-238 50-17c33-43 99-94 166-94-26 8-101 44-107 67 28-18 51-21 79-21l61-34-20-29c-92 13-172 60-229 128zm49 239c0 22 22 68 48 68h64l8 13c20 0 20 14 20 32 0 24 30 28 30 66 0 10-12 14-12 30 0 14 37 86 60 86 40 0 84-36 84-52 0-38 34-28 34-54 0-118 48-62 66-164l-41 16c-44-37-70-91-70-111 13 0 53 60 67 96 34-14 69-39 78-75l-18-8-6-12-14 18c-5 0-28-17-35-41 32 21 47 21 103 21 26 0 41 75 66 88 0-41 3-74 18-107 14 0 37 23 53 68-9-164-125-300-280-338l23 19h-25c0 53-16 35-52 75 0-10 0-14 8-19-15-9-29-12-39-12-15 0-56 26-68 52l21-2 8 18c18-11 12-47 39-47 0 8-11 11-11 25l25-1c-23 26-35 32-66 32l-5-16c-9 23-36 35-58 37 0 12-1 19-8 30l-26-5-17 38 33 7c15-24 33-37 58-42l32 35c0 4-6 7-20 7l12 8 18-22c-16-9-22-19-22-31 38 11 29 50 46 53 0-45 31-4 31-58 22 0 60 13 60 29-57 0-73 2-73 20 0 9 49-5 49 42-40 0-58 0-80-12l-7 20c-24-7-49-20-49-48l-58 9-16-10c-40 50-86 44-86 129zm106-217 15-3 7-14c-14 0-21 9-22 17zm9 11 32-5-5-39c-19 10 3 25-27 44zm2-72c13 0 24-2 24-11l-19-4zm218 98c27 0 46 33 46 47l-24-2c0-16-9-33-22-45zm10 431c24 0 48-37 48-77l-38 32z"
+ class="see"
+ style="fill:#ffffff" />
+</svg>
diff --git a/static/globe.up.svg b/static/globe.up.svg
new file mode 100644
index 0000000..60e6505
--- /dev/null
+++ b/static/globe.up.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 760 760">
+ <path
+ d="m760 380a380 380 0 1 1 -760 0 380 380 0 1 1 760 0z"
+ class="land"
+ style="fill:#FFFFFF" />
+ <path
+ d="m10 380c0 69 19 133 52 188l5-90c-42-59-52-84-53-154-3 18-4 37-4 56zm87-238 50-17c33-43 99-94 166-94-26 8-101 44-107 67 28-18 51-21 79-21l61-34-20-29c-92 13-172 60-229 128zm49 239c0 22 22 68 48 68h64l8 13c20 0 20 14 20 32 0 24 30 28 30 66 0 10-12 14-12 30 0 14 37 86 60 86 40 0 84-36 84-52 0-38 34-28 34-54 0-118 48-62 66-164l-41 16c-44-37-70-91-70-111 13 0 53 60 67 96 34-14 69-39 78-75l-18-8-6-12-14 18c-5 0-28-17-35-41 32 21 47 21 103 21 26 0 41 75 66 88 0-41 3-74 18-107 14 0 37 23 53 68-9-164-125-300-280-338l23 19h-25c0 53-16 35-52 75 0-10 0-14 8-19-15-9-29-12-39-12-15 0-56 26-68 52l21-2 8 18c18-11 12-47 39-47 0 8-11 11-11 25l25-1c-23 26-35 32-66 32l-5-16c-9 23-36 35-58 37 0 12-1 19-8 30l-26-5-17 38 33 7c15-24 33-37 58-42l32 35c0 4-6 7-20 7l12 8 18-22c-16-9-22-19-22-31 38 11 29 50 46 53 0-45 31-4 31-58 22 0 60 13 60 29-57 0-73 2-73 20 0 9 49-5 49 42-40 0-58 0-80-12l-7 20c-24-7-49-20-49-48l-58 9-16-10c-40 50-86 44-86 129zm106-217 15-3 7-14c-14 0-21 9-22 17zm9 11 32-5-5-39c-19 10 3 25-27 44zm2-72c13 0 24-2 24-11l-19-4zm218 98c27 0 46 33 46 47l-24-2c0-16-9-33-22-45zm10 431c24 0 48-37 48-77l-38 32z"
+ class="see"
+ style="fill:#363636" />
+</svg>
diff --git a/static/styles.css b/static/styles.css
index bb2861b..44e9246 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -42,18 +42,25 @@ body {
#top-bar div.logo {
display: inline-block;
+ flex: 1 1 0;
+ height: 30px;
}
-#top-bar .logo a img {
- height: 34px;
- width: auto;
- margin: 10px 10px 10px -5px;
+#top-bar .logo a {
+ display: inline-block;
+ height: 100%;
+ width: 100%;
+ background-image: url(/logo.png);
+ background-size: contain;
+ background-position: left center;
+ background-repeat: no-repeat;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
+ flex: 0 0 0;
}
ul.menu li {
@@ -65,15 +72,15 @@ ul.menu li a {
padding: 15px 5px;
}
-#top-bar .menu {
- float: right;
-
-}
-
.lang-dropdown {
- color: #EDEDED;
cursor: default;
position: relative;
+ flex: 0 0 0;
+}
+
+.lang-dropdown > span {
+ text-transform: uppercase;
+ font-size: 12px;
}
.lang-dropdown a {
@@ -82,11 +89,15 @@ ul.menu li a {
.lang-dropdown .globe {
display: inline-block;
- width: 16px;
- height: 16px;
+ width: 13px;
+ height: 13px;
margin: -2px 5px 0 0;
- vertical-align: top;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABFklEQVQoz13RMUgbUBSF4duCg4MmQQK6FbQ4d3Ps6uQQBRdp0U5uxdCAiF1aLBQLLQjilEWcAkJALbWtg1tBKAh2ERxiwQSFDm6az8EXk+Zs79yf+945LyJJ1rJvaq4c+OxZ/C8DJqwqWnIIbnzR3w2VVLxwCa6dGe4GMkYU/ARHZj3pBvpUNdyCdTPWTHkUnnsaIWvIjrYWDHtpw9uwoiznr0bHuOxxe/F3bHnll1PNBJQ6b/6RzB098jZBzaR5g/fAxwQsRkTo99pJcubugel0/KM37awkp9qq+DwZexERRlNVfG29YjwZxxERfj9kudbXQj6Bf3Led4TdlWlnKahjzEUaNr3r6CIiQt4bH+yr21Zsf/cd+nQr23neGI8AAAAASUVORK5CYII=) no-repeat;
+ vertical-align: middle;
+ background: url(/globe.svg) no-repeat;
+}
+
+.lang-dropdown.up .globe {
+ background: url(/globe.up.svg) no-repeat;
}
.lang-dropdown ul {
@@ -98,6 +109,7 @@ ul.menu li a {
font: bold 12px sans-serif;
overflow: hidden;
max-height: 0px;
+ text-align: center;
-webkit-transition: max-height 0.4s linear;
-moz-transition: max-height 0.4s linear;
transition: max-height 0.4s linear;
@@ -105,7 +117,7 @@ ul.menu li a {
.lang-dropdown:hover ul {
max-height: 200px;
}
-.lang-dropdown ul.up {
+.lang-dropdown.up ul {
top: auto;
bottom: 20px;
}
@@ -130,27 +142,27 @@ ul.menu li a {
height: 1px;
border: 5px solid transparent;
border-bottom-color: #454545;
- left: 50%;
+ left: 75%;
top: -11px;
margin-left: -5px;
}
.lang-dropdown li:last-child {
border-radius: 0 0 3px 3px;
}
-.lang-dropdown .up li:first-child {
+.lang-dropdown.up li:first-child {
margin-top: 0px;
}
-.lang-dropdown .up li:last-child {
+.lang-dropdown.up li:last-child {
margin-bottom: 15px;
}
-.lang-dropdown .up li:last-child:after {
+.lang-dropdown.up li:last-child:after {
content:'';
position: absolute;
width: 1px;
height: 1px;
border: 5px solid transparent;
border-top-color: #454545;
- left: 50%;
+ left: 75%;
bottom: -11px;
margin-left: -5px;
}
@@ -177,15 +189,46 @@ article > *,
.container,
header h1 {
position: relative;
- max-width: 800px;
margin-left: auto;
margin-right: auto;
+ padding: 0 20px;
+}
+
+nav .container {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+}
+
+article > * {
+ max-width: 800px;
padding: 0 50px;
}
+.container .lang-dropdown {
+ color: #1b54ac;
+}
+
+.container .lang-dropdown {
+ padding: 15px 5px 15px 25px;
+}
+
+.lang-dropdown::after {
+ content: 'â–¾';
+}
+
+.up.lang-dropdown::after {
+ content: 'â–´';
+}
+
+.container .lang-dropdown ul {
+ top: 10px;
+}
+
header {
position: relative;
display: block;
+ max-width: 100%;
background-image: url(/header.jpg);
background-size: cover;
background-position-y: 30%;
@@ -259,7 +302,7 @@ h2 + h3 {
margin-top: 0.3rem;
}
-main {
+article {
background: #FFF;
width: 100%;
position: relative;
@@ -322,7 +365,7 @@ code {
}
a {
- color: #3273dc;
+ color: #1b54ac;
cursor: pointer;
text-decoration: none;
}
@@ -335,11 +378,14 @@ footer {
background: #363636;
display: flex;
flex-shrink: 0;
+ white-space: nowrap;
}
footer .editPage {
padding: 15px;
flex: 1 1 0;
+ text-overflow: clip;
+ overflow: hidden;
}
footer .editPage a {
@@ -365,6 +411,7 @@ footer .lang-dropdown-container {
footer .lang-dropdown {
display: inline;
+ color: #EDEDED;
}
.we-are-not-stuwerk {
@@ -383,4 +430,38 @@ footer .lang-dropdown {
.vorstand ul {
padding-left: 0;
+}
+
+@media (max-width: 720px) {
+ main {
+ padding: 25px 0;
+ }
+
+ h1 {
+ font-size: 1.6rem;
+ line-height: 2rem;
+ }
+
+ h2 {
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+ }
+
+ h3 {
+ font-size: 1.2rem;
+ }
+
+ header h1 {
+ padding: 50px 0 50px;
+ font-size: 2rem;
+ line-height: inherit;
+ }
+
+ article > *, .container {
+ padding: 0 25px;
+ }
+
+ footer .editPage a {
+ color: transparent;
+ }
}
\ No newline at end of file
--
GitLab