Skip to content

Commit f53ae35

Browse files
alexanderbyalexanderby
committed
Publish 2025-08-22
1 parent 621379a commit f53ae35

File tree

6 files changed

+83
-25
lines changed

6 files changed

+83
-25
lines changed

‎blog/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
<a class="post-tile" href="thanks-2021/">
9191
<img class="post-tile__preview" src="/images/blog-previews/thanks-2021-preview-small.jpg" loading="lazy" />
9292
<span class="post-tile__headline">Thanks to these people: a full list</span>
93-
<span class="post-tile__date">November 25, 2021</span>
93+
<span class="post-tile__date">November 26, 2021</span>
9494
</a>
9595

9696
<a class="post-tile" href="5m-users/">

‎blog/thanks-2021/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</header>
2222
<main class="page-grid-content">
2323
<article>
24-
<h6>November 25, 2021</h6>
24+
<h6>November 26, 2021</h6>
2525

2626
<h1 id="thanks-to-these-people-a-full-list">Thanks to these people: a full list</h1>
2727
<p>Thanks to all the people who supported us on this long journey

‎elements/plus-tiers.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,6 +556,14 @@ const cssText = `
556556
container-type: inline-size;
557557
font-size: 1.25rem;
558558
}
559+
560+
:host([minimalist]) {
561+
.currencies,
562+
.tiers,
563+
.payment-methods {
564+
display: none;
565+
}
566+
}
559567
`;
560568

561569
class PlusTiersElement extends HTMLElement {

‎images/plus-screen-mac.png‎

1.22 MB
Loading

‎plus/index.html‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>Dark Reader Plus</title>
7+
<meta name="color-scheme" content="dark">
78
<meta name="theme-color" content="#141e24">
89
<meta name="viewport" content="width=device-width, initial-scale=1">
910
<link rel="shortcut icon" href="/images/icon-256.png">
@@ -29,7 +30,7 @@ <h1 class="title">
2930
</p>
3031

3132
<p>
32-
<darkreader-plus-tiers></darkreader-plus-tiers>
33+
<darkreader-plus-tiers minimalist></darkreader-plus-tiers>
3334
<script type="module" src="/elements/plus-tiers.js"></script>
3435
</p>
3536

@@ -46,26 +47,42 @@ <h3 class="slogan">
4647
<img class="desktop-promo-image" src="/images/plus-devices-violet.jpg">
4748
</div>
4849
</div>
50+
</section>
51+
52+
<section>
53+
<h2 class="title-secondary">
54+
<span class="title-secondary-text">Color Your World</span>
55+
</h2>
4956

50-
<p>
51-
<i class="edge-icon"></i>
52-
Available for Microsoft Edge on Windows, macOS and Android.
57+
<p class="description">
58+
Create your own colorful theme<br>
5359
</p>
54-
</section>
5560

56-
<div class="carousel">
57-
<div class="carousel-wrapper">
58-
<img class="carousel-screenshot" src="/images/plus-screen-1.png">
59-
<img class="carousel-screenshot" src="/images/plus-screen-3.png">
60-
<img class="carousel-screenshot" src="/images/plus-screen-2.png">
61-
<img class="carousel-screenshot" src="/images/plus-screen-4.png">
61+
<div class="carousel">
62+
<div class="carousel-wrapper">
63+
<img class="carousel-screenshot" src="/images/plus-screen-1.png">
64+
<img class="carousel-screenshot" src="/images/plus-screen-3.png">
65+
<img class="carousel-screenshot" src="/images/plus-screen-2.png">
66+
<img class="carousel-screenshot" src="/images/plus-screen-4.png">
67+
</div>
6268
</div>
63-
</div>
69+
</section>
70+
71+
<section>
72+
<h2 class="title-secondary">
73+
<span class="title-plus">Upgrade Now</span>
74+
</h2>
75+
76+
<p>
77+
<darkreader-plus-tiers minimalist></darkreader-plus-tiers>
78+
<script type="module" src="/elements/plus-tiers.js"></script>
79+
</p>
80+
</section>
6481

6582
<section>
66-
<p class="text-secondary">
83+
<p class="description-tier">
84+
Dark Reader Plus is available for Microsoft Edge on Windows, macOS and Android.
6785
By completing the purchase you agree to the <a href="../terms/">terms of use</a>.
68-
<br>
6986
For any questions please <a href="mailto:[email protected]?subject=[Plus]%20Key">contact us</a>.
7087
</p>
7188
</section>

‎plus/style.css‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,12 @@ h2 {
7575
top: 0.25rem;
7676
}
7777

78+
.title {
79+
font-size: 2.15rem;
80+
margin: 0;
81+
text-align: center;
82+
}
83+
7884
.title-darkreader {
7985
background-image: linear-gradient(to right, #e7573b, #af6ce9, #40a6e5);
8086
background-clip: text;
@@ -94,6 +100,19 @@ h2 {
94100
text-transform: uppercase;
95101
}
96102

103+
.title-secondary {
104+
font-size: 2.15rem;
105+
margin: 0;
106+
text-align: center;
107+
}
108+
109+
.title-secondary-text {
110+
background-image: linear-gradient(to right, #e7573b, #af6ce9, #40a6e5);
111+
background-clip: text;
112+
color: transparent;
113+
font-weight: 100;
114+
}
115+
97116
p,
98117
a,
99118
a:visited {
@@ -120,16 +139,15 @@ footer {
120139
text-align: center;
121140
}
122141

123-
.title {
124-
font-size: 2.15rem;
125-
margin: 0;
126-
text-align: center;
127-
}
128-
129142
.description {
130143
font-size: 1.3rem;
131144
}
132145

146+
.description-tier {
147+
margin: 0 auto;
148+
max-width: 40rem;
149+
}
150+
133151
section {
134152
margin: 1rem 0;
135153
}
@@ -139,13 +157,12 @@ section {
139157
}
140158

141159
footer {
142-
opacity: 0.5;
160+
opacity: 0.75;
143161
padding: 0.75rem;
144162
text-align: center;
145163
}
146164

147165
.carousel {
148-
display: none;
149166
margin: 1rem auto 0 auto;
150167
overflow: auto;
151168
padding-bottom: 1rem;
@@ -184,7 +201,7 @@ footer {
184201
}
185202

186203
.desktop-promo-image:not(:first-child) {
187-
animation-duration: 10s;
204+
animation-duration: 7.5s;
188205
animation-fill-mode: forwards;
189206
animation-iteration-count: infinite;
190207
animation-timing-function: ease;
@@ -227,9 +244,25 @@ footer {
227244
font-size: 4rem;
228245
}
229246

247+
.title-secondary {
248+
font-size: 3rem;
249+
}
250+
230251
.description {
231252
font-size: 2rem;
232253
}
254+
255+
.title-secondary + .description {
256+
font-size: 1.5rem;
257+
}
258+
259+
.carousel {
260+
width: 100%;
261+
}
262+
263+
.carousel-wrapper {
264+
justify-content: center;
265+
}
233266
}
234267

235268
@keyframes promo-image-1 {

0 commit comments

Comments
 (0)