From 0c3c810f08ed57fde922412fc73361feb40cb0cc Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Mon, 28 Sep 2015 23:01:41 +0200
Subject: [PATCH] r20150928

---
 _sakura/changelog.json                    | 21 ++++++
 _sakura/sakura.php                        |  2 +-
 _sakura/templates/yuuno/global/master.tpl |  9 ++-
 public/content/data/yuuno/css/yuuno.css   | 80 +++++++++++++----------
 4 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/_sakura/changelog.json b/_sakura/changelog.json
index 20d4228..acb4748 100644
--- a/_sakura/changelog.json
+++ b/_sakura/changelog.json
@@ -2950,6 +2950,27 @@
                 "user":     "Flashwave"
             }
 
+        ],
+
+        "20150928": [
+
+            "eminence",
+            {
+                "type":     "FIX",
+                "change":   "Fixed view order on the header menu on mobile.",
+                "user":     "Flashwave"
+            },
+            {
+                "type":     "ADD",
+                "change":   "Added new animations on the header menu.",
+                "user":     "Flashwave"
+            },
+            {
+                "type":     "FIX",
+                "change":   "Readd footer on mobile.",
+                "user":     "Flashwave"
+            }
+
         ]
 
     }
diff --git a/_sakura/sakura.php b/_sakura/sakura.php
index f303585..3bb24ec 100644
--- a/_sakura/sakura.php
+++ b/_sakura/sakura.php
@@ -8,7 +8,7 @@
 namespace Sakura;
 
 // Define Sakura version
-define('SAKURA_VERSION', '20150927');
+define('SAKURA_VERSION', '20150928');
 define('SAKURA_VLABEL', 'Eminence');
 define('SAKURA_COLOUR', '#6C3082');
 define('SAKURA_STABLE', false);
diff --git a/_sakura/templates/yuuno/global/master.tpl b/_sakura/templates/yuuno/global/master.tpl
index cf67ce6..68896d0 100644
--- a/_sakura/templates/yuuno/global/master.tpl
+++ b/_sakura/templates/yuuno/global/master.tpl
@@ -152,9 +152,9 @@
         <div id="container">
             <span id="top"></span>
             <div class="header" id="header">
-                <a class="logo" href="//{{ sakura.urlMain }}/">{{ sakura.siteName }}</a>
-                <div class="menu">
-                    <div class="menu-nav fa" id="navMenuSite">
+                <a class="logo" href="{{ urls.format('SITE_HOME') }}">{{ sakura.siteName }}</a>
+                <div class="menu fa">
+                    <div class="menu-nav" id="navMenuSite">
                         <!-- Navigation menu, displayed on left side of the bar. -->
                         <a class="menu-item fa-home" href="{{ urls.format('SITE_HOME') }}" title="Home"></a>
                         <a class="menu-item fa-newspaper-o" href="{{ urls.format('SITE_NEWS') }}" title="News"></a>
@@ -166,7 +166,7 @@
                             <a class="menu-item fa-heart" href="{{ urls.format('SITE_PREMIUM') }}" title="Support us"></a>
                         {% endif %}
                     </div>
-                    <div class="menu-ucp fa" id="navMenuUser">
+                    <div class="menu-ucp" id="navMenuUser">
                         <!-- User menu, displayed on right side of the bar. -->
                         {% if session.checkLogin %}
                             <a class="menu-item avatar" href="{{ urls.format('USER_PROFILE', [user.data.id]) }}" title="Logged in as {{ user.data.username }}" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [user.data.id]) }}'); width: auto; color: {{ user.colour }}; font-weight: 700;"></a>
@@ -182,7 +182,6 @@
                             {% endif %}
                         {% endif %}
                     </div>
-                    <div class="clear"></div>
                 </div>
             </div>
             <div id="contentwrapper">
diff --git a/public/content/data/yuuno/css/yuuno.css b/public/content/data/yuuno/css/yuuno.css
index 6e520c4..6b38012 100644
--- a/public/content/data/yuuno/css/yuuno.css
+++ b/public/content/data/yuuno/css/yuuno.css
@@ -118,19 +118,6 @@ body {
     padding-bottom: 220px;
 }
 
-/* Can't be bothered to figure this out since it'll spazz out anyway */
-@media (max-width: 650px) {
-
-    .footer {
-        display: none;
-    }
-
-    #contentwrapper {
-        padding-bottom: 0;
-    }
-
-}
-
 .clear {
     clear: both !important;
     float: none !important;
@@ -523,7 +510,7 @@ a.default:active {
     text-decoration: none;
     font: 100 70px/80px "SegoeUI-Light", "SegoeUI", "Segoe UI", sans-serif;
     color: #B06AC4;
-    transition: color .2s, text-shadow .2s;
+    transition: .2s;
 }
 
 .header .logo:hover {
@@ -546,15 +533,22 @@ a.default:active {
 
 .header .menu {
     border-bottom: 2px solid #9475B2;
+    display: block;
+}
+
+.header .menu:after {
+    clear: both;
+    content: " ";
+    display: block;
+    height: 0;
+    visibility: hidden;
 }
 
 .header .menu .menu-nav {
-    text-align: left;
     float: left;
 }
 
 .header .menu .menu-ucp {
-    text-align: right;
     float: right;
 }
 
@@ -565,13 +559,23 @@ a.default:active {
     color: inherit;
     text-decoration: none;
     text-align: center;
-    transition: border-color .5s, background .3s;
+    transition: .3s;
     height: 30px;
     width: 30px;
     line-height: 30px;
     vertical-align: middle;
     font-size: 1.6em;
     color: #75569B;
+    background: linear-gradient(180deg, transparent 0%, transparent 50%, #8364A1 100%);
+    background-size: 100% 200%;
+}
+
+.header .menu .menu-item:hover {
+    background-position: 0 50%;
+}
+
+.header .menu .menu-item:active {
+    background-position: 0 100%;
 }
 
 .header .menu .menu-item.avatar {
@@ -579,15 +583,6 @@ a.default:active {
     background: url('/pixel.png') no-repeat scroll left center / contain transparent;
 }
 
-.header .menu .menu-item:hover {
-    border-color: #503180 !important;
-}
-
-.header .menu .menu-item:active {
-    border-color: #503180 !important;
-    background-color: #503180 !important;
-}
-
 @media (max-width: 1024px) {
 
     .header .menu {
@@ -597,15 +592,9 @@ a.default:active {
         width: auto;
     }
 
-    .header .menu .menu-nav,
-    .header .menu .menu-ucp {
-        display: inline-block;
-        float: none;
-        text-align: center;
-    }
-
-    .header .menu .menu-ucp {
-        margin-left: -1px;
+    .header .menu > div {
+        float: none !important;
+        display: inline;
     }
 
     .header .menu .menu-item {
@@ -617,6 +606,15 @@ a.default:active {
         display: inline-block;
     }
 
+    .header .menu .menu-item:hover {
+        background: transparent;
+    }
+
+    .header .menu .menu-item:active {
+        background: #75569B;
+        color: #9575B2;
+    }
+
     .header .menu .menu-item.avatar {
         padding-left: 50px;
     }
@@ -692,6 +690,18 @@ a.default:active {
     line-height: 1.8em;
 }
 
+@media (max-width: 1024px) {
+
+    .footer {
+        position: inherit;
+    }
+
+    #contentwrapper {
+        padding: 0;
+    }
+
+}
+
 /*
  * Authentication page Styling
  */