Skip to content

Commit 115e51e

Browse files
grafische-republiekgrafische-republiek
committed
Refactor navigation and partners styles; enhance project listing template
1 parent 77c617e commit 115e51e

File tree

6 files changed

+162
-99
lines changed

6 files changed

+162
-99
lines changed

‎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,1);
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 var(--color-secondary-400);
6061

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

‎sass/components/projects.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
margin: auto;
66
padding-top: 2rem;
77

8-
li {
9-
display: inline-block;
10-
padding-right: 0.5rem;
8+
ul {
9+
display: flex;
10+
flex-wrap: wrap;
11+
gap: 0.5rem;
12+
}
1113

14+
li {
1215
a.btn-secondary {
1316
padding-inline: 0.5rem;
1417
height: 2rem;

‎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));

‎static/main.js‎

Lines changed: 64 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,101 @@
1-
document.addEventListener('DOMContentLoaded', ()=> {
2-
const menuTrigger = document.querySelector('.hamburger');
3-
const menu = document.querySelector('.menu-panel');
4-
5-
menuTrigger.addEventListener('click', (event) => {
6-
menuTrigger.classList.toggle('active');
7-
menu.classList.toggle('open');
8-
})
9-
10-
const prefersColorSchemeTrigger = document.querySelector('.color-scheme');
11-
const sun = document.querySelector('.sun');
12-
const moon = document.querySelector('.moon');
13-
14-
prefersColorSchemeTrigger.addEventListener('click', () => {
15-
document.documentElement.classList.toggle('dark');
16-
17-
if (localStorage.getItem('prefersColorScheme')) {
18-
localStorage.removeItem('prefersColorScheme');
19-
moon.style.display = 'block';
20-
sun.style.display = 'none';
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const menuTrigger = document.querySelector(".hamburger");
3+
const menu = document.querySelector(".menu-panel");
4+
5+
menuTrigger.addEventListener("click", (event) => {
6+
menuTrigger.classList.toggle("active");
7+
menu.classList.toggle("open");
8+
});
9+
10+
// toggle dark mode by system/browser settings
11+
// if (
12+
// window.matchMedia &&
13+
// window.matchMedia("(prefers-color-scheme: dark)").matches
14+
// ) {
15+
// document.documentElement.classList.toggle('dark');
16+
// }
17+
18+
// toggle dark mode by click
19+
const prefersColorSchemeTrigger = document.querySelector(".color-scheme");
20+
const sun = document.querySelector(".sun");
21+
const moon = document.querySelector(".moon");
22+
23+
prefersColorSchemeTrigger.addEventListener("click", () => {
24+
document.documentElement.classList.toggle("dark");
25+
26+
if (localStorage.getItem("prefersColorScheme")) {
27+
localStorage.removeItem("prefersColorScheme");
28+
moon.style.display = "block";
29+
sun.style.display = "none";
2130
} else {
22-
localStorage.setItem('prefersColorScheme', 'dark');
23-
sun.style.display = 'block';
24-
moon.style.display = 'none';
31+
localStorage.setItem("prefersColorScheme", "dark");
32+
sun.style.display = "block";
33+
moon.style.display = "none";
2534
}
2635
});
27-
28-
if (localStorage.getItem('prefersColorScheme')) {
29-
document.documentElement.classList.add('dark');
30-
sun.style.display = 'block';
31-
moon.style.display = 'none';
36+
37+
if (localStorage.getItem("prefersColorScheme")) {
38+
document.documentElement.classList.add("dark");
39+
sun.style.display = "block";
40+
moon.style.display = "none";
3241
}
3342

3443
// Modal functionality
35-
const funderCards = document.querySelectorAll('.funder.card-link');
36-
37-
funderCards.forEach(card => {
38-
card.addEventListener('click', function(event) {
39-
44+
const funderCards = document.querySelectorAll(".funder.card-link");
45+
46+
funderCards.forEach((card) => {
47+
card.addEventListener("click", function (event) {
4048
// Find the modal within this funder card
41-
const modal = this.querySelector('.modal');
49+
const modal = this.querySelector(".modal");
4250
if (modal) {
43-
modal.classList.add('open');
44-
document.body.classList.add('modal-open');
51+
modal.classList.add("open");
52+
document.body.classList.add("modal-open");
4553
}
4654
});
4755
});
4856

4957
// Close modal when clicking outside or on close button
50-
document.addEventListener('click', function(event) {
58+
document.addEventListener("click", function (event) {
5159
// Close if clicking on modal backdrop (outside content)
52-
if (event.target.classList.contains('modal') && event.target.classList.contains('open')) {
60+
if (
61+
event.target.classList.contains("modal") &&
62+
event.target.classList.contains("open")
63+
) {
5364
closeModal(event.target);
5465
}
55-
66+
5667
// Close if clicking on close button
57-
if (event.target.classList.contains('modal-close')) {
58-
const modal = event.target.closest('.modal');
68+
if (event.target.classList.contains("modal-close")) {
69+
const modal = event.target.closest(".modal");
5970
if (modal) {
6071
closeModal(modal);
6172
}
6273
}
63-
74+
6475
// Alternative: Close if clicking outside modal content
65-
const openModal = document.querySelector('.modal.open');
66-
if (openModal && !event.target.closest('.modal-content') && !event.target.closest('.funder.card-link')) {
76+
const openModal = document.querySelector(".modal.open");
77+
if (
78+
openModal &&
79+
!event.target.closest(".modal-content") &&
80+
!event.target.closest(".funder.card-link")
81+
) {
6782
closeModal(openModal);
6883
}
6984
});
7085

7186
// Close modal function
7287
function closeModal(modal) {
73-
modal.classList.remove('open');
74-
document.body.classList.remove('modal-open');
88+
modal.classList.remove("open");
89+
document.body.classList.remove("modal-open");
7590
}
7691

7792
// Close modal with Escape key
78-
document.addEventListener('keydown', function(event) {
79-
if (event.key === 'Escape') {
80-
const openModal = document.querySelector('.modal.open');
93+
document.addEventListener("keydown", function (event) {
94+
if (event.key === "Escape") {
95+
const openModal = document.querySelector(".modal.open");
8196
if (openModal) {
8297
closeModal(openModal);
8398
}
8499
}
85100
});
86-
87101
});
88-

0 commit comments

Comments
 (0)