Skip to content

Commit 1ce7612

Browse files
georgiesamahageorgiesamaha
committed
Home: reduce and reorganise buttons
1 parent 68c3a27 commit 1ce7612

5 files changed

Lines changed: 98 additions & 78 deletions

File tree

‎_includes/section-navigation-tiles_mod.html‎

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -20,65 +20,3 @@ <h3 class="page-tile-title" style="margin-top: 0.0rem">{{ page.title }}</h3>
2020
</div>
2121
</div>
2222

23-
<style>
24-
25-
.page-tiles-list {
26-
display: grid;
27-
grid-template-columns: repeat(var(--tile-cols, 4), 1fr);
28-
gap: 20px;
29-
}
30-
31-
@media (max-width: 992px) {
32-
.page-tiles-list {
33-
grid-template-columns: repeat(2, 1fr);
34-
}
35-
}
36-
37-
@media (max-width: 600px) {
38-
.page-tiles-list {
39-
grid-template-columns: repeat(1, 1fr);
40-
}
41-
}
42-
43-
.page-tile-link {
44-
text-decoration: none;
45-
color: inherit;
46-
display: flex;
47-
}
48-
49-
.page-tile-item {
50-
border-radius: 12px;
51-
padding: 25px;
52-
transition: all 0.3s ease;
53-
background: #f0f3fa;
54-
width: 100%;
55-
display: flex;
56-
flex-direction: column;
57-
justify-content: space-between;
58-
border: 1px solid #ffffff;
59-
color: #012152;
60-
}
61-
62-
.page-tile-item:hover {
63-
background: #012152;
64-
color: #ffffff;
65-
transform: translateY(-4px);
66-
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
67-
border: 1px solid #000000;
68-
}
69-
70-
.page-tile-title {
71-
color: inherit;
72-
font-size: 1.3rem;
73-
font-weight: 600;
74-
margin-bottom: 8px;
75-
}
76-
77-
.page-tile-description {
78-
color: inherit;
79-
font-size: 0.9rem;
80-
line-height: 1.5;
81-
flex-grow: 1;
82-
}
83-
84-
</style>

‎_includes/tiles-simple.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
<a href="{{ item.url | relative_url }}" class="simple-tile-link">
1212
<div class="simple-tile-item">
1313
<div class="simple-tile-content">
14-
<p class="simple-tile-title" style="font-size: 1.3rem; text-align: center">{{ item.title }}</p>
14+
<p class="simple-tile-title" style="font-size: 1.3rem; text-align: left"><strong>{{ item.title }}</strong></p>
15+
{%- if item.description %}
16+
<p class="simple-tile-description">{{ item.description }}</p>
17+
{%- endif %}
1518
</div>
1619
</div>
1720
</a>
@@ -52,9 +55,17 @@
5255

5356
.simple-tile-title {
5457
color: inherit;
55-
font-weight: 400;
58+
font-weight: 700;
5659
margin-top: 0px;
60+
margin-bottom: 6px;
61+
}
62+
63+
.simple-tile-description {
64+
color: inherit;
65+
font-size: 0.9rem;
66+
text-align: left;
5767
margin-bottom: 0px;
68+
opacity: 0.85;
5869
}
5970

6071
</style>

‎_sass/_custom_classes.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,69 @@ h2 {
3636
/*-----Copied and adapted from https://github.com/elixir-europe/infectious-diseases-toolkit/blob/main/_sass/_custom_classes.scss-----*/
3737
/*-----Section navigation tiles-----*/
3838

39+
/*-----Page tiles (section-navigation-tiles_mod.html)-----*/
40+
41+
.page-tiles-list {
42+
display: grid;
43+
grid-template-columns: repeat(var(--tile-cols, 4), 1fr);
44+
gap: 20px;
45+
}
46+
47+
@media (max-width: 992px) {
48+
.page-tiles-list {
49+
grid-template-columns: repeat(2, 1fr);
50+
}
51+
}
52+
53+
@media (max-width: 600px) {
54+
.page-tiles-list {
55+
grid-template-columns: repeat(1, 1fr);
56+
}
57+
}
58+
59+
.page-tile-link {
60+
text-decoration: none;
61+
color: inherit;
62+
display: flex;
63+
}
64+
65+
.page-tile-item {
66+
border-radius: 12px;
67+
padding: 25px;
68+
transition: all 0.3s ease;
69+
background: #f0f3fa;
70+
width: 100%;
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: space-between;
74+
border: 1px solid #ffffff;
75+
color: #012152;
76+
77+
&:hover {
78+
background: #012152;
79+
color: #ffffff;
80+
transform: translateY(-4px);
81+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
82+
border: 1px solid #000000;
83+
}
84+
}
85+
86+
.page-tile-title {
87+
color: inherit;
88+
font-size: 1.3rem;
89+
font-weight: 600;
90+
margin-bottom: 8px;
91+
}
92+
93+
.page-tile-description {
94+
color: inherit;
95+
font-size: 0.9rem;
96+
line-height: 1.5;
97+
flex-grow: 1;
98+
}
99+
100+
/*-----Section navigation tiles-----*/
101+
39102
.navigation-tiles {
40103
.card:hover {
41104
box-shadow: $box-shadow;

‎index.md‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ sidebar: false
1717

1818
<div class="page-tiles">
1919
<div class="page-tiles-container">
20-
<div class="page-tiles-list" style="--tile-cols: 3;">
20+
<div class="page-tiles-list" style="--tile-cols: 2;">
2121
<a href="{{ 'why-bioshell' | relative_url }}" class="page-tile-link">
2222
<div class="page-tile-item">
2323
<div class="page-tile-content">
@@ -42,16 +42,19 @@ sidebar: false
4242
</div>
4343
</div>
4444
</a>
45+
<a href="{{ 'using-bioshell' | relative_url }}" class="page-tile-link">
46+
<div class="page-tile-item">
47+
<div class="page-tile-content">
48+
<h3 class="page-tile-title" style="margin-top: 0.0rem">Use BioShell</h3>
49+
<p class="page-tile-description">Instructions for using software, moving data, running workflows.</p>
50+
</div>
51+
</div>
52+
</a>
4553
</div>
4654
</div>
4755
</div>
4856

4957

50-
## Using BioShell
51-
52-
{% include section-navigation-tiles_mod.html type="Using BioShell" col="3" %}
53-
54-
5558
## Support
5659

5760
<div class="row row-cols-1 row-cols-md-4 g-4 my-3">
@@ -99,7 +102,7 @@ sidebar: false
99102

100103
As part of the [acceptable use policy and service terms](aup#acknowledging-the-service) for accessing BioShell, you need to acknowledge use of BioShell in relevant research, training, and innovation outputs using the format:
101104

102-
> "This work is supported by BioShell, a service provided by Australian BioCommons and its partners. The service receives NCRIS funding through Bioplatforms Australia as well as The University of Sydney"
105+
> "This work is supported by BioShell, a service provided by Australian BioCommons and Sydney Informatics Hub, University of Sydney. BioShell is funded by NCRIS via Bioplatforms Australia. The authors acknowledge the technical assistance provided by the Sydney Informatics Hub, a Core Research Facility of the University of Sydney and the Australian BioCommons which is enabled by NCRIS via Bioplatforms Australia."
103106
104107
## How to cite
105108

‎pages/using-bioshell.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
---
22
title: Using BioShell
3-
description: Overview of BioShell's core features — tools, interactive environments, reference data, and workflow integration.
3+
description: Overview of BioShell's core features- tools, interactive environments, reference data, and workflow integration.
44
tiles:
5-
- title: "Choose a flavour"
5+
- title: "Choose the right environment"
66
url: /flavours
7+
description: "Select the BioShell flavour that best fits your analysis needs."
78
- title: "Connect to BioShell"
89
url: /connecting
10+
description: "Learn how to access BioShell via SSH, web portal, or other methods."
911
- title: "Use BioShell tool library"
1012
url: /tools
13+
description: "Browse and load the curated collection of bioinformatics tools."
14+
- title: "Use Shelley"
15+
url: /shelley-howto
16+
description: "Get help from Shelley, BioShell's command-line AI companion."
1117
- title: "Work in Jupyter or RStudio"
1218
url: /interactive
13-
- title: "Run a Nextflow workflow using BioShell containers"
19+
description: "Launch interactive coding environments for Python and R."
20+
- title: "Run a Nextflow workflow"
1421
url: /nextflow
22+
description: "Execute reproducible pipelines using BioShell's container stack."
1523
---
1624

17-
Once you are connected to your BioShell environment, you have access to a curated library
18-
of bioinformatics tools, interactive coding environments, and an AI-assisted support agent.
19-
20-
#### Use the tiles below to find what you need
25+
BioShell users have access to a curated library of bioinformatics tools, interactive coding environments, and a helpful command-line companion. See our user guides for detailed information on the services offered by BioShell.
2126

2227
{% include tiles-simple.html target = "tiles" col = "2" %}
2328

0 commit comments

Comments
 (0)