Fix CSS

1 files changed, 176 insertions, 34 deletions

diff --git a/assets/css/www.css b/assets/css/www.css
index 943dd2a..81cbc3c 100644
--- a/assets/css/www.css
+++ b/assets/css/www.css
@@ -870,7 +870,41 @@ body {
   font-size: 1em;
   /* No rem here, bug workaround */
   background-color: #f0f0f2;
-  color: #090807; }
+  color: #090807;
+  /*
+      >aside {
+  	position: fixed;
+  	display: block;
+  	left: 0;
+  	width: 92rem;
+  	height: 20rem;
+  	top: 50%;
+  	margin-top: -10rem;
+  	margin-left: -90rem;
+  	background: url(../img/aside-off.png) right center no-repeat,rgba(30, 174, 219, 0.9) ;
+  	animation: aside-off 250ms ease-in;
+  	
+  	&:hover,
+  	&:focus {
+  	    background: url(../img/aside-on.png) left center no-repeat, white;
+  	    margin-left: 0;
+  	    width: auto;
+  	    padding: 1rem 2rem;
+  	    animation: aside-on 250ms ease-in;
+  	    border-right: 2rem solid rgba(120, 120, 125, 0.85);
+  	    box-shadow: 0.1rem 0.2rem 0.3rem black;
+  	}
+  
+  	ul {
+  	    font-size: 2rem;
+  	    list-style: none;
+  	    font-family: 'Cormorant Garamond', serif;
+  	    font-weight: 700;
+  	    margin: 0;
+  	    padding: 1rem;
+  	}
+      }
+  */ }
   body > header {
     position: fixed;
     z-index: 999;
@@ -888,8 +922,38 @@ body {
       font-weight: bold;
       font-size: 2rem;
       padding: 2.8rem 3rem 2rem 2rem; }
-    body > header p.lead {
-      display: none; }
+    body > header p.lead, body > header nav {
+      display: none;
+      position: relative;
+      margin: 0 auto;
+      padding: 2rem;
+      max-width: 43rem;
+      text-align: justify;
+      font-size: 2rem;
+      color: white; }
+    body > header nav ul {
+      list-style: none;
+      margin-bottom: 1rem;
+      padding: 0; }
+      body > header nav ul li {
+        font-variant: small-caps;
+        margin: 0 auto;
+        padding: 0;
+        text-align: center;
+        width: 100%;
+        background: rgba(0, 0, 0, 0.1);
+        border: 1px solid transparent; }
+        body > header nav ul li:hover, body > header nav ul li:focus {
+          background-color: rgba(255, 255, 255, 0.1);
+          border-color: black;
+          border-top-right-radius: 1rem; }
+      body > header nav ul a {
+        display: block;
+        height: 100%;
+        padding: 1rem;
+        text-decoration: none; }
+        body > header nav ul a:hover {
+          color: white; }
     body > header:focus, body > header:hover {
       background-color: rgba(90, 90, 90, 0.95);
       overflow: none;
@@ -901,14 +965,9 @@ body {
       body > header:focus h1, body > header:hover h1 {
         display: none; }
       body > header:focus p.lead, body > header:hover p.lead {
-        display: block;
-        position: relative;
-        margin: 0 auto;
-        padding: 2rem 3rem 2rem 2rem;
-        max-width: 43rem;
-        text-align: justify;
-        font-size: 2rem;
-        color: white; }
+        display: block; }
+      body > header:focus nav, body > header:hover nav {
+        display: block; }
   body :target {
     padding-top: 3rem; }
   body > main {
@@ -931,33 +990,101 @@ body {
         margin-top: calc(- 105px); }
   body > aside {
     position: fixed;
-    display: block;
-    left: 0;
-    width: 92rem;
-    height: 20rem;
-    top: 50%;
-    margin-top: -10rem;
-    margin-left: -90rem;
-    background: url(../img/aside-off.png) right center no-repeat, rgba(30, 174, 219, 0.9); }
+    top: calc(50% - 150px);
+    height: 300px;
+    background: black url(../img/aside-off.png) center right no-repeat;
+    left: -20rem;
+    width: 20rem;
+    padding: 1rem; }
     body > aside:hover, body > aside:focus {
-      background: url(../img/aside-on.png) left center no-repeat, white;
-      margin-left: 0;
+      left: 0;
+      background: #f0f0f2 url(../img/aside-on.png) center left no-repeat;
+      box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
       width: auto;
-      padding: 1rem 2rem;
-      animation: navbar 1s ease-in;
-      border-right: 2rem solid rgba(120, 120, 125, 0.85);
-      box-shadow: 0.1rem 0.2rem 0.3rem black; }
-    body > aside ul {
-      font-size: 2rem;
-      list-style: none;
-      font-family: 'Cormorant Garamond', serif;
-      font-weight: 700;
-      margin: 0;
-      padding: 1rem; }
+      border-right: 2rem solid black;
+      padding: 0; }
+      body > aside:hover nav, body > aside:focus nav {
+        display: block;
+        background: #f0f0f2 url(../img/aside-on.png) center left no-repeat;
+        height: 100%; }
+      body > aside:hover ul li:hover span, body > aside:focus ul li:hover span {
+        display: block; }
+      body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child {
+        transform: scale(1.4) rotate(4deg) translateX(-0.75vw); }
+        body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a {
+          transform: rotate(-4deg); }
+      body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) {
+        transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); }
+        body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a {
+          transform: rotate(6deg); }
+      body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child {
+        transform: scale(1.4) rotate(5deg) translateX(-0.5vw); }
+        body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a {
+          transform: rotate(-5deg); }
+    body > aside nav {
+      position: relative;
+      margin-left: 3rem;
+      display: none;
+      line-height: 30rem; }
+      body > aside nav h3 {
+        display: inline-block;
+        background: url(../img/logo-ps.svg) 3rem center/10rem fixed no-repeat;
+        width: 10rem;
+        height: 100%;
+        vertical-align: top;
+        color: transparent; }
+        body > aside nav h3 a {
+          display: block;
+          height: 100%;
+          width: 100%;
+          line-height: 30rem;
+          color: transparent; }
+          body > aside nav h3 a:hover {
+            color: transparent; }
+      body > aside nav ul {
+        list-style: none;
+        display: inline-block;
+        height: 100%; }
+        body > aside nav ul li {
+          display: block;
+          padding: 0 2rem;
+          font-size: 3rem;
+          float: left;
+          padding-left: 1rem;
+          z-index: 400;
+          overflow: hidden;
+          width: 10rem;
+          height: 100%; }
+          body > aside nav ul li a {
+            color: black;
+            text-decoration: none;
+            display: block;
+            height: 100%;
+            width: 100%;
+            z-index: 404; }
+            body > aside nav ul li a:hover {
+              font-size: 200%;
+              color: inherit;
+              z-index: 404; }
+          body > aside nav ul li span {
+            display: none;
+            z-index: 400;
+            position: relative;
+            font-size: 1.25rem;
+            line-height: 1.6rem;
+            text-align: center;
+            margin: -3rem -2rem 0 -1rem; }
+          body > aside nav ul li:first-child {
+            background: rgba(191, 138, 112, 0.7); }
+          body > aside nav ul li:nth-child(2) {
+            background: rgba(166, 191, 112, 0.9); }
+          body > aside nav ul li:last-child {
+            background: rgba(109, 144, 162, 0.7); }
   body > footer {
-    position: fixed;
+    position: relative;
     bottom: 0;
-    border-top: 1rem; }
+    border-top: 1rem;
+    margin-top: 5rem; }
 
 article {
   font-size: 1.6rem;
@@ -1069,4 +1196,19 @@ body > footer {
     transform: rotate(180deg);
     padding-bottom: -0.05rem; }
 
+@keyframes aside-off {
+  from {
+    width: 0;
+    margin-left: 0; }
+  to {
+    width: 92rem;
+    margin-left: -90rem; } }
+@keyframes aside-on {
+  from {
+    width: 92rem;
+    margin-left: -90rem; }
+  to {
+    width: 20rem;
+    margin-left: 0; } }
+
 /*# sourceMappingURL=www.css.map */