Skip to content

Commit 760ddd9

Browse files
dav1312dav1312
committed
Redesign home page
1 parent c35ab9c commit 760ddd9

File tree

13 files changed

+145
-43
lines changed

13 files changed

+145
-43
lines changed

‎assets/scss/bootstrap/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ $sizes: map-merge(
168168
//
169169
// Settings for the `<body>` element.
170170

171-
$body-bg: $green1 !default;
171+
$body-bg: $body-bg !default;
172172
$body-color: $white !default;
173173

174174

‎assets/scss/components/_buttons.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@
66
border-radius: 4px;
77
font-size: 16px;
88
font-weight: normal;
9-
color: #ffffff;
9+
color: $white;
1010
text-decoration: none;
1111
-webkit-transition: all 0.15s ease;
1212
transition: all 0.15s ease;
1313
&:hover {
14-
color: #ffffff;
14+
color: $white;
1515
background-color: lighten($primary, 10%);
1616
transform: translateY(-1px);
1717
text-decoration: none;
1818
}
19+
&.button-secondary {
20+
background-color: $gray-700;
21+
&:hover {
22+
background-color: lighten($gray-700, 10%);
23+
}
24+
}
1925
}
2026

2127
.button-large {

‎assets/scss/components/_feature.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
height: 100%;
33
border-radius: 8px;
44
padding: 20px;
5-
background-color: $green3;
5+
background-color: $gray-900;
66
display: flex;
77
align-items: center;
88
flex-direction: column;

‎assets/scss/components/_horizontal-line.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
height: 5px;
33
width: 80%;
44
border: 0;
5-
border-bottom: 1px solid $green2;
5+
border-bottom: 1px solid $gray-600;
66
}

‎assets/scss/components/_intro-image.scss‎

Lines changed: 71 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,75 @@
1-
.intro-image {
2-
width: 100%;
3-
height: auto;
4-
margin-top: -40px;
5-
transition: transform 0.5s;
6-
}
1+
.image-container {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
position: relative;
6+
margin: 0 auto;
7+
8+
height: 192px;
9+
10+
.image-bg,
11+
.intro-image {
12+
height: 100%;
13+
width: auto;
14+
max-width: 100%;
15+
aspect-ratio: 1 / 1;
16+
}
17+
18+
@include media-breakpoint-up(md) {
19+
& {
20+
height: auto;
21+
}
22+
.image-bg,
23+
.intro-image {
24+
width: 100%;
25+
height: auto;
26+
max-height: 100%;
27+
aspect-ratio: 1 / 1;
28+
}
29+
}
730

8-
.intro-image:hover {
9-
transform: scale(1.05);
10-
transition: transform 0.5s;
31+
.image-bg {
32+
background: linear-gradient(45deg, $green7 0%, $green7 100%) top left,
33+
linear-gradient(-45deg, $green1 0%, $green1 100%) top right,
34+
linear-gradient(-135deg, $green4 0%, $green4 100%) bottom right,
35+
linear-gradient(135deg, $green1 0%, $green1 100%) bottom left !important;
36+
background-size: 50% 50% !important;
37+
background-repeat: no-repeat !important;
38+
position: absolute;
39+
top: 50%;
40+
left: 50%;
41+
border-radius: 25%;
42+
transform: translate(-50%, -50%);
43+
z-index: -1;
44+
transition: filter 0.5s;
45+
--image-bg-filter: 40px;
46+
@include media-breakpoint-up(md) {
47+
& {
48+
--image-bg-filter: 56px;
49+
}
50+
}
51+
@include media-breakpoint-up(xl) {
52+
& {
53+
--image-bg-filter: 68px;
54+
}
55+
}
56+
filter: blur(var(--image-bg-filter));
57+
}
58+
59+
&:hover {
60+
.image-bg {
61+
filter: blur(calc(var(--image-bg-filter) * 1.5));
62+
transition: filter 0.5s;
63+
}
64+
.intro-image {
65+
transform: scale(1.05);
66+
}
67+
}
68+
69+
.intro-image {
70+
transition: transform 0.5s;
71+
z-index: 1;
72+
}
1173
}
1274

1375
.intro-image-absolute {

‎assets/scss/components/_intro.scss‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,58 @@
44
align-items: center;
55
padding-top: 60px;
66
overflow: hidden;
7+
text-align: center;
78
@include media-breakpoint-up(md) {
8-
padding-top: 140px;
9+
text-align: initial;
910
}
1011
h1 {
11-
font-size: 42px;
12-
font-weight: 600;
12+
font-size: 32px;
13+
font-weight: 700;
1314
line-height: 1.2;
14-
letter-spacing: -1.935px;
1515
@include media-breakpoint-up(md) {
16-
width: 80%;
1716
font-size: 48px;
1817
}
1918
@include media-breakpoint-up(lg) {
20-
font-size: 50px;
19+
font-size: 56px;
2120
}
2221
}
2322
h2 {
24-
width: 80%;
2523
font-size: 1.2rem;
2624
line-height: 1.4;
2725
margin-bottom: 30px;
2826
font-family: $font-family-base;
2927
}
30-
p {
31-
font-size: 1.2rem;
32-
font-weight: light;
28+
.tagline p {
29+
font-size: 18px;
30+
font-weight: 500;
3331
line-height: 1.5;
34-
color: $steel;
32+
color: $gray-500;
3533
@include media-breakpoint-up(md) {
36-
width: 80%;
34+
font-size: 20px;
35+
}
36+
@include media-breakpoint-up(lg) {
37+
font-size: 24px;
38+
}
39+
}
40+
.name {
41+
color: transparent;
42+
}
43+
.clip {
44+
animation: title-gradient 5s ease infinite;
45+
background-size: 400% 400%;
46+
background-image: linear-gradient(-45deg, $green7, $green4, $green7, $green5, $green4, $green5, $green7, $green4);
47+
-webkit-background-clip: text;
48+
background-clip: text;
49+
}
50+
@keyframes title-gradient {
51+
0% {
52+
background-position: 0% 50%;
53+
}
54+
50% {
55+
background-position: 100% 50%;
56+
}
57+
to {
58+
background-position: 0% 50%;
3759
}
3860
}
3961
}

‎assets/scss/components/_main-menu-mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
a {
5555
display: block;
5656
position: relative;
57-
color: #ffffff;
57+
color: $white;
5858
text-decoration: none;
5959
overflow: hidden;
6060
&:hover {

‎assets/scss/components/_title.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.title {
22
font-size: 48px;
33
line-height: 1.2;
4-
letter-spacing: -1.935px;
54
font-weight: 600;
65
@include media-breakpoint-up(lg) {
76
font-size: 50px;

‎assets/scss/components/_type.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ h1 {
1111
font-size: 24px;
1212
font-family: $font-family-heading;
1313
line-height: 1.2;
14-
margin-bottom: 20px;
1514
@include media-breakpoint-up(md) {
1615
font-size: 32px;
1716
line-height: 1.2;

‎assets/scss/style.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Colors
2+
$body-bg: #1b1b1f;
23
$green1: hsl(142, 44%, 15%);
34
$green2: hsl(142, 44%, 25%);
45
$green3: hsl(142, 44%, 30%);
@@ -108,7 +109,7 @@ body:after {
108109
height: 100%;
109110
width: 100%;
110111
bottom: 0;
111-
background: linear-gradient(to bottom, transparent 75%, $green1 100%);
112+
background: linear-gradient(to bottom, transparent 75%, $body-bg 100%);
112113
pointer-events: none;
113114
}
114115

0 commit comments

Comments
 (0)