Update info

milcktoast · Apr 30, 2015 · ee9e2e1 · ee9e2e1
1 parent f8377f3
commit ee9e2e1
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 14 deletions.
diff --git a/pages/_base.html b/pages/_base.html
@@ -18,13 +18,38 @@
     {% endif %}
   </head>
   <body>
-    <article id="info" class="modal">
+    <article id="info" class="modal info-modal">
       <h1>Medusae</h1>
-      <p>
-        Built with <a href="http://particulatejs.org">particulate.js</a> and
-        <a href="http://threejs.org">three.js</a> by
-        <a href="http://twitter.com/jpweeks">jpweeks</a>.
-      </p>
+      <div class="info-section">
+        <dl>
+          <dt>Concept, Design & Code</dt>
+          <dd><a href="http://jayweeks.com">Jay Weeks</a></dd>
+        </dl>
+        <dl>
+          <dt>Audio Design</dt>
+          <dd>JP Arsenault</a></dd>
+        </dl>
+      </div>
+      <div class="info-section">
+        <dl>
+          <dt>Physics</dt>
+          <dd><a href="http://particulatejs.org">Particulate</a></dd>
+        </dl>
+        <dl>
+          <dt>Graphics</dt>
+          <dd><a href="http://threejs.org">Three</a></dd>
+        </dl>
+        <dl>
+          <dt>Audio</dt>
+          <dd><a href="http://howlerjs.com/">Howler</a></dd>
+        </dl>
+      </div>
+      <div class="info-section">
+        <dl>
+          <dt>Source</dt>
+          <dd><a href="http://github.com/jpweeks/particulate-medusae">Github</a></dd>
+        </dl>
+      </div>
     </article>
     <div id="cover-info" class="modal-cover"></div>
 

diff --git a/static/scss/apps/_application.scss b/static/scss/apps/_application.scss
@@ -8,7 +8,7 @@ body {
 
   canvas {
     opacity: 0;
-    transition: opacity 2500ms 500ms;
+    transition: opacity 500ms 200ms;
 
     &.active {
       opacity: 1;
@@ -19,20 +19,20 @@ body {
 .controls {
   position: absolute;
   left: 0;
-  bottom: 0;
+  bottom: 10px;
   z-index: 2;
 }
 
 .controls-button {
   position: relative;
   display: block;
   width: 50px;
-  height: 50px;
+  height: 30px;
   cursor: pointer;
 
   &:before {
     position: absolute;
-    top: 20px;
+    top: 10px;
     left: 20px;
     width: 10px;
     height: 10px;

diff --git a/static/scss/apps/_index.scss b/static/scss/apps/_index.scss
@@ -0,0 +1,37 @@
+.info-modal {
+  h1 {
+    margin: 4px 0 8px;
+
+    &:after {
+      display: block;
+      content: "-------";
+    }
+  }
+
+  dl {
+    display: block;
+    margin: 4px 0;
+  }
+
+  dt {
+    color: #e9e9e9;
+    display: inline-block;
+    opacity: 0.5;
+
+    &:after {
+      display: inline-block;
+      padding: 0 4px;
+      color: #e30060;
+      content: "/";
+    }
+  }
+
+  dd {
+    display: inline-block;
+    color: #fff;
+  }
+}
+
+.info-section {
+  margin: 12px 0 0;
+}
diff --git a/static/scss/helpers/_type.scss b/static/scss/helpers/_type.scss
@@ -1,18 +1,30 @@
 body {
   color: #fff;
 	font: 12px/1.2 Monaco, monospace;
+  -webkit-font-smoothing: antialiased;
 }
 
 h1 {
-  margin: 0 0 8px;
 	font-size: 14px;
 }
 
 a {
-  color: #e30060;
+  position: relative;
+  display: inline-block;
+  color: #fff;
   text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
+  &:after {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid #fff;
+    opacity: 0.25;
+    content: "";
+  }
+
+  &:hover:after {
+    opacity: 1;
   }
 }