Skip to content

Commit ccdbeba

Browse files
tlitfintlitfin
committed
Consolidate stylesheet for activities tiles
1 parent 0b51db8 commit ccdbeba

2 files changed

Lines changed: 31 additions & 151 deletions

File tree

‎_includes/section-navigation-tiles_mod.html‎

Lines changed: 7 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@
1010
<div class="page-tiles-list">
1111
{%- for page in pages_to_add_as_tiles -%}
1212
{%- if page.type == include.type %}
13-
{%- if page.roadmap_category == "none" %}
1413
<a href="{{ page.url | relative_url }}" class="page-tile-link">
15-
<div class="page-tile-item">
14+
<div class="page-tile-item page-tile-item-{{ page.roadmap_category | default: none }}">
1615
<div class="page-tile-content">
1716
<h3 class="page-tile-title" style="margin-top: 0.0rem">{{ page.title }}</h3>
1817
{% if page.description %}
@@ -22,55 +21,6 @@ <h3 class="page-tile-title" style="margin-top: 0.0rem">{{ page.title }}</h3>
2221
</div>
2322
</a>
2423
{% endif %}
25-
{%- if page.roadmap_category == "D1" %}
26-
<a href="{{ page.url | relative_url }}" class="page-tile-link">
27-
<div class="page-tile-item-D1">
28-
<div class="page-tile-content">
29-
<h3 class="page-tile-title">{{ page.title }}</h3>
30-
{% if page.description %}
31-
<p class="page-tile-description">{{ page.description }}</p>
32-
{% endif %}
33-
</div>
34-
</div>
35-
</a>
36-
{% endif %}
37-
{%- if page.roadmap_category == "D2" %}
38-
<a href="{{ page.url | relative_url }}" class="page-tile-link">
39-
<div class="page-tile-item-D2">
40-
<div class="page-tile-content">
41-
<h3 class="page-tile-title">{{ page.title }}</h3>
42-
{% if page.description %}
43-
<p class="page-tile-description">{{ page.description }}</p>
44-
{% endif %}
45-
</div>
46-
</div>
47-
</a>
48-
{% endif %}
49-
{%- if page.roadmap_category == "D3" %}
50-
<a href="{{ page.url | relative_url }}" class="page-tile-link">
51-
<div class="page-tile-item-D3">
52-
<div class="page-tile-content">
53-
<h3 class="page-tile-title">{{ page.title }}</h3>
54-
{% if page.description %}
55-
<p class="page-tile-description">{{ page.description }}</p>
56-
{% endif %}
57-
</div>
58-
</div>
59-
</a>
60-
{% endif %}
61-
{%- if page.roadmap_category == "D4" %}
62-
<a href="{{ page.url | relative_url }}" class="page-tile-link">
63-
<div class="page-tile-item-D4">
64-
<div class="page-tile-content">
65-
<h3 class="page-tile-title">{{ page.title }}</h3>
66-
{% if page.description %}
67-
<p class="page-tile-description">{{ page.description }}</p>
68-
{% endif %}
69-
</div>
70-
</div>
71-
</a>
72-
{% endif %}
73-
{% endif %}
7424
{%- endfor -%}
7525
</div>
7626
</div>
@@ -99,93 +49,35 @@ <h3 class="page-tile-title">{{ page.title }}</h3>
9949
display: flex;
10050
flex-direction: column;
10151
justify-content: space-between;
52+
border: 1px solid #ffffff;
53+
}
54+
55+
.page-tile-item-none {
56+
background: #9c9c9c;
10257
}
10358

10459
.page-tile-item-D1 {
105-
border-radius: 12px;
106-
padding: 25px;
107-
transition: all 0.3s ease;
10860
background: #a4c2f4ff;
109-
width: 100%;
110-
display: flex;
111-
flex-direction: column;
112-
justify-content: space-between;
11361
}
11462

11563
.page-tile-item-D2 {
116-
border-radius: 12px;
117-
padding: 25px;
118-
transition: all 0.3s ease;
11964
background: #6d9eebff;
120-
width: 100%;
121-
display: flex;
122-
flex-direction: column;
123-
justify-content: space-between;
12465
}
12566

12667
.page-tile-item-D3 {
127-
border-radius: 12px;
128-
padding: 25px;
129-
transition: all 0.3s ease;
13068
background: #1155ccff;
131-
width: 100%;
132-
display: flex;
133-
flex-direction: column;
134-
justify-content: space-between;
13569
}
13670

13771
.page-tile-item-D4 {
138-
border-radius: 12px;
139-
padding: 25px;
140-
transition: all 0.3s ease;
14172
background: #1c4587ff;
142-
width: 100%;
143-
display: flex;
144-
flex-direction: column;
145-
justify-content: space-between;
14673
}
14774

14875
.page-tile-item:hover {
14976
transform: translateY(-4px);
15077
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
15178
border: 1px solid #000000;
15279
}
153-
154-
.page-tile-item-D1:hover {
155-
transform: translateY(-4px);
156-
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
157-
border: 1px solid #000000;
158-
}
159-
160-
.page-tile-item-D2:hover {
161-
transform: translateY(-4px);
162-
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
163-
border: 1px solid #000000;
164-
}
165-
166-
.page-tile-item-D3:hover {
167-
transform: translateY(-4px);
168-
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
169-
border: 1px solid #000000;
170-
}
171-
172-
.page-tile-item-D4:hover {
173-
transform: translateY(-4px);
174-
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
175-
border: 1px solid #000000;
176-
}
177-
178-
.page-tile-roadmap {
179-
display: inline-block;
180-
font-size: 0.7rem;
181-
font-weight: 700;
182-
padding: 4px 10px;
183-
background-color: #eef2f9;
184-
color: #141414;
185-
border-radius: 20px;
186-
margin-bottom: 6px;
187-
}
188-
80+
18981
.page-tile-title {
19082
color: #ffffff;
19183
font-size: 1.3rem;

‎pages/activities.md‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,74 +5,62 @@ page_id: activities
55
toc: false
66
---
77

8-
<div class="legend-item-1">
8+
<div class="legend-item legend-item-1">
99
<div class="legend-tile-content-1">
1010
<p class="legend-title" style="text-align: center">Roadmap deliverable 1: An Australian Structural Biology community space capable of fostering collaboration and knowledge sharing</p>
1111
</div>
1212
</div>
13-
<div class="legend-item-2">
13+
<div class="legend-item legend-item-2">
1414
<div class="legend-tile-content-2">
1515
<p class="legend-title" style="text-align: center">Roadmap deliverable 2: A computational structural biology training program, developed in conjunction with the community</p>
1616
</div>
1717
</div>
18-
<div class="legend-item-3">
18+
<div class="legend-item legend-item-3">
1919
<div class="legend-tile-content-3">
2020
<p class="legend-title" style="text-align: center">Roadmap deliverable 3: A shared platform, or platforms, for computational structural biology</p>
2121
</div>
2222
</div>
23-
<div class="legend-item-4">
23+
<div class="legend-item legend-item-4">
2424
<div class="legend-tile-content-4">
2525
<p class="legend-title" style="text-align: center">Roadmap deliverable 4: Alignment, adoption and contribution to global best-practice efforts</p>
2626
</div>
2727
</div>
2828

2929
<style>
3030

31+
.legend-item {
32+
border: 1px solid #e0e0e0;
33+
border-radius: 12px;
34+
width: 90%;
35+
background: #a4c2f4ff;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: space-between;
39+
margin-bottom: 2px;
40+
margin: auto;
41+
}
42+
3143
.legend-item-1 {
32-
border: 1px solid #e0e0e0;
33-
border-radius: 12px;
34-
width: 90%;
35-
background: #a4c2f4ff;
36-
display: flex;
37-
flex-direction: column;
38-
justify-content: space-between;
44+
background: #a4c2f4ff;;
3945
}
4046

4147
.legend-item-2 {
42-
border: 1px solid #e0e0e0;
43-
border-radius: 12px;
44-
width: 90%;
45-
background: #6d9eebff;
46-
display: flex;
47-
flex-direction: column;
48-
justify-content: space-between;
48+
background: #6d9eebff;
4949
}
5050

5151
.legend-item-3 {
52-
border: 1px solid #e0e0e0;
53-
border-radius: 12px;
54-
width: 90%;
55-
background: #1155ccff;
56-
display: flex;
57-
flex-direction: column;
58-
justify-content: space-between;
52+
background: #1155ccff;
5953
}
6054

6155
.legend-item-4 {
62-
border: 1px solid #e0e0e0;
63-
border-radius: 12px;
64-
width: 90%;
65-
background: #1c4587ff;
66-
display: flex;
67-
flex-direction: column;
68-
justify-content: space-between;
56+
background: #1c4587ff;
6957
}
7058

7159
.legend-title {
72-
color: #ffffff;
73-
font-size: 0.8rem;
74-
font-weight: 600;
75-
margin-bottom: 0px;
60+
color: #ffffff;
61+
font-size: 0.9rem;
62+
font-weight: 600;
63+
margin: 4px;
7664
}
7765

7866
</style>

0 commit comments

Comments
 (0)