r20150928

_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"
+            }
+
         ]
 
     }

_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);

_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>
+                <a class="logo" href="{{ urls.format('SITE_HOME') }}">{{ sakura.siteName }}</a>
-                <div class="menu">
+                <div class="menu fa">
-                    <div class="menu-nav fa" id="navMenuSite">
+                    <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">

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 > div {
-    .header .menu .menu-ucp {
+        float: none !important;
-        display: inline-block;
+        display: inline;
-        float: none;
-        text-align: center;
-    }
-
-    .header .menu .menu-ucp {
-        margin-left: -1px;
     }
 
     .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
  */