Publish 2024-09-20

alexanderby · alexanderby · commit b8d69f80c0b8 · 2024-09-20T04:05:56.000+01:00
diff --git a/images/plus-palette.png b/images/plus-palette.png
diff --git a/plus/index.html b/plus/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Timeline — Dark Reader</title>
+    <meta name="theme-color" content="#141e24">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="/images/icon-256.png">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Dark Reader">
+    <meta property="og:url" content="https://darkreader.org/plus">
+    <meta property="og:title" content="Dark Reader Plus">
+    <meta property="og:image" content="https://darkreader.org/plus-palette.png">
+    <meta property="og:description" content="Unlock limitless customization possibilities with Dark Reader.">
+    <meta name="description" content="Unlock limitless customization possibilities with Dark Reader.">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" type="module"></script>
+</head>
+
+<body>
+    <a class="banner" href="../">
+        <img class="banner__image" src="/images/darkreader-birthday.svg" />
+    </a>
+
+    <h2>
+        <span class="title-darkreader">Dark Reader</span> <span class="title-plus">Plus</span>
+    </h2>
+
+    <p>
+        <img class="screenshot" src="/images/plus-palette.png" alt="Dark Reader color palette">
+    </p>
+
+    <h3 class="slogan">
+        <span class="slogan-1">Color</span> <span class="slogan-2">Your</span> <span class="slogan-3">World</span>
+    </h3>
+
+    <p>
+        Unlock limitless customization possibilities
+    </p>
+
+    <script type="module" src="../elements/stats.js"></script>
+
+</body>
+
+</html>
diff --git a/plus/script.js b/plus/script.js
@@ -0,0 +1 @@
+void 0;
diff --git a/plus/style.css b/plus/style.css
@@ -0,0 +1,101 @@
+:root {
+    --color-background: #1b191d;
+    --color-control: #316e7d;
+    --color-control-hover: #193945;
+    --color-text: #ac96bb;
+    --color-text-highlight: white;
+    --color-accent: #e96c4c;
+}
+
+html {
+    background-color: var(--color-background);
+}
+
+body {
+    color: var(--color-text);
+    font-family: system-ui;
+    max-width: 42em;
+    margin: 0 auto;
+    padding: 1em
+}
+
+h1,
+h2 {
+    color: var(--color-accent);
+}
+
+h3 {
+    margin-bottom: 0;
+}
+
+a {
+    color: #53a1b3;
+}
+
+a:hover {
+    color: var(--color-text-highlight);
+}
+
+::selection {
+    background-color: var(--color-accent);
+    color: var(--color-text-highlight);
+}
+
+.banner__image {
+    display: none;
+    max-width: 32rem;
+}
+
+footer {
+    font-size: 0.75rem;
+    margin-top: 1rem;
+}
+
+.screenshot {
+    border-radius: 1.5rem;
+    box-shadow: 0 0 1rem black;
+    max-width: 100%;
+    width: 24rem;
+}
+
+h2 {
+    font-size: 2.25rem;
+    text-align: center;
+}
+
+.title-darkreader {
+    font-weight: 900;
+    text-transform: uppercase;
+}
+
+.title-plus {
+    color: white;
+    font-weight: 100;
+    text-shadow: 0 0 1rem var(--color-text), 0 0 0.5rem var(--color-text);
+    text-transform: uppercase;
+}
+
+p {
+    color: white;
+    text-align: center;
+    text-shadow: 0 0 1rem var(--color-text), 0 0 0.5rem var(--color-text);
+}
+
+.slogan {
+    color: white;
+    font-size: 2.5rem;
+    font-weight: 100;
+    text-align: center;
+}
+
+.slogan-1 {
+    text-shadow: 0 0 1rem hsl(283, 100%, 50%), 0 0 0.5rem hsl(283, 100%, 50%);
+}
+
+.slogan-2 {
+    text-shadow: 0 0 1rem hsl(188, 100%, 50%), 0 0 0.5rem hsl(188, 100%, 50%);
+}
+
+.slogan-3 {
+    text-shadow: 0 0 1rem hsl(204, 100%, 50%), 0 0 0.5rem hsl(204, 100%, 50%);
+}
