Publish 2024-09-20

alexanderby · alexanderby · commit e2bfe273f9c2 · 2024-09-20T04:38:05.000+01:00
diff --git a/images/plus-palette-short.png b/images/plus-palette-short.png
diff --git a/plus/index.html b/plus/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Timeline — Dark Reader</title>
+    <title>Dark Reader Plus</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">
@@ -23,20 +23,20 @@
         <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>
+    <h1 class="slogan">
+        <span class="slogan-1">Color</span> <span class="slogan-2">Your</span> <span class="slogan-3">World</span>
+    </h1>
 
     <p>
-        <img class="screenshot" src="/images/plus-palette.png" alt="Dark Reader color palette">
+        <img class="screenshot" src="/images/plus-palette-short.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 class="title">
+        <span class="title-darkreader">Dark Reader</span> <span class="title-plus">Plus</span>
     </h3>
 
     <p>
-        Unlock limitless customization possibilities
+        Unlock limitless customization possibilities<br>
     </p>
 
     <script type="module" src="../elements/stats.js"></script>
diff --git a/plus/style.css b/plus/style.css
@@ -1,10 +1,10 @@
 :root {
-    --color-background: #1b191d;
+    --color-background: #000000;
     --color-control: #316e7d;
     --color-control-hover: #193945;
-    --color-text: #ac96bb;
+    --color-text: #656ee2;
     --color-text-highlight: white;
-    --color-accent: #e96c4c;
+    --color-accent: #e9594c;
 }
 
 html {
@@ -59,11 +59,19 @@ footer {
 }
 
 h2 {
-    font-size: 2.25rem;
+    font-size: 1.25rem;
     text-align: center;
 }
 
+.name {
+    font-size: 1.75rem;
+    line-height: 1;
+    position: relative;
+    top: 0.25rem;
+}
+
 .title-darkreader {
+    color: var(--color-accent);
     font-weight: 900;
     text-transform: uppercase;
 }
@@ -76,26 +84,23 @@ h2 {
 }
 
 p {
-    color: white;
+    color: #7981e6;
+    font-size: 1.08rem;
+    line-height: 1;
     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;
+    color: transparent;
+    background-image: linear-gradient(to right, #e7573b, #af6ce9, #40a6e5);
+    background-clip: text;
+    font-size: 3rem;
     font-weight: 100;
+    margin: 1rem;
     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%);
-}
+.title {
+    font-size: 2.2rem;
+    text-align: center;
+}
