diff --git a/assets/css/styles.css b/assets/css/styles.css
index 371ed28d482c49eee7f8ed5021d67bc4ba658d27..5a9a709ce6e686b9936aa8e1964a2342aa54df97 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -148,6 +148,45 @@ figcaption {
#menu-toggle {display:none;}
+
+#menu .menu-item {
+ position: relative;
+}
+
+#menu .sub-menu {
+ border-top: 1px solid #fff;
+ background: #293a4d;
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ transition: all 0.5s ease;
+ display: none;
+ left: 0;
+}
+
+.sub-menu li {
+ width: 100%;
+ text-align: left;
+ display: block !important;
+ padding: 5px !important;
+}
+
+.sub-menu a{
+ padding: 5px !important;
+ border-bottom: 1px solid #273646;
+}
+
+#menu .menu-item:hover > .sub-menu,
+#menu .menu-item:focus-within > .sub-menu,
+#menu .menu-item .sub-menu:hover,
+#menu .menu-item .sub-menu:focus {
+ visibility: visible;
+ opacity: 1;
+ display: block;
+ transition: visibility 0.25s ease, transform 0.25s ease,
+ -webkit-transform 0.25s ease;
+}
+
#signup2 {display:none;}
.twitter {
@@ -510,6 +549,48 @@ span.reverse {
direction: rtl;
}
+
+.table-container {
+ overflow-x:auto;
+ position: relative;
+ width:100%;
+ z-index: 1;
+ margin: auto;
+}
+
+.table-container table {
+ text-align: center;
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+}
+
+.table-container table tbody tr td:nth-child(1),
+.table-container table thead th:nth-child(1) {
+ text-align: left;
+ position: -webkit-sticky;
+ position: sticky;
+ left: 0;
+ z-index: 4;
+}
+
+.table-container table tbody tr td:nth-child(1) {
+ background: #f5f5f5;
+}
+
+.table-container th {
+ background-color: #95D220;
+ color: #fff;
+ z-index: 2;
+}
+
+.table-container th,
+.table-container td {
+ text-align: center;
+ border: 0.5px solid #eee;
+ padding: 5px;
+}
+
@media only screen and (max-width:48em) {
#wrapper {margin-bottom:-5em;}
@@ -618,12 +699,34 @@ span.reverse {
border-top:1px solid #34495e;
border-bottom:1px solid #273646;
margin-left:-100%;
- display:block;
+ display:block;
font-size:0.9em;
line-height:3em;
text-align:left;
padding:2px 0 0 30px;
- }
+ }
+
+ #menu .drop-icon {
+ display: none;
+ }
+ #menu .menu-item .sub-menu {
+ position: relative;
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .sub-menu .menu-item a {
+ margin-left: 103%;
+ padding: 0 !important;
+ }
+
+ .sub-menu li {
+ width: 100%;
+ text-align: left;
+ display: block !important;
+ padding: 5px !important;
+ }
#footer_container {height:5em;}
diff --git a/config.yaml b/config.yaml
index 56cccd3025d46807c6d311340217c4feba08c7f3..9166c4c801be272b75aecfcc4a11aad09727bc9b 100644
--- a/config.yaml
+++ b/config.yaml
@@ -43,11 +43,25 @@ menu:
url: /download/
weight: -100
+ - identifier: support
+ name: Support
+ title: Support
+ url: /support/
+ weight: -90
+
- identifier: how
name: How it works
title: How it works
- url: /how-it-works/
- weight: -90
+ parent: support
+ url: /support/how-it-works/
+ weight: 2
+
+ - identifier: contact
+ name: Contact Us
+ title: Contact Us
+ parent: support
+ url: /support/contact/
+ weight: 4
- identifier: about
name: About us
diff --git a/content/support/_index.md b/content/support/_index.md
new file mode 120000
index 0000000000000000000000000000000000000000..f04c9cf7d4e37cbe49cbc4f91004cc4bfdd67085
--- /dev/null
+++ b/content/support/_index.md
@@ -0,0 +1 @@
+how-it-works.md
\ No newline at end of file
diff --git a/content/support/get-in-touch.md b/content/support/get-in-touch.md
new file mode 100644
index 0000000000000000000000000000000000000000..4b5e9243f4e936b182a315488856276ad10720b5
--- /dev/null
+++ b/content/support/get-in-touch.md
@@ -0,0 +1,27 @@
+---
+title: Get in touch
+aliases:
+- /support/contact
+hide: 1
+---
+
+#### Contact Briar via email
+The fastest way to contact us is to write us an email. {{< contactemail >}}
+
+Before emailing questions, please look at our [FAQs](/support/faqs) before first.
+
+#### Chat with us on
+- [Matrix](https://matrix.to/#/#freenode_#briar:matrix.org)
+- [IRC](https://webchat.freenode.net/#briar) (#briar on freenode)
+
+#### Get updates on Briar</h2>
+- [Follow us on Twitter](https://twitter.com/BriarApp) @BriarApp
+- [Join the briar-announce mailing list](https://sourceforge.net/p/briar/mailman/briar-announce/) for news on the project and app release announcements
+- [Join the briar-devel mailing list](https://sourceforge.net/p/briar/mailman/briar-devel/) for discussions on Briar development
+
+#### Volunteer with Briar
+[Get Involved](/get-involved)
+
+
+
+
diff --git a/content/page/how-it-works.md b/content/support/how-it-works.md
similarity index 99%
rename from content/page/how-it-works.md
rename to content/support/how-it-works.md
index d0b923d914d2a246edabdd6eb752807521358a33..ded2754c96c3f3679b4117b1ceebf3ccce3b9765 100644
--- a/content/page/how-it-works.md
+++ b/content/support/how-it-works.md
@@ -1,7 +1,9 @@
---
aliases:
- /how-it-works.html
+- /how-it-works
title: How it works
+hide: 1
---
Briar is a messaging app designed for activists, journalists, and anyone
diff --git a/layouts/shortcodes/rawhtml.html b/layouts/shortcodes/rawhtml.html
new file mode 100644
index 0000000000000000000000000000000000000000..b90bea2f17f54699f9232c7491cbde246f058003
--- /dev/null
+++ b/layouts/shortcodes/rawhtml.html
@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}
diff --git a/themes/briar/layouts/partials/header.html b/themes/briar/layouts/partials/header.html
index 6758e381c36d143149b6ff4c49ee81e5148056c0..92086fe937e8995415139b47345ac0b3405e0c65 100644
--- a/themes/briar/layouts/partials/header.html
+++ b/themes/briar/layouts/partials/header.html
@@ -26,15 +26,42 @@
</div> <!-- signup -->
<label for="menu-toggle"><img src="/img/menu.png" alt="Drop-down menu"></label>
<input type="checkbox" id="menu-toggle"/>
+
<ul id="menu">
{{ $currentPage := . }}
+ {{ range .Site.Menus.main }}
+ <li class="menu-item">
+ {{ if .HasChildren }}
+ <a class="menu-link" {{ if eq $currentPage.URL .URL }}id="is-active"{{end}}
+ href="{{ .URL }}">{{ .Name }}
+ <span class="drop-icon" for="{{ .Name }}">â–¾</span>
+ </a>
+ <ul class="sub-menu">
+ {{ range .Children }}
+ <li class="menu-item">
+ <a class="menu-link" {{ if eq $currentPage.URL .URL }}id="is-active"{{end}}
+ href="{{ .URL }}">{{ .Name }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ {{else}}
+ <a {{ if eq $currentPage.URL .URL }}id="is-active"{{end}}
+ href="{{ .URL }}">{{ .Name }}</a>
+ {{ end }}
+ </li>
+ {{ end }}
+
+
+<!--
{{ range .Site.Menus.main }}
<li>
<a {{ if eq $currentPage.URL .URL }}id="is-active"{{end}}
href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
+-->
</ul>
+
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- header_container -->