Skip to content

Commit 34fe6a2

Browse files
authored
Sdg23 restructure sidebar in website (#442)
* add icons and reorder pages on sidebar
1 parent dbd5f0e commit 34fe6a2

10 files changed

Lines changed: 109 additions & 19 deletions

File tree

_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,3 +123,4 @@ numfocus:
123123
sponsored_project: https://numfocus.org/project/mdanalysis
124124
donate_button: <a href="https://numfocus.org/donate-to-mdanalysis" target="_blank" style="background:#FF9200;padding:10px;margin:10px 0px;text-align:center;text-decoration:none;font-size:12pt;color:#000000;display:inline-block;border-radius:3px">Donate Now</a>
125125

126+

_includes/head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,8 @@
3939
anchors.add('h1, h2, h3, h4, h5, h6');
4040
});
4141
</script>
42+
43+
<!-- FontAwesome Icons -->
44+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
45+
4246
</head>

_includes/sidebar.html

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,29 @@ <h1>
99
<p class="lead">{{ site.description }}</p>
1010
</div>
1111

12-
<div id="docsearch">Enable javascript for search.</div>
13-
12+
<!-- Social Media Icons -->
13+
<div class="sidebar-social-icons">
14+
<a href="{{ site.linkedin.url }}" target="_blank" title="LinkedIn">
15+
<i class="fab fa-linkedin"></i>
16+
</a>
17+
<a href="{{ site.bluesky.url }}" target="_blank" title="Bluesky">
18+
<img src="{{ site.baseurl }}/public/images/bluesky.svg" width="24" height="24" alt="Bluesky">
19+
</a>
20+
<a href="{{ site.discord.invite }}" target="_blank" title="Discord">
21+
<i class="fab fa-discord"></i>
22+
</a>
23+
<a href="{{ site.github.repo }}" target="_blank" title="GitHub">
24+
<i class="fab fa-github"></i>
25+
</a>
26+
</div>
27+
28+
<!-- Search Bar -->
29+
<div class="sidebar-search">
30+
<div class="sidebar-search-box">
31+
<div id="docsearch">Enable javascript for search.</div>
32+
</div>
33+
</div>
34+
1435
<nav class="sidebar-nav">
1536
{% assign site_base_url = site.baseurl | append: "/" %}
1637
<a class="sidebar-nav-item{% if page.url == site_base_url %} active{% endif %}" href="{{ site.baseurl }}/">Home</a>
@@ -19,7 +40,7 @@ <h1>
1940
The code below dynamically generates a sidebar nav of pages with
2041
`layout: page` in the front-matter. See readme for usage.
2142
{% endcomment %}
22-
43+
2344
{% assign blogpagedir = site.paginate_path | split: ":" | first %}
2445
{% assign blogpagedir_len = blogpagedir | size %}
2546
{% assign pages_list = site.pages | sort: "order" %}
@@ -33,14 +54,8 @@ <h1>
3354
{% endif %}
3455
{% endif %}
3556
{% endfor %}
36-
37-
<a class="sidebar-nav-item" href="{{ site.docs.userguide.url }}">User Guide</a>
38-
<a class="sidebar-nav-item" href="{{ site.docs.mdanalysis.url }}">Docs</a>
39-
<a class="sidebar-nav-item" href="{{ site.pypi.package }}">Download</a>
40-
<a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
41-
<a class="sidebar-nav-item" href="{{ site.twitter.url }}">@{{ site.twitter.name }}</a>
4257
</nav>
43-
58+
4459
<p>&copy; {{ site.time | date: '%Y' }}. All rights reserved.</p>
4560
</div>
4661
</div>

about.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: page
33
title: About MDAnalysis
4+
order: 10
45
---
56

67
<img src="{{ site.baseurl }}/public/mdanalysis-logo_square.png"

blog/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: page
33
title: Blog
4+
order: 12
45
---
56

67
<div class="posts">

pages/citations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: page
33
title: Citations
4-
order: 100
4+
order: 9
55
---
66

77
MDAnalysis and the included algorithms are scientific software that

pages/privacy.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: page
33
title: Privacy Policy
4-
order: 10
4+
order: 13
55
---
66

77
MDAnalysis is a [fiscally sponsored

pages/team.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: page
33
title: MDAnalysis team
4-
order: 4
4+
order: 11
55
---
66

77
MDAnalysis is a community-driven project that is made possible through the efforts of many members who contribute in numerous and diverse ways, ranging from direct package development, maintenance, documentation, communication, and managerial responsibilities. On this page we list identified project roles and team members for each of those roles. We note that the listed roles on this page can differ significantly in scope and required effort.
@@ -10,7 +10,7 @@ We also invite community members to reach out to [mdanalysis@numfocus.org](mailt
1010

1111
## Roles
1212

13-
In this section we list major contributors who are currently contributing substantial effort to the roles listed below. This team organisation structure was started in November 2023; many people contributed to these tasks before then and may not appear in this table, in particular the [emeritus core developers]({{ site.url }}{% link about.md %}#mdanalysis-emeriti-core-developers).
13+
In this section we list major contributors who are currently devoting substantial effort to the roles listed below. This team organisation structure was started in November 2023; many people contributed to these tasks before then and may not appear in this table, in particular the [emeritus core developers]({{ site.url }}{% link about.md %}#mdanalysis-emeriti-core-developers).
1414

1515
Names are listed in *alphabetical* order.
1616

public/css/local.css

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,78 @@ but our YouTube videos seem to be natively widescreen.
4545
position: absolute;
4646
}
4747

48-
.wide-code pre {
49-
white-space: pre;
50-
overflow-x: auto;
51-
display: block;
52-
max-width: 100%;
48+
/* Sidebar Social Media Icons */
49+
50+
.sidebar-social-icons {
51+
display: flex;
52+
justify-content: flex-start;
53+
align-items: center;
54+
gap: 15px;
55+
margin-top: 20px;
56+
margin-bottom: 20px;
57+
width: 100%;
58+
text-align: left;
59+
}
60+
61+
/* Ensure sidebar social icons override sidebar link styles */
62+
.sidebar .sidebar-social-icons a {
63+
font-size: 24px !important;
64+
text-decoration: none !important;
65+
}
66+
67+
/* Apply white color to icons */
68+
.sidebar .sidebar-social-icons a[href*="linkedin.com"],
69+
.sidebar .sidebar-social-icons a[href*="discord.com"],
70+
.sidebar .sidebar-social-icons a[href*="github.com"] {
71+
color: #ffffff !important;
72+
}
73+
74+
/* Hover effect for icons */
75+
.sidebar .sidebar-social-icons a:hover {
76+
opacity: 0.8 !important;
77+
}
78+
79+
/* Fix Bluesky Icon Alignment */
80+
.sidebar-social-icons img {
81+
width: 24px;
82+
height: 24px;
83+
margin-bottom: -2px;
84+
object-fit: contain;
85+
transition: opacity 0.3s ease;
86+
}
87+
88+
.sidebar-social-icons img[src*="bluesky"] {
89+
filter: brightness(0) invert(1);
90+
}
91+
92+
.sidebar-social-icons img:hover {
93+
opacity: 0.8;
94+
}
95+
96+
.sidebar-search {
97+
display: flex;
98+
justify-content: flex-start;
99+
align-items: center;
53100
width: 100%;
101+
padding-left: 0;
102+
margin-left: -20px;
103+
margin-bottom: 20px;
54104
}
55105

106+
.sidebar-search-box {
107+
display: flex;
108+
align-items: center;
109+
width: 100%;
110+
max-width: 100%;
111+
text-align: left;
112+
margin-left: 0;
113+
padding-left: 0;
114+
}
115+
116+
#docsearch {
117+
width: 100%;
118+
max-width: 100%;
119+
text-align: left;
120+
margin-left: 0 !important;
121+
padding-left: 5px;
122+
}

public/images/bluesky.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)