A potential logo implementation

_includes/logo.html

@@ -0,0 +1,7 @@
+<div class="logo"> 
+  <div class= "band"></div>
+  <div class= "band"></div>
+  <div class="clock">
+    <div class="hand"></div>
+  </div>
+</div>

_layouts/default.html

@@ -13,7 +13,7 @@
     <meta property="og:type" content="cause" />
     <meta property="og:image" content="http://hackerhours.org/assets/miner.jpeg" />
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:600,300|Merriweather" rel="stylesheet" type="text/css">
-    <link href="/css/style.css" rel="stylesheet" type="text/css">
+    <link href="css/style.css" rel="stylesheet" type="text/css">
     <script data-main="scripts/app" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

_sass/logo.scss

@@ -0,0 +1,73 @@
+$faceColor: gold;
+$logoWidth: 70px;
+$logoHeight: $logoWidth * (4/3);
+
+.logo, .logo * {
+  box-sizing: border-box
+}
+.logo {
+  -webkit-flex-basis: $logoWidth;
+  flex-basis: $logoWidth;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  position: relative;
+  height: $logoHeight;
+  width: $logoWidth;
+}
+$bandWidth: $logoWidth*.33;
+.band {
+  position: absolute;
+  background-color: black;
+  height: $logoHeight;
+  width: $bandWidth;
+}
+.band:nth-child(2) {
+  right:0;
+}
+$clockDiameter: $logoWidth *.90;
+$clockBorderWidth: $bandWidth/2;
+.clock {
+  position: absolute;
+  border: $clockBorderWidth solid black;
+  height: $clockDiameter;
+  width: $clockDiameter;
+  border-radius: $clockDiameter;
+  background-color: $faceColor;
+  left: ($logoWidth - $clockDiameter)/2;
+  top: ($logoHeight - $clockDiameter)/2;
+}
+$handHeight: $clockDiameter*.25;
+$handWidth: $clockDiameter*.08;
+$handAnimationString: rotateHand 2s 0s infinite linear both;
+.hand {
+  border-radius: 12px;
+  position: absolute;
+  height: $handHeight;
+  width:  $handWidth;
+  background-color: black;
+  left: (($clockDiameter - $clockBorderWidth*2) - $handWidth)/2;
+  top: ($clockDiameter - $handHeight)/2;
+  -webkit-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+  -webkit-animation: $handAnimationString;
+  -moz-animation: $handAnimationString;
+  animation: $handAnimationString;
+}
+
+@-webkit-keyframes rotateHand {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes rotateHand {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

_sass/pages/index.scss

@@ -17,7 +17,10 @@
     text-decoration: none;
     color: black;
   }
-
+  .welcome {
+    display: -webkit-flex;
+    display: flex;
+  }
   .dateRow {
     opacity: 0;
   }
@@ -51,10 +54,13 @@
   }
 }
 
-@media all and (max-height: 650px) {
+@media all and (max-width: 650px) {
   .page-index {
+    h1 {
+      font-size: 2.5em;
+    }
     .content {
-      padding: 20px 5px;
+      padding-top: 20px;
     }
   }
 }

css/style.scss

@@ -2,5 +2,6 @@
 ---
 
 @import "base";
+@import "logo";
 @import "pages/index";
 @import "pages/oss-workshop";

index.html

@@ -3,7 +3,10 @@
 ---
 
 <a class="meetupLink" href="http://www.meetup.com/hackerhours/">
-  <h1 id="title">Hacker Hours</h1>
+  <div class="welcome">
+    {% include logo.html %}
+    <h1 id="title">Hacker Hours</h1>
+  </div>
   <h2>
     Free office hours for programming help
   </h2>