Switch to Flexbox for main navigation

umap/static/umap/nav.css

+.umap-nav {
+    display: flex;
+    flex-direction: column;
+}
+.umap-nav a {
+    color: #3A4259;
+    padding: .4rem;
+}
+.umap-nav a:hover {
+    text-decoration: underline;
+}
+.umap-nav h1 {
+    margin-bottom: 0;
+}
+.umap-nav h1 a {
+    background-image: url("./img/logo.svg");
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: 60px auto;
+    line-height: 70px;
+    padding-left: 80px;
+    display: block;
+    font-size: 1.5rem;
+}
+.umap-nav ul {
+    text-align: center;
+}
+.umap-nav ul li {
+    line-height: 2.5rem;
+}
+.umap-nav .button,
+.umap-nav .button:hover {
+    color: #fff;
+    text-decoration: none;
+    min-width: 150px;
+}
+
+@media only screen and (min-width: 500px) {
+    .umap-nav ul li {
+        display: inline-block;
+    }
+}
+@media only screen and (min-width: 750px) {
+    .umap-nav {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: baseline;
+    }
+}

umap/static/umap/umap.css

@@ -121,7 +121,8 @@ ul {
     clear: both;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 40px;
+    margin-top: 0;
+    margin-bottom: 2rem;
 }
 .col {
     float: left;
@@ -260,71 +261,6 @@ input:-moz-placeholder, :-moz-placeholder {
 header {
     margin: 14px 0;
 }
-header nav {
-    min-height: 70px;
-    font-size: 0;
-    padding-top: 0;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-nav section, nav h1, nav ul, nav li, nav a {
-    display: inline-block;
-    font-size: 16px;
-    letter-spacing: -1px;
-    margin-bottom: 0;
-    font-weight: normal;
-}
-
-nav ul li {
-    height: 100%;
-}
-
-nav a {
-    display: inline-block;
-    height: 100%;
-    line-height: 70px;
-    padding: 0 14px;
-    margin: 0 7px 0 0;
-    color: #000;
-    text-align: center;
-}
-
-nav .menu a:hover {
-    text-decoration: underline;
-}
-
-nav h1 a {
-    background-image: url("./img/logo.svg");
-    background-position: left center;
-    background-repeat: no-repeat;
-    background-size: 60px auto;
-    font-family: 'fira_sansbold';
-    font-size: 30px;
-    font-weight: normal;
-    height: 70px;
-    padding-left: 80px;
-    text-align: left;
-    color: #3A4259;
-}
-
-nav a.logout {
-    font-style: italic;
-}
-
-nav li.has-button {
-    padding-top: 7px;
-    margin-bottom: 0;
-}
-nav li.has-button .button {
-    margin-bottom: 0;
-}
-
-nav .branding ul, nav .branding li,
-nav .branding a, nav .branding h1 {
-    width: 100%;
-}
 
 footer {
     height: 140px;
@@ -604,12 +540,6 @@ body.content #storage-ui-container {
     .thide {
         display: none;
     }
-    nav .branding h1 {
-        text-align: center;
-    }
-    nav .branding h1 a {
-        width: auto;
-    }
 }
 @media only screen and (max-width: 639px) {
     .mwide {
@@ -628,7 +558,4 @@ body.content #storage-ui-container {
     .mhide {
         display: none;
     }
-    header nav ul {
-        display: block;
-    }
 }

umap/templates/base.html

@@ -8,6 +8,7 @@
     <!-- Included CSS Files (Compressed) -->
     <link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
     <link rel="stylesheet" href="{{ STATIC_URL }}umap/umap.css">
+    <link rel="stylesheet" href="{{ STATIC_URL }}umap/nav.css">
     <link rel="stylesheet" href="{{ STATIC_URL }}umap/theme.css">
     {% endcompress css %}
     <!-- IE Fix for HTML5 Tags -->

umap/templates/umap/content.html

@@ -12,8 +12,8 @@
 {% endblock %}
 
 {% block header %}
-  <header class="wrapper">
-    {% include 'umap/navigation.html' %}
+  <header class="wrapper row">
+    {% include 'umap/navigation.html' with title=SITE_NAME %}
   </header>
 {% endblock %}
 

umap/templates/umap/navigation.html

 {% load i18n %}
-<nav>
-  <section class="col quarter branding twide">
-    <ul>
-      <li class="name"><h1><a href="/">{{ SITE_NAME }}</a></h1></li>
-    </ul>
+<nav class="umap-nav">
+  <section>
+    <h1><a href="/">{{ title }}</a></h1>
   </section>
 
-  <section class="col half menu ttwo-third mwide">
+  <section>
     <ul>
       {% if user.is_authenticated %}
         <li><a href="{% url 'user_maps' user.username %}">{% trans "My maps" %} ({{ user }})</a></li>
@@ -14,7 +12,7 @@
         <li><a href="{% url 'login' %}" class="login">{% trans "Log in" %} / {% trans "Sign in" %}</a></li>
       {% endif %}
       <li><a href="{% url 'about' %}">{% trans "About" %}</a></li>
-      <li class="mhide"><a href="{{ UMAP_FEEDBACK_LINK }}">{% trans "Feedback" %}</a></li>
+      <li><a href="{{ UMAP_FEEDBACK_LINK }}">{% trans "Feedback" %}</a></li>
       {% if user.is_authenticated %}
         {% if user.has_usable_password %}
           <li><a href="{% url 'password_change' %}" >{% trans "Change password" %}</a></li>
@@ -24,13 +22,7 @@
     </ul>
   </section>
 
-  <section class="right thide">
-    <ul>
-      <li class="has-button wide">
-        <a href="{% url 'map_new' %}" class="button">
-          {% trans "Create a map" %}
-        </a>
-      </li>
-    </ul>
+  <section>
+    <a href="{% url 'map_new' %}" class="button">{% trans "Create a map" %}</a>
   </section>
 </nav>