- {% include 'elements/settingsNavigation.tpl' %}
+ {% include 'elements/settingsNavigation.tpl' %}
+
{% endblock %}
diff --git a/public/content/data/misaki/css/misaki.css b/public/content/data/misaki/css/misaki.css
index 9b9d339..3706abe 100755
--- a/public/content/data/misaki/css/misaki.css
+++ b/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 {
- padding-top: 37px;
+.platform:not(:last-child) {
+ margin-bottom: 5px;
}
/*
* Header navigation
*/
#navigation {
- width: 100%;
- height: 25px;
- background: linear-gradient(0deg, transparent, #453851 50%, #342740) transparent;
+ margin: 0 auto;
+ position: relative;
+ 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;
- z-index: 900;
- max-width: 1018px;
+ max-width: 1022px;
+ width: 100%;
+ 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;
-}
-
-#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;
+ max-height: 30px;
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 {
- background: rgba(0, 0, 0, .2);
+#navigation > .nav-left > li > a:not(.ignore) > div:first-child {
+ position: relative;
+ width: 30px;
+ height: 30px;
}
-#navigation > .nav-left > li > a:not(.ignore):active {
- background: rgba(0, 0, 0, .3);
+#navigation > .nav-left > li > a:not(.ignore):hover > div:first-child {
+ 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;
- width: 100%;
+ padding: 10px 0;
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;
}
diff --git a/public/content/data/misaki/js/misaki.js b/public/content/data/misaki/js/misaki.js
index eec4e0e..05d886f 100755
--- a/public/content/data/misaki/js/misaki.js
+++ b/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) {
- var content = document.getElementById('content');
- content.className = 'floatingNavigation';
+ if(e.pageY > 6) {
+ var wrapper = document.getElementById('wrapper');
+ var navbar = document.getElementById('navigation');
+ wrapper.className = 'navFloat';
+ navbar.className = 'floating';
} else {
- var content = document.getElementById('content');
- content.className = null;
+ var wrapper = document.getElementById('wrapper');
+ var navbar = document.getElementById('navigation');
+ wrapper.className = null;
+ navbar.className = null;
}
});
-