Skip to content

Commit 8c952e5

Browse files
erikjeeerikjee
authored
Merge pull request #61 from trifectatechfoundation/new-improvements
New improvements
2 parents 77c617e + 18b905b commit 8c952e5

File tree

10 files changed

+189
-110
lines changed

10 files changed

+189
-110
lines changed

‎sass/components/hero.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
display: grid;
88
gap: 1.5rem;
99
grid-template-columns: repeat(12, 1fr);
10-
padding-block: 6rem;
10+
padding-block: 4.5rem;
1111
}
1212

1313
h1 {

‎sass/components/nav.scss‎

Lines changed: 80 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ nav {
1111
.container {
1212
align-items: center;
1313
display: flex;
14-
justify-content: space-between;
14+
justify-content: space-between;
1515
position: relative;
1616
padding-left: 1.5rem;
1717

@@ -61,7 +61,7 @@ nav {
6161
position: relative;
6262
width: 3rem;
6363
cursor: pointer;
64-
64+
6565
&::after {
6666
background-color: var(--color-primary-400);
6767
border-radius: 100%;
@@ -91,7 +91,7 @@ nav {
9191
}
9292

9393
&.active {
94-
> svg {
94+
>svg {
9595
transform: translate(-50%, -50%) rotate(90deg);
9696
}
9797
}
@@ -111,15 +111,18 @@ nav {
111111
border-color: var(--color-primary-400);
112112
border-style: solid;
113113
translate: 0 100%;
114-
background-color: var(--color-secondary-200-off);
114+
background-color: var(--color-secondary-400);
115115
width: calc(100vw);
116-
height: calc(100vh);
116+
height: calc(100dvh - 99px);
117117
visibility: hidden;
118118
opacity: 0;
119119
pointer-events: none;
120120
transition-property: opacity, visibility;
121121
transition-duration: 250ms;
122122
transition-timing-function: ease-in;
123+
overflow: scroll;
124+
display: flex;
125+
flex-direction: column;
123126

124127
&.open {
125128
pointer-events: all;
@@ -130,26 +133,18 @@ nav {
130133
.menu-panel-container {
131134
margin-inline: auto;
132135
width: min(100%, 30rem);
136+
height: 100%;
137+
display: flex;
138+
flex-direction: column;
133139
}
134140

135141
.submenu {
136142
min-width: 20rem;
137143
padding: 0 1rem;
138-
139-
> a {
144+
145+
>a {
140146
font-weight: 700;
141147
}
142-
143-
&.main {
144-
margin-block-start: 0.5rem;
145-
margin-block-end: 0.5rem;
146-
}
147-
&.software {
148-
background-color: var(--color-inline-code);
149-
ul {
150-
display: inline-block;
151-
}
152-
}
153148
}
154149

155150
a {
@@ -166,33 +161,81 @@ nav {
166161
font-weight: bold;
167162
}
168163
}
164+
}
165+
166+
.submenu.software {
167+
flex: 1;
168+
background-color: var(--color-secondary-500);
169+
170+
ul {
171+
display: flex;
172+
flex-wrap: wrap;
173+
gap: 0.5rem;
174+
}
175+
176+
li {
177+
height: 2.25rem;
178+
padding-inline: 1rem;
179+
border: 1px solid var(--color-primary-400);
180+
background-color: var(--color-secondary-400);
181+
display: flex;
182+
align-items: center;
183+
justify-content: center;
184+
text-align: center;
185+
border-radius: 0.25rem;
186+
}
187+
}
188+
189+
.submenu.main {
190+
margin-block-start: 0.5rem;
191+
margin-block-end: 0.5rem;
169192

170193
ul {
171194
padding-block-start: 0rem;
172-
padding-block-end: 0.5rem;
195+
padding-block-end: 0.5rem;
196+
}
173197

174-
> li {
175-
padding: 0rem 0.5rem;
176-
position: relative;
198+
li {
199+
position: relative;
200+
display: flex;
201+
align-items: center;
202+
gap: 0.5rem;
177203

178-
a.subitem {
179-
padding-block: 0.375rem 0.375rem;
180-
padding-left: 1rem;
181-
}
204+
a.subitem {
205+
padding-block: 0.375rem 0.375rem;
182206
}
183-
207+
}
208+
209+
li::before {
210+
content: "";
211+
width: 0.75rem;
212+
aspect-ratio: 1;
213+
background-color: var(--color-primary-400);
214+
clip-path: polygon(0 0, 100% 100%, 100% 0);
215+
}
216+
}
217+
}
218+
219+
.dark {
220+
.menu-panel {
221+
color: var(--color-secondary-200);
222+
223+
a:not(:first-child, .subitem) {
224+
border-color: var(--color-secondary-200);
225+
}
226+
}
227+
228+
.submenu {
229+
&.main {
184230
li::before {
185-
position: absolute;
186-
content: "";
187-
width: 0;
188-
height: 0;
189-
border-style: solid;
190-
border-width: 0 0.75rem 0.75rem 0.75rem;
191-
border-color: transparent var(--color-secondary-400) transparent transparent;
192-
top: 0.75rem;
193-
left: -0.5rem;
231+
background-color: var(--color-secondary-200);
194232
}
195233
}
196234

235+
&.software {
236+
li {
237+
border-color: var(--color-secondary-200);
238+
}
239+
}
197240
}
198-
}
241+
}

‎sass/components/partners.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,15 @@
4949
.funder {
5050
align-items: center;
5151
justify-content: start;
52-
background-color: var(--color-bg-logo);
52+
background-color: rgba(255,255,255,0.25);
5353
display: flex;
5454
justify-content: center;
5555
gap: 0.75rem;
5656
position: relative;
5757
padding: 0rem;
5858
margin-top: 0.5rem;
5959
cursor: pointer;
60+
border: 1px solid rgba(var(--color-secondary-400-rgb), 0.5);
6061

6162
@media (min-width: 62rem) {
6263
align-items: center;

‎sass/components/projects.scss‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
.hero-container {
22
.hero-menu {
3-
display: block;
4-
text-align: center;
5-
margin: auto;
6-
padding-top: 2rem;
3+
margin-block-start: 1.5rem;
4+
display: flex;
5+
justify-content: center;
6+
7+
ul {
8+
display: flex;
9+
flex-wrap: wrap;
10+
width: 100%;
11+
max-width: 36.75rem;
12+
}
713

814
li {
9-
display: inline-block;
10-
padding-right: 0.5rem;
15+
flex: 1;
16+
17+
a {
18+
width: 100%;
19+
padding-inline: 0;
20+
21+
&:hover {
22+
background-color: var(--color-secondary-400);
23+
}
24+
}
1125

12-
a.btn-secondary {
13-
padding-inline: 0.5rem;
14-
height: 2rem;
26+
&:not(:last-child) {
27+
a {
28+
border-inline-end: 0;
29+
}
1530
}
1631
}
1732
}

‎sass/global/global.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@ body {
77
line-height: var(--line-height);
88
}
99

10+
.text-center {
11+
text-align: center;
12+
}

‎sass/global/layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ main {
1616
margin-block-start: 3rem;
1717

1818
@media (min-width: 62rem) {
19-
margin-block-start: 6rem;
19+
margin-block-start: 4.5rem;
2020
}
2121
}
2222

‎sass/global/root.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
--color-secondary-400-rgb: 230, 154, 141;
77

88
--color-primary-400: rgb(var(--color-primary-400-rgb));
9+
--color-secondary-500: #cf8b7f;
910
--color-secondary-400: rgb(var(--color-secondary-400-rgb));
1011
--color-secondary-300: rgb(var(--color-secondary-300-rgb));
1112
--color-secondary-200: rgb(var(--color-secondary-200-rgb));
@@ -50,6 +51,7 @@
5051
--color-secondary-200-rgb-off: 44,55,77;
5152

5253
--color-primary-400: rgb(var(--color-primary-400-rgb));
54+
--color-secondary-500: #e6935a;
5355
--color-secondary-400: rgb(var(--color-secondary-400-rgb));
5456
--color-secondary-300: rgb(var(--color-secondary-300-rgb));
5557
--color-secondary-200: rgb(var(--color-secondary-200-rgb));

0 commit comments

Comments
 (0)