initial commit

src/graphic/config.json

@@ -1,9 +1,6 @@
 {
-  "heading": "The heading is defined in config.json",
-  "subhead": "There is also a subhead you can set",
-  "source": "The Markup",
   "align": "none",
-  "bespoke": false,
+  "bespoke": true,
   "auto_screenshot": true,
   "fonts": null,
   "svelte": false

src/graphic/sass/abstracts/_variables.scss

@@ -2,6 +2,7 @@
 // ---------------
 
 $c-white:                    #ffffff;
+$c-blacklight:               #6600ff;
 
 //Blue
 $c-navy:                     #242a49;

src/graphic/sass/modules/_header.scss

@@ -0,0 +1,89 @@
+.blacklight-client__header {
+    position: relative;
+    color: $c-white;
+    background-color: $c-navy;
+  }
+
+  .blacklight-client__header-inner {
+    position: relative;
+    z-index: 2;
+    padding: 15px 0;
+  }
+
+  .blacklight-client__header-title {
+    font-family: $ff-sans;
+    color: $c-white;
+    font-size: $fs-xxl;
+    text-align: center;
+
+    @include mq($bp-mobile) {
+      font-size: $fs-xxxl;
+      line-height: 1.2;
+    }
+  }
+
+  .blacklight-client__header-logo-wrapper {
+    position: relative;
+    display: block;
+    width: 60vw;
+    margin: 15px auto 20px;
+    overflow: hidden;
+
+    @include mq($bp-mobile) {
+      width: 300px;
+    }
+  }
+
+  .blacklight-client__header-logo {
+    position: relative;
+    z-index: 5;
+    width: 60vw;
+
+    @include mq($bp-mobile) {
+      width: 300px;
+    }
+  }
+
+  .blacklight-client__header-logo-canvas {
+    position: absolute;
+    z-index: 4;
+    top: -40%;
+    left: -30%;
+    display: none;
+
+    @include mq($bp-tablet) {
+      display: block;
+    }
+  }
+
+  .blacklight-client__header-logo-scribble {
+    @include mq($bp-tablet) {
+      display: none;
+    }
+  }
+
+  .blacklight-client__header-logo-animation {
+    position: absolute;
+    width: 160%;
+    top: -40%;
+    left: -30%;
+    display: none;
+    mix-blend-mode: color;
+  }
+
+  .blacklight-client__header-subhead {
+    color: $c-white;
+    font-weight: normal;
+    text-align: center;
+    font-size: $fs-xs;
+    margin-bottom: 15px;
+
+    @include mq($bp-mobile) {
+      font-size: $fs-md;
+    }
+  }
+
+  .blacklight-client__header-description {
+    font-size: $fs-xxs;
+    padding-bottom: 10px;
+  }

src/graphic/sass/modules/_maintenance.scss

@@ -0,0 +1,12 @@
+.blacklight-maintenance__content {
+    background-color: $c-blacklight;
+    height: 100%;
+
+    h1 {
+        max-width: 700px;
+        padding: 5vh;
+        color: white;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

src/graphic/sass/style.scss

@@ -1,3 +1,16 @@
 @import 'abstracts/mq';
 @import 'abstracts/variables';
 @import 'abstracts/functions';
+
+@import 'modules/header';
+@import 'modules/maintenance';
+
+.blacklight-client__content {
+    padding: 0 5vw;
+    max-width: 620px;
+    margin: 0 auto;
+
+    @include mq($bp-tablet) {
+      padding: 0;
+    }
+  }

src/graphic/templates/index.html

@@ -1,3 +1,4 @@
 <div class="graphic-test">
-  {{> partials/example }}
+  {{> partials/header }}
+  {{> partials/maintenance }}
 </div>

src/graphic/templates/partials/header.html

@@ -0,0 +1,29 @@
+<div class="blacklight-client__header" id="top">
+    <div class="blacklight-client__header-inner">
+      <div class="blacklight-client__content">
+        <div class='blacklight-client__header-logo-wrapper'>
+          <!-- <img title="Blacklight" alt="Blacklight" class="blacklight-client__header-logo" src='{{ path }}/assets/logo.svg' /> -->
+
+
+          <svg xmlns="http://www.w3.org/2000/svg" class="blacklight-client__header-logo" viewBox="0 0 371.7 177.2"><path d="M332.6 56c-26.9 35.4-60.9 80.4-87.8 115.8-1.4 1.9-3.1 4.2-5.1 4.9-7.8 2.8-35.3-7.9-38.8-15.6-1.5-3.3-1.1-8.4.4-11.9 11.3-26.6 23-53 34.7-79.4 1.4-3.1 2.8-6.1 4.2-9.2l-2.9-2c-18.1 24-36.6 47.8-54.1 72.2-8.6 12-15.8 25.1-22.9 38-3.2 5.8-6.6 7.7-12.6 4.6-1.6-.8-3.3-1.3-4.9-2-21.3-9.6-23.4-13.4-15-34.5 8.7-21.9 18.4-43.5 27.8-65.2 1.3-3.1 2.8-6.2 4.2-9.3-30.6 33.4-61.8 65.7-79.5 107.9-.9 2.1-5.8 4.6-7.5 3.8-10.3-4.5-20.2-9.7-29.8-15.6-1.6-1-.8-8 .7-11.3 20.2-41.9 40.8-83.6 61-125.4 2.9-6 4.5-12.5 7.8-21.8l45.6 14.9c-14 23.3-26.8 44.2-39.4 65.3l2.8 1.8c8.3-9.9 16.3-19.9 25.1-29.3 14.2-15.2 28-31 43.6-44.7 9.6-8.5 32.1-4.8 38.4 6.1 1.3 2.3-.2 7.2-1.9 10-10.9 18.4-23.7 36.1-34.9 54.4l2.8 2.2c3-3.4 5.9-7 9.1-10.2 22.1-22.2 41-43 64.5-64.1 8.8-8 32.7-2.2 37.2 8.1 1.1 2.4-1.1 7.2-3 9.9-21.4 30.9-37.8 64.4-51.4 99.4-.1.1-.1.3-.2.4l3 2c26.3-23.9 53.7-59.5 73.3-87.6 12.6 5.5 12.7 7.9 5.5 17.4z" fill="#60f" class='blacklight-client__header-logo-scribble'/><path d="M0 53.5h28.9c11.2 0 16.4 7.6 16.4 14.9 0 5.9-3.1 11.9-9.2 14 6.8 1.7 11.5 7.9 11.3 14.8 0 9-7.2 17.4-20 17.4H0V53.5zm11.2 10.6v14h14.4c5.7 0 8.5-3.5 8.5-7.4 0-3.7-2.4-6.6-7.7-6.6H11.2zm0 23.2v16.8h15.2c6.7 0 9.8-4.3 9.8-8.6s-3.1-8.1-9.2-8.1H11.2zm53.7-34.7v62H54.1v-62h10.8zm99 0h10.8v37.6L193 69.6h13.8L189.2 88l18.5 26.6h-13.1l-12.7-18.8-7.1 7.4v11.3H164l-.1-61.9zm58.2 0v62h-10.8v-62h10.8zm18.9 62v-45h-10.8v45H241zm58.7-62h10.8v23.9c2.7-5 7.8-7.6 14.6-7.6 10.2 0 15.3 6.3 15.3 16.5v29.2h-10.8V87c0-5.7-3.4-8.6-8.3-8.6-6.2 0-10.7 4.2-10.7 12v24.2h-10.8l-.1-62zm-152 45.7c-.8 4.7-4.3 7.3-9.5 7.3-7.7 0-11.1-5.8-11.1-13.4 0-7.3 3.1-13.4 11.3-13.4 5.4 0 8.7 2.4 9.2 7.2l10.3-2.9c-1.8-8.9-9.2-14.2-19.7-14.2-14.8 0-22.2 10.8-22.2 23.7 0 12.5 7.1 22.9 21.7 22.9 10.7 0 18.3-5.5 20.3-14.4l-10.3-2.8zm133.4-28.7v6.1c-2.3-4-7.3-6.9-13.9-6.9-11 0-20.8 7.3-20.8 22.5 0 14.8 9.6 21.7 20.4 21.7 5.9 0 11.6-2.9 14.2-7.9v7.7c0 6.9-4.4 10.6-11.6 10.6-6.5 0-10.2-3.2-11.2-7.3l-10.2 2.8c2.7 8.7 11.3 13.2 21.3 13.2 12 0 22.2-6.5 22.2-20.5v-42h-10.4zm-12 34.3c-6 0-11.6-3.9-11.6-12.5 0-8.7 5.7-12.6 11.7-12.6 6 0 11.5 3.9 11.5 12.6 0 9-5.9 12.6-11.6 12.5zm-176.4-35c-10.2 0-18.1 4.1-20.6 12.9l10 2.2c1-3.8 4.3-6.4 10.1-6.4 4.7 0 7.6 1.7 7.6 5.3S97 87 94.6 87.4l-9.4 1.3c-6.4.9-14.4 3.7-14.4 13.4 0 8.7 6.3 13.4 14.8 13.4 6.2.2 12-3 15.1-8.4v7.4h10V84.1c0-10.2-6.5-15.2-18-15.2zm7.2 27c0 6.3-4.8 10.7-11.4 10.7-4.2 0-6.8-1.8-6.8-5.2 0-4.3 4.2-5.1 6.9-5.5l4.7-.7c2.2-.3 4.4-.8 6.5-1.6l.1 2.3zm135.7-31.5c3.6.1 6.6-2.8 6.7-6.4-.1-3.7-3.3-6.6-7-6.5-3.5.1-6.3 2.9-6.5 6.5.1 3.6 3.1 6.5 6.8 6.4-.1 0 0 0 0 0zM367.9 106c-4 0-5.8-1.7-5.8-5.7v-21h9.5v-9.6h-9.5V56.3h-9.8v7.3c0 3.5-1.9 6.2-6.1 6.2h-3v9.6h8.1V102c0 8.5 5.2 13.5 13.6 13.5 2.3.1 4.5-.2 6.6-1v-9c-1.1.3-2.3.4-3.6.5z" fill="#fff"/></svg>
+
+
+          <canvas class='blacklight-client__header-logo-canvas'></canvas>
+          <video class='blacklight-client__header-logo-animation' currentTime='2' muted preload="auto" autoplay playsinline >
+            <source src="{{ path }}/assets/logo.mp4" type="video/mp4">
+          </video>
+        </div>
+        <h3 class="blacklight-client__header-subhead">
+          A Real-Time Website Privacy Inspector
+        </h3>
+        <p class="blacklight-client__header-description">
+          Who is peeking over your shoulder while you work, watch videos, learn,
+          explore, and shop on the internet? Enter the address of any website, and
+          Blacklight will scan it and reveal the specific user-tracking
+          technologies on the site—and who’s getting your data. You may be
+          surprised at what you learn.
+        </p>
+      </div>
+    </div>
+  </div>
+

src/graphic/templates/partials/maintenance.html

@@ -0,0 +1,3 @@
+<div class="blacklight-maintenance__content">
+    <h1>Blacklight is temporarily down for maintenance. Thank you for your patience!</h1>
+</div>