Skip to content

Commit ac82f75

Browse files
NiharikaHariNiharikaHari
committed
UI fixes
1 parent d2d081f commit ac82f75

6 files changed

Lines changed: 116 additions & 20 deletions

File tree

‎_layouts/project-layout.html‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,15 +245,37 @@ <h4 style="font-weight: 600; padding: 2rem 0;" id="pub-specifics" class="hidden"
245245

246246
.main ol {
247247
padding: 2rem 0;
248-
list-style-type:lower-roman;
248+
list-style-type: lower-roman;
249249
padding-left: 2rem;
250250
}
251251

252252
.main a:hover {
253253
text-decoration: underline;
254254
}
255255

256-
* {
256+
a {
257257
text-underline-position: from-font;
258258
}
259+
260+
@media (max-width: 1024px) {
261+
.main {
262+
grid-template-columns: 1fr;
263+
max-width: 100%;
264+
}
265+
266+
.row {
267+
display: grid;
268+
grid-template-columns: 1fr;
269+
gap: 2rem;
270+
}
271+
272+
.sidebar {
273+
max-width: 100%;
274+
}
275+
276+
.video-wrapper {
277+
grid-column: span 1;
278+
}
279+
280+
}
259281
</style>

‎_layouts/projects-layout.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ <h2 class="about title" id="all">All Projects</h2>
121121
}
122122

123123
.mailid {
124-
font-size: 14pt;
124+
font-size: 0.9rem;
125125
display: inline-block;
126126
margin-top: 1rem;
127127
font-weight: 600;
@@ -134,6 +134,12 @@ <h2 class="about title" id="all">All Projects</h2>
134134
display: block;
135135
margin-top: 0.5rem;
136136
}
137+
138+
@media (max-width: 768px) {
139+
.grid {
140+
grid-template-columns: 1fr;
141+
}
142+
}
137143
</style>
138144
<script>
139145
document.addEventListener("DOMContentLoaded", function () {

‎css/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@
5555
/* Global Styles */
5656
/* ======================================================================================== */
5757

58+
html, body {
59+
overflow-x: hidden; /* hides horizontal scroll */
60+
}
61+
5862
body {
5963
font-display: swap;
6064
}

‎img/team/anirudh.webp‎

-189 KB
Loading

‎index.html‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,7 @@ <h2 class="subtitle">
9898
<div>
9999
<h2 class="subtitle">
100100
Subscribe to our
101-
<span>
102-
newsletter
103-
</span>
101+
<span>newsletter</span>
104102
</h2>
105103
<form
106104
action="https://fieldsofview.us6.list-manage.com/subscribe/post?u=13324657f9f9f9443ccb89cb1&amp;id=685a335226"
@@ -109,22 +107,24 @@ <h2 class="subtitle">
109107
<label for="mce-EMAIL" class="visually-hidden">Email address</label>
110108
<input type="email" id="mce-EMAIL" name="EMAIL" placeholder="Your email address..." required>
111109

110+
112111
<button class="subscribe" type="submit">subscribe</button>
112+
<div id="email-error" style="color: red; font-size: 0.9em; margin-top: 5px; display: none;">
113+
Please enter a valid email
114+
</div>
113115
</form>
114-
115116
</div>
116117
<a href="{{site.baseurl}}/newsletter/latest" class="img-container" target="_blank">
117118
<img class="nl-img" src="{{ site.baseurl }}/img/newsletter/latest-nl-cover.webp"
118119
alt="Latest newsletter cover image" loading="lazy">
119120
<div class="img-overlay"></div>
120121
</a>
121-
122122
</section>
123123

124124
<style>
125-
/* * { */
126-
/* border: 1px solid black; */
127-
/* } */
125+
/* * {
126+
border: 1px solid black;
127+
} */
128128

129129
.subtitle {
130130
padding-bottom: var(--p1-rem);
@@ -139,7 +139,7 @@ <h2 class="subtitle">
139139
grid-template-columns: 1.15fr 2fr; */
140140

141141
height: 90vh;
142-
padding-bottom: 15vh;
142+
margin-bottom: 10vh;
143143
align-items: center;
144144
text-align: center;
145145
}
@@ -261,9 +261,41 @@ <h2 class="subtitle">
261261
grid-template-columns: 1fr;
262262
}
263263

264-
.linkedin-feed {
265-
max-width: 70vw;
266-
margin: auto;
264+
}
265+
</style>
266+
<script>
267+
function resizeHero() {
268+
const navbarHeight = document.querySelector('header').offsetHeight;
269+
const hero = document.querySelector('.hero-container');
270+
if (window.innerWidth >= 992) {
271+
hero.style.height = `${window.innerHeight - navbarHeight}px`;
272+
} else {
273+
hero.style.height = 'auto'; // mobile: reset to natural height
267274
}
268275
}
269-
</style>
276+
277+
window.addEventListener('resize', resizeHero);
278+
window.addEventListener('load', resizeHero);
279+
280+
const form = document.getElementById('subscribe-form');
281+
const emailInput = document.getElementById('mce-EMAIL');
282+
const errorMsg = document.getElementById('email-error');
283+
284+
function isValidEmail(email) {
285+
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
286+
}
287+
288+
form.addEventListener('submit', function (e) {
289+
if (!isValidEmail(emailInput.value)) {
290+
e.preventDefault(); // stop form submission
291+
errorMsg.style.display = 'block'; // show error
292+
emailInput.focus();
293+
} else {
294+
errorMsg.style.display = 'none'; // hide error if valid
295+
}
296+
});
297+
298+
emailInput.addEventListener('input', () => {
299+
errorMsg.style.display = 'none';
300+
});
301+
</script>

‎resources.html‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
{% assign publications = site.posts | where: "category", "publications" %}
1616
{% assign pub_subcategories = publications | map: "subcategory" | uniq %}
1717
<section class="tab-content active" id="tab-publications">
18-
<p style="padding-top: var(--p2-rem);">We want to push the boundaries of how we think of and engage with vulnerability. Take a look
18+
<p style="padding-top: var(--p2-rem);">We want to push the boundaries of how we think of and engage with
19+
vulnerability. Take a look
1920
at the ways we have
2021
been shifting the conversation around resilience.</p>
2122
{% for subcat in pub_subcategories %}
@@ -82,7 +83,8 @@ <h2 class="subcat-title">{{ subcat }}</h2>
8283
{% assign nl_subcategories = newsletters | map: "subcategory" | uniq %}
8384

8485
<section class="tab-content" id="tab-newsletter">
85-
<p style="padding-top: var(--p2-rem);">Our approach to solving problems is constantly adapting to changing circumstances. Stay
86+
<p style="padding-top: var(--p2-rem);">Our approach to solving problems is constantly adapting to changing
87+
circumstances. Stay
8688
updated with our work
8789
with our newsletter.</p>
8890
<div class="newsletter-container">
@@ -100,12 +102,20 @@ <h3 class="subtitle">
100102
<form
101103
action="https://fieldsofview.us6.list-manage.com/subscribe/post?u=13324657f9f9f9443ccb89cb1&amp;id=685a335226"
102104
method="post" id="subscribe-form" name="subscribe-form" target="_blank" novalidate>
103-
<input type="email" placeholder="Your email address..." name="EMAIL" required>
105+
106+
<label for="mce-EMAIL" class="visually-hidden">Email address</label>
107+
<input type="email" id="mce-EMAIL" name="EMAIL" placeholder="Your email address..." required>
108+
109+
104110
<button class="subscribe" type="submit">subscribe</button>
111+
<div id="email-error" style="color: red; font-size: 0.9em; margin-top: 5px; display: none;">
112+
Please enter a valid email
113+
</div>
105114
</form>
106115
</div>
107116
<a href="{{site.baseurl}}/newsletter/latest" class="img-container" style="margin: auto;" target="_blank">
108-
<img class="nl-img" src="{{ site.baseurl }}/img/newsletter/latest-nl-cover.webp" alt="Latest newsletter cover image">
117+
<img class="nl-img" src="{{ site.baseurl }}/img/newsletter/latest-nl-cover.webp"
118+
alt="Latest newsletter cover image">
109119

110120
<div class="img-overlay"></div>
111121

@@ -439,4 +449,26 @@ <h2 class="subcat-title">{{ subcat }}</h2>
439449

440450
window.addEventListener('DOMContentLoaded', activateTabFromHash);
441451
window.addEventListener('hashchange', activateTabFromHash);
452+
453+
const form = document.getElementById('subscribe-form');
454+
const emailInput = document.getElementById('mce-EMAIL');
455+
const errorMsg = document.getElementById('email-error');
456+
457+
function isValidEmail(email) {
458+
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
459+
}
460+
461+
form.addEventListener('submit', function (e) {
462+
if (!isValidEmail(emailInput.value)) {
463+
e.preventDefault(); // stop form submission
464+
errorMsg.style.display = 'block'; // show error
465+
emailInput.focus();
466+
} else {
467+
errorMsg.style.display = 'none'; // hide error if valid
468+
}
469+
});
470+
471+
emailInput.addEventListener('input', () => {
472+
errorMsg.style.display = 'none';
473+
});
442474
</script>

0 commit comments

Comments
 (0)