Skip to content

Commit 70bfba2

Browse files
bedroesbbedroesb
authored
Align RDMkit styling and dependencies with ELIXIR Toolkit theme main (#1868)
* fix broken CSS * update deps * add fitting transition to landing page tiles
1 parent 0600b29 commit 70bfba2

5 files changed

Lines changed: 74 additions & 51 deletions

File tree

‎Gemfile‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1-
source 'https://rubygems.org'
1+
source "https://rubygems.org"
22

3-
gem 'elixir-toolkit-theme-plugins', '~> 1.1.0'
4-
gem "webrick", "~> 1.9.1"
3+
gem "elixir-toolkit-theme-plugins", "1.2.0"
4+
gem "webrick", "~> 1.9.2"
55
gem "jekyll", "~> 4.4.1"
66
gem "jemoji", "~> 0.13.0"
77
gem "kramdown-parser-gfm", "~> 1.1"
8-
gem 'jekyll-octicons'
98
gem "csv"
109

1110
group :jekyll_plugins do
12-
gem 'jekyll-redirect-from', '~> 0.16.0'
13-
gem 'jekyll-sitemap', '~> 1.4'
14-
gem 'jekyll-github-metadata', '~> 2.16.0'
15-
gem 'jekyll-relative-links', '~> 0.7.0'
16-
gem 'jekyll-seo-tag', '~> 2.8'
17-
gem 'jekyll-remote-theme', '~> 0.4.3'
18-
gem 'jekyll-sass-converter', '~> 2.0'
19-
gem 'jekyll-scholar', '~> 7.1.3'
20-
gem 'jekyll-octicons'
11+
gem "jekyll-redirect-from", "~> 0.16.0"
12+
gem "jekyll-sitemap", "~> 1.4"
13+
gem "jekyll-github-metadata", "~> 2.16.0"
14+
gem "jekyll-relative-links", "~> 0.8.0"
15+
gem "jekyll-seo-tag", "~> 2.8"
16+
gem "jekyll-remote-theme", "~> 0.5.2"
17+
gem "jekyll-sass-converter", "~> 3.1"
18+
gem "jekyll-scholar", "~> 7.1.3"
19+
gem "jekyll-octicons"
2120
end

‎_config.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ dsw_deep_link_prefix: https://researchers.dsw.elixir-europe.org/knowledge-models
2222

2323
theme_variables:
2424
dev-info-banner: true
25-
topnav:
26-
theme: dark
2725
theme_color: c23669
2826
fonts:
2927
- https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap

‎_sass/_custom_classes.scss‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
}
4545
#sidebar>nav .sidebar-title-wrapper {
4646
background: $white;
47-
}
47+
}
4848
}
4949

5050
#main {
@@ -88,11 +88,17 @@
8888
/* -----Homepage----- */
8989

9090
.landingpage, .ways-to-contribute {
91-
.card {
92-
&:hover {
91+
.card,
92+
.landing-tile {
93+
transition: $transition-base;
94+
95+
&:hover,
96+
&:focus-within {
9397
box-shadow: $box-shadow;
9498
}
99+
}
95100

101+
.card {
96102
.card-img-top {
97103
width: unset;
98104
padding: $card-spacer-x $card-spacer-x 0 $card-spacer-x;
@@ -170,10 +176,6 @@ section#search-section {
170176

171177
.navbar-nav .nav-item > a {
172178
white-space: nowrap;
173-
&.active {
174-
background-color: $primary;
175-
border-radius: $border-radius;
176-
}
177179
}
178180

179181
/*-----Better tools-----*/
@@ -184,48 +186,73 @@ section#search-section {
184186

185187
/*-----New Icons-----*/
186188

187-
// Calender
188-
i.far.fa-calendar {
189+
.landingpage #search-label {
190+
background-color: $white;
191+
}
192+
193+
i.icon-search {
194+
display: inline-block;
195+
background: url("../img/section-icons/search.svg") center no-repeat;
196+
width: 30px;
197+
height: 30px;
198+
199+
&:before {
200+
content: "" !important;
201+
}
202+
}
203+
204+
// Calendar
205+
.news-timeline-date i.icon-calendar,
206+
.event-card-icon i.icon-calendar {
207+
display: inline-block;
189208
background: url("../img/section-icons/calendar.svg") center no-repeat;
190209
width: 17px;
191210
height: 17px;
192211
margin-bottom: -2px;
212+
193213
&:before {
194214
content: "";
195215
}
196216
}
197217

198-
i.fa-solid.fa-map-marker-alt {
218+
// Map pin
219+
.event-card-date i.icon-map-pin {
220+
display: inline-block;
199221
background: url("../img/section-icons/pin.svg") center no-repeat;
200222
width: 17px;
201223
height: 17px;
202224
margin-bottom: -2px;
225+
203226
&:before {
204227
content: "";
205228
}
206229
}
207230

208-
// Fork
209-
i.fa-solid.fa-code-branch {
231+
// Git branch
232+
.news-timeline-date i.icon-git-branch {
233+
display: inline-block;
210234
background: url("../img/section-icons/git.svg") center no-repeat;
211235
width: 20px;
212236
height: 20px;
213237
margin-bottom: -2.5px;
238+
214239
&:before {
215240
content: "";
216241
}
217242
}
218243

219-
// Search
220-
.landingpage #search-label {
221-
background-color: $white;
244+
/*-----News and events-----*/
245+
246+
.news-timeline-date {
247+
.news-metadata-item {
248+
flex: 0 0 auto;
249+
white-space: nowrap;
250+
}
222251
}
223-
i.fa-solid.fa-magnifying-glass {
224-
background: url("../img/section-icons/search.svg") center no-repeat;
225-
width: 30px;
226-
height: 30px;
227-
&:before {
228-
content: "";
252+
253+
.event-card-date {
254+
time {
255+
white-space: nowrap;
229256
}
230257
}
231258

‎_sass/_custom_variables.scss‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,30 @@ $font-family-theme: "Exo 2", sans-serif;
44

55
/*-----Top navigation-----*/
66
$topnav-bg: $dark;
7+
$topnav-title-color: $white;
78
$topnav-brand-height: 40px;
8-
9-
/*-----More information tiles-----*/
10-
$info-card-bg: $light;
11-
$info-card-color: $dark;
12-
$info-card-bg-hover: $primary;
13-
$info-card-color-hover: $white;
9+
$topnav-link-color: $white;
10+
$topnav-link-color-active: $white;
11+
$topnav-link-bg-active: $primary;
12+
$topnav-break-color: rgba($white, 0.50);
1413

1514
/*-----Sidebar-----*/
1615
$sidebar-title-bg: $light;
16+
$sidebar-link-bg-active: rgba($primary, 0.1);
1717

1818
/*-----Page metadata-----*/
1919
$page-metadata-bg: rgba($blue, 0.1);
2020

2121
/*-----Section navigation tiles-----*/
22-
$nav-card-bg: $light;
23-
$nav-card-color: $dark;
2422
$nav-card-bg-hover: $light;
25-
$nav-card-color-hover: $dark;
23+
$nav-card-arrow-bg: rgba($primary, 0.1);
2624

2725
/*-----Footer-----*/
2826
$footer-bg: $dark;
2927
$footer-color: $white;
3028
$footer-link-color: $white;
29+
$footer-link-color-hover: $primary;
3130
$footer-copyright-bg: #00000033;
31+
$footer-ett: $white;
32+
3233

33-
/*-----Events & news-----*/
34-
$news-border-color: $dark;

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h2 class="no-anchor text-center mb-3">What can we help you find?</h2>
2323
<div class="position-relative">
2424
<div class="d-flex justify-content-center">
2525
<form role="search" class="input-group">
26-
<span class="input-group-text" id="search-label"><i class="fa-solid fa-magnifying-glass"></i></span>
26+
<span class="input-group-text" id="search-label"><i class="icon-search"></i></span>
2727
<input type="search" id="search-input" class="search-input form-control form-control-lg bg-white" tabindex="0"
2828
placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
2929
</form>
@@ -116,7 +116,7 @@ <h2 class="mb-3">RDMkit in numbers</h2>
116116
{%- assign tools = site.data.tool_and_resource_list -%}
117117
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 mb-3">
118118
<div class="col">
119-
<div class="bg-white d-flex align-items-center rounded p-3 text-center h-100">
119+
<div class="landing-tile bg-white d-flex align-items-center rounded p-3 text-center h-100">
120120
<div class="row g-1 flex-grow-1">
121121
<div class="col-7">
122122
<span class="count-number text-primary">{{allcontributors.size}}</span>
@@ -130,7 +130,7 @@ <h2 class="mb-3">RDMkit in numbers</h2>
130130
</div>
131131
</div>
132132
<div class="col">
133-
<div class="bg-white d-flex align-items-center rounded p-3 text-center h-100">
133+
<div class="landing-tile bg-white d-flex align-items-center rounded p-3 text-center h-100">
134134
{%- assign national_tools = 0 %}
135135
{%- assign country_pages = site.pages | where: "type", "national_resources" | where:
136136
"search_exclude", false %}
@@ -150,7 +150,7 @@ <h2 class="mb-3">RDMkit in numbers</h2>
150150
</div>
151151
</div>
152152
<div class="col">
153-
<div class="bg-white d-flex align-items-center rounded p-3 text-center h-100">
153+
<div class="landing-tile bg-white d-flex align-items-center rounded p-3 text-center h-100">
154154
{%- assign content_pages = site.pages | where: "search_exclude", false %}
155155
<div class="row g-1 flex-grow-1">
156156
<div class="col-7">

0 commit comments

Comments
 (0)