Skip to content

Commit 2742de6

Browse files
shalailahaasshalailahaas
committed
Add dark mode logo and toggle logic for about page
Introduces light and dark mode logo assets and updates about page/profile to support theme-based logo switching. Updates SCSS to handle logo display logic and refines color variables for improved theme consistency. Adds a detailed about page and minor style improvements.
1 parent c88af1f commit 2742de6

12 files changed

Lines changed: 133 additions & 42 deletions

File tree

‎_includes/header.liquid‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
{% else %}
2020
{{- site.title -}}
2121
{% endif %}
22+
2223
</a>
2324
{% elsif site.enable_navbar_social %}
2425
<!-- Social Icons -->

‎_layouts/about.liquid‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: default
33
---
44
<div class="post">
5-
<header class="post-header">
5+
<!-- <header class="post-header">
66
<h1 class="post-title">
77
{% if site.title == 'blank' %}
88
<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }}
@@ -12,25 +12,46 @@ layout: default
1212
{% endif %}
1313
</h1>
1414
<p class="desc">{{ page.subtitle }}</p>
15-
</header>
15+
</header> -->
1616

1717
<article>
1818
{% if page.profile %}
1919
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
2020
{% if page.profile.image %}
2121
{% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
2222
{% if page.profile.image_circular %}
23-
{% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
23+
{% assign profile_image_class = 'img-fluid rounded-circle' %}
2424
{% else %}
25-
{% assign profile_image_class = 'img-fluid z-depth-1
26-
rounded' %}
25+
{% assign profile_image_class = 'img-fluid rounded' %}
26+
{% endif %}
27+
28+
{% capture sizes %}(min-width: {{ site.max_width }}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
29+
30+
{% if page.profile.image_dark %}
31+
{% assign profile_image_dark_path = page.profile.image_dark | prepend: 'assets/img/' %}
32+
33+
<!-- Light Mode Logo -->
34+
<div class="logo-light">
35+
{%
36+
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
37+
cache_bust=true
38+
%}
39+
</div>
40+
41+
<!-- Dark Mode Logo -->
42+
<div class="logo-dark">
43+
{%
44+
include figure.liquid loading="eager" path=profile_image_dark_path class=profile_image_class sizes=sizes alt=page.profile.image
45+
cache_bust=true
46+
%}
47+
</div>
48+
{% else %}
49+
<!-- Default Single Logo -->
50+
{%
51+
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
52+
cache_bust=true
53+
%}
2754
{% endif %}
28-
{% capture sizes %}(min-width: {{ site.max_width }}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
29-
30vw, 95vw"{% endcapture %}
30-
{%
31-
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
32-
cache_bust=true
33-
%}
3455
{% endif %}
3556
{% if page.profile.more_info %}
3657
<div class="more-info">{{ page.profile.more_info }}</div>

‎_pages/about.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
layout: about
33
title: about
44
permalink: /
5-
subtitle: Multimodal Insights into Neuopsychiatric Disorders
5+
66

77
profile:
88
align: right
9-
image: # prof_pic.jpg
9+
image: cd/logo.svg
10+
image_dark: cd/logo-dark.svg
1011
image_circular: false # crops the image to make it circular
11-
more_info: >
12-
<p>Department of Psychiatry</p>
13-
<p>Mount Sinai Health System</p>
14-
<p>1255 5th Ave, Suite C-2</p>
15-
<p>Room 112</p>
16-
<p>New York, NY 10029</p>
12+
more_info:
1713

1814
selected_papers: true # includes a list of papers marked as "selected={true}"
1915
social: true # includes social icons at the bottom of the page
@@ -31,3 +27,5 @@ latest_posts:
3127

3228
{% remote_include https://raw.githubusercontent.com/MINDLabResearch/.github/refs/heads/main/profile/README.md %}
3329

30+
[(More info)](/about_detailed)
31+

‎_pages/about_detailed.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
layout: page
3+
title: Research Overview
4+
permalink: /about_detailed/
5+
description: Detailed research overview
6+
nav: false
7+
---
8+
9+
10+
The MIND Lab's mission is to improve mental healthcare through early detection and personalized treatment of psychiatric illness. By leveraging multimodal data and advanced machine learning, our research aims to parse the heterogeneity within and across psychiatric disorders, uncovering the neural and behavioral mechanisms that drive individual differences. Through this work, we seek to enable more accurate prediction, targeted interventions, and better outcomes for individuals at risk for or living with neuropsychiatric conditions.
11+
12+
[Dr. Shalaila S. Haas](https://mindlabresearch.com/team/haas) serves as the lab director and the lead project manager of [PREDiCTOR](https://impact-mh.org/awardees/predictor/), a NIMH-funded U01 study that aims to develop individualized clinical signatures for predicting key mental health outcomes—such as treatment disengagement, ER visits, and hospitalizations—by analyzing behavioral data derived from AV recordings of clinical interviews, electronic health records (EHR), and smartphones in young, help-seeking individuals. Using advanced computational modeling and large language models, the study leverages multimodal data to enhance prognostic accuracy and support equitable, real-time decision-making in psychiatry.
13+
14+
To connect research findings with education, Dr. Haas co-directs the [Translational Neuroimaging](https://www.translational-neuro.org/about-us), an international initiative focused on disseminating state-of-the-art computational and neuroimaging tools to researchers at all career stages. In this role, she helps lead efforts to democratize access to advanced methods in brain research, fostering a collaborative and interdisciplinary community dedicated to accelerating progress in mental health science.

‎_sass/_base.scss‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ hr {
2424
}
2525

2626
table {
27+
2728
td,
2829
th {
2930
font-size: 1rem;
@@ -40,7 +41,7 @@ table.table a {
4041
color: var(--global-theme-color);
4142

4243
&:hover {
43-
color: var(--global-theme-color);
44+
color: var(--global-hover-color);
4445
text-decoration: underline;
4546
}
4647

@@ -51,6 +52,7 @@ table.table a {
5152

5253
.table-dark {
5354
background-color: transparent;
55+
5456
&.table-bordered {
5557
border: 1px solid var(--global-divider-color) !important;
5658
}
@@ -138,10 +140,11 @@ blockquote {
138140
// Checklist
139141

140142
ul.task-list {
141-
list-style-type: none; /* Remove bullets from all levels */
143+
list-style-type: none;
144+
/* Remove bullets from all levels */
142145
}
143146

144-
ul.task-list > li ul {
147+
ul.task-list>li ul {
145148
/* Nested lists within .task-list */
146149
padding-inline-start: 1.5rem;
147150
}
@@ -309,7 +312,7 @@ ul.task-list input[type="checkbox"] {
309312
}
310313
}
311314

312-
.navbar-nav .nav-item.active > .nav-link {
315+
.navbar-nav .nav-item.active>.nav-link {
313316
background-color: inherit;
314317
font-weight: bolder;
315318
color: var(--global-theme-color);
@@ -469,7 +472,7 @@ ul.task-list input[type="checkbox"] {
469472
background-color: rgba(0, 0, 0, 0.8);
470473
}
471474

472-
.wechat-modal > img {
475+
.wechat-modal>img {
473476
display: block;
474477
position: relative;
475478
top: 50%;
@@ -480,7 +483,7 @@ ul.task-list input[type="checkbox"] {
480483
}
481484

482485
@media only screen and (max-width: 400px) {
483-
.wechat-modal > img {
486+
.wechat-modal>img {
484487
width: 100%;
485488
}
486489
}
@@ -749,8 +752,7 @@ footer.sticky-bottom {
749752
li {
750753
margin-bottom: 1rem;
751754

752-
.preview {
753-
}
755+
.preview {}
754756

755757
.abbr {
756758
margin-bottom: 0.5rem;
@@ -790,12 +792,12 @@ footer.sticky-bottom {
790792
}
791793
}
792794

793-
> em {
795+
>em {
794796
border-bottom: 1px solid;
795797
font-style: normal;
796798
}
797799

798-
> span.more-authors {
800+
>span.more-authors {
799801
color: var(--global-text-color-light);
800802
border-bottom: 1px dashed var(--global-text-color-light);
801803
cursor: pointer;
@@ -822,13 +824,15 @@ footer.sticky-bottom {
822824
border-color: var(--global-theme-color);
823825
}
824826
}
827+
825828
a.award.btn {
826829
border-color: var(--global-highlight-color);
827830
}
828831
}
829832

830833
.badges {
831834
padding-bottom: 0.5rem;
835+
832836
span {
833837
display: inline-block;
834838
color: $black-color;
@@ -882,9 +886,11 @@ footer.sticky-bottom {
882886
border-color: var(--global-text-color);
883887
}
884888
}
889+
885890
div.award.hidden {
886891
border: dashed 1px var(--global-bg-color);
887892
}
893+
888894
div.award.hidden.open {
889895
border-color: var(--global-highlight-color);
890896
}
@@ -1083,11 +1089,11 @@ progress::-moz-progress-bar {
10831089
nav[data-toggle="toc"] {
10841090
top: 5rem;
10851091

1086-
.nav .nav > li > a {
1092+
.nav .nav>li>a {
10871093
font-size: 0.75rem;
10881094
}
10891095

1090-
.nav > li > a {
1096+
.nav>li>a {
10911097
color: var(--global-text-color);
10921098
font-size: 0.75rem;
10931099

@@ -1111,6 +1117,7 @@ nav[data-toggle="toc"] {
11111117

11121118
/* small screens */
11131119
@media (max-width: 576px) {
1120+
11141121
/* override stickyness so that the navigation does not follow scrolling */
11151122
nav[data-toggle="toc"] {
11161123
visibility: hidden;
@@ -1239,7 +1246,7 @@ swiper-container {
12391246
border-bottom: 2px solid var(--global-text-color);
12401247
}
12411248

1242-
.ps-algorithm.with-caption > .ps-line:first-child {
1249+
.ps-algorithm.with-caption>.ps-line:first-child {
12431250
border-bottom: 2px solid var(--global-text-color);
12441251
}
12451252
}
@@ -1361,13 +1368,15 @@ ninja-keys::part(ninja-input-wrapper) {
13611368
}
13621369

13631370
@media (max-width: 575px) {
1371+
13641372
.newsletter-form-input,
13651373
.newsletter-form-button,
13661374
.newsletter-loading-button,
13671375
.newsletter-success,
13681376
.newsletter-error {
13691377
font-size: 16px !important;
13701378
}
1379+
13711380
.newsletter-form-container {
13721381
margin-right: 20px;
13731382
margin-left: 20px;
@@ -1390,6 +1399,7 @@ ninja-keys::part(ninja-input-wrapper) {
13901399
}
13911400

13921401
.bs-popover-top {
1402+
13931403
// arrow fill color
13941404
.arrow::after {
13951405
border-top-color: var(--global-bg-color);
@@ -1402,6 +1412,7 @@ ninja-keys::part(ninja-input-wrapper) {
14021412
}
14031413

14041414
.bs-popover-bottom {
1415+
14051416
// arrow fill color
14061417
.arrow::after {
14071418
border-bottom-color: var(--global-bg-color);

‎_sass/_themes.scss‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
--global-code-bg-color: #{$code-bg-color-light};
1111
--global-text-color: #{$black-color};
1212
--global-text-color-light: #{$grey-color};
13-
--global-theme-color: #{$purple-color};
14-
--global-hover-color: #{$purple-color};
13+
--global-theme-color: #70a5c4;
14+
--global-hover-color: #59849c;
1515
--global-hover-text-color: #{$white-color};
1616
--global-footer-bg-color: #{$grey-color-dark};
1717
--global-footer-text-color: #{$grey-color-light};
@@ -20,12 +20,10 @@
2020
--global-divider-color: rgba(0, 0, 0, 0.1);
2121
--global-card-bg-color: #{$white-color};
2222
--global-highlight-color: #{$red-color-dark};
23-
--global-back-to-top-bg-color: rgba(
24-
#{color.channel($black-color, "red", $space: rgb)},
23+
--global-back-to-top-bg-color: rgba(#{color.channel($black-color, "red", $space: rgb)},
2524
#{color.channel($black-color, "green", $space: rgb)},
2625
#{color.channel($black-color, "blue", $space: rgb)},
27-
0.4
28-
);
26+
0.4);
2927
--global-back-to-top-text-color: #{$white-color};
3028
--global-newsletter-bg-color: #{$white-color};
3129
--global-newsletter-text-color: #{$black-color};
@@ -91,12 +89,10 @@ html[data-theme="dark"] {
9189
--global-distill-app-color: #{$grey-color-light};
9290
--global-divider-color: #424246;
9391
--global-card-bg-color: #{$grey-900};
94-
--global-back-to-top-bg-color: rgba(
95-
#{color.channel($white-color, "red", $space: rgb)},
92+
--global-back-to-top-bg-color: rgba(#{color.channel($white-color, "red", $space: rgb)},
9693
#{color.channel($white-color, "green", $space: rgb)},
9794
#{color.channel($white-color, "blue", $space: rgb)},
98-
0.5
99-
);
95+
0.5);
10096
--global-back-to-top-text-color: #{$black-color};
10197
--global-newsletter-bg-color: #{$grey-color-light};
10298
--global-newsletter-text-color: #{$grey-color-dark};
@@ -159,3 +155,25 @@ html[data-theme-setting="light"] {
159155
display: block;
160156
}
161157
}
158+
159+
// Logo Toggle Logic
160+
html[data-theme="dark"] {
161+
.logo-light {
162+
display: none;
163+
}
164+
165+
.logo-dark {
166+
display: block;
167+
}
168+
}
169+
170+
html[data-theme="light"],
171+
html:not([data-theme]) {
172+
.logo-light {
173+
display: block;
174+
}
175+
176+
.logo-dark {
177+
display: none;
178+
}
179+
}

‎assets/img/cd/logo-dark.pdf‎

45.3 KB
Binary file not shown.

‎assets/img/cd/logo-dark.png‎

300 KB
Loading

‎assets/img/cd/logo-dark.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎assets/img/cd/logo.pdf‎

45.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)