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

Merge branch 'frontpage-mockup' into 'master' 

Redesign frontpage according to mockup

See merge request hifis/hifis.net!2
parents 3b6e405e 9d362fe4
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 @ d0e385b6
......@@ -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 @ d0e385b6
<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 @ d0e385b6
......@@ -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 @ d0e385b6
......@@ -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 @ d0e385b6
......@@ -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 @ d0e385b6
......@@ -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 @ d0e385b6
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 @ d0e385b6
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 @ d0e385b6
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 @ d0e385b6
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 @ d0e385b6
assets/img/jumbotrons/tablet/hifis_page_title_background.jpg

119 KiB

index.md
+ 3
− 4
View file @ d0e385b6
---
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 @ d0e385b6
#! /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