big amount of indev stuff

Signed-off-by: Flashwave <me@flash.moe>

_sakura/templates/misaki/elements/settingsNavigation.tpl

@@ -1 +1,3 @@
-<h2><a href="/settings/general/options">Go to Site Options</a></h2>
+<div class="platform" style="padding: 10px;">
+    <h1><a href="/settings/general/options">Go to Site Options</a></h1>
+</div>

_sakura/templates/misaki/elements/statsHeader.tpl

@@ -1,4 +1,4 @@
-<div class="frontStats">
+<div class="platform frontStats">
     <div title="We have {{ stats.userCount }} user{% if stats.userCount != 1 %}s{% endif %}">
         <div>
             <span class="fa fa-line-chart"></span>

_sakura/templates/misaki/global/information.tpl

@@ -3,7 +3,9 @@
 {% block title %}Information{% endblock %}
 
 {% block content %}
-    <h1 class="sectionHead">Information</h1>
+    <div class="platform">
-    {{ page.message }}
+        <h1 class="sectionHead">Information</h1>
-    {% if page.redirect %}<br /><a href="{{ page.redirect }}" class="default">Click here if you aren't being redirected.</a>{% endif %}
+        {{ page.message }}
+        {% if page.redirect %}<br /><a href="{{ page.redirect }}" class="default">Click here if you aren't being redirected.</a>{% endif %}
+    </div>
 {% endblock %}

_sakura/templates/misaki/global/master.tpl

@@ -76,55 +76,43 @@
             <span id="top"></span>
             <div class="header-fade"></div>
             <div id="notifications"></div>
-            <div id="header">
-                <a href="/" title="{{ sakura.siteName }}">
-                    <div class="logo"{% if sakura.siteLogo %} style="background-image: url('{{ sakura.siteLogo }}');"{% endif %}></div>
-                </a>
-                <div class="social">
-                    <ul>
-                        <li><a target="_blank" title="Flashii on Twitter" class="fa fa-twitter" href="https://twitter.com/_flashii"></a></li>
-                        <li><a target="_blank" title="Flashii on YouTube" class="fa fa-youtube-play" href="https://youtube.com/user/flashiinet"></a></li>
-                        <li><a target="_blank" title="Flashii on Steam" class="fa fa-steam" href="https://steamcommunity.com/groups/flashiinet"></a></li>
-                        <li><a title="Subscribe to the news page feed" class="fa fa-rss" href="/news.xml"></a></li>
-                    </ul>
-                    <div class="clear"></div>
-                </div>
-            </div>
             <div id="wrapper">
                 {% if php.self == '/profile.php' ? profile.data.user_data.profileBackground : (user.checkPermission('SITE', 'CREATE_BACKGROUND') and user.data.user_data.userOptions.profileBackgroundSiteWide and user.data.user_data.profileBackground) %}
                     <div id="userBackground" style="background-image: url('{{ urls.format('IMAGE_BACKGROUND', [(php.self == '/profile.php' ? profile : user).data.user_id]) }}');"></div>
                 {% endif %}
+                <div id="navigation">
+                    <ul class="nav-left floatLeft">
+                        <li class="logo"><a href="{{ urls.format('SITE_HOME') }}"><div {% if sakura.siteLogo %} style="background-image: url('{{ sakura.siteLogo }}');"{% endif %}></div><div>Home</div></a></li>
+                        <li><a href="{{ urls.format('SITE_NEWS') }}"><div class="fa fa-newspaper-o"></div><div>News</div></a></li>
+                        <li><a href="//chat.{{ sakura.urlMain }}/"><div class="fa fa-commenting"></div><div>Chat</div></a></li>
+                        <li><a href="{{ urls.format('FORUM_INDEX') }}"><div class="fa fa-comments"></div><div>Forum</div></a></li>
+                        <li><a href="{{ urls.format('MEMBERLIST_INDEX') }}"><div class="fa fa-users"></div><div>Members</div></a></li>
+                        <li><a href="{{ urls.format('SITE_SEARCH') }}"><div class="fa fa-search"></div><div>Search</div></a></li>
+                        <li><a href="{{ urls.format('SITE_PREMIUM') }}"><div class="fa fa-heart"></div><div>Support us</div></a></li>
+                    </ul>
+                    <ul class="nav-right floatRight">
+                        <li class="nav-usermenu">
+                            <a href="#"{% if session.checkLogin %} style="color: {{ user.colour }};"{% endif %}>{% if session.checkLogin %}{{ user.data.username }}{% else %}Guest{% endif %}</a>
+                            <ul>
+                            {% if session.checkLogin %}
+                                <li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}">My Profile</a></li>
+                                <li><a href="{{ urls.format('SETTING_CAT', ['messages']) }}">Private Messages</a></li>
+                                <li><a href="{{ urls.format('SETTINGS_INDEX') }}">User Settings</a></li>
+                                <li><a href="{{ urls.format('MANAGE_INDEX') }}">Site Management</a></li>
+                                <li><a href="{{ urls.format('USER_LOGOUT', [php.time, php.sessionid, sakura.currentPage]) }}">Logout</a></li>
+                            {% else %}
+                                <li><a href="{{ urls.format('SITE_LOGIN') }}">Login or Register</a></li>
+                            {% endif %}
+                            </ul>
+                        </li>
+                        <li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}" class="ignore"><img src="{{ sakura.contentPath }}/pixel.png" alt="{{ user.data.username }}" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [user.data.user_id]) }}');" class="nav-avatar" /></a></li>
+                    </ul>
+                </div>
                 <div id="content">
-                    <div id="navigation">
-                        <ul class="nav-left floatLeft">
-                            <li><a href="{{ urls.format('SITE_HOME') }}">Home</a></li>
-                            <li><a href="{{ urls.format('SITE_NEWS') }}">News</a></li>
-                            <li><a href="//chat.{{ sakura.urlMain }}/">Chat</a></li>
-                            <li><a href="{{ urls.format('FORUM_INDEX') }}">Forum</a></li>
-                            <li><a href="{{ urls.format('MEMBERLIST_INDEX') }}">Members</a></li>
-                            <li><a href="{{ urls.format('SITE_SEARCH') }}">Search</a></li>
-                            <li><a href="{{ urls.format('SITE_PREMIUM') }}">Support us</a></li>
-                        </ul>
-                        <ul class="nav-right floatRight">
-                            <li class="nav-usermenu">
-                                <a href="#"{% if session.checkLogin %} style="color: {{ user.colour }};"{% endif %}>{% if session.checkLogin %}{{ user.data.username }}{% else %}Guest{% endif %}</a>
-                                <ul>
-                                {% if session.checkLogin %}
-                                    <li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}">My Profile</a></li>
-                                    <li><a href="{{ urls.format('SETTING_CAT', ['messages']) }}">Private Messages</a></li>
-                                    <li><a href="{{ urls.format('SETTINGS_INDEX') }}">User Settings</a></li>
-                                    <li><a href="{{ urls.format('MANAGE_INDEX') }}">Site Management</a></li>
-                                    <li><a href="{{ urls.format('USER_LOGOUT', [php.time, php.sessionid, sakura.currentPage]) }}">Logout</a></li>
-                                {% else %}
-                                    <li><a href="{{ urls.format('SITE_LOGIN') }}">Login or Register</a></li>
-                                {% endif %}
-                                </ul>
-                            </li>
-                            <li><a href="{{ urls.format('USER_PROFILE', [user.data.user_id]) }}" class="ignore"><img src="{{ sakura.contentPath }}/pixel.png" alt="{{ user.data.username }}" style="background-image: url('{{ urls.format('IMAGE_AVATAR', [user.data.user_id]) }}');" class="nav-avatar" /></a></li>
-                        </ul>
-                    </div>
 {% block content %}
-    <div style="text-align: center; font-family: 'Exo2-0-LightItalic', sans-serif; font-size: 3em; line-height: 1.5em; margin: 10px auto">This template doesn't exist (yet)!<br />Switch back to Yuuno via the User Settings to view this page!</div>
+                    <div class="platform">
+                        <div style="text-align: center; font-family: 'Exo2-0-LightItalic', sans-serif; font-size: 3em; line-height: 1.5em; margin: 10px auto">This template doesn't exist (yet)!<br />Switch back to Yuuno via the User Settings to view this page!</div>
+                    </div>
 {% endblock %}
                 </div>
             </div>

_sakura/templates/misaki/main/index.tpl

@@ -3,7 +3,7 @@
 {% block content %}
     <div class="homepage">
         {% include 'elements/statsHeader.tpl' %}
-        <div class="frontNews">
+        <div class="frontNews platform">
             {% for post in news.getPosts(0, newsCount) %}
                 {% include 'elements/newsPost.tpl' %}
             {% endfor %}

_sakura/templates/misaki/main/infopage.tpl

@@ -3,7 +3,7 @@
 {% block title %}{% if page.title %}{{ page.title }}{% else %}Not found!{% endif %}{% endblock %}
 
 {% block content %}
-    <div class="markdown">
+    <div class="markdown platform">
         <div>
             {{ page.content|raw }}
         </div>

_sakura/templates/misaki/main/profile.tpl

@@ -28,7 +28,7 @@
     <script type="text/javascript">
         // Header
         window.addEventListener("scroll", function(e) {
-            if(e.pageY > 250) {
+            if(e.pageY > 165) {
                 var profileHeader = document.getElementById('profileHeader');
                 var profileContent = document.getElementById('profileContent');
                 profileHeader.className = 'profileHeaderContent floating';

_sakura/templates/misaki/main/search.tpl

@@ -3,18 +3,20 @@
 {% block title %}Search{% endblock %}
 
 {% block content %}
-    <h1 class="sectionHead">search</h1>
+    <div class="platform">
-    <script>
+        <h1 class="sectionHead">search</h1>
-        (function() {
+        <script>
-            var cx = '013363332951923767879:krqdp_wt-eg';
+            (function() {
-            var gcse = document.createElement('script');
+                var cx = '013363332951923767879:krqdp_wt-eg';
-            gcse.type = 'text/javascript';
+                var gcse = document.createElement('script');
-            gcse.async = true;
+                gcse.type = 'text/javascript';
-            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
+                gcse.async = true;
-            var s = document.getElementsByTagName('script')[0];
+                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
-            s.parentNode.insertBefore(gcse, s);
+                var s = document.getElementsByTagName('script')[0];
-        })();
+                s.parentNode.insertBefore(gcse, s);
-    </script>
+            })();
-    <gcse:searchbox></gcse:searchbox>
+        </script>
-    <gcse:searchresults></gcse:searchresults>
+        <gcse:searchbox></gcse:searchbox>
+        <gcse:searchresults></gcse:searchresults>
+    </div>
 {% endblock %}

_sakura/templates/misaki/main/settings.tpl

@@ -3,21 +3,16 @@
 {% block title %}{{ page.category }} / {{ page.mode }}{% endblock %}
 
 {% block content %}
-    <div class="content settings messages">
+    {% include 'elements/settingsNavigation.tpl' %}
-        <div class="content-right content-column">
+    <div class="platform">
-            {% include 'elements/settingsNavigation.tpl' %}
+        <h1 class="sectionHead">
+            {{ page.category }} / {{ page.mode }}
+        </h1>
+        <div class="settings-explanation">
+        {% for descline in page.description %}
+            <div>{{ include(template_from_string(descline)) }}</div>
+        {% endfor %}
         </div>
-        <div class="content-left content-column">
+        {% include 'settings/' ~ current ~ '.tpl' %}
-            <h1 class="sectionHead">
-                {{ page.category }} / {{ page.mode }}
-            </h1>
-            <div class="settings-explanation">
-            {% for descline in page.description %}
-                <div>{{ include(template_from_string(descline)) }}</div>
-            {% endfor %}
-            </div>
-            {% include 'settings/' ~ current ~ '.tpl' %}
-        </div>
-        <div class="clear"></div>
     </div>
 {% endblock %}

public/content/data/misaki/css/misaki.css

@@ -266,74 +266,155 @@ a:active {
  * Wrapper
  */
 #wrapper {
+    padding-top: 5px;
     padding-bottom: 100px;
 }
 
+#wrapper.navFloat {
+    padding-top: 37px;
+}
+
 #content {
     position: relative;
-    max-width: 1018px;
+    max-width: 1024px;
     margin: 0 auto;
+    z-index: 4;
+}
+
+.platform {
     background: #231C29;
     box-shadow: 0 0 7px rgba(255, 255, 255, .2);
-    z-index: 4;
     padding: 2px;
     border: 1px solid rgba(148, 117, 178, .6);
 }
 
-#content.floatingNavigation {
+.platform:not(:last-child) {
-    padding-top: 37px;
+    margin-bottom: 5px;
 }
 
 /*
  * Header navigation
  */
 #navigation {
-    width: 100%;
+    margin: 0 auto;
-    height: 25px;
+    position: relative;
-    background: linear-gradient(0deg, transparent, #453851 50%, #342740) transparent;
+    background: linear-gradient(0deg, transparent, #453851 50%, #342740) #231C29;
     font-family: "Exo2-0-LightItalic", sans-serif;
+    height: 30px;
     font-size: 1.5em;
-    line-height: 25px;
+    line-height: 30px;
     letter-spacing: 0;
     text-shadow: 1px 1px 3px #111;
     margin-bottom: 5px;
-    position: relative;
+    max-width: 1022px;
-    z-index: 900;
+    width: 100%;
-    max-width: 1018px;
+    border: 1px solid rgba(148, 117, 178, .6);
+    box-shadow: 0 0 7px rgba(255, 255, 255, .2);
+    transition: background-color .2s, box-shadow .2s, height .2s, line-height .2s;
 }
 
-#content.floatingNavigation #navigation {
+#navigation.floating {
     position: fixed;
     top: 0;
+    right: 0;
+    left: 0;
+    border: 0;
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+    height: 25px;
+    line-height: 25px;
+    max-width: 1024px;
 }
 
 #navigation > ul > li {
     list-style: none;
     float: left;
-}
+    max-height: 30px;
-
-#navigation > ul > li > a:not(.ignore) {
-    height: 25px;
-    line-height: 25px;
-    display: inline-block;
-    text-align: center;
-    color: inherit;
-    text-decoration: none;
-    padding: 0 10px;
     transition: .2s;
 }
 
+#navigation.floating > ul > li {
+    max-height: 25px;
+}
+
+#navigation > ul > li > a:not(.ignore) {
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    text-align: center;
+    color: inherit;
+    text-decoration: none;
+    transition: .2s;
+}
+
+#navigation > .nav-right > li > a:not(.ignore) {
+    padding: 0 10px;
+}
+
+#navigation > .nav-left > li > a:not(.ignore) {
+    width: 30px;
+}
+
+#navigation.floating > ul > li > a:not(.ignore) {
+    height: 25px;
+    line-height: 25px;
+}
+
+#navigation.floating > .nav-left > li > a:not(.ignore) {
+    width: 25px;
+}
+
+#navigation > ul > li.logo {
+    width: 30px;
+    height: 30px;
+}
+
+#navigation.floating > ul > li.logo {
+    width: 25px;
+    height: 25px;
+}
+
+#navigation > ul > li.logo > a > div:first-child {
+    background: url('../images/image-logo-white.svg') no-repeat scroll center center / cover;
+    content: ".";
+    font-size: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
 #navigation > ul > li > a {
-    z-index: 901;
     position: relative;
+    z-index: 901;
 }
 
-#navigation > .nav-left > li > a:not(.ignore):hover {
+#navigation > .nav-left > li > a:not(.ignore) > div:first-child {
-    background: rgba(0, 0, 0, .2);
+    position: relative;
+    width: 30px;
+    height: 30px;
 }
 
-#navigation > .nav-left > li > a:not(.ignore):active {
+#navigation > .nav-left > li > a:not(.ignore):hover > div:first-child {
-    background: rgba(0, 0, 0, .3);
+    z-index: 9;
+}
+
+#navigation > .nav-left > li > a:not(.ignore) > div:last-child {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    max-height: 30px;
+    font-family: "Exo2-0-LightItalic", sans-serif;
+    background: rgba(69, 56, 81, .8);
+    padding: 0 10px 0 30px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
+    z-index: 8;
+    text-align: center;
+}
+
+#navigation > .nav-left > li > a:not(.ignore):hover > div {
+    display: block;
 }
 
 #navigation .nav-usermenu > a {
@@ -352,9 +433,15 @@ a:active {
 }
 
 #navigation .nav-avatar {
+    height: 30px;
+    width: 30px;
+    background: url('/pixel.png') no-repeat scroll left center / cover transparent;
+    transition: .2s;
+}
+
+#navigation.floating .nav-avatar {
     height: 25px;
     width: 25px;
-    background: url('/pixel.png') no-repeat scroll left center / cover transparent;
 }
 
 #navigation > ul > li > ul {
@@ -417,9 +504,6 @@ a:active {
     flex-direction: column;
     align-content: stretch;
     width: 100%;
-    position: relative;
-    top: -31px;
-    margin-bottom: -31px;
 }
 
 .profile .profileContainer {
@@ -427,7 +511,7 @@ a:active {
 }
 
 .profile .profilePlatform {
-    background: rgba(148, 117, 178, .2);
+    background: #3A2E44;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
     margin: 0 0 10px 10px;
 }
@@ -448,13 +532,14 @@ a:active {
     width: 100%;
     display: flex;
     align-items: flex-end;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
 }
 
 #profileHeader.floating {
     position: fixed;
     top: 0;
     padding-top: 30px;
-    max-width: 1018px;
+    max-width: 1024px;
     height: 95px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
 }
@@ -652,8 +737,7 @@ a:active {
  * Homepage
  */
 .homepage .frontStats {
-    padding-bottom: 5px;
+    padding: 10px 0;
-    width: 100%;
     display: flex;
     font: 2.5em/1em "Exo2-0-LightItalic", sans-serif;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
@@ -662,7 +746,7 @@ a:active {
 .homepage .frontStats > div {
     flex-grow: 1;
     flex-shrink: 1;
-    background: rgba(148, 117, 178, .2);
+    background: #3A2E44;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
     margin: 0 10px;
 }

public/content/data/misaki/js/misaki.js

@@ -4,9 +4,7 @@
 
 // Get or set cookies
 function cookieData(action, name, data) {
-
     switch(action) {
-
         case 'get':
             return (result = new RegExp('(^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie)) ? result[2] : '';
 
@@ -16,14 +14,11 @@ function cookieData(action, name, data) {
 
         default:
             return null;
-
     }
-
 }
 
 // Initialising the element parallax functionality
 function initialiseParallax(id) {
-
     // Assign the element to a variable
     var parallax = document.getElementById(id);
 
@@ -35,20 +30,16 @@ function initialiseParallax(id) {
 
     // Add the event listener to the body element
     document.addEventListener("mousemove", function(e) {
-
         // Alter the position of the parallaxed element
         parallax.style.top      = convertParallaxPositionValue(e.clientY, true, false)  + 'px';
         parallax.style.bottom   = convertParallaxPositionValue(e.clientY, true, true)   + 'px';
         parallax.style.left     = convertParallaxPositionValue(e.clientX, false, false) + 'px';
         parallax.style.right    = convertParallaxPositionValue(e.clientX, false, true)  + 'px';
-
     });
-
 }
 
 // Converting the position value of the mouseover to a pixel value
 function convertParallaxPositionValue(pos, dir, neg) {
-
     // Get the body element
     var body = document.getElementsByTagName('body')[0];
 
@@ -57,9 +48,7 @@ function convertParallaxPositionValue(pos, dir, neg) {
 
     // If someone decided to fuck with the inputs reset it to 0%
     if(position < 0 || position > 100) {
-
         position = 0;
-
     }
 
     // Do the first maths
@@ -67,9 +56,7 @@ function convertParallaxPositionValue(pos, dir, neg) {
 
     // If the negative flag is set inverse the number
     if(neg) {
-
         position = -position;
-
     }
 
     // Subtract another 2.5 to make the element not go all over the place
@@ -77,16 +64,19 @@ function convertParallaxPositionValue(pos, dir, neg) {
 
     // Return the proper position value
     return position;
-
 }
 
 // Menu bar
 window.addEventListener("scroll", function(e) {
-    if(e.pageY > 123) {
+    if(e.pageY > 6) {
-        var content = document.getElementById('content');
+        var wrapper = document.getElementById('wrapper');
-        content.className = 'floatingNavigation';
+        var navbar = document.getElementById('navigation');
+        wrapper.className = 'navFloat';
+        navbar.className = 'floating';
     } else {
-        var content = document.getElementById('content');
+        var wrapper = document.getElementById('wrapper');
-        content.className = null;
+        var navbar = document.getElementById('navigation');
+        wrapper.className = null;
+        navbar.className = null;
     }
 });