Fix CSS

1 files changed, 210 insertions, 12 deletions

diff --git a/assets/scss/www.scss b/assets/scss/www.scss
index f75a975..c290599 100755
--- a/assets/scss/www.scss
+++ b/assets/scss/www.scss
@@ -5,6 +5,13 @@
 $header-height: 3rem;
 $serif: 'Cormorant Garamond', serif;
 $sans-serif: 'Open Sans', sans-serif;
+$bg-main:   rgba(240, 240, 242, 1);
+$bg-gfx:    rgba(191, 138, 112, 0.7);
+$bg-gfx-on: rgba(205, 168, 150, 1);
+$bg-txt:    rgba(166, 191, 112, 0.9);
+$bg-txt-on: rgba(187, 205, 150, 1);
+$bg-vdo:    rgba(109, 144, 162, 0.7);
+$bg-vdo-on: rgba(109, 144, 162, 1);
 
 @import 'normalize';
 @import 'skeleton';
@@ -40,8 +47,46 @@ body {
 	    padding: 2.8rem 3rem 2rem 2rem;
 	}
 
-	p.lead {
+	p.lead, nav {
 	    display:none;
+	    position: relative;
+	    margin: 0 auto;
+	    padding: 2rem;
+	    max-width: 43rem;
+	    text-align: justify;
+	    font-size: 2rem;
+	    color: rgba(255,255,255,1);
+	}
+
+	nav ul {
+	    list-style: none;
+	    margin-bottom: 1rem;
+	    padding: 0;
+
+	    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;
+		&:hover, &:focus {
+		    background-color: rgba(255,255,255,0.1);
+		    border-color: black;
+		    border-top-right-radius: 1rem;
+		}
+	    }
+
+	    a {
+		display: block;
+		height: 100%;
+		padding: 1rem;
+		text-decoration: none;
+		&:hover {
+		    color: white;
+		}
+	    }
 	}
 
 	&:focus,
@@ -60,13 +105,10 @@ body {
 
 	    p.lead {
 	        display: block;
-		position: relative;
-		margin: 0 auto;
-		padding: 2rem 3rem 2rem 2rem;
-		max-width: 43rem;
-		text-align: justify;
-		font-size: 2rem;
-		color: rgba(255,255,255,1);
+	    }
+
+	    nav {
+		display: block;
 	    }
 	}
     }
@@ -99,6 +141,139 @@ body {
 	}
     }
 
+    > aside {
+
+	position: fixed;
+	top: calc(50% - 150px);
+	height: 300px;
+	background: black url(../img/aside-off.png) center right no-repeat;
+	left: -20rem;
+	width: 20rem;
+	padding: 1rem;
+
+	&:hover, &:focus {
+	    left: 0;
+	    background: $bg-main url(../img/aside-on.png) center left no-repeat;
+	    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
+	    width: auto;
+	    border-right: 2rem solid black;
+	    padding: 0;
+
+	    nav {
+		display: block;
+		background: $bg-main url(../img/aside-on.png) center left no-repeat;
+		height: 100%;
+	    }
+
+	    ul li:hover {
+		span {
+		    display: block;
+		}
+		&:first-child {
+		    transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
+		    a {
+			transform: rotate(-4deg);
+		    }
+		}
+		&:nth-child(2) {
+		    transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(6deg);
+		    }
+		}
+		&:last-child {
+		    transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(-5deg);
+		    }
+		}
+	    }
+	}
+	
+	nav {
+	    position: relative;
+	    margin-left: 3rem;
+	    display: none;
+	    line-height: 30rem;
+
+	    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;
+
+		
+		a {
+		    display: block;
+		    height: 100%;
+		    width: 100%;
+		    line-height: 30rem;
+		    color: transparent;
+		    &:hover {
+			color: transparent;
+		    }
+		}
+	    }
+
+	    ul {
+		list-style: none;
+		display: inline-block;
+		height: 100%;
+
+		li {
+		    display: block;
+		    padding: 0 2rem;
+		    font-size: 3rem;
+		    float: left;
+		    padding-left: 1rem;
+		    z-index: 400;
+		    overflow: hidden;
+		    width: 10rem;
+		    height: 100%;
+
+		    a {
+			color: black;
+			text-decoration: none;
+			display: block;
+			height: 100%;
+			width: 100%;
+			z-index: 404;
+
+			&:hover {
+			    font-size: 200%;
+			    color: inherit;
+			    z-index: 404;
+			}
+		    }
+
+		    span {
+			display: none;
+			z-index: 400;
+			position: relative;
+			font-size: 1.25rem;
+			line-height: 1.6rem;
+			text-align: center;
+			margin: -3rem -2rem 0 -1rem;
+		    }
+
+		    &:first-child {
+			background: $bg-gfx;
+		    }
+
+		    &:nth-child(2) {
+			background: $bg-txt;
+		    }
+
+		    &:last-child {
+			background: $bg-vdo;
+		    }
+		}
+	    }
+	}
+    }
+/*
     >aside {
 	position: fixed;
 	display: block;
@@ -109,14 +284,15 @@ body {
 	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: navbar 1s ease-in;
+	    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;
 	}
@@ -130,11 +306,12 @@ body {
 	    padding: 1rem;
 	}
     }
-
+*/
     >footer {
-	position: fixed;
+	position: relative;
 	bottom: 0;
 	border-top: 1rem;
+	margin-top: 5rem;
     }
 }
 
@@ -297,3 +474,24 @@ body > footer {
 	}
     }
 }
+
+@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;
+    }
+}