clearing out old code

1 files changed, 59 insertions, 242 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 15ebedb..6ca5f5a 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -1,271 +1,88 @@
 html,
 body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background: #fff;
-    box-sizing: border-box;
-    text-rendering: optimizeLegibility;
-    font-family: 'Roboto', sans-serif;
-    color: black;
-    transition: opacity 200ms;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  font-size: 13px;
+  color: black;
+  transition: opacity 200ms;
 }
 
 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 
 body.loading {
-    opacity: 0;
+  opacity: 0;
 }
 .loading * {
-    transition: all 0s ease 0s !important;
-}
-
-h1, h2 {
-  padding: 10px;
-  margin: 10px;
-  font-weight: 300;
-  font-style: italic;
-  font-size: 400%;
-  text-align: center;
-}
-
-.section {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: top left;
-  transform: translateZ(0);
-  transition: all 0.6s cubic-bezier(0,0,0,1);
-}
-.section.center {
-  background-position: center center;
-}
-.mobile .section {
-  background-size: contain;
-}
-.section.zoomed {
-  transform: translateZ(0) scale(0.8);
-  background-size: contain;
-  background-position: center center;
-}
-.plaque {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  color: white;
-}
-.desktop .plaque:hover {
+  transition: all 0s ease 0s !important;
 }
 
-#nav {
+.header {
   position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 2;
-}
-#logo {
-  width: 200px;
-}
-.desktop #nav:hover {
-  background: rgba(255,255,255,0.9);
-}
-.page {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background-color: rgba(255,255,255,0.2);
-  opacity: 0;
-  color: black;
-  transition: opacity 800ms;
-  pointer-events: none;
+  top: 0;
+  right: 0;
+  width: 300px;
+  padding: 20px;
+  background: white;
 }
-.page.visible {
-  pointer-events: auto;
-  transform: translateZ(0) translateY(0%);
-  opacity: 1;
+.cell {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
 }
-
-.page .content {
-  text-align: center;
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  max-width: 500px;
-  background: white;
+.cell:nth-child(6n+1) { background-color: hsl(0, 10%, 98%); }
+.cell:nth-child(6n+2) { background-color: hsl(50, 10%, 99%); }
+.cell:nth-child(6n+3) { background-color: hsl(120, 10%, 98%); }
+.cell:nth-child(6n+4) { background-color: hsl(190, 10%, 99%); }
+.cell:nth-child(6n+5) { background-color: hsl(260, 10%, 98%); }
+.cell:nth-child(6n+6) { background-color: hsl(310, 10%, 99%); }
+.painting {
+  display: flex;
+  align-items: center;
+  flex: 1;
   padding: 20px;
-  z-index: 2;
 }
-
-#close {
-  position: fixed;
-  top: 40px; right: 40px;
-  transform: translateY(-300px);
-  transition: transform 600ms;
-  width: 80px;
-  height: 80px;
-  background-image: url('../img/close-black.png');
+.painting .image {
+  flex: 1;
+  height: 90%;
   background-size: contain;
+  background-position: center center;
   background-repeat: no-repeat;
-  cursor: pointer;
-}
-.listopen #close,
-.pageopen #close {
-  transform: translateY(0);
-}
-
-.pageopen #rapper canvas {
-  opacity: 0.8;
 }
-#rapper canvas {
-  opacity: 0;;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
-
-#rapper {
-}
-.hamburger {
-    width: 80px;
-    height: 40px;
-    position: absolute;
-    margin-top: 2px;
-    -webkit-backface-visibility: hidden;
-}
-.hamburger span {
-    transition-duration: 0.2s;
-    position: absolute;
-    height: 2px;
-    width: 30px;
-    top: 10px;
-    left: 0;
-    background-color: #fff;
-    -webkit-backface-visibility: hidden;
-    transition-timing-function: cubic-bezier(0, 0, 1, 1);
-}
-.hamburger span:before {
-    transition-duration: 0.2s;
-    -webkit-backface-visibility: hidden;
-    transition-timing-function: cubic-bezier(0, 0, 1, 1);
-    position: absolute;
-    width: 30px;
-    height: 2px;
-    background-color: #fff;
-    content: "";
-    top: -6px;
-    margin-left: -15px;
-}
-.hamburger span:after {
-    transition-duration: 0.2s;
-    -webkit-backface-visibility: hidden;
-    transition-timing-function: cubic-bezier(0, 0, 1, 1);
-    position: absolute;
-    width: 30px;
-    height: 2px;
-    background-color: #fff;
-    content: "";
-    top: 6px;
-    margin-left: -15px;
-}
-.navopen .hamburger span {
-    transition: 0.2s;
-}
-.navopen .hamburger span:before {
-    transform: rotateZ(-45deg) scaleX(0.75) translate(-6px, -7px);
-}
-.navopen .hamburger span:after {
-    transform: rotateZ(45deg) scaleX(0.75) translate(-6px, 7px);
-}
-
-#list {
-    background: white;
-    position: absolute;
-    top: 0; left: 0;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: scroll;
-    width: 100vw;
-    height: 100vh;
-    text-align: center;
-    opacity: 0;
-    transition: opacity 600ms;
-    pointer-events: none;
-    padding: 10vw 10vw 20vw 10vw;
-}
-
-.listopen #list {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-#list div {
-    width: 20vw;
-    height: 20vw;
-    background-size: 90%;
-    background-repeat: no-repeat;
-    transition: background-size 200ms;
-    background-position: center center;
-    display: inline-block;
-    cursor: pointer;
-}
-#list div:hover {
-    background-size: 95%;
-}
-
-#mobile {
-    display: none;
-}
-.mobile #mobile {
-    display: block;
-    top: 0; left: 0;
-}
-
-#mobile-nav {
-    position: absolute;
-    top: 30px; right: 10px;
-    padding: 10px;
-}
-#mobile-nav .pages > span {
-  color: black;
+.about {
+  flex: 0 0 300px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
   background: white;
-  cursor: pointer;
-  display: inline-block;
-  text-decoration: none;
-  padding: 10px;
-}
-
-#mobile-nav .pages a {
-  color: black;
-  text-decoration: none;
-}
-.nudge {
-  padding-left: 10px;
 }
-.listopen #mobile-nav,
-.pageopen #mobile-nav {
-  display: none;
+.title {
 }
-
-.mobile #mobile-nav {
+.medium {
 }
 
 @media (max-width: 1200px) {
 }
 
 @media (max-width: 700px) {
-    body {
-      font-size: 14px;
-    }
-    #logo {
-    }
-    #mobile-nav {
-        top: auto;
-        bottom: 10px; left: 10px;
-    }
-    #close {
-      top: 20px; right: 20px;
-      width: 40px;
-      height: 40px;
-    }
+  body {
+    font-size: 14px;
+  }
+  #logo {
+  }
+  #mobile-nav {
+    top: auto;
+    bottom: 10px; left: 10px;
+  }
+  #close {
+    top: 20px; right: 20px;
+    width: 40px;
+    height: 40px;
+  }
 }