Skip to content

Commit 5bf730d

Browse files
recmanjrecmanj
committed
Align navigation and content pages with redesign
1 parent 75ee7f9 commit 5bf730d

6 files changed

Lines changed: 140 additions & 64 deletions

File tree

‎assets/scss/footer.scss‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.footer {
22
width: 100%;
33
background-color: var(--background);
4+
border-top: var(--content-border);
45
font-size: 0.875rem;
5-
padding: 1rem 0;
6+
padding: 2rem 0 1.5rem;
67
position: relative;
78
bottom: 0;
89

@@ -23,25 +24,37 @@
2324
.title {
2425
color: var(--text-primary);
2526
margin-bottom: 1rem;
27+
font-size: 0.8rem;
28+
font-weight: 600;
29+
letter-spacing: 0.12em;
30+
text-transform: uppercase;
2631
}
2732

2833
.links {
2934
display: flex;
3035
flex-direction: column;
31-
gap: 0.5rem;
36+
gap: 0.65rem;
3237

3338
a {
3439
color: var(--text-secondary);
3540
text-decoration: none;
41+
transition: color 0.2s ease;
42+
43+
&:hover {
44+
color: var(--button-bg);
45+
text-decoration: none;
46+
}
3647
}
3748
}
3849
}
3950

4051
&__bottom {
41-
margin-top: 5rem;
42-
padding: 0 2rem;
52+
margin-top: 3rem;
53+
padding: 1.25rem 2rem 0;
54+
border-top: var(--content-border);
4355
display: flex;
4456
justify-content: space-between;
57+
align-items: center;
4558
color: var(--text-secondary);
4659

4760
.socials {
@@ -51,6 +64,11 @@
5164

5265
a {
5366
color: var(--text-secondary);
67+
transition: color 0.2s ease;
68+
69+
&:hover {
70+
color: var(--button-bg);
71+
}
5472
}
5573

5674
svg {

‎assets/scss/menu.scss‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,44 @@
1111
width: 100%;
1212
background-color: var(--background);
1313
z-index: 1000;
14-
transition: var(--transition);
1514
height: 74px;
1615
border-bottom: var(--content-border);
1716
background: linear-gradient(90deg, var(--menu-left-bg) 0%, var(--menu-right-bg) 100%);
1817
transition: box-shadow 0.3s ease;
18+
1919
&.top {
2020
box-shadow: none;
2121
}
22+
2223
&.transparent {
2324
background: none;
2425
box-shadow: none;
2526
border-bottom: none;
27+
28+
29+
.dropdown__menu,
30+
.dropdown__menu_r {
31+
background-color: #fff;
32+
border-color: #000;
33+
box-shadow: 0 8px 16px rgb(0 0 0 / 15%);
34+
35+
a {
36+
color: #000;
37+
38+
&:hover {
39+
background-color: #000;
40+
color: #fff;
41+
}
42+
}
43+
44+
.dropdown__parent-link {
45+
border-bottom: 1px solid rgb(128 128 128 / 15.8%);
46+
}
47+
}
2648
}
2749

2850
&.scrolled {
29-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
51+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
3052
}
3153

3254
&__toggle {
@@ -36,6 +58,7 @@
3658
.light-theme & {
3759
filter: invert(1);
3860
}
61+
3962
.transparent & {
4063
filter: invert(0);
4164
}
@@ -73,6 +96,7 @@
7396
.light-theme & {
7497
filter: invert(1);
7598
}
99+
76100
.dark-theme & {
77101
filter: invert(0);
78102
}
@@ -82,14 +106,16 @@
82106
.light-theme & {
83107
filter: invert(1);
84108
}
109+
85110
.transparent & {
86111
filter: invert(0);
87112
}
88113
}
89114

90115
.dropdown__menu {
91-
left: 0px !important;
116+
left: 0 !important;
92117
}
118+
93119
.dropdown__menu_r {
94120
left: -110px !important;
95121
}
@@ -126,18 +152,19 @@
126152
.light-theme & {
127153
filter: invert(0.5);
128154
}
155+
129156
.transparent & {
130157
filter: invert(0);
131158
}
132159
}
133160

134-
&__menu, &__menu_r {
161+
&__menu,
162+
&__menu_r {
135163
display: none;
136164
position: absolute;
137165
top: 46px;
138-
left: 0px;
166+
left: 0;
139167
background-color: var(--background);
140-
141168
min-width: 240px;
142169
border-left: 1px solid var(--inverse-background);
143170
border-right: 1px solid var(--inverse-background);
@@ -171,7 +198,7 @@
171198
white-space: nowrap;
172199

173200
&::after {
174-
content: "→";
201+
content: '→';
175202
flex: 0 0 auto;
176203
color: var(--button-bg);
177204
line-height: 1;
@@ -180,7 +207,8 @@
180207
}
181208

182209
&.open {
183-
.dropdown__menu, .dropdown__menu_r {
210+
.dropdown__menu,
211+
.dropdown__menu_r {
184212
display: block;
185213
}
186214

@@ -206,6 +234,27 @@
206234
a {
207235
color: var(--text-primary);
208236
text-decoration: none;
237+
transition: color 0.2s ease;
238+
239+
&:hover {
240+
color: var(--button-bg);
241+
text-decoration: none;
242+
}
243+
}
244+
}
245+
246+
.dropdown__toggle {
247+
transition: color 0.2s ease;
248+
249+
&:hover {
250+
color: var(--button-bg);
251+
}
252+
}
253+
254+
&.transparent {
255+
.menu__item a:hover,
256+
.dropdown__toggle:hover {
257+
color: rgb(255 255 255 / 70%);
209258
}
210259
}
211260
}
@@ -251,7 +300,7 @@
251300
min-width: 0;
252301
flex-direction: column;
253302
background-color: var(--background);
254-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
303+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
255304

256305
.mobile-only {
257306
display: flex;
@@ -267,7 +316,8 @@
267316
justify-content: center;
268317
}
269318

270-
&__menu, &__menu_r {
319+
&__menu,
320+
&__menu_r {
271321
position: static;
272322
box-shadow: none;
273323
border: #d3d3d32b;
@@ -276,6 +326,7 @@
276326
background-color: lightgray;
277327
margin-top: 1.5rem;
278328
transition: all 0.5s ease;
329+
279330
a {
280331
color: black;
281332

‎assets/scss/pages/accounts.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22

33
.account-page {
44
&__hero {
5-
background: linear-gradient(135deg, #f7f9fc, #e2e8f0);
5+
background: $band-bg;
66
text-align: center;
77
padding: 3rem 1rem;
8-
border-bottom: 1px solid #d0d7de;
8+
border-bottom: var(--content-border);
99

1010
h1 {
11-
font-size: 2.5rem;
11+
font-size: clamp(1.9rem, 3vw, 2.5rem);
12+
letter-spacing: -0.4px;
1213
margin-bottom: 0.5rem;
13-
color: #2c3e50;
14+
color: $navy;
1415
}
1516

1617
button {
@@ -23,7 +24,7 @@
2324
max-width: 1200px;
2425
margin: 0 auto;
2526
line-height: 1.6;
26-
color: #4a5568;
27+
color: $steel;
2728
}
2829
}
2930

@@ -38,19 +39,18 @@
3839
}
3940

4041
.account-card {
41-
background: #ffffff;
42-
border: 1px solid #e0e0e0;
43-
border-radius: $radius-md;
44-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
42+
background: var(--background);
43+
border: var(--content-border);
44+
border-radius: $radius-lg;
4545
padding: 1.5rem;
4646
transition:
47-
transform 0.2s ease,
48-
box-shadow 0.2s ease;
49-
color: #333;
47+
transform 0.3s ease,
48+
box-shadow 0.3s ease;
49+
color: var(--text-primary);
5050

5151
&:hover {
52-
transform: translateY(-4px);
53-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
52+
transform: translateY(-5px);
53+
box-shadow: var(--card-shadow);
5454
}
5555

5656
&__header {
@@ -62,12 +62,12 @@
6262
h2 {
6363
font-size: 1.5rem;
6464
margin: 0!important;
65-
color: #2c3e50;
65+
color: $navy;
6666
}
6767

6868
.btn-edit {
69-
background-color: #007bff;
70-
color: #fff;
69+
background-color: var(--button-bg);
70+
color: var(--button-text);
7171
border: none;
7272
padding: 0.5rem 1rem;
7373
font-size: 0.875rem;
@@ -76,7 +76,7 @@
7676
transition: background-color 0.2s ease;
7777

7878
&:hover {
79-
background-color: #0056b3;
79+
background-color: var(--button-hover);
8080
}
8181
}
8282
}
@@ -88,8 +88,8 @@
8888
h3 {
8989
margin-bottom: 0.5rem;
9090
font-size: 1.125rem;
91-
color: #2c3e50;
92-
border-bottom: 1px solid #e0e0e0;
91+
color: $navy;
92+
border-bottom: var(--content-border);
9393
padding-bottom: 0.25rem;
9494
}
9595

@@ -120,7 +120,7 @@
120120
}
121121

122122
a {
123-
color: #007bff;
123+
color: var(--button-bg);
124124
text-decoration: none;
125125

126126
&:hover {
@@ -183,7 +183,7 @@
183183

184184
h2 {
185185
margin-top: 0;
186-
color: #2c3e50;
186+
color: $navy;
187187
}
188188

189189
.form-group {

0 commit comments

Comments
 (0)