From 0a4b292e7978210812cd36020e70bf91813634fc Mon Sep 17 00:00:00 2001
From: Julien Schmidt <js@stusta.net>
Date: Sun, 1 Jul 2018 22:37:10 +0200
Subject: [PATCH] home: add sidebar with quick nav

---
 content/_index.de.md                | 21 +++++++++++++
 content/_index.en.md                | 22 ++++++++++++++
 layouts/shortcodes/column.html      |  1 +
 layouts/shortcodes/two-columns.html |  1 +
 static/css/main.css                 | 47 +++++++++++++++++++++++++++++
 5 files changed, 92 insertions(+)
 create mode 100644 layouts/shortcodes/column.html
 create mode 100644 layouts/shortcodes/two-columns.html

diff --git a/content/_index.de.md b/content/_index.de.md
index 9bea78e..61b9f85 100644
--- a/content/_index.de.md
+++ b/content/_index.de.md
@@ -6,6 +6,9 @@ headerImage: headers/home.jpg
 headerStats: true
 ---
 
+{{% two-columns %}}
+{{% column %}}
+
 StuStaNet ist eine Organization in der Studentenstadt Freimann welche ein Computer-Netzwerk betreibt, das die Studentenstadt sowie das Wohnheims Max-Bill-Straße an das Internet anbindet. Das Netzwerk wird ausschließlich von Freiwilligen betrieben und hat ca. {{< users >}} Nutzer.
 
 ## Mitglied werden
@@ -22,3 +25,21 @@ Du möchtest Mitglied im StuStaNet werden um all unsere Dienste zu nutzen?
 
 ### Nächste Sprechstunden
 {{< officehours >}}
+
+{{% /column %}}
+{{% column %}}
+
+## Dienste
+
+* <i class="fa fa-envelope" aria-hidden="true"></i> [Webmail](https://webmail.stusta.de/)
+* <i class="fa fa-cloud" aria-hidden="true"></i> [StuSta Cloud](https://cloud.stusta.de/)
+* <i class="fa fa-gitlab" aria-hidden="true"></i> [GitLab](https://gitlab.stusta.de/)
+
+
+## Kontakt
+* <i class="fa fa-comments" aria-hidden="true"></i> [Impressum]({{< ref "impressum.md" >}})
+* <i class="fa fa-github" aria-hidden="true"></i> [SSN bei Github](https://github.com/stustanet/)
+
+
+{{% /column %}}
+{{% /two-columns %}}
diff --git a/content/_index.en.md b/content/_index.en.md
index fcdd305..93703eb 100644
--- a/content/_index.en.md
+++ b/content/_index.en.md
@@ -6,6 +6,10 @@ headerImage: headers/home.jpg
 headerStats: true
 ---
 
+
+{{% two-columns %}}
+{{% column %}}
+
 StuStaNet is an association in the Studentenstadt Freimann that operates a computer network connecting the Studentenstadt as well as the dormitory Max-Bill-Straße 67 to the Internet. The network operated entirely by volunteers and has about {{< users >}} users.
 
 ## Become a Member
@@ -22,3 +26,21 @@ You want to become a StuStaNet member in order to use our services?
 
 ### Next Office Hours
 {{< officehours >}}
+
+
+{{% /column %}}
+{{% column %}}
+
+
+## Services
+
+* <i class="fa fa-envelope" aria-hidden="true"></i> [Webmail](https://webmail.stusta.de/)
+* <i class="fa fa-cloud" aria-hidden="true"></i> [StuSta Cloud](https://cloud.stusta.de/)
+* <i class="fa fa-gitlab" aria-hidden="true"></i> [GitLab](https://gitlab.stusta.de/)
+
+## Contact
+* <i class="fa fa-comments" aria-hidden="true"></i> [Imprint]({{< ref "impressum.md" >}})
+* <i class="fa fa-github" aria-hidden="true"></i> [SSN on Github](https://github.com/stustanet/)
+
+{{% /column %}}
+{{% /two-columns %}}
diff --git a/layouts/shortcodes/column.html b/layouts/shortcodes/column.html
new file mode 100644
index 0000000..57c873c
--- /dev/null
+++ b/layouts/shortcodes/column.html
@@ -0,0 +1 @@
+<div class="column">{{ .Inner  }}</div>
diff --git a/layouts/shortcodes/two-columns.html b/layouts/shortcodes/two-columns.html
new file mode 100644
index 0000000..fa7a5a4
--- /dev/null
+++ b/layouts/shortcodes/two-columns.html
@@ -0,0 +1 @@
+<div class="two-columns">{{ .Inner  }}</div>
diff --git a/static/css/main.css b/static/css/main.css
index 7f26752..84576c7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -445,6 +445,53 @@ header .subtitle {
     width: 200px;
 }
 
+.two-columns:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.two-columns .column:first-child {
+    float: left;
+    width: 70%;
+}
+
+.two-columns .column:last-child {
+    float: right;
+    width: 25%;
+}
+
+.two-columns .column:last-child > *:first-child {
+    margin-top: 0em;
+}
+
+.two-columns .column:last-child ul {
+    list-style: none;
+    text-indent: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.two-columns .column:last-child ul.right {
+    text-align: right;
+}
+
+.two-columns .column:last-child ul li {
+    margin: 0;
+    padding: 5px 0;
+    border-top: 1px solid #dee2e6;
+}
+
+.two-columns .column:last-child ul li:first-child {
+    border-top: none;
+}
+
+.two-columns .column:last-child ul li .fa {
+    width: 16px;
+    margin-right: 4px;
+    text-align: center;
+}
+
 h1,
 h2,
 h3,
-- 
GitLab