From f7e041c6bf335e3fe6ce3a3d4a49380ee2b2f792 Mon Sep 17 00:00:00 2001
From: zPlus <zplus@peers.community>
Date: Mon, 23 Jul 2018 07:43:11 +0200
Subject: [PATCH] Add CSS @media query to change header layout on smaller
 screens.

---
 freepost/static/stylus/freepost.styl | 31 +++++++++++++++++-----------
 freepost/templates/layout.html       | 19 ++++++++++-------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/freepost/static/stylus/freepost.styl b/freepost/static/stylus/freepost.styl
index b60b12e5..7ace0aa6 100755
--- a/freepost/static/stylus/freepost.styl
+++ b/freepost/static/stylus/freepost.styl
@@ -40,10 +40,25 @@ body
     
         /* Page header */
         > .header
-            display grid
-            grid-template-columns max-content auto
-            padding     1rem 0
-            text-align  center
+            @media screen and (max-width: 600px)
+                display block
+                text-align center
+                
+                > .title-large
+                    display none
+                
+                > .title-small
+                    padding-bottom 1rem
+            
+            @media screen and (min-width: 600px)
+                display grid
+                grid-template-columns max-content auto
+                text-align  center
+                
+                > .title-small
+                    display none
+            
+            padding 1rem 0
             
             /* Menu under the logo */
             .menu
@@ -80,14 +95,6 @@ body
                     padding             .5em .5em
                     text-decoration     none
         
-            .submenu
-                display         flex
-                flex-direction  row
-                flex-wrap       wrap
-                justify-content flex-start
-                align-content   flex-start
-                align-items     flex-start
-        
         > .content
             padding     1em 0
             line-height 1.5em
diff --git a/freepost/templates/layout.html b/freepost/templates/layout.html
index 4aae247c..d1f92e72 100644
--- a/freepost/templates/layout.html
+++ b/freepost/templates/layout.html
@@ -15,7 +15,7 @@
         <div class="container">
         
             <div class="header">
-                <div>
+                <div class="title-large">
                     {% if topic %}
                         <a href="{{ url ('topic', name=topic) }}" class="flex-item logo">
                             topic / {{ topic }}
@@ -31,14 +31,19 @@
                     </a>
                 </div>
                 
-                <div>
-                    <div class="menu">
-                        <a href="{{ url ('topic', name=topic) if topic else url ('homepage') }}" class="flex-item {{ 'active_page' if active_page == 'hot' }}">
-                            Hot
+                <div class="title-small">
+                    {% if topic %}
+                        <a href="{{ url ('topic', name=topic) }}" class="flex-item logo">
+                            topic / {{ topic }}
                         </a>
-                        <a href="{{ url ('topic', name=topic) if topic else url ('homepage') }}?sort=new" class="flex-item {{ 'active_page' if active_page == 'new' }}">
-                            New
+                    {% else %}
+                        <a href="{{ url ('homepage') }}" class="flex-item logo">
+                            free
+                            <img alt="🐵&nbsp;" title="freepost" src="/images/freepost.png" class="monkey" />
+                            post
                         </a>
+                    {% endif %}
+                </div>
                         
                         {% if user %}
                             <a href="{{ url ('submit') }}{{ '?topic=' ~ topic if topic }}" class="flex-item {{ 'active_page' if active_page == 'submit' }}">