studio susie website

1 files changed, 242 insertions, 0 deletions

diff --git a/studio-susie/public/assets/css/css.css b/studio-susie/public/assets/css/css.css
new file mode 100644
index 0000000..1b17226
--- /dev/null
+++ b/studio-susie/public/assets/css/css.css
@@ -0,0 +1,242 @@
+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;
+}
+
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+body.loading {
+    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: center center;
+}
+.section.contain {
+  background-size: auto 90%;
+}
+.mobile .section.contain {
+  background-size: contain;
+}
+
+#nav {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 2;
+  background: white;
+  padding: 20px;
+}
+#nav b {
+  font-size: 200%;
+}
+
+.page {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background-color: rgba(255,255,255,0.9);
+  opacity: 0;
+  color: black;
+  transition: opacity 800ms;
+  pointer-events: none;
+}
+.page.visible {
+  pointer-events: auto;
+  transform: translateZ(0) translateY(0%);
+  opacity: 1;
+}
+
+.page .content {
+  text-align: center;
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  max-width: 500px;
+  background: white;
+  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');
+  background-size: contain;
+  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: 100vw;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 600ms;
+    pointer-events: none;
+    padding: 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;
+  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;
+}
+
+.mobile #mobile-nav {
+}
+
+@media (max-width: 1200px) {
+}
+
+@media (max-width: 700px) {
+}