Skip to content

Commit b2c8697

Browse files
sid-devspotsid-devspot
authored
Refactor styles for Angular Material theming
Updated styles to integrate Angular Material theming and improved various CSS properties for better layout and design consistency.
1 parent 423bb78 commit b2c8697

1 file changed

Lines changed: 107 additions & 82 deletions

File tree

‎src/styles.scss‎

Lines changed: 107 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,58 @@
1-
@import "./assets/prop.scss";
1+
// Include theming for Angular Material with `mat.theme()`.
2+
// This Sass mixin will define CSS variables that are used for styling Angular Material
3+
// components according to the Material 3 design spec.
4+
// Learn more about theming and how to use it for your application's
5+
// custom components at https://material.angular.dev/guide/theming
6+
@use '@angular/material' as mat;
7+
@use './../public/prop.scss' as *;
8+
9+
html {
10+
@include mat.theme(
11+
(
12+
color: (
13+
primary: mat.$azure-palette,
14+
tertiary: mat.$blue-palette,
15+
),
16+
typography: Roboto,
17+
density: 0,
18+
)
19+
);
20+
}
21+
22+
body {
23+
// Default the application to a light color theme. This can be changed to
24+
// `dark` to enable the dark color theme, or to `light dark` to defer to the
25+
// user's system settings.
26+
color-scheme: light;
27+
28+
// Set a default background, font and text colors for the application using
29+
// Angular Material's system-level CSS variables. Learn more about these
30+
// variables at https://material.angular.dev/guide/system-variables
31+
background-color: var(--mat-sys-surface);
32+
color: var(--mat-sys-on-surface);
33+
font: var(--mat-sys-body-medium);
34+
35+
// Reset the user agent margin.
36+
margin: 0;
37+
}
38+
/* You can add global styles to this file, and also import other style files */
239

340
html,
441
body {
542
height: 100%;
643
}
744
body {
845
margin: 0;
9-
font-family: Roboto, "Helvetica Neue", sans-serif;
46+
font-family: Roboto, 'Helvetica Neue', sans-serif;
47+
}
48+
49+
html,
50+
body {
51+
height: 100%;
52+
}
53+
body {
54+
margin: 0;
55+
font-family: Roboto, 'Helvetica Neue', sans-serif;
1056
}
1157

1258
body {
@@ -44,25 +90,25 @@ main {
4490

4591
h2 {
4692
font-size: 3.4rem;
93+
font-family: var(--app-font-heads);
4794
text-transform: uppercase;
4895
text-align: center;
49-
margin-bottom: 1.2rem;
96+
margin-bottom: 2.4rem;
5097
display: flex;
5198
align-items: center;
5299
justify-content: center;
53100
gap: 1.6rem;
54101
}
55102

56103
.highlight {
57-
font-family: var(--app-font-heads) !important;
58-
color: var(--theme-colour);
59-
font-size: 3rem !important;
104+
@include highlight($fontSize: 3rem);
60105
}
61106

62107
p {
63-
font-size: 1.6rem;
108+
font-size: 1.8rem;
64109
line-height: 2.6rem;
65110
max-width: 80rem;
111+
color: var(--font-dim-colour);
66112
}
67113

68114
a {
@@ -159,6 +205,7 @@ main {
159205
padding: 0.6rem 1.8rem 0.6rem 1rem;
160206
border-radius: 0.6rem;
161207
text-decoration: none;
208+
font-size: 1.4rem;
162209

163210
img {
164211
width: 2rem;
@@ -174,22 +221,31 @@ main {
174221

175222
.about-content {
176223
@include blurLayer($bdrRds: 1.2rem);
224+
min-width: 20rem;
225+
width: 100%;
177226
max-width: 50rem;
178227
padding: 2rem 2.8rem;
179-
180-
&:nth-child(1) {
181-
grid-row: span 2;
182-
}
228+
display: flex;
229+
flex-direction: column;
230+
gap: 1.4rem;
183231

184232
h3 {
185233
font-family: var(--app-font-heads);
186234
font-size: 2.2rem;
187-
margin-bottom: 0.6rem;
235+
margin-bottom: 0.4rem;
236+
}
237+
238+
.highlight {
239+
@include highlight($fontSize: 1.6rem, $letterSpace: 0.1rem);
240+
margin-top: auto;
241+
padding-top: 1rem;
242+
flex-wrap: wrap;
188243
}
189244

190245
p {
191246
font-size: 1.6rem;
192-
color: rgb(160, 160, 160);
247+
color: var(--font-dim-colour);
248+
line-height: 2.2rem;
193249
}
194250
}
195251
}
@@ -201,12 +257,18 @@ main {
201257
flex-direction: column;
202258
align-items: center;
203259
justify-content: center;
204-
gap: 0.4rem;
260+
gap: 1rem;
205261
padding: 2rem 3rem;
206262

207263
h3 {
208264
font-family: var(--app-font-heads);
209265
font-size: 2.4rem;
266+
margin-bottom: 1rem;
267+
}
268+
269+
p {
270+
font-size: 1.4rem;
271+
color: var(--font-dim-colour);
210272
}
211273
}
212274

@@ -215,9 +277,10 @@ main {
215277
align-items: center;
216278
justify-content: space-between;
217279
position: relative;
280+
padding-top: 4rem;
218281

219282
&:before {
220-
content: "";
283+
content: '';
221284
position: absolute;
222285
top: 0;
223286
left: 50%;
@@ -228,21 +291,27 @@ main {
228291

229292
p {
230293
font-size: 1.6rem;
231-
max-width: 34rem;
294+
line-height: 2.4rem;
295+
max-width: 44rem;
296+
font-weight: 400 !important;
232297
}
233298

234299
.left-box {
300+
display: flex;
301+
flex-direction: column;
302+
gap: 8rem;
235303
padding: 0 8rem 0 0;
236304

237305
p {
238306
position: relative;
239307
text-align: right;
240308

241309
&:before {
242-
content: "";
310+
content: '';
243311
position: absolute;
244-
top: 20%;
312+
top: 50%;
245313
right: -9.2rem;
314+
transform: translateY(-50%);
246315
width: 2rem;
247316
height: 2rem;
248317
background-color: #443e3e;
@@ -251,33 +320,33 @@ main {
251320
}
252321

253322
&:after {
254-
content: "";
323+
content: '';
255324
position: absolute;
256-
top: 42%;
325+
top: 50%;
257326
right: -5.4rem;
327+
transform: translateY(-50%);
258328
width: 4rem;
259329
height: 0.2rem;
260330
border-top: 0.2rem dashed var(--theme-colour);
261331
}
262-
263-
&:nth-child(1) {
264-
margin-bottom: 10rem;
265-
}
266332
}
267333
}
268334

269335
.right-box {
336+
display: flex;
337+
flex-direction: column;
338+
gap: 8rem;
270339
padding: 0 0 0 8rem;
271-
margin-top: 14rem;
272340

273341
p {
274342
position: relative;
275343

276344
&:before {
277-
content: "";
345+
content: '';
278346
position: absolute;
279-
top: 20%;
347+
top: 50%;
280348
left: -9.2rem;
349+
transform: translateY(-50%);
281350
width: 2rem;
282351
height: 2rem;
283352
background-color: #443e3e;
@@ -286,18 +355,15 @@ main {
286355
}
287356

288357
&:after {
289-
content: "";
358+
content: '';
290359
position: absolute;
291-
top: 42%;
360+
top: 50%;
292361
left: -5.4rem;
362+
transform: translateY(-50%);
293363
width: 4rem;
294364
height: 0.2rem;
295365
border-top: 0.2rem dashed var(--theme-colour);
296366
}
297-
298-
&:nth-child(1) {
299-
margin-bottom: 10rem;
300-
}
301367
}
302368
}
303369
}
@@ -383,73 +449,30 @@ main {
383449
}
384450
}
385451

386-
.qualify-container {
387-
display: grid;
388-
grid-template-columns: repeat(2, 1fr);
389-
align-items: center;
390-
justify-content: center;
391-
gap: 2.6rem;
392-
393-
.qualify-content {
394-
@include blurLayer($bdrRds: 1.2rem);
395-
max-width: 40rem;
396-
height: 40rem;
397-
padding: 2rem 2.8rem;
398-
display: flex;
399-
flex-direction: column;
400-
align-items: center;
401-
justify-content: space-evenly;
402-
403-
h3 {
404-
font-size: 2rem;
405-
margin-bottom: 1rem;
406-
}
407-
408-
p {
409-
font-size: 1.4rem;
410-
}
411-
412-
.qualify-icon {
413-
display: flex;
414-
align-items: center;
415-
justify-content: center;
416-
}
417-
418-
.qualify-icon-01 {
419-
font-size: 9rem;
420-
line-height: 9rem;
421-
}
422-
423-
.qualify-icon-02 {
424-
font-size: 9rem;
425-
line-height: 9rem;
426-
}
427-
}
428-
}
429-
430452
.contact-details {
431453
.contact-content {
432454
h2 {
433455
font-size: 3.4rem;
434456
text-transform: uppercase;
435457
text-align: center;
436-
margin-bottom: 1.2rem;
437458
display: flex;
438459
align-items: center;
439460
justify-content: center;
440461
gap: 1.6rem;
462+
font-family: var(--app-font-heads) !important;
463+
margin-bottom: 2.2rem !important;
441464
}
442-
465+
443466
.highlight {
444467
font-family: var(--app-font-heads) !important;
445468
color: var(--theme-colour);
446469
font-size: 3rem !important;
447470
}
448-
471+
449472
small {
450473
font-size: 1.6rem;
451474
}
452-
475+
453476
p {
454477
max-width: 80rem;
455478
margin: 0 auto;
@@ -665,6 +688,8 @@ main {
665688
padding: 2rem !important;
666689

667690
header {
691+
margin-bottom: 2rem;
692+
668693
h2 {
669694
font-size: 2.4rem;
670695
font-weight: 700;
@@ -739,7 +764,7 @@ main {
739764
position: relative;
740765

741766
&:before {
742-
content: "";
767+
content: '';
743768
position: absolute;
744769
top: 0;
745770
left: 50%;

0 commit comments

Comments
 (0)