Skip to content
Snippets Groups Projects
Verified Commit 9d362fe4 authored by Huste, Tobias's avatar Huste, Tobias
Browse files

Redesign frontpage according to mockup

parent 3b6e405e
No related branches found
No related tags found
1 merge request!2Redesign frontpage according to mockup
Hide whitespace changes
Inline Side-by-side
Showing
with 202 additions and 42 deletions
_data/navigation.yml
+ 12
− 8
View file @ 9d362fe4
......@@ -16,17 +16,21 @@ header:
url: /
fontawesome_class: "fas fa-home"
- title: Blog
- title: Services
url: "/"
fontawesome_class: "fas fa-list"
- title: News
url: blog/
fontawesome_class: "fas fa-blog"
fontawesome_class: "fas fa-rss"
- title: Events
url: events.html
fontawesome_class: "fas fa-calendar-week"
- title: International
url: "/"
fontawesome_class: "fas fa-globe-europe"
- title: Team
url: team.html
fontawesome_class: "fas fa-users"
- title: Jobs
url: "/"
fontawesome_class: "fas fa-user"
footer:
- title: FAQ
......
_includes/frontpage/title-content.html 0 → 100644
+ 21
− 0
View file @ 9d362fe4
<div>
<h1>HIFIS Mission</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
</div>
<div class="services-box">
<div class="services-title-buttons">
<a href="{{ '/' | relative_url }}" class="btn btn-light btn-lg text-dark">
<i class="fas fa-cloud"></i> Helmholtz Cloud
</a>
<a href="https://software.hifis.net" class="btn btn-light btn-lg text-dark">
<i class="fas fa-laptop-code"></i> Helmholtz Software
</a>
<a href="{{ '/' | relative_url }}" class="btn btn-light btn-lg text-dark">
<i class="fas fa-question"></i> Support
</a>
<a href="{{ '/' | relative_url }}" class="btn btn-light btn-lg text-dark">
<i class="fas fa-location-arrow"></i> Contact
</a>
</div>
</div>
_includes/header.html
+ 1
− 1
View file @ 9d362fe4
......@@ -34,7 +34,7 @@ See also:
<img
id="header-logo"
class="logo"
src="{{ '/assets/img/HIFIS_SWS_Logo_cropped.svg' | relative_url }}"
src="{{ '/assets/img/HIFIS_Logo_cropped.svg' | relative_url }}"
alt="HIFIS Logo"
>
</a>
......
_layouts/frontpage.html
+ 40
− 25
View file @ 9d362fe4
......@@ -6,16 +6,20 @@
<main>
{% include title_image.html %}
{% capture title-content %}
{% include frontpage/title-content.html %}
{% endcapture %}
{%- include title_image.html content=title-content -%}
<div class="frontpage-jumbotron">
<section>
{% if page.notification.description and page.notification.title %}
{% include frontpage/notification.html
{% include frontpage/notification.html
title=page.notification.title
description=page.notification.description %}
{% endif %}
<h1><i class="fas fa-blog" aria-hidden="true"></i>&nbsp; Latest posts</h1>
<h1>News</h1>
<div class="flex-content-wrapper">
{% for post in site.posts limit:3 %}
{% include frontpage/post-card.html post = post %}
......@@ -25,18 +29,29 @@
</section>
</div>
<div class="frontpage-mission-jumbotron">
<section>
<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="{{ 'faq' | relative_url }}" class="btn btn-outline-light">
<i class="fas fa-question-circle" aria-hidden="true"></i> FAQ
</a>
</p>
<div class="info-col">
<div class="info-box">
<h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="info-box">
<h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS for Scientists</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="info-box">
<h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS International</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="info-box">
<h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</div>
</section>
</div>
<div class="frontpage-jumbotron">
......@@ -47,21 +62,21 @@
{% assign today = "now" | date: "%Y-%m-%d" %}
{% assign has_upcoming_events = false %}
{% for event in sorted_events %}
{% if event.start.date < today or
{% if event.start.date < today or
event.registration_period.to < today %}
{% continue %}
{% else %}
{% assign has_upcoming_events = true %}
{% endif %}
{% include frontpage/event-card.html
{% continue %}
{% else %}
{% assign has_upcoming_events = true %}
{% endif %}
{% include frontpage/event-card.html
title = event.excerpt %}
{% endfor %}
{% if has_upcoming_events == false %}
<article class="list-entry">
<h1>
There are no upcoming events right now ... stay tuned.
</h1>
</article>
<article class="list-entry">
<h1>
There are no upcoming events right now ... stay tuned.
</h1>
</article>
{% endif %}
</div>
</section>
......
assets/css/frontpage.scss
+ 22
− 2
View file @ 9d362fe4
......@@ -7,13 +7,33 @@
#title {
h1 {
margin-bottom: 0;
}
h2 {
a {
vertical-align: middle;
}
}
p {
margin-top: 0;
}
}
.info-col {
display: grid;
grid-template-columns: 1fr 1fr;
@include medium-is-phone {
grid-template-columns: 1fr;
}
.info-box {
padding: 1rem;
}
}
.frontpage-card {
@include drop-shadow;
......@@ -94,8 +114,8 @@
.frontpage-mission-jumbotron {
@extend .frontpage-jumbotron;
padding-top: 3rem;
padding-bottom: 3rem;
padding-top: 1rem;
padding-bottom: 1rem;
position: relative;
background-color: $color-helmholtz-blue;
......
assets/css/title/service-title-buttons.scss
+ 6
− 2
View file @ 9d362fe4
......@@ -13,8 +13,12 @@
display: grid;
grid-template-columns: 1fr 1fr;
@include medium-is-tablet {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@include medium-is-phone {
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
}
a {
......@@ -29,6 +33,6 @@
display: flex;
flex-flow: column nowrap;
@include font-small;
@include font-small;
}
}
assets/img/jumbotrons/desktop/hifis_page_title_background.jpg 0 → 100644
+ 0
− 0
View file @ 9d362fe4
assets/img/jumbotrons/desktop/hifis_page_title_background.jpg

245 KiB

assets/img/jumbotrons/display_2k/hifis_page_title_background.jpg 0 → 100644
+ 0
− 0
View file @ 9d362fe4
assets/img/jumbotrons/display_2k/hifis_page_title_background.jpg

404 KiB

assets/img/jumbotrons/hifis_page_title_background.jpg
+ 0
− 0
View replaced file @ 3b6e405e View file @ 9d362fe4
assets/img/jumbotrons/hifis_page_title_background.jpg

1.28 MiB | W: | H:

assets/img/jumbotrons/hifis_page_title_background.jpg

1.78 MiB | W: | H:

assets/img/jumbotrons/hifis_page_title_background.jpg
assets/img/jumbotrons/hifis_page_title_background.jpg
assets/img/jumbotrons/hifis_page_title_background.jpg
assets/img/jumbotrons/hifis_page_title_background.jpg
  • 2-up
  • Swipe
  • Onion skin
assets/img/jumbotrons/phone/hifis_page_title_background.jpg 0 → 100644
+ 0
− 0
View file @ 9d362fe4
assets/img/jumbotrons/phone/hifis_page_title_background.jpg

32.8 KiB

assets/img/jumbotrons/tablet/hifis_page_title_background.jpg 0 → 100644
+ 0
− 0
View file @ 9d362fe4
assets/img/jumbotrons/tablet/hifis_page_title_background.jpg

119 KiB

index.md
+ 3
− 4
View file @ 9d362fe4
---
title: HIFIS Software Services
title: HIFIS - Helmholtz Federated IT Services
title_image: default
layout: frontpage
additional_css:
- frontpage.css
- title/service-title-buttons.css
additional_js: frontpage.js
excerpt:
"HIFIS Software aims to make research software engineering more
sustainable."
"HIFIS aims to provide excellent, seamlessly accessible IT services for the
whole Helmholtz Association."
---
{% comment %}
This markdown file triggers the generation of the frontpage.
......
scripts/create_jumbotron_variants.sh 0 → 100755
+ 97
− 0
View file @ 9d362fe4
#! /usr/bin/env bash
# ==============================================================================
# title : create_jumbotron_variants.sh
# description : Iterates over all image files in a given folder and creates
# smaller variants of these according to given breakpoints.
# The smaller versions are sorted into subfolders according to the
# breakpoint they were generated for.
# date : 2019-11-07
# requires : Imagemagick v6 or compatible
# usage : $ bash ./scripts/create_jumbotron_variants assets/img/jumbotron/
# parameters : (1) path to the assets subfolder containing the jumbotron images
# to be processed.
# notes : The intention to outsource this script is to collect all shell
# scripts in a separate scripts folder instead of putting all
# scripts with all its length into the GitLab CI pipeline
# configuration yaml file.
# Beside that users can manually call this script as well.
# ==============================================================================
# Check if ImageMagick programs are available
if ! [ -x "$(command -v identify)" ]
then
echo 'ERROR: Command \"identify\" required (provided by imagemagick v6)' >&2
exit 1
fi
if ! [ -x "$(command -v convert)" ]
then
echo 'ERROR: Command \"convert\" required (provided by imagemagick v6)' >&2
exit 1
fi
# Check whether $1 is sane
if ! [ -d "$1" ]
then
echo "ERROR: $1 was expected to be a valid directory" >&2
exit 1
fi
# The list of breakpoints for which to generate variants and their widths in px
declare -A breakpoints=(\
["phone"]="600"\
["tablet"]="1200"\
["desktop"]="1800"\
["display_2k"]="2400"\
)
# From now on we work in the folder given by $1
cd "$1" || exit
for bp_name in "${!breakpoints[@]}"
do echo "$bp_name - ${breakpoints[$bp_name]}"
# If the target folders do not exist, create them
if ! [ -d "$bp_name" ]
then
echo "Creating folder $bp_name"
mkdir "$bp_name"
fi
done
# Get all the images to convert (ignore subfolders)
images=$(find . -maxdepth 1 -iregex ".*\.\(jpg\|gif\|png\|jpeg\|webp\)")
for source_file in $images
do
image_width=$(identify -format "%[fx:w]" "$source_file")
echo "=== Processing $source_file (width = $image_width px) ==="
for bp_name in "${!breakpoints[@]}"
do
target_file=$bp_name/$source_file
target_width=${breakpoints[$bp_name]}
if [ "$image_width" -gt "$target_width" ]
then
# Do not overwrite existing files
if [ -f "$target_file" ]
then
echo "Skip $target_file (already exists)"
continue
else
# Create new version for this breakpoint
echo "Generating $target_file ($target_width px)"
convert "$source_file" -resize "$target_width" "$target_file"
fi
else
# Instead of upscaling, create a relative link to the original
echo "Creating link $target_file (Source smaller then target)"
ln -sr "$source_file" "$target_file"
fi
done
done
exit 0
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

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog