Skip to content

Commit 92eba10

Browse files
kamilmysliwieckamilmysliwiec
committed
chore: update colors
1 parent f509388 commit 92eba10

File tree

14 files changed

+144
-41
lines changed

14 files changed

+144
-41
lines changed

‎src/app/homepage/footer/footer.component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,15 @@ footer {
3434
text-align: center;
3535

3636
a {
37-
@extend .transition;
3837
color: variables.$red-color;
3938
font-weight: 600;
39+
40+
@include utils.text-gradient();
41+
4042
&:hover {
4143
color: variables.$red-color;
44+
background: #fff;
45+
4246
}
4347
}
4448

‎src/app/homepage/header/header.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="top-bar">
1+
<!-- <div class="top-bar">
22
<a href="https://supportukrainenow.org/">STOP WAR IN UKRAINE 🇺🇦</a>
3-
</div>
3+
</div> -->
44
<header>
55
<button
66
class="icon-wrapper"

‎src/app/homepage/header/header.component.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,12 @@
3535
}
3636

3737
.new {
38-
background: #232323;
39-
color: #ea2845;
40-
border: 1px solid #ea2845;
38+
background: var(--primary-gradient);
4139
font-size: 11px;
4240
padding: 2px 4px;
4341
border-radius: 2px;
4442
margin-right: 2px;
43+
-webkit-text-fill-color: #fff;
4544
}
4645

4746
header {
@@ -192,8 +191,9 @@ header {
192191

193192
&:last-of-type a {
194193
@include utils.radius(2px);
194+
transition: none;
195195
padding: 4px 6px;
196-
background: variables.$red-color;
196+
background: variables.$red-gradient;
197197

198198
&:hover {
199199
background: #262626;

‎src/app/homepage/homepage.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
href="https://docs.nestjs.com/"
55
title="Documentation | NestJS - A node.js framework built on top of TypeScript"
66
>
7-
<img alt="NestJS Logo" src="/assets/logo-small.svg" />
7+
<img alt="NestJS Logo" src="/assets/logo-small-gradient.svg" />
88
</a>
99
</div>
1010
</app-header>
@@ -73,7 +73,7 @@ <h4 class="title">Sponsors / Partners</h4>
7373
target="_blank"
7474
rel="nofollow"
7575
>
76-
Become a sponsor
76+
<span>Become a sponsor</span>
7777
</a>
7878
</div>
7979
</div>

‎src/app/homepage/homepage.component.scss‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,20 @@
1919
.container {
2020
@extend .transition;
2121
@extend .box-sizing;
22-
//@include transform(translateX(250px));
2322
margin-left: 250px;
2423
width: calc(100% - 250px);
25-
padding: 120px 85px 0;
24+
padding: 85px 85px 0;
2625
display: inline-block;
2726
vertical-align: top;
2827
position: relative;
2928

3029
&.wide {
31-
//@include transform(translateX(0));
3230
margin-left: 0;
3331
width: 100%;
3432
display: block;
3533
}
3634

3735
@include utils.media(large) {
38-
//@include transform(translateX(250px));
3936
margin-left: 250px;
4037
width: calc(100% - 250px);
4138
padding: 120px 50px 0;
@@ -64,11 +61,37 @@
6461
a {
6562
font-weight: 600;
6663
color: variables.$red-color;
64+
6765
&:hover {
6866
color: #0894e2;
6967
}
7068
}
7169

70+
.content a {
71+
@include utils.text-gradient();
72+
73+
&:hover {
74+
background: #0894e2;
75+
-webkit-text-fill-color: transparent;
76+
-webkit-background-clip: text;
77+
}
78+
}
79+
80+
.content #carbonads a, .content blockquote a, .content blockquote strong, .content a:has(> code) {
81+
-webkit-text-fill-color: unset !important;
82+
-webkit-background-clip: unset !important;
83+
background: none;
84+
85+
&:hover {
86+
background: none;
87+
}
88+
}
89+
90+
.content .banner a {
91+
-webkit-text-fill-color: unset !important;
92+
-webkit-background-clip: unset !important;
93+
}
94+
7295
h1,
7396
h2,
7497
h3,
@@ -216,14 +239,40 @@
216239
}
217240

218241
.btn-primary {
219-
border: 2px solid variables.$red-color;
220242
color: variables.$red-color;
221243
padding: 12px 20px;
222244
display: inline-block;
245+
border-radius: 2px;
246+
position: relative;
247+
248+
span {
249+
@include utils.text-gradient();
250+
}
251+
252+
&::before {
253+
content: "";
254+
position: absolute;
255+
inset: 0;
256+
border-radius: 2px;
257+
padding: 2px;
258+
background: var(--primary-gradient);
259+
-webkit-mask:
260+
linear-gradient(#fff 0 0) content-box,
261+
linear-gradient(#fff 0 0);
262+
-webkit-mask-composite: xor;
263+
mask-composite: exclude;
264+
pointer-events: none;
265+
z-index: 2;
266+
}
223267

224268
&:hover {
225269
color: #0894e2;
226-
border-color: #0894e2;
270+
&::before {
271+
background: #0894e2;
272+
}
273+
span {
274+
background: #0894e2;
275+
}
227276
}
228277
}
229278
}

‎src/app/homepage/menu/menu-item/menu-item.component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,24 @@ h3 {
1515
margin: 10px 0;
1616
&:hover {
1717
color: variables.$red-color;
18+
@include utils.text-gradient();
1819
}
1920
}
2021

2122
.new {
2223
color: #fff;
23-
background: variables.$red-color;
24+
background: variables.$red-gradient;
2425
font-size: 11px;
2526
padding: 2px 4px;
2627
margin-right: 5px;
2728
font-weight: 700;
2829
border-radius: 2px;
30+
-webkit-text-fill-color: #fff;
2931
}
3032

3133
.active h3 {
3234
color: variables.$red-color;
35+
@include utils.text-gradient();
3336
}
3437

3538
.material-icons {
@@ -62,10 +65,12 @@ li {
6265
cursor: pointer;
6366
&:hover {
6467
color: variables.$red-color;
68+
@include utils.text-gradient();
6569
}
6670
&.active {
6771
font-weight: 600;
6872
color: variables.$red-color;
73+
@include utils.text-gradient();
6974
}
7075
}
7176

@@ -110,4 +115,5 @@ ul {
110115

111116
.has-icon h3 {
112117
color: variables.$red-color;
118+
@include utils.text-gradient();
113119
}

‎src/app/homepage/menu/menu.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
@extend .transition;
66
@extend .box-sizing;
77
@include utils.transform(translateX(-100%));
8-
padding: 125px 17px 40px 24px;
8+
9+
padding: 90px 17px 40px 24px;
910
width: 250px;
1011
background: #f5f5f5;
1112
position: fixed !important;
@@ -78,7 +79,8 @@
7879

7980
.btn-support {
8081
margin-top: 20px;
81-
background: variables.$red-color;
82+
background: variables.$red-gradient;
83+
transition: none;
8284
color: #fff;
8385

8486
&:hover {

‎src/app/homepage/newsletter/newsletter.component.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<div class="newsletter-wrapper">
22
<div class="signup">
3-
<div class="envelope-bg">
4-
<i class="far fa-envelope"></i>
5-
</div>
63
<div class="hgroup">
74
<h3>Join our Newsletter</h3>
85
<p>

‎src/app/homepage/newsletter/newsletter.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858

5959
.newsletter-form .form-control {
6060
border: 0;
61-
font-size: 13px;
61+
font-size: 15px;
6262
height: 40px;
6363
padding: 10px 20px;
6464
background: #fdfdfd;
@@ -72,7 +72,7 @@
7272
}
7373

7474
.newsletter-form button {
75-
background: #ed1543;
75+
background: var(--primary-gradient);
7676
height: 40px;
7777
padding: 10px 18px;
7878
border: 0;
@@ -82,7 +82,7 @@
8282
vertical-align: middle;
8383
border-top-right-radius: 3px;
8484
border-bottom-right-radius: 3px;
85-
transition: all 200ms ease-in-out;
85+
transition: none;
8686
box-sizing: border-box;
8787
cursor: pointer;
8888
outline: 0;

‎src/app/shared/components/toc/toc.component.scss‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import '../../../../scss/utils.scss';
2-
@import '../../../../scss/variables.scss';
1+
@use '../../../../scss/utils.scss';
2+
@use '../../../../scss/variables.scss';
33

44
.toc-wrapper {
55
width: 250px;
@@ -39,26 +39,28 @@
3939
margin-bottom: 6px;
4040

4141
&:hover {
42-
color: $red-color;
42+
color: variables.$red-color;
43+
@include utils.text-gradient();
4344
}
4445
}
4546

4647
.current {
47-
color: $red-color;
48+
color: variables.$red-color;
49+
@include utils.text-gradient();
4850
font-weight: 600;
4951

5052
&::before {
51-
background: $red-color;
52-
border-color: $red-color;
53+
background: variables.$red-gradient;
54+
border-color: variables.$red-gradient;
5355
border-width: 1px;
5456
left: -3px;
5557
}
5658
}
5759

5860
li {
5961
&::before {
60-
@include radius(50%);
61-
@include transform(translateY(-50%));
62+
@include utils.radius(50%);
63+
@include utils.transform(translateY(-50%));
6264

6365
content: '';
6466
background: #fdfdfd;
@@ -81,12 +83,14 @@
8183
color: #404040;
8284
font-weight: normal;
8385
&:hover {
84-
color: $red-color;
86+
color: variables.$red-color;
87+
@include utils.text-gradient();
8588
}
8689
}
8790

8891
.current a {
8992
font-weight: 600;
90-
color: $red-color;
93+
color: variables.$red-color;
94+
@include utils.text-gradient();
9195
}
9296
}

0 commit comments

Comments
 (0)