Commit 32251128 authored by Jacek Lebioda's avatar Jacek Lebioda

Develop

parent 3f729188
# elixir-theme
Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
## Release history
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
### version 0.2.0
Added responsiveness
TODO: Delete this and the text above, and describe your gem
### version 0.1.0
Initial theme
## Installation
......@@ -29,13 +31,6 @@ Or install it yourself as:
$ gem install elixir-theme
## Usage
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
## Development
......@@ -47,6 +42,4 @@ When your theme is released, only the files in `_layouts`, `_includes`, `_sass`
To add a custom directory to your theme-gem, please edit the regexp in `elixir-theme.gemspec` accordingly.
## License
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
Apache2
<footer id="site-footer-primary">
<div id="site-footer-primary-wrapper">
<footer id="site-footer-primary">
<div id="site-footer-primary-wrapper" class="margin-wrapper flex">
<div>
<h3>About the Node</h3>
<h3>
<a href="{{ '/about-node/' | relative_url }}">About the Node</a>
</h3>
<ul>
<li><a href="{{ site.baseurl }}/about-node/team">Team</a></li>
<li><a href="{{ site.baseurl }}/about-node/collaborations">Collaborations</a></li>
<li><a href="{{ site.baseurl }}/about-node/funding-and-governance">Funding and governance</a></li>
<li><a href="{{ site.baseurl }}/about-node/vacancies">Vacancies</a></li>
<li><a href="{{ site.baseurl }}/contact">Contact</a></li>
<li><a href="{{ '/about-node/team' | relative_url }}">Team</a></li>
<li><a href="{{ '/about-node/collaborations' | relative_url }}">Collaborations</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>
</ul>
</div>
<div>
<h3>Services</h3>
<h3>
<a href="{{ '/services/' | relative_url }}">Services</a>
</h3>
<ul>
<li><a href="#">Sustainability of data</a></li>
<li><a href="#">Sustainability of tools</a></li>
<li><a href="#">GDPR activities</a></li>
<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="{{ '/data-information-system-daisy/' | relative_url }}">DAISY</a></li>
</ul>
</div>
<div>
<h3>Events</h3>
<h3>
<a href="{{ '/events/' | relative_url }}">Events</a>
</h3>
<ul>
<li><a href="#">Workshops and courses</a></li>
<li><a href="#">Meetings and conferences</a></li>
<li><a href="{{ '/events/workshops_and_courses' | relative_url }}">Workshops and courses</a></li>
<li><a href="{{ '/events/meetings_and_conferences' | relative_url }}">Meetings and conferences</a></li>
</ul>
</div>
<div>
<a href="http://www.elixir-europe.org" title="ELIXIR">
<img src="https://elixir-europe.org/system/files/white-orange-logo.png" alt="Elixir logo" width="150px" />
<h3>
<a href="{{ '/privacy/' | relative_url }}">Privacy</a>
</h3>
<ul>
<li><a href="{{ '/privacy/cookies' | relative_url }}">Cookies</a></li>
<li><a href="{{ '/privacy/terms_of_use' | relative_url }}">Terms of use</a></li>
</ul>
</div>
<div>
<a href="http://www.elixir-europe.org" title="ELIXIR Europe's web site">
<img src="{{ 'assets/ELIXIR_EU.png' | relative_url }}" title="ELIXIR Europe logo" alt="ELIXIR Europe logo" width="150px" class="site-footer-primary-logo" />
</a>
</div>
</div>
</footer>
<footer id="site-footer-secondary">
<div id="site-footer-secondary-wrapper">
<div id="site-footer-secondary-wrapper" class="margin-wrapper flex">
<div id="copyright">
<ul>
<li>{{- site.footer-copyright | escape -}}</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Terms of use</a></li>
<li>{{- site.footer-copyright | escape -}} &nbsp;{{ 'now' | date: "%Y" }}</li>
</ul>
</div>
<div id="address">
{{- site.footer-text | escape -}}
</div>
</div>
</footer>
\ No newline at end of file
</footer>
<header id="site-header" role="banner" aria-label="Site header">
<div id="site-header-wrapper">
<div id="site-header-wrapper" class="margin-wrapper body-wrapper">
<a href="{{ '/' | relative_url }}" class="elixir-image">
<img src="{{ 'assets/ELIXIR_LU.png' | relative_url }}" title="ELIXIR LU logo" alt="ELIXIR LU logo" />
</a>
<div class="hamburger">
<input type="checkbox" />
<ul>
<li><img src="https://elixir-europe.org/system/files/white-orange-logo.png" /></li>
<li><a href="{{ site.baseurl }}/about-node">About</a></li>
<li><a href="{{ site.baseurl }}/services">Services</a></li>
<li><a href="{{ site.baseurl }}/training">Training</a></li>
<li><a href="{{ site.baseurl }}/events">Events</a></li>
<li><a href="{{ site.baseurl }}/news">News</a></li>
<li><a href="{{ site.baseurl }}/contact">Contact</a></li>
<li><a {% if page.layout == 'index' %} class="active" {% endif %} href="{{ '/' | relative_url }}">Home</a></li>
<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 == '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 {% if page.section == 'Search' %} class="active" {% endif-%} href="{{ '/search' | relative_url }}">Search</a></li>
</ul>
</div>
</div>
</header>
---
layout: default
---
<article class="body-wrapper margin-wrapper">
<div id="left-column"></div>
<div>
<header>
<h1>
{{ page.title | escape }}
</h1>
</header>
{{ content }}
</div>
</article>
......@@ -6,23 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="//fonts.googleapis.com/css?family=Lato:400,400italic,700" media="all">
</head>
<title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
</head>
<body>
{%- include header.html -%}
<main id="page-content" aria-label="Content">
{% if page.content_title %}
<h1 id="page-title">
{{ page.content_title }}
</h1>
{% endif %}
<main id="site-content" aria-label="Content">
{{ content }}
</main>
{%- include footer.html -%}
</body>
</html>
\ No newline at end of file
</html>
---
layout: default
---
<article class="body-wrapper margin-wrapper">
<div id="left-column"></div>
<div class="narrower-article-div">
<header>
<h1>
{{ page.title | escape }}
</h1>
</header>
<div class="index-flex">
{% if page.introduction %}
<div class="index-gray-box">
{{ page.introduction }}
</div>
{% endif %}
<div class="index-photo">
<img src="{{ '/assets/cover.jpg' | relative_url }}" alt="Elixir Luxembourg" />
</div>
</div>
{{ content | markdownify }}
<div class="index-flex">
<div class="index-box">
<img src="{{ '/assets/buttons/index_events.jpg' | relative_url }}" alt="Events image" />
<div class="index-box-caption">
<a href="{{ '/events/' | relative_url }}">Events</a>
</div>
</div>
<div class="index-box">
<img src="{{ '/assets/buttons/index_jobs.jpg' | relative_url }}" alt="Job vacancies image" />
<div class="index-box-caption">
<a href="{{ '/about-node/vacancies' | relative_url }}">Job vacancies</a>
</div>
</div>
<div class="index-box">
<img src="{{ '/assets/buttons/index_flyer.jpg' | relative_url }}" alt="Flyer image" />
<div class="index-box-caption">
<a href="https://webdav-r3lab.uni.lu/public/elixir/website/pdf/ELIXIR-LU_Flyer_VF.pdf">Download flyer</a>
</div>
</div>
</div>
</div>
<div id="right-column">
{% if paginator.posts %}
<h2>Our news</h2>
{% 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>
<div class="content">
{{ post.content | truncate: 220 }} <a href="{{ post.url | relative_url }}">(read more)</a>
</div>
</div>
{% endfor %}
<h3><a href="{{ '/news/' | relative_url }}">See more news...</a></h3>
{% endif %}
<a class="twitter-timeline" data-lang="en" data-width="380" data-height="800" data-dnt="true" data-theme="light" data-link-color="#B57B00" href="https://twitter.com/elixir_lu?ref_src=twsrc%5Etfw">Tweets by elixir_lu</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</article>
---
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 }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
<div>
<header>
<h1>
{{ page.title | escape }}
</h1>
</header>
{{ content }}
</div>
</article>
---
layout: default
---
{{ content }}
---
layout: default
---
<article class="body-wrapper margin-wrapper">
<div id="left-column">
</div>
<div>
<header>
<h1>
ELIXIR.LU news
</h1>
<hr />
</header>
{% for post in paginator.posts %}
<div class="post">
<a class="post-title" href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="post-date">Published on: {{ post.date | date: '%B %d, %Y' }}</span>
<div class="content">
{{ post.content | truncate: 220 }}
</div>
</div>
{% endfor %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}" class="previous">
Previous
</a>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}" class="next">Next</a>
{% endif %}
</div>
</div>
</article>
---
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 }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
<div>
<header>
<h1>
ELIXIR.LU news
</h1>
<hr />
</header>
{% for post in paginator.posts %}
<div class="post">
<a class="post-title" href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="post-date">Published on: {{ post.date | date: '%B %d, %Y' }}</span>
<div class="content">
{{ post.content | truncate: 220 }}
</div>
</div>
{% endfor %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}" class="previous">
Previous
</a>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}" class="next">Next</a>
{% endif %}
</div>
</div>
</article>
......@@ -2,4 +2,28 @@
layout: default
---
{{ content }}
<article class="body-wrapper margin-wrapper">
<div id="left-column">
<h2>{{ page.section }}</h2>
<ul>
{% for link in page.news_pages %}
<li><a href="{{ link.href | relative_url }}" {% if link.active %}class="active" {% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
<div>
<header>
<h1>
{{ page.title | escape }}<br />
<small>{{ page.date | date: '%B %d, %Y' }}</small>
</h1>
</header>
{{ content }}
<span class="pull-right">
<a href="{{ '/news' | relative_url }}">Go back to the news</a>
</span>
</div>
</article>
---
layout: default
---
<article class="body-wrapper margin-wrapper">
<div id="left-column"></div>
<div>
<header>
<h1>
{{ page.title | escape }}
</h1>
</header>
<form>
<input class="search" placeholder="What are you looking for?" />
<button class="search" type="submit">Find it with Google</button>
</form>
<small>Note: you will be redirected to Google.com website</small>
</div>
</article>
<script>
var button = document.getElementsByTagName('button')[0];
var edit_box = document.getElementsByClassName('search')[0];
button.onclick = function(e) {
var edit_box_contents = edit_box.value;
document.location = 'https://www.google.com/search?q=site%3Aelixir-luxembourg.org+' + edit_box_contents;
e.preventDefault();
}
</script>
@import
"elixir/accordion",
"elixir/base",
"elixir/layout"
;
\ No newline at end of file
"elixir/cards",
"elixir/footer",
"elixir/header",
"elixir/helpers",
"elixir/layout",
"elixir/responsive"
;
.accordion {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
.accordion-item {
width: 100%;
color: #f3efef;
overflow: hidden;
label {
display: flex;
padding: 1em;
background: #2c3e50;
justify-content: space-between;
font-weight: bold;
cursor: pointer;
border-bottom: solid 1px white;
&:hover {
background: #1a252f;
}
&:after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
}
input {
position: absolute;
opacity: 0;
z-index: -1;
&:checked + label {
background: #1a252f;
}
&:checked + label:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
&:checked ~ .accordion-content {
max-height: 100vh;
padding: 1em;
}
}
.accordion-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
transition: all .35s;
font-size: larger;
}
}
}
$COLOR_LINK_ELIXIR: #f47d21;
// VARIABLES
$COLOR_BACKGROUND_HEADER: #023452;
$COLOR_LINK_ELIXIR: #f47d21;
$COLOR_TEXT: #222;
$FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif;
$PADDING_PAGE_LEFT: 13%;
$HEADER_RESPONSIVENESS_THRESHOLD: 1025px;
$FOOTER_RESPONSIVENESS_THRESHOLD: 600px;
$WIDTH_CONTENT: 74%;
// GENERIC
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: $FONT_DEFAULT;
font-variant-ligatures: none;
font-size: 13px;
}
\ No newline at end of file
font-size: 16px;
margin: 0px;
overflow-x: hidden;
}
main {
overflow-x: auto;
}
a {
color: $COLOR_BACKGROUND_HEADER;
}
a:hover {
color: $COLOR_LINK_ELIXIR;
}
p {
color: $COLOR_TEXT;
}
.cards {
display: flex;
flex-wrap: wrap;
.card-id.smaller {
height: 175px;
}
.card-id {
width: 185px;
height: 350px;
border: solid 2px #e6e6e6;
border-radius: 7px 7px 0px 0px;
padding: 8px;
margin: 10px;
.card-id-smallphoto img {
width: auto;
padding-left: 4px;
padding-bottom: 8px;
}
.card-id-photo img {
width: 120px;
padding-left: 4px;
padding-bottom: 8px;
}
.card-id-name {
font-weight: 600;
font-size: 18px;
}
.card-id-description {
font-size: 14px;
}
}
}
#site-footer-primary {
#site-footer-primary-wrapper {
background: #3e3e3e;
font-size: 0.875rem;
div {
margin-left: 15px;