-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.css
89 lines (45 loc) · 4.18 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.sand { color: #c75306; }
:root { /* Increase or decrease the number to change the vertical spacing globally*/ /* Base Vertical Spacing */ --space: 1.6; /* Vertical Spacing - multiplier */ --vspace: calc(var(--space) * 1rem); --vspace-0: calc(3 * var(--space) * 1rem); --vspace-1: calc(2 * var(--space) * 1rem); --vspace-2: calc(1.5 * var(--space) * 1rem); --vspace-3: calc(0.5 * var(--space) * 1rem); }
body { font-size: 16px; }
p { line-height: var(--vspace); }
h1 { margin-top: 0; }
h1:nth-child(1) { margin-top: clamp(30px, 3vw, 53px); }
h4, h5, h6 { line-height: var(--vspace); }
h2 { line-height: 1em; font-size: 2.6458em; font-weight: lighter; font-style: italic; word-break: break-word; color: rgba(255, 255, 255, 0.7); }
h3 { line-height: 1em; font-size: clamp(18.6px, 3vw, 28px); font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; }
h4 { font-size: 1.3333em; text-transform: capitalize; }
h5 { font-size: 1.1667em; font-weight: lighter; text-transform: uppercase; letter-spacing: 0.15em; }
h6 { font-size: 1em; font-weight: normal; font-style: italic; font-family: "le-monde-livre-classic-byol", serif !important; letter-spacing: 0px !important; }
* { box-sizing: border-box; }
body { margin: 0; color: white; font-family: "Montserrat"; display: flex; flex-flow: row; justify-content: center; }
@media screen and (max-width: 1024px) { body { display: block; } }
@media screen and (max-width: 414px) { body { background-color: #02152c; } }
.wrapper { background-color: #02152c; width: calc(min(100%, 1044px)); margin: 60px 0; padding: 0 90px 0 65px; display: grid; grid-template-rows: repeat(5, auto); }
@media screen and (max-width: 1024px) { .wrapper { margin: 0; } }
@media screen and (max-width: 414px) { .wrapper { padding: 0; } }
section { margin-bottom: clamp(69px, 3vw, 150px); }
@media screen and (max-width: 414px) { section h1, section h2 { padding-left: 10px; } }
.section-title { font-size: clamp(38px, 5vw, 84.6px); }
.section-content { font-size: clamp(18.6px, 2vw, 42.3px); }
.intro__title { width: 60%; margin-bottom: 0; }
@media screen and (max-width: 414px) { .intro__title { width: 100%; } }
.intro__subtitle { font-style: italic; }
.projects-wrapper { display: flex; flex-flow: row; }
@media screen and (max-width: 414px) { .projects-wrapper { flex-flow: column; align-items: center; margin-top: 100px; } }
.projects-wrapper .project-card { width: calc(min(440px, 95%)); height: 260px; display: grid; grid-template-rows: repeat(4, 1fr); border: 4px solid #c75306; text-decoration: none; margin: 0 40px 0 0; }
@media screen and (max-width: 414px) { .projects-wrapper .project-card { margin: 0 0 40px 0; } }
.projects-wrapper .project-card__title { display: flex; flex-flow: row; justify-content: space-between; align-items: center; padding: 0 15px; height: clamp(52px, 5vh, 72px); background-color: #c75306; }
.projects-wrapper .project-card__title h2 { margin: 0; padding-left: 0; font-style: normal; font-weight: bold; font-size: clamp(28px, 2vw, 42.3px); color: white; }
.projects-wrapper .project-card__title img { width: 37px; height: 37px; }
.projects-wrapper .project-card__content { font-style: italic; font-weight: medium; color: rgba(255, 255, 255, 0.7); padding: 15px; margin-bottom: 40px; }
.contact-card { display: flex; flex-flow: column; height: 260px; width: calc(min(100vw, 445px)); margin: 160px auto; background-color: #c75306; }
@media screen and (max-width: 414px) { .contact-card { margin: 75px auto; } }
.contact-card__title { margin: 0 0 45px 0; padding: 20px 0 0 22px; }
.contact-card__info { display: flex; flex-flow: row; justify-content: space-between; padding: 0 22px; }
.contact-card__info > * { font-size: 18.6px; }
.contact-card-info__name { display: flex; flex-flow: column; font-style: italic; font-weight: medium; color: rgba(255, 255, 255, 0.7); }
.contact-card-info__name * { margin: 0 0 20px 0; }
.contact-card-info__adress { display: flex; flex-flow: column; }
@media screen and (max-width: 414px) { .contact-card-info__adress { text-align: right; } }
.contact-card-info__adress * { margin: 0 0 20px 0; font-style: italic; font-weight: medium; color: rgba(255, 255, 255, 0.7); }
@media screen and (max-width: 414px) { .contact { padding-left: 0; } }