added styling and event listeners

Author: zesameri

css/styles.css

@@ -1,22 +1,22 @@
 @import url("//hello.myfonts.net/count/34c3a6");
 @font-face {
   font-family: Calluna-Regular;
-  src: url(assets/fonts/34C3A6_0_0.eot);
-  src: url(assets/fonts/34C3A6_0_0.eot?#iefix) format("embedded-opentype");
-  src: url(assets/fonts/34C3A6_0_0.woff2) format("woff2");
-  src: url(assets/fonts/34C3A6_0_0.woff) format("woff");
-  src: url(assets/fonts/34C3A6_0_0.ttf) format("truetype");
+  src: url(./assets/fonts/34C3A6_0_0.eot);
+  src: url(./assets/fonts/34C3A6_0_0.eot?#iefix) format("embedded-opentype");
+  src: url(./assets/fonts/34C3A6_0_0.woff2) format("woff2");
+  src: url(./assets/fonts/34C3A6_0_0.woff) format("woff");
+  src: url(./assets/fonts/34C3A6_0_0.ttf) format("truetype");
   font-weight: 400;
   font-style: normal
 }
 @font-face {
   font-family: Oakes-Semi-Bold;
-  src: url(assets/fonts/oakes-semi-bold.eot);
-  src: url(assets/fonts/oakes-semi-bold.eot?#iefix) format("embedded-opentype");
-  src: url(assets/fonts/oakes-semi-bold.woff2) format("woff2");
-  src: url(assets/fonts/oakes-semi-bold.woff) format("woff");
-  src: url(assets/fonts/oakes-semi-bold.ttf) format("truetype");
-  src: url(assets/fonts/oakes-semi-bold.svg#youworkforthem) format("svg");
+  src: url(./assets/fonts/oakes-semi-bold.eot);
+  src: url(./assets/fonts/oakes-semi-bold.eot?#iefix) format("embedded-opentype");
+  src: url(./assets/fonts/oakes-semi-bold.woff2) format("woff2");
+  src: url(./assets/fonts/oakes-semi-bold.woff) format("woff");
+  src: url(./assets/fonts/oakes-semi-bold.ttf) format("truetype");
+  src: url(./assets//oakes-semi-bold.svg#youworkforthem) format("svg");
   font-weight: 700;
   font-style: bold
 }
@@ -326,12 +326,29 @@
   80% {
     -webkit-clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%);
     clip-path: polygon(39% 42%, 50% 50%, 62% 50%, 68% 70%, 45% 56%, 31% 50%)
+
   }
   to {
     -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
+    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    background-position:0% 50%;
   }
 }
+@-webkit-keyframes gradient {
+    0% { background-position: 0% 50% }
+    50% { background-position: 100% 50% }
+    to { background-position: 0% 50% }
+}
+@-moz-keyframes gradient {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    to {background-position:0% 50%}
+}
+@keyframes gradient {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    to {background-position:0% 50%}
+}
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%
@@ -340,7 +357,7 @@ body {
   margin: 0;
   font: 17px/1.5 Calluna-Regular, serif;
   color: #f8f8f6;
-  background-color: #0c0c0c;
+  background-color: #222;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
 }
@@ -372,12 +389,12 @@ a:focus, a:hover {
   outline: 0
 }
 ::selection {
-  color: #0c0c0c;
+  color: #222;
   text-shadow: none;
   background: #3d6eff
 }
 ::-moz-selection {
-  color: #0c0c0c;
+  color: #222;
   text-shadow: none;
   background: #3d6eff
 }
@@ -463,6 +480,10 @@ a:focus, a:hover {
 .list__item:last-child {
   margin-bottom: -.4em
 }
+.poem_block {
+    display: none;
+}
+
 .crumple {
   z-index: -1;
   position: fixed;
@@ -480,7 +501,7 @@ a:focus, a:hover {
   display: block;
   width: 100%;
   height: 100%;
-  background-color: #0c0c0c
+  background-color: #222;
 }
 .footer {
   position: fixed;
@@ -519,16 +540,23 @@ a:focus, a:hover {
     display: inline
   }
 }
-@media (hover:hover) {
+@media (hover: hover) {
   .footer__link:nth-child(odd):hover~.crumple {
-    background-color: #3d6eff
+    background: linear-gradient(45deg, #69b7eb, #b3dbd3, #f4d6db);
+    background-size: 400% 400%;
   }
   .footer__link:nth-child(2n):hover~.crumple {
-    background-color: #ce0028
+    background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
+    background-size: 400% 400%;
+  }
+  .footer__link:hover~.crumple {
+      -webkit-animation: gradient 30s ease infinite;
+      animation: gradient 30s ease infinite;
   }
+
   .footer__link--email:hover~.crumple:after {
-    -webkit-animation: a 1s .25s linear forwards;
-    animation: a 1s .25s linear forwards
+      -webkit-animation: a 1s .25s linear forwards;
+      animation: a 1s .25s linear forwards
   }
   .footer__link--github:hover~.crumple:after {
     -webkit-animation: b 1s .25s linear forwards;

index.html

@@ -52,9 +52,11 @@
     -->
     <link href="./css/styles.css" rel="stylesheet">
     <link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
-
+    <!-- Jquery Min Library -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
+    <script src="./js/main.js"/>
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72323910-2"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72323910-2"/>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
@@ -80,8 +82,29 @@ <h1 class="u-sans">Meredith Hoo</h1>
       <h2 class="u-sans">Essays and writing</h2>
       <dl class="list">
         <dt class="u-sans u-sans--small">Untitled Poem #4</dt>
-        <dd class="list__item">
-          <a class="list__link" href="." target="_blank" rel="noopener noreferrer">nextvisionaries.com</a>
+        <dd class="list__item poem">
+          <div class="poem_block">
+              <p>
+                  There is a glass that separates me from you. <br>
+                  I can't tell if its visable, if its clear or opaque
+              </p>
+              <p>
+                  There is a glass that separates me from you. <br>
+                  I think you can see it. I think you know its there. <br>
+                  Stares. staring at me. <br>
+                  Or are they staring at the glass.
+              </p>
+              <p>
+                  If they looked away, did they look away from the transparent barrier. <br>
+                  Did they look away from me.
+              </p>
+              <p>
+                  There's a glass that separates me from you. <br>
+                  Its stiff. Its thick. Its cold. Like classroom lighting. <br>
+                  Its enclosing. Its plastic wrap. And I <br>
+                  don't have enough air to breathe.
+              </p>
+          </div>
         </dd>
       </dl>
     </div>

js/main.js

@@ -0,0 +1,6 @@
+
+function togglePoemText() {
+    $("#poem").click(function() {
+        $("#poem_block").slideDown();
+    })
+}