Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • elixir/jekyll-elixir-theme
  • roland.krause/jekyll-elixir-theme
2 results
Show changes
Commits on Source (83)
Showing
with 615 additions and 61 deletions
title: ELIXIR.LU jekyll template
email: jacek.lebioda@uni.lu
description: >-
This gem contains a jekyll theme for the Luxembourgish ELIXIR Node's website
description: >-
This gem contains a jekyll theme for the Luxembourgish ELIXIR Node's website
footer-text: >-
This is a text in the footer
baseurl: ""
url: ""
url: ""
# Build settings
markdown: kramdown
\ No newline at end of file
markdown: kramdown
# GDPR banner settings
banner_title: >-
This website needs some cookies and similar means to function.
banner_text: >-
If you permit us, we will use those means to collect data on your visits for aggregated statistics to improve our service.
banner_accept_text: >-
Accept cookies for aggregated statistics
banner_refuse_text: >-
No thanks, only technically necessary cookies
doNotTrack_text: >-
Do Not Track is enabled
banner_more_text: >-
More information
cookies_expire: 180 # days
analyticsurl: https://analytics.lcsb.uni.lu/hub/
lapurl: https://analytics.lcsb.uni.lu/lap/
siteID: 4 # you get this siteID by sending an email to lcsb-r3@uni.lu
cookieName: lap
accept_all_text: >-
Aggregate statistics cookies accepted
only_necessary_text: >-
Only necessary cookies accepted
path_policy: privacy-policy
logo_policy: /assets/ELIXIR_LU.svg
timeout_hidebanner: 500 # milliseconds
cookieDomain: '*' # track visitors across all subdomains of a given domain; set to * to ignore
......@@ -5,8 +5,9 @@
<a href="{{ '/about-node/' | relative_url }}">About the Node</a>
</h3>
<ul>
<li><a href="{{ '/about-node/team' | relative_url }}">Team</a></li>
<li><a href="{{ '/about-node/team' | relative_url }}">Our team</a></li>
<li><a href="{{ '/about-node/collaborations' | relative_url }}">Collaborations</a></li>
<li><a href="{{ '/projects' | relative_url }}">Projects</a></li>
<li><a href="{{ '/about-node/funding-and-governance' | relative_url }}">Funding and governance</a></li>
<li><a href="{{ '/about-node/vacancies' | relative_url }}">Vacancies</a></li>
<li><a href="{{ '/contact' | relative_url }}">Contact</a></li>
......@@ -17,10 +18,11 @@
<a href="{{ '/services/' | relative_url }}">Services</a>
</h3>
<ul>
<li><a href="{{ '/sustainability-data/' | relative_url }}">Sustainability of data</a></li>
<li><a href="{{ '/sustainability-tools/' | relative_url }}">Sustainability of tools</a></li>
<li><a href="{{ '/gdpr-activities/' | relative_url }}">GDPR activities</a></li>
<li><a href="{{ '/gdpr-activities/' | relative_url }}">DAISY</a></li>
<li><a href="{{ '/services/catalog/data-hosting' | relative_url }}">Data hosting</a></li>
<li><a href="{{ '/services/catalog/daisy' | relative_url }}">DAISY</a></li>
<li><a href="{{ '/services/catalog/minerva' | relative_url }}">Disease maps</a></li>
<li><a href="{{ '/services/catalog/faircookbook' | relative_url }}">FAIR Cookbook</a></li>
<li><a href="{{ '/services/catalog/r3' | relative_url }}">R3</a></li>
</ul>
</div>
<div>
......@@ -34,11 +36,15 @@
</div>
<div>
<h3>
<a href="{{ '/privacy/' | relative_url }}">Privacy</a>
<a href="{{ '/privacy/' | relative_url }}">Privacy</a>
</h3>
<ul>
<li><a href="{{ '/privacy/cookies' | relative_url }}">Cookies</a></li>
<li><a href="{{ '/privacy/' | relative_url }}">Privacy policy</a></li>
<li><a href="{{ '/privacy/terms_of_use' | relative_url }}">Terms of use</a></li>
{% if site.siteID > 0 %}
{%- include policy.html -%}
{% endif %}
</ul>
</div>
<div>
......@@ -62,3 +68,7 @@
</div>
</div>
</footer>
{% if site.siteID > 0 %}
{%- include gdpr-banner.html -%}
{% endif %}
<div id="lap-cookies-banner">
<div class="banner-intro">
<div class="close-button">
<a class="lap-refuse"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="banner-img">
<img src="{{ site.logo_policy | relative_url }}" type="image/svg+xml" />
</div>
<div class="banner-title">{{ site.banner_title }}</div>
<div class="banner-text">{{ site.banner_text }}</div>
</div>
<div class="banner-buttons">
<a class="btn lap-accept">{{ site.banner_accept_text }}</a>
<a class="btn lap-refuse">{{ site.banner_refuse_text }}</a>
<a class="btn lap-cookies-more" href="{{ site.path_policy | relative_url }}">{{ site.banner_more_text }}</a>
</div>
</div>
\ No newline at end of file
......@@ -11,6 +11,7 @@
<li><a {% if page.section == 'About' %} class="active" {% endif %} href="{{ '/about-node' | relative_url }}">About</a></li>
<li><a {% if page.section == 'Services' %} class="active" {% endif %} href="{{ '/services' | relative_url }}">Services</a></li>
<li><a {% if page.section == 'Training' %} class="active" {% endif %} href="{{ '/training' | relative_url }}">Training</a></li>
<li><a {% if page.section == 'Projects' %} class="active" {% endif %} href="{{ '/projects' | relative_url }}">Projects</a></li>
<li><a {% if page.section == 'Events' %} class="active" {% endif %} href="{{ '/events' | relative_url }}">Events</a></li>
<li><a {% if page.section == 'News' %} class="active" {% endif %} href="{{ '/news' | relative_url }}">News</a></li>
<li><a {% if page.section == 'Contact' %} class="active" {% endif-%} href="{{ '/contact' | relative_url }}">Contact</a></li>
......
<li>
<a href="{{ '/privacy/cookies' | relative_url }}">
Cookies</a> -
<a href="javascript: showBanner();">
change settings</a>
<br>&nbsp;&nbsp;(<span id="gdpr-result-text"></span>)</span>
</li>
<li>
<span id="doNotTrack-text"></span>
</li>
\ No newline at end of file
......@@ -5,6 +5,26 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if site.siteID > 0 %}
<script>
const settings = {
expires: "{{ site.cookies_expire }}",
matomoURL: "{{ site.analyticsurl }}",
siteID: "{{ site.siteID }}",
accept_all_text: "{{ site.accept_all_text }}",
only_necessary_text: "{{ site.only_necessary_text }}",
doNotTrack_text: "{{ site.doNotTrack_text }}",
cookieName: "{{ site.cookieName }}",
bots: /bot|crawler|spider|crawling/i,
timeout_hidebanner: "{{ site.timeout_hidebanner }}",
cookieDomain: "{{ site.cookieDomain }}",
}
</script>
<script src="{{ site.lapurl }}/static/js/jquery.min.js"></script>
<script src="{{ site.lapurl }}/static/js/lap.js"></script>
<link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">
{%- endif -%}
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
<link rel="shortcut icon" href="{{ "/assets/favicon.png" | relative_url }}" />
<link type="text/css" rel="stylesheet" href="{{ "/assets/lato.css" | relative_url }}" media="all">
......
......@@ -15,7 +15,7 @@ layout: default
<div class="index-flex">
{% if page.introduction %}
<div class="index-gray-box">
<div class="index-box index-gray-box">
{{ page.introduction }}
</div>
{% endif %}
......@@ -36,7 +36,7 @@ layout: default
<div class="index-flex">
<a href="{{ '/events/' | relative_url }}">
<div class="index-box">
<div class="index-box index-smaller-gray-box">
<img src="{{ '/assets/buttons/index_events.jpg' | relative_url }}" alt="Events image" />
<div class="index-box-caption">
Events
......@@ -45,7 +45,7 @@ layout: default
</a>
<a href="{{ '/about-node/vacancies' | relative_url }}">
<div class="index-box">
<div class="index-box index-smaller-gray-box">
<img src="{{ '/assets/buttons/index_jobs.jpg' | relative_url }}" alt="Job vacancies image" />
<div class="index-box-caption">
Job vacancies
......@@ -54,7 +54,7 @@ layout: default
</a>
<a href="https://webdav-r3lab.uni.lu/public/elixir/website/pdf/ELIXIR-LU_Flyer_VF.pdf">
<div class="index-box">
<div class="index-box index-smaller-gray-box">
<img src="{{ '/assets/buttons/index_flyer.jpg' | relative_url }}" alt="Flyer image" />
<div class="index-box-caption">
Download flyer
......@@ -72,13 +72,13 @@ layout: default
{% for post in paginator.posts %}
<div class="post">
<a class="post-title" href="{{ post.url | relative_url }}">{{ post.title }}</a>
<br />
<span class="post-date">Published on: {{ post.date | date: '%B %d, %Y' }}</span>
<a class="post-title" href="{{ post.url | relative_url }}">{{ post.title }}</a>
<div class="content">
{{ post.content | truncate: 220 }} <a href="{{ post.url | relative_url }}">(read more)</a>
{{ post.content | strip_html | normalize_whitespace | truncate: 220 }} <a href="{{ post.url | relative_url }}">(read more)</a>
</div>
<span class="post-date">Published on: {{ post.date | date: '%B %d, %Y' }}</span>
</div>
{% endfor %}
......
......@@ -18,13 +18,16 @@ layout: default
</ul>
</div>
<div id="right-column">
<div id="right-column" {% if page.wider %}class="right-column-wider"{% endif %}>
<header>
<h1 {% if page.section contains "Events" %}class="no-caps"{% endif %} data-section="{{ page.section }}">
{{ page.title | escape }}
{% if page.date %}<small>({{ page.date | date: '%F' }})</small>{% endif %}
{% if page.section contains "Events" %}{% else %}{% if page.date %}<small>({{ page.date | date: '%F' }})</small>{% endif %}{% endif %}
</h1>
</header>
{% if page.image %}
<img class="event-small-image" src="{{ page.image | relative_url }}" />
{% endif %}
{{ content }}
</div>
......
---
layout: default
---
<article class="body-wrapper margin-wrapper">
<div id="left-column">
<h2>{{ page.section }}</h2>
<ul>
{%- for link in page.pages -%}
<li>
<a href="{{ link.href | relative_url }}"
class="{%- if link.active -%}active {%- endif -%}{%- if link.smaller -%}smaller {%- endif -%}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
<div id="right-column">
{{ content }}
</div>
</article>
......@@ -33,7 +33,7 @@ layout: default
<span class="post-date">Published on: {{ post.date | date: '%B %d, %Y' }}</span>
<div class="content">
{{ post.content | truncate: 220 }}
{{ post.content | strip_html | truncatewords: 52 }}
</div>
</div>
{% endfor %}
......
@import
"elixir/accordion",
"elixir/base",
"elixir/accordion",
"elixir/cards",
"elixir/eventinfo",
"elixir/footer",
"elixir/header",
"elixir/helpers",
"elixir/layout",
"elixir/responsive"
"elixir/responsive",
"elixir/services",
"elixir/lap"
;
......@@ -56,7 +56,7 @@
color: #2c3e50;
background: white;
transition: all .35s;
font-size: larger;
font-size: 16px;
}
}
}
......@@ -6,8 +6,14 @@
height: 175px;
}
.card-id {
width: 185px;
&.card-id-sab {
width: 220px;
border: 0;
}
width: 190px;
height: 350px;
border: solid 2px #e6e6e6;
border-radius: 7px 7px 0px 0px;
......@@ -17,22 +23,26 @@
.card-id-smallphoto img {
width: auto;
padding-left: 4px;
padding-bottom: 8px;
padding-bottom: 3px;
}
.card-id-photo img {
width: 120px;
padding-left: 4px;
padding-bottom: 8px;
margin: 0px auto;
display: block;
}
.card-id-name {
font-weight: 600;
font-size: 18px;
text-align: center;
}
.card-id-description {
font-size: 14px;
text-align: center;
}
}
}
......@@ -5,8 +5,9 @@
border: solid 2px rgb(2, 52, 82);
border-radius: 5px;
padding: 10px;
margin-bottom: 100px;
margin-left: 15px;
margin-bottom: 60px;
margin-left: 50px;
text-align: center;
span {
display: block;
......@@ -25,7 +26,31 @@
&:after {
content: ')';
}
font-size: smaller;
text-align: center;
}
.event-info-no-participants {
text-align: center;
}
.event-info-register-link {
a {
font-size: x-large;
color: $COLOR_LINK_ELIXIR;
text-align: center;
}
}
.event-info-image {
max-width: 220px;
margin-top: 40px;
border: solid 1px #f5f5f5;
}
}
.event-small-image {
max-width: 100px;
border: solid 1px #f5f5f5;
}
\ No newline at end of file
#site-footer-primary {
line-height: 1.5;
#site-footer-primary-wrapper {
background: #3e3e3e;
font-size: 0.875rem;
......@@ -40,6 +42,7 @@
width: auto;
float: none;
min-width: 0;
color: #ebebeb;
@media only screen and (max-width: $FOOTER_RESPONSIVENESS_THRESHOLD) {
padding-bottom: 9px;
......
......@@ -13,4 +13,26 @@
h1.no-caps {
text-transform: unset;
}
\ No newline at end of file
}
.no-underline {
text-decoration: none;
}
.nowrap {
white-space: nowrap;
}
.justify {
text-align:justify;
}
.center {
margin: 0 auto;
text-align: center;
}
.centercolumns {
justify-content: center;
column-gap: 15px;
}
$primary-color: #198cdc;
$background-color: #fff;
#lap-cookies-banner {
position: fixed;
bottom: 0;
background-color: $background-color;
padding-top: 1em;
padding-bottom: 1em;
z-index: 1000;
left: 0;
text-align: center;
border-top: 1px solid $primary-color;
width: 100%;
/* hidden by default */
transition : 180ms transform ease-out;
transform : translateY(+100%);
flex-direction: column;
&.shown {
transform : translateY(0);
transition : 150 transform ease-in;
}
.banner-intro {
width: 40%;
position: relative;
left: 30%;
text-align: left;
.lap-close {
opacity: 0.5;
display: inline-block;
width: 14px;
height: 14px;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
left: 5px;
content: ' ';
height: 15px;
width: 3px;
background-color: $primary-color;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
.banner-img {
width: 50px;
position: absolute;
padding-top: 5px;
height: 50px;
}
.banner-title {
font-size: 120%;
font-weight: bold;
text-align: left;
padding-left: 60px;
}
.banner-text {
min-height: 40px;
padding-left: 60px;
font-size: 80%;
text-align: left;
}
.banner-buttons {
padding-top: 25px;
margin-bottom: 10px;
.lap-accept,
.lap-refuse,
.lap-cookies-more,
.btn.active {
border: 1px solid $primary-color;
font-weight: bold;
background-color: $primary-color;
color: $background-color !important;
box-sizing: border-box;
transition: background-color 350ms ease-in-out;
}
.lap-accept:hover,
.lap-refuse:hover,
.lap-cookies-more:hover,
.btn.selected {
background: white;
color: $primary-color !important;
border: 1px solid currentColor;
box-sizing: border-box;
text-decoration: none;
}
}
.close-button {
position: absolute;
left: 100%;
cursor: pointer;
}
.btn {
text-decoration: none;
display: inline-block;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 3px 10px;
font-size: 9pt;
line-height: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.banner-checkboxes {
font-size: 80%;
margin-top: 1em;
}
.checkbox-label {
margin-left: 0.3em;
margin-right: 1.5em;
top: -0.2em;
position: relative;
}
@media(max-width: 500px) {
font-size: 80%;
.btn {
font-size: 80%;
}
.banner-intro {
width: 80%;
position: relative;
left: 10%;
text-align: left;
}
}
@media(max-width: 1000px) {
.banner-intro {
width: 80%;
position: relative;
left: 10%;
text-align: left;
}
}
}
......@@ -25,36 +25,34 @@
div.narrower-article-div {
.index-flex {
margin-top: 75px;
.index-gray-box {
padding: 20px;
border-radius: 6px;
.index-smaller-gray-box {
margin-right: 1%;
margin-left: 1%;
min-width: 200px;
background: #efefef;
border: 1px solid #ebebeb;
width: auto;
margin-right: 2%;
margin-bottom: 15px;
padding: 0px !important;
}
.index-photo {
border: solid 0 black;
.index-box {
flex-grow: 1;
margin-right: 2%;
margin-right: unquote("min(5%, 20px)");
margin-bottom: unquote("min(5%, 20px)");
border-radius: 0 0 12px 12px;
img {
width: -webkit-fill-available;
max-width: 100%;
min-width: 200px;
padding: 20px;
width: auto;
&.index-gray-box {
background: #efefef;
border: 1px solid #ebebeb;
}
}
.index-box {
flex-grow: 1;
margin-right: 2%;
margin-bottom: 2%;
border-radius: 0 0 12px 12px;
background: #efefef;
border: 1px solid #ebebeb;
&.index-white-box {
background: none;
border: 1px solid #ebebeb;
}
img {
width: 100%;
......@@ -71,6 +69,27 @@
}
}
}
.index-photo {
border: solid 0 black;
flex-grow: 1;
margin-right: 2%;
img {
width: -webkit-fill-available;
max-width: 510px;
min-width: 155px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
&.index-box img {
padding-top: 10px;
padding-bottom: 10px;
max-width: 160px;
}
}
}
}
......@@ -81,8 +100,9 @@
}
#right-column {
padding-left: 20px;
min-width: 220px;
padding-left: 40px;
padding-right: 20px;
min-width: 240px;
margin-top: 23px;
}
......@@ -169,21 +189,36 @@ table {
}
div.post {
width: 80%;
border-left: solid 5px #f4f4f4;
border-bottom: solid 2px #f4f4f4;
padding-left: 10px;
border-left: solid 20px #f4f4f4;
border-bottom: solid 6px #f4f4f4;
padding-left: 15px;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 30px;
margin-bottom: 35px;
line-height: 23px;
.post-title {
font-size: 23px;
font-size: 14pt;
text-decoration: none;
font-weight: 600;
display: block;
margin-bottom: 5px;
}
.content {
font-size: 15px;
font-weight: 500;
}
.post-date {
font-size: smaller;
font-weight: 200;
color: #3c3c3c;
display: block;
margin-top: 8px;
padding-top: 2px;
padding-bottom: 1px;
border-top: solid 1px #fbf4f4;
}
}
......
......@@ -84,6 +84,9 @@ $HD_RES: 1930px;
div#right-column {
width: calc(65% - 240px);
}
div#right-column.right-column-wider {
width: calc(87% - 240px);
}
}
@media only screen and (min-width: $HD_RES) {
......@@ -97,4 +100,7 @@ $HD_RES: 1930px;
div#right-column {
width: calc(60% - 240px);
}
div#right-column.right-column-wider {
width: calc(80% - 240px);
}
}
div.services-menu {
width: 95%;
margin: 18px auto;
border-style: solid;
border-color: transparent;
border-width: 3px;
border-radius: 15px;
text-align: center;
&:hover {
box-shadow: 2px 2px 2px;
background: #1a252f;
font-weight: bold;
}
& a.entry {
display: block;
font-size: 23px;
color: white;
padding: 19px;
}
& a.subtitle {
color: white;
display: block;
padding-bottom: 6px;
text-decoration: none;
font-size: 14px;
margin-bottom: 10px;
}
}
ul.services-navbar {
margin:0;
padding:0;
font-size:smaller;
& li {
display:inline;
&.active {
color:#f47d22;
}
}
& li a {
text-decoration: none;
}
}
a.services-button {
background-color: #4c7aa7;
text-decoration: none;
text-align: center;
color: white;
display: block;
border: solid transparent 1px;
border-radius: 10px;
padding: 12px;
&:hover {
box-shadow: 2px 2px 2px black;
font-weight: bold;
color: white;
}
}
.services-menu-button {
background-color: #35506b;
border-radius: 15px;
min-width: 200px;
color: white;
padding: 25px 30px;
text-decoration: none;
display: inline-block;
margin: auto;
margin-left: 15px;
margin-bottom: 10px;
&:hover {
box-shadow: 2px 2px 2px black;
font-weight: bold;
color: white;
}
}
/**
* Services catalog boxes
*/
div.service-box-container {
display: flex;
width: 94%;
border: solid 2px transparent;
border-radius: 15px;
margin: 30px auto;
padding:15px;
&:nth-child(even) {
background-color: #4c7aa7;
}
&:nth-child(odd) {
background-color: #35506b;
}
& div.service-logos {
background-color: white;
text-align: center;
margin: 25px 10px;
width: 28%;
height: fit-content;
border-radius: 10px;
padding: 2%;
&:hover {
box-shadow: 3px 3px 2px;
}
& div.header-underline {
border-bottom: 2px #f47d21 solid;
}
& a.logo-header {
display: inline-block;
width: 90%;
padding: 6px;
font-size: 19px;
color: #2c3e50;
text-decoration: none;
}
& .logo-image {
border: solid 10px transparent;
width: 90%;
}
}
& .description-right-column {
text-align: justify;
color: aliceblue;
width: 68%;
margin: 3px;
}
& p.description-content {
color: white;
margin: 20px 15px 10px 10px;
}
& a.read-more {
text-decoration: none;
color: #2c3e50;
}
& p.read-more-button{
background-color: aliceblue;
text-align: center;
font-weight: bold;
font-size: 15px;
width: 25%;
margin: 20px auto 5px;
border: solid lightgray 1px;
border-radius: 10px;
padding: 10px;
&:hover {
box-shadow: 3px 3px 2px;
}
}
}