diff --git a/freepost/static/javascript/freepost.js b/freepost/static/javascript/freepost.js
index 62fd1ad..ef28937 100755
--- a/freepost/static/javascript/freepost.js
+++ b/freepost/static/javascript/freepost.js
@@ -144,4 +144,13 @@ document.addEventListener ('DOMContentLoaded', function() {
}
}
+ // Function to hide/show menu when burger-icon has been clicked
+ var burger_menus = document.getElementsByClassName ('burger-icon')
+ for (var i = 0; i < burger_menus.length; i++)
+ burger_menus[i].addEventListener ('click', function (event) {
+ // Toggle menu visibility
+ document.getElementById ('menu').classList.toggle ('visible');
+
+ this.classList.toggle ('open');
+ });
});
diff --git a/freepost/static/stylus/freepost.styl b/freepost/static/stylus/freepost.styl
index 644a2f3..99aabd0 100755
--- a/freepost/static/stylus/freepost.styl
+++ b/freepost/static/stylus/freepost.styl
@@ -40,17 +40,22 @@ body
/* Page header */
> .header
- @media screen and (max-width: 600px)
- display block
- text-align center
+ @media only screen and (max-width: 800px)
+ display grid
+ grid-template-columns auto
+ text-align center
> .title-large
display none
> .title-small
+ display grid
+ grid-template-columns max-content auto
+ text-align center
+
padding-bottom 1rem
- @media screen and (min-width: 600px)
+ @media only screen and (min-width: 800px)
display grid
grid-template-columns max-content auto
text-align center
@@ -61,41 +66,81 @@ body
padding 1rem 0
/* Menu under the logo */
- .menu
- border-bottom 1px solid transparent
- display flex
- flex-direction row
- flex-wrap wrap
- justify-content flex-start
- align-content flex-start
- align-items flex-end
+ @media only screen and (max-width: 800px)
+ .burger-icon
+ display inline-block
- > .flex-item
- flex 0 1 auto
- align-self auto
- order 0
+ .menu
+ border-bottom 2px dashed #aaa
+ display none
+ padding-bottom 1rem
- border 0
- border-bottom 1px solid #ccc
- color #000
- margin 0
- padding 0 .5rem .5rem .5rem
-
- /* Highlight menu item of the current active page (Hot/New/Submit/...) */
- > .active_page
- border-bottom 3px solid #000
+ /* This class is toggled when the burger icon is clicked */
+ &.visible
+ display block
+
+ /* Every menu item */
+ > a
+ border 0
+ color #000
+ display block
+ margin 0
+ padding .5rem
+ text-align left
+ text-decoration none
+
+ /* Highlight menu item of the current active page (Hot/New/Submit/...) */
+ > .active_page
+ background-color #f8f8f8
+ border-right 4px solid black
+ font-weight bold
+
+ /* Highlight username if there are unread messages */
+ .new_messages
+ background-color rgb(255, 175, 50)
+ border-radius 4px
+ color #fff
+ font-weight bold
+
+ @media only screen and (min-width: 800px)
+ .burger-icon
+ display none
- /* Highlight username if there are unread messages */
- .new_messages
- background-color rgb(255, 175, 50)
- border 0
- border-radius 4px
- color #fff
- font-weight bold
- margin 0
- padding .5em .5em
- text-decoration none
-
+ .menu
+ border-bottom 1px solid transparent
+ display flex
+ flex-direction row
+ flex-wrap wrap
+ justify-content flex-start
+ align-content flex-start
+ align-items flex-end
+
+ > .flex-item
+ flex 0 1 auto
+ align-self auto
+ order 0
+
+ border 0
+ border-bottom 1px solid #ccc
+ color #000
+ margin 0
+ padding 0 .5rem .5rem .5rem
+
+ /* Highlight menu item of the current active page (Hot/New/Submit/...) */
+ > .active_page
+ border-bottom 3px solid #000
+
+ /* Highlight username if there are unread messages */
+ .new_messages
+ background-color rgb(255, 175, 50)
+ border 0
+ border-radius 4px
+ color #fff
+ font-weight bold
+ margin 0
+ padding .5em .5em
+ text-decoration none
+
> .content
padding 1em 0
line-height 1.5em
@@ -280,7 +325,7 @@ body
/* Login page */
> .login
- @media screen and (min-width: 1024px)
+ @media only screen and (min-width: 1024px)
margin auto
max-width 40%
@@ -326,6 +371,6 @@ body
float left
margin 0 2em 0 0
- @media screen and (max-width: 600px)
+ @media only screen and (max-width: 1024px)
float none
margin 1rem 0
diff --git a/freepost/static/stylus/reset.styl b/freepost/static/stylus/reset.styl
index cb0ef21..caef7ec 100755
--- a/freepost/static/stylus/reset.styl
+++ b/freepost/static/stylus/reset.styl
@@ -213,3 +213,33 @@ select
ul, ol
margin 1.2em 2em
+
+/* Burger menu icon
+ *
+ * How to use:
+ *
+ */
+.burger-icon
+ display inline-block
+ cursor pointer
+
+ > .line1, .line2, .line3
+ background-color #000
+ height 4px
+ margin 4px 0
+ transition .5s
+ width 36px
+
+ &.open
+ > .line1
+ transform rotate(-45deg) translate(-0px, 11px);
+
+ > .line2
+ opacity 0
+
+ > .line3
+ transform rotate(45deg) translate(-0px, -11px)
diff --git a/freepost/templates/layout.html b/freepost/templates/layout.html
index 208fff8..30d3092 100644
--- a/freepost/templates/layout.html
+++ b/freepost/templates/layout.html
@@ -15,37 +15,44 @@
+ post