About screen

3 files changed, 63 insertions, 64 deletions

diff --git a/client/button.js b/client/button.js
index b957016..9e3e834 100644
--- a/client/button.js
+++ b/client/button.js
@@ -287,25 +287,7 @@ Template.photo.helpers({
   proxy: function (url) {
     return url.replace('https://scontent.cdninstagram.com', '/imgproxy?url=');
   }
-})
-
-Template.about.events({
-  'click button.start-over': function (event) {
-    if (Meteor.userId()) {
-      Router.go('dates');
-    }
-    else {
-      Router.go('login');
-    }
-  },
-  'click button.logout': function (event) {
-    $('body').append('<div style="display:none;"><iframe src="https://instagram.com/accounts/logout"></iframe></div>');
-    Meteor.logout();
-    _.delay(function () {
-      Router.go('login');
-    }, 500);
-  }
-})
+});
 
 Accounts.onLogin(function() {
   Meteor.call('getInstagramProfilePhoto', function(error, res) {
diff --git a/client/colors.less b/client/colors.less
index 6f7cb4a..d1c87d7 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -22,6 +22,21 @@ body {
     }
   }
   .page {
+    a.start-over {
+      position: fixed;
+      left: 0;
+      top: 50%;
+      -webkit-transform: rotate(-90deg);
+      -moz-transform: rotate(-90deg);
+      transform: rotate(-90deg);
+      font-family: 'Cutive Mono', serif;
+      color: black;
+      border-bottom: 1px black solid;
+      &:hover, &:active {
+        color: white;
+        background-color: black;
+      }
+    }
     div.login-wrapper {
       display: flex;
       align-items: center;
@@ -149,21 +164,6 @@ body {
       }
     }
     div.photos-wrapper {
-      a.start-over {
-        position: fixed;
-        left: 0;
-        top: 50%;
-        -webkit-transform: rotate(-90deg);
-        -moz-transform: rotate(-90deg);
-        transform: rotate(-90deg);
-        font-family: 'Cutive Mono', serif;
-        color: black;
-        border-bottom: 1px black solid;
-        &:hover, &:active {
-          color: white;
-          background-color: black;
-        }
-      }
       ol.steps {
         display: block;
         text-align: center;
@@ -316,41 +316,53 @@ body {
       align-items: center;
       justify-content: center;
       height: auto;
-      max-width: 600px;
+      max-width: 800px;
       margin: 0 auto;
-      margin-top: 85px;
+      margin-top: 35px;
       div.about {
         text-align: center;
         h1 {
-          color: #2636F9;
-          font-size: 3.5em;
+          color: black;
+          font-size: 2.5em;
           font-weight: bold;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
         }
         h2 {
-          margin: 30px 10px 0px 10px;
-          font-size: 2em;
+          margin-top: 50px;
+          font-size: 4em;
+          width: 600px;
+          text-align: left;
           font-weight: bold;
           color: #333;
         }
+        hr {
+          margin-top: 110px;
+          height: 3px;
+          color: black;
+          background-color: black;
+        }
         div.items {
-          display: -webkit-flex;
-          display: flex;
-          align-items: center;
-          -webkit-justify-content: center;
-          justify-content: center;
-          margin-top: 50px;
+          margin-top: 20px;
+          div.left {
+            float: left;
+            div.item {
+              margin-right: 30px;
+            }
+          }
+          div.right {
+            float: right;
+          }
           div.item {
-            flex: 0 0 auto;
-            margin-left: 20px;
-            margin-right: 20px;
+            display: inline-block;
             text-align: left;
-            font-weight: bold;
             div.title {
               color: #333;
               font-size: 1em;
+              font-weight: bold;
             }
             div.content a {
-              color: #2636F9;
+              color: #999;
             }
           }
         }
diff --git a/client/templates/about.html b/client/templates/about.html
index a3bd5da..93517a5 100644
--- a/client/templates/about.html
+++ b/client/templates/about.html
@@ -1,27 +1,32 @@
 <template name="about">
   <div class="about-wrapper">
     <div class="about">
+      <a class="start-over" href="/dates">Start Over</a>
       <h1>About</h1>
-      <h2>Modes is a visual coding platform reflecting your social media images</h2>
+      <h2>Modes is a visual coding platform that reflects your social media images</h2>
+
+      <hr>
 
       <div class="items">
-        <div class="item">
-          <div class="title">A Project by:</div>
-          <div class="content"><a href="#">Adi Tamches</a></div>
-        </div>
+        <div class="left">
+          <div class="item">
+            <div class="title">A Project by:</div>
+            <div class="content"><a href="#">Adi Tamches</a></div>
+          </div>
 
-        <div class="item">
-          <div class="title">Developed by:</div>
-          <div class="content"><a href="https://y3xz.com">Yuval Adam</a></div>
+          <div class="item">
+            <div class="title">Developed by:</div>
+            <div class="content"><a href="https://y3xz.com">Yuval Adam</a></div>
+          </div>
         </div>
 
-        <div class="item">
-          <div class="title">Made in 2015 while studying at</div>
-          <div class="content"><a href="#">The NB Haifa School of Design</a></div>
+        <div class="right">
+          <div class="item">
+            <div class="title">Made in 2015 while studying at</div>
+            <div class="content"><a href="#">The NB Haifa School of Design</a></div>
+          </div>
         </div>
       </div>
-      <button class="start-over">Start Over</button>
-      <button class="logout">Logout</button>
     </div>
   </div>
 </template>