From 111854ad30e720af4754f028a4eb906c948aea85 Mon Sep 17 00:00:00 2001 From: Miles Hilton Date: Thu, 25 Apr 2024 12:12:36 -0400 Subject: [PATCH] initial commit --- src/graphic/config.json | 5 +- src/graphic/sass/abstracts/_variables.scss | 1 + src/graphic/sass/modules/_header.scss | 89 +++++++++++++++++++ src/graphic/sass/modules/_maintenance.scss | 12 +++ src/graphic/sass/style.scss | 13 +++ src/graphic/templates/index.html | 3 +- src/graphic/templates/partials/example.html | 1 - src/graphic/templates/partials/header.html | 29 ++++++ .../templates/partials/maintenance.html | 3 + 9 files changed, 150 insertions(+), 6 deletions(-) create mode 100644 src/graphic/sass/modules/_header.scss create mode 100644 src/graphic/sass/modules/_maintenance.scss delete mode 100644 src/graphic/templates/partials/example.html create mode 100644 src/graphic/templates/partials/header.html create mode 100644 src/graphic/templates/partials/maintenance.html diff --git a/src/graphic/config.json b/src/graphic/config.json index 682b2db..8f1f1f9 100644 --- a/src/graphic/config.json +++ b/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 diff --git a/src/graphic/sass/abstracts/_variables.scss b/src/graphic/sass/abstracts/_variables.scss index 7d24929..fda41fd 100644 --- a/src/graphic/sass/abstracts/_variables.scss +++ b/src/graphic/sass/abstracts/_variables.scss @@ -2,6 +2,7 @@ // --------------- $c-white: #ffffff; +$c-blacklight: #6600ff; //Blue $c-navy: #242a49; diff --git a/src/graphic/sass/modules/_header.scss b/src/graphic/sass/modules/_header.scss new file mode 100644 index 0000000..6794697 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/graphic/sass/modules/_maintenance.scss b/src/graphic/sass/modules/_maintenance.scss new file mode 100644 index 0000000..eb75a30 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/graphic/sass/style.scss b/src/graphic/sass/style.scss index 7769c01..4a38db0 100644 --- a/src/graphic/sass/style.scss +++ b/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; + } + } \ No newline at end of file diff --git a/src/graphic/templates/index.html b/src/graphic/templates/index.html index cd43522..87403c5 100644 --- a/src/graphic/templates/index.html +++ b/src/graphic/templates/index.html @@ -1,3 +1,4 @@
- {{> partials/example }} + {{> partials/header }} + {{> partials/maintenance }}
diff --git a/src/graphic/templates/partials/example.html b/src/graphic/templates/partials/example.html deleted file mode 100644 index 2e48688..0000000 --- a/src/graphic/templates/partials/example.html +++ /dev/null @@ -1 +0,0 @@ -

Hey I am a test partial

diff --git a/src/graphic/templates/partials/header.html b/src/graphic/templates/partials/header.html new file mode 100644 index 0000000..6d5ec2a --- /dev/null +++ b/src/graphic/templates/partials/header.html @@ -0,0 +1,29 @@ +
+
+
+
+ + + + + + + + +
+

+ A Real-Time Website Privacy Inspector +

+

+ 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. +

+
+
+
+ \ No newline at end of file diff --git a/src/graphic/templates/partials/maintenance.html b/src/graphic/templates/partials/maintenance.html new file mode 100644 index 0000000..ae3f4f8 --- /dev/null +++ b/src/graphic/templates/partials/maintenance.html @@ -0,0 +1,3 @@ +
+

Blacklight is temporarily down for maintenance. Thank you for your patience!

+
\ No newline at end of file