Merge pull request #162 from HackerHours/new-logo-b

add logo to site

.gitignore

@@ -1,6 +1,4 @@
 /_site
 .sass-cache/
 Gemfile.lock
-
-logo.png
 node_modules/

README.md

@@ -15,7 +15,7 @@ bundle exec jekyll serve
 
 The logo was designed by @kristinbarr. With the server running, view it at http://localhost:4000/logo.html.
 
-To create a PNG of the logo, install Node.js, then run:
+To create a PNG of the logo, install Node.js and ImageMagick, then run:
 
 ```sh
 npm install

_sass/constants.scss

@@ -0,0 +1,4 @@
+$hh-pink: #ff66c4;
+$hh-purple: #7c2ae8;
+$hh-red: #ff5757;
+$hh-teal: #00c4cc;

_sass/logo.scss

@@ -14,37 +14,40 @@
 }
 
 .logo {
-  $front-height: 300px;
-  $front-width: 405px;
+  $front-height: 19rem;
+  $front-width: 25.5rem;
 
   line-height: 0.9;
 
   .background {
-    background: linear-gradient(90deg, #7c2ae8, #00c4cc);
+    background: linear-gradient(90deg, $hh-purple, $hh-teal);
     display: inline-block;
-    padding: 35px 0;
+    padding: 2rem 0;
     width: $front-width;
   }
 
   $left-skew: -37deg;
-  $left-width: 50px;
+  $left-width: 3rem;
 
   .foreground {
     display: grid;
     grid-template-columns: $left-width $front-width;
     $left-face-height: tan(abs($left-skew)) * $left-width;
     grid-template-rows: $front-height $left-face-height;
-    left: -15px;
-    position: relative;
+    transform: translateX(-1rem);
   }
 
+  // add only one border at each edge (explicitly) below, since it's not easy to get neighboring borders to collapse otherwise
+  $face-border: 1px solid black;
+
   .front-face {
-    background-color: #eff0f2;
+    background-color: white;
+    border: $face-border;
     font-family: "League Gothic", sans-serif;
     font-size: $front-height / 2;
     grid-column: 2;
     grid-row: 1;
-    padding: 19px 23px;
+    padding: 1.4rem;
     text-transform: uppercase;
   }
 
@@ -53,11 +56,11 @@
   }
 
   .hh {
-    letter-spacing: 7px;
+    letter-spacing: 0.4rem;
   }
 
   .location {
-    bottom: 71px;
+    bottom: 4.5rem;
     display: inline-block;
     font-family: Kollektif, sans-serif;
     font-size: 0.35em;
@@ -68,15 +71,20 @@
   }
 
   .left-face {
-    background-color: #ff5757;
+    background-color: $hh-red;
+    border-bottom: $face-border;
+    border-left: $face-border;
+    border-top: $face-border;
     grid-column: 1;
     grid-row: 1;
     transform: skewY($left-skew);
     transform-origin: top right;
   }
 
   .bottom-face {
-    background-color: #ff66c4;
+    background-color: $hh-pink;
+    border-bottom: $face-border;
+    border-right: $face-border;
     grid-column: 2;
     grid-row: 2;
     transform: skewX(-90deg - $left-skew);

_sass/pages/index.scss

@@ -1,11 +1,11 @@
 .page-index {
   .content {
-    padding: 200px 20px 125px;
+    padding: 20px 5px;
     text-align: center;
   }
-  h1 {
-    font-size: 5em;
-    margin-bottom: 0.2em;
+  .logo {
+    margin: 2rem 0;
+    max-width: 300px;
   }
   h2 {
     font-size: 1.4em;
@@ -50,11 +50,3 @@
     }
   }
 }
-
-@media all and (max-height: 650px) {
-  .page-index {
-    .content {
-      padding: 20px 5px;
-    }
-  }
-}

css/logo.scss

@@ -1,6 +1,7 @@
 ---
 ---
 
+@import "constants";
 @import "logo";
 
 body {

index.html

@@ -3,11 +3,16 @@
 ---
 
 <a class="meetupLink" href="https://www.meetup.com/hackerhours/">
-  <h1 id="title">Hacker Hours</h1>
+  <h1>
+    <img class="logo" src="assets/logo.png" alt="Hacker Hours NYC logo" />
+  </h1>
   <h2>
     Free office hours for programming help
   </h2>
   <h2 class="dateRow">
-    Next meetup: <span id="meetupDate"><span id='dateMs'></span><span id='dateStr'></span></span>
+    Next meetup:
+    <span id="meetupDate"
+      ><span id="dateMs"></span><span id="dateStr"></span
+    ></span>
   </h2>
 </a>

logo.html

@@ -1,14 +1,27 @@
-<link rel="stylesheet" href="css/logo.css" />
-<div class="logo">
-  <div class="background">
-    <div class="foreground">
-      <div class="face front-face">
-        <div class="front-face-inner">
-          <span class="hh">Hacker Hours</span> <span class="location">NYC</span>
+---
+layout: none
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hacker Hours - Logo</title>
+    <link rel="stylesheet" href="css/logo.css" />
+  </head>
+  <body>
+    <div class="logo">
+      <div class="background">
+        <div class="foreground">
+          <div class="face front-face">
+            <div class="front-face-inner">
+              <span class="hh">Hacker Hours</span>
+              <span class="location">NYC</span>
+            </div>
+          </div>
+          <div class="face left-face"></div>
+          <div class="face bottom-face"></div>
         </div>
       </div>
-      <div class="face left-face"></div>
-      <div class="face bottom-face"></div>
     </div>
-  </div>
-</div>
+  </body>
+</html>

logo.js

@@ -1,6 +1,6 @@
 const { execSync } = require("child_process");
+const gm = require("gm");
 const puppeteer = require("puppeteer");
-const sharp = require("sharp");
 
 (async () => {
   console.log("Building Jekyll site...");
@@ -17,12 +17,13 @@ const sharp = require("sharp");
     });
 
     console.log("Trimming screenshot...");
-    const output = "logo.png";
-    sharp(img)
+    const output = "assets/logo.png";
+    const imageMagick = gm.subClass({ imageMagick: true });
+    imageMagick(img)
       .trim()
-      .toFile(output, err => {
+      .write(output, err => {
         if (err) {
-          console.error(err);
+          throw err;
         }
       });