Skip to content

GitLab

Commit 89279aba authored by Huste, Tobias (FWCC) - 111645's avatar Huste, Tobias (FWCC) - 111645 Committed by Erxleben, Fredo
Browse files

Introduce frontpage design 

This adds an initial version of a frontpage and partially uses bootstrap
elements.
parent e80b6cc4
Hide whitespace changes
Inline Side-by-side
_includes/frontpage/event-card.html 0 → 100644
View file @ 89279aba
{% assign event = include.event %}
{% assign location = site.data.hifis_organizations[event.location.campus] %}
<div class="frontpage-card">
<div class="card-body">
<span class="badge badge-danger">
<i class="fas fa-calendar-day" aria-hidden="true"></i> {{ event.start.date | date_to_string }}
</span>
<span class="badge badge-secondary">
<i class="fas fa-flag" aria-hidden="true"></i> {{ event.type | capitalize }}
</span>
<span class="badge badge-primary">
<i class="fas fa-location-arrow" aria-hidden="true"></i> {{ location.city }}
</span>
<h3 class="card-title">
<a href="{{ event.url | relative_url }}">{{ event.title }}</a>
</h3>
<p class="card-text">{{ event.excerpt | strip_html | slice: 0, 150 }}</p>
<a href="{{ event.url | relative_url }}" class="btn btn-primary">
<i class="fas fa-info-circle" aria-hidden="true"></i>&nbsp; More
</a>
</div>
</div>
_includes/frontpage/image-card.html 0 → 100644
View file @ 89279aba
{% assign image_path = include.image_path %}
{% assign url = include.url %}
{% assign caption = include.caption %}
<div class="frontpage-image-card">
<img src="{{ image_path | relative_url }}" class="card-img" alt="{{ caption }}">
<div class="card-img-overlay">
<h3 class="card-title">{{ caption }}</h3>
<a href="{{ url | relative_url }}" class="btn btn-outline-light">Learn more</a>
</div>
</div>
_includes/frontpage/post-card.html 0 → 100644
View file @ 89279aba
{% assign post = include.post %}
<div class="frontpage-card">
<div class="card-body">
<a href="{{ post.url | relative_url }}">
<h3 class="card-title">{{ post.title }}</h3>
</a>
<div>
<i class="fas fa-calendar-day" aria-hidden="true"></i> {{ post.date | date_to_string }}
</div>
<div>
{% for category in post.categories %}
<span class="badge badge-secondary" aria-hidden="true">{{ category | upcase }}</span>
{% endfor %}
</div>
</div>
</div>
_layouts/frontpage.html 0 → 100644
View file @ 89279aba
{% include top.html %}
<body>
{% include header.html %}
<main>
{% include title_image.html%}
{{ content }}
</main>
{% include footer.html %}
</body>
</html>
_sass/_bootstrap_variables.scss
View file @ 89279aba
@import "colors";
$border-radius: 0.5rem;
$theme-colors: (
"danger": $color-helmholtz-health,
"dark": $color-helmholtz-dark-blue,
"info": $color-helmholtz-space,
"primary": $color-helmholtz-blue,
"secondary": $color-helmoltz-gray,
......
_sass/_colors.scss
View file @ 89279aba
......@@ -8,7 +8,7 @@ $color-helmholtz-dark-blue: #0A2D6E;
$color-helmholtz-green: #8CB423;
$color-helmoltz-gray: #5A696E;
$color-header-light-gray: #F2F2F2;
$color-content-light-gray: #EBEBEB;
$color-content-light-gray: #E0EAF2;
$color-helmholtz-information: #A0235A;
$color-helmholtz-health: #D23264;
$color-helmholtz-matter: #F0781E;
......
_sass/_mixins.scss
View file @ 89279aba
......@@ -107,8 +107,8 @@
}
@mixin font-text {
@include font-normal
@include font-regular
@include font-normal;
@include font-regular;
text-transform: none;
font-family: "Corporate S", serif;
......@@ -167,4 +167,8 @@
$color: #88888840
) {
filter: drop-shadow($offset-x $offset-y $blur $color);
}
\ No newline at end of file
}
@mixin max-content-width {
max-width: 60rem;
}
assets/css/bootstrap.scss
View file @ 89279aba
---
---
@import "bootstrap_variables";
@import "assets/vendor/bootstrap/scss/functions";
@import "assets/vendor/bootstrap/scss/variables";
@import "assets/vendor/bootstrap/scss/mixins";
@import "bootstrap_variables";
@import "assets/vendor/bootstrap/scss/utilities";
@import "assets/vendor/bootstrap/scss/badge";
@import "assets/vendor/bootstrap/scss/buttons";
@import "assets/vendor/bootstrap/scss/card";
@import "assets/vendor/bootstrap/scss/jumbotron";
assets/css/frontpage.scss 0 → 100644
View file @ 89279aba
---
---
@import "colors";
@import "mixins";
@import "bootstrap_variables";
@import "assets/vendor/bootstrap/scss/functions";
@import "assets/vendor/bootstrap/scss/variables";
@import "assets/vendor/bootstrap/scss/mixins";
@import "assets/vendor/bootstrap/scss/card";
main {
@include width-full-viewport;
frontpage-content {
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
text-align: center;
background-color: transparent;
h1, h2, h3 {
@include font-heading;
margin-top: 0.50rem;
margin-bottom: 0.25rem;
}
.frontpage-card {
@extend .card;
width: 15rem;
max-width: 15rem;
float: left;
margin: 1rem;
color: $dark;
@include drop-shadow;
}
.frontpage-image-card {
@extend .frontpage-card;
color: white;
background-color: $dark;
@include drop-shadow(
$color: rgba(black, 0.5)
);
}
.frontpage-jumbotron {
padding: 2rem 1rem;
padding-right: 0;
padding-left: 0;
border-radius: 0;
margin-top: 1rem;
margin-bottom: 1rem;
background-position: center;
background-size: cover;
background-color: $color-content-light-gray;
color: $color-helmholtz-blue;
}
.frontpage-services-jumbotron {
@extend .frontpage-jumbotron;
margin-top: 0;
padding-top: 4rem;
padding-bottom: 4rem;
background-color: $color-helmoltz-gray;
color: white;
}
.frontpage-mission-jumbotron {
@extend .frontpage-jumbotron;
margin-bottom: 0;
padding-top: 4rem;
padding-bottom: 4rem;
background-color: $color-helmholtz-blue;
color: white;
}
.flex-content-wrapper {
display: flex;
flex-flow: wrap;
justify-content: center;
}
wrapped-content {
margin: auto;
display: inline-block;
@include max-content-width;
}
}
}
index.md
View file @ 89279aba
---
title: HIFIS
title: HIFIS Software Services
title-image: default
layout: default
layout: frontpage
author: none
additional_css:
- frontpage.css
---
# Experience HIFIS
Join the effort to create better scientific software!
<frontpage-content>
<div class="frontpage-jumbotron">
<wrapped-content>
<h1><i class="fas fa-blog" aria-hidden="true"></i>&nbsp; Latest posts</h1>
<div class="flex-content-wrapper">
{% for post in site.posts limit:3 %}
{% include frontpage/post-card.html post = post %}
{% endfor %}
</div>
<a href="{{ 'blog/' | relative_url }}" class="btn btn-outline-secondary">More</a>
</wrapped-content>
</div>
<div class="frontpage-mission-jumbotron"
style="background-image: url('{{ 'assets/img/luke-stackpoole-ZRsJmpt9pNI-unsplash.jpg' | relative_url }}'">
<wrapped-content>
<h1>The Mission</h1>
<p class="lead">HIFIS Software Services' mission is to empower scientists of any domain to implement and
to perpetuate modern scientific software development principles in order to
make research software engineering more sustainable.</p>
<p>
<a href="{{ 'services/' | relative_url }}" class="btn btn-outline-light">Get in touch</a>
</p>
</wrapped-content>
</div>
## A short introduction
The _HIFIS_ project is a joint effort of the Helmholtz centers all across
Germany. Its main goal is to enable researchers to create scientific software
of outstanding quality and help to maintain it through many generations of
authors without compromising quality.
This ambitious goal is achieved by providing consulting and training for the
Helmholtz scientists as well as continuing development and maintainance of the
research software portfolio even after the original developers stopped working
on it.
## What it can do for _you_
There are a lot of opportunities for learning or getting support from our
research software engineers.
Find them all in our [services section](services.html)
or have a look for [events](events.html) that might interest you.
In case you want just to read up on topics that might help you in your daily
software life, try the [blog](blog/index.html).
<div class="frontpage-services-jumbotron">
<h1>HIFIS Software Services for You</h1>
<div class="flex-content-wrapper">
{% assign training_url = "services/training" %}
{% assign technology_url = "services/technology" %}
{% assign consulting_url = "services/consulting" %}
{% assign community_url = "services/community" %}
{% include frontpage/image-card.html
image_path = "assets/img/roman-mager-5mZ_M06Fc9g-unsplash.jpg"
url = training_url
caption = "Education & Training" %}
{% include frontpage/image-card.html
image_path = "assets/img/ilya-pavlov-OqtafYT5kTw-unsplash.jpg"
url = technology_url
caption = "Technology Services" %}
{% include frontpage/image-card.html
image_path = "assets/img/nik-macmillan-YXemfQiPR_E-unsplash.jpg"
url = consulting_url
caption = "Consulting Services" %}
{% include frontpage/image-card.html
image_path = "assets/img/perry-grone-lbLgFFlADrY-unsplash.jpg"
url = community_url
caption = "Community Services" %}
</div>
</div>
<div class="frontpage-jumbotron">
<wrapped-content>
<h1><i class="far fa-calendar-alt" aria-hidden="true"></i>&nbsp; Events</h1>
<div class="flex-content-wrapper">
{% for event in site.events %}
{% include frontpage/event-card.html
title = event.excerpt %}
{% endfor %}
</div>
</wrapped-content>
</div>
</frontpage-content>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Privacy | Imprint | Support | Status | Documentation | Changelog