Commit 41c2f929 authored by Erxleben's avatar Erxleben
Browse files

Transferred over the necessary files from the mockup project

(Issue #4)

This commit creates a basic Jekyll setup for a HIFIS website.
It already contains an adapted corporate design and all required
assets.

Support for small screen devices is included, although the
breakpoints are just taken over from the CD even if they seem
rather arbitrary.

The required javascript has been inlined since it boiled down to
half a line of code at one specific place. (c.f. the <button> in
_includes/header.html)

As a basic concept, most sites are supposed to be written in
Markdown, using HTML for enrichment. Pure HTML-only sites are
supported.

Known issue: Many linked sites are still missing including
	* Team
	* Imprint
	* Privacy
	* Contact
These should be added by future commits.
parent 85d5d270
# Backup files as created by most editors
*~
# Jekyll-specific
_site/
.sass-cache/
.jekyll-cache/
......
# Gem sources
source 'https://rubygems.org'
# List of required gems
gem "jekyll"
GEM
remote: https://rubygems.org/
specs:
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.5)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.11.1)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (1.6.0)
concurrent-ruby (~> 1.0)
jekyll (4.0.0)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (>= 0.9.5, < 2)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.1)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.3.3)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
jekyll-sass-converter (2.0.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.1.0)
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
ruby_dep (~> 1.2)
mercenary (0.3.6)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.1)
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (~> 1.0)
rouge (3.10.0)
ruby_dep (1.5.0)
safe_yaml (1.0.5)
sassc (2.2.0)
ffi (~> 1.9)
terminal-table (1.8.0)
unicode-display_width (~> 1.1, >= 1.1.1)
unicode-display_width (1.6.0)
PLATFORMS
ruby
DEPENDENCIES
jekyll
BUNDLED WITH
2.0.2
# This file contains the elements that will appear in the header navigation bar
#
# The navigation is subdivided into header and footer navigation
# Element properties
# ==================
# title: A shorthand title of the page that can be navigated to
# url: A project relative path for same-site content or external full URL
# NOTE for Jekyll-generated sites the generated HTML should be linked, not the
# original Markdown.
header:
- title: Home
url: index.html
- title: Team
url: team.html
footer:
- title: Imprint
url: imprint.html
- title: Privacy
url: privacy.html
- title: Contact
url: contact.html
<footer class="footer">
<div class="width">
<a href="/">
<img class="logo" src="/assets/img/Helmholtz_Logo.svg">
</a>
<nav>
{% for entry in site.data.navigation.footer %}
<a href="{{ entry.url }}">
{{ entry.title }}
</a>
{% endfor %}
</nav>
</div>
</footer>
<!--
Header Design for HIFIS Webites
This file specifies the structure for the headers of HIFIS-related websites.
It observes the Helmholtz corporate design guidelines.
The header is a floating section with light gray background and contains
* the HIFIS logo
* navigation
* a transitional element that visually separates the header from the
remaining content of the site
In the case of a mobile end device the navigation will be turned into a menu
which can be toggled to expand or collapse.
The contents of the navigation is generated by Jekyll from
/_data/navigation.yaml
See also:
/assets/css/header.scss
/_includes/header_transition.svg
-->
<header class="header">
<div class="width">
<a href="/">
<img class="logo" src="/assets/img/HIFIS_Logo_long_RGB.svg">
</a>
<!--
The following button is not displayed in desktop mode, but will
replace the navigation list on smaller displays.
When clicked the button will toggle the 'active' class.
The associated CSS will then display the navigation elements as a menu.
-->
<button
class="js-mobile_nav-toggle nav_toggle"
onclick="this.classList.toggle('active')">
</button>
<nav>
{% for entry in site.data.navigation.header %}
<a href="{{ entry.url }}">
{{ entry.title }}
</a>
{% endfor %}
</nav>
</div>
<div class="transition">
{% include header_transition.svg %}
</div>
</header>
<svg
class="transition_slope"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 164.2 37.1"
style="enable-background:new 0 0 164.2 37.1;"
x="0px"
y="0px"
xml:space="preserve">
<path
class="fill_white"
d="M0.2-0.9
l-0.1,38
l114-0.1
c0,0,7.4-0.1,12.5-5.4
l25.1-26.2
c0,0,5-5.3,12.1-5.3
l0.6,0
l0-0.7
l-0.6,0
L0.2-0.9
z">
</path>
<path
class="fill_theme"
d="M0.2,37.1
l114.6,0
c7.8-0.3,12.4-6.1,12.8-6.5
c0,0,15.9-16.5,15.9-16.5
s-107.3,0-113.3,0
s-10,2-13,5
S0.2,37.1,0.2,37.1">
</path>
</svg>
<svg
class="transition_slope"
viewBox="0 0 50 38"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M35,47
L35,84.6759494
C35,84.6759494 42.1010315,84.6759494 47.122857,79.3488608
L72.5826937,52.3288608
C72.5826937,52.3288608 77.6061892,47 84.7072207,47
L35,47
Z"
transform="translate(-35, -47)">
</path>
</svg>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/general.css"/>
<link rel="stylesheet" href="/assets/css/transitions.css">
<link rel="stylesheet" href="/assets/css/header.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/footer.css">
<link rel="stylesheet" href="/assets/css/title-image.css">
</head>
<body>
{% include header.html %}
<main>
<!-- Big white title with backdrop image -->
<!--
TODO get image from markdown properties and default to black-ish
background color or image
-->
<div
class="title-image"
style="background-image:url('/assets/img/hifis_page_title_background.jpg')">
<h1 class="width"> {{ page.title }} </h1>
</div>
<section>
<div class="transition">
{% include main_transition.svg %}}
</div>
<article class="width width--tight">
{{ content }}
</article>
<div class="transition">
{% include main_transition.svg %}}
</div>
</section>
</main>
{% include footer.html %}
</body>
</html>
/*
This file defines all the breakpoints used for widths to accomodate for
different mobile devices.
*/
$width-tablet: 959px;
$width-phone: 689px;
/*
This file defines all colors used on the website
*/
$color-helmholtz-blue: #005AA0;
$color-helmholtz-bright-blue: #27b4f8;
$color-helmholtz-green: #95c230;
$color-header-light-gray: #F2F2F2;
/*
This file provides mixin functions for inclusion in different parts of the
other SCSS.
DO NOT link this in your HTML it is not meant for that (and provides
no added value)
DO @import it into the SCSS that makes use of the mixins defined here
*/
/* Mixins for button-style objects */
@mixin button-style {
width: 150px;
@media (max-width: 959px) {
width: 130px;
}
text-align: center;
border: 1px solid currentColor;
color: inherit;
font-family: inherit;
letter-spacing: inherit;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
outline: 0;
border-radius: 0.5rem;
display: inline-block;
background-color: transparent;
line-height: 1.2;
}
/* Style manipulations */
@mixin borderless { border: 1px solid transparent; }
@mixin relative { position: relative; }
/* Font manipulations */
@mixin font-bold { font-weight: 700; }
@mixin font-small { font-size: 18px; }
/* Text manipulations */
@mixin uppercase { text-transform: uppercase; }
/* Specific text formatting */
@mixin font-heading {
font-family: "Hermann", sans-serif;
@include font-bold
@include uppercase
}
/* #region CORPORATE S */
@font-face {
font-family: "Corporate S";
font-weight: 400;
src: url(/assets/font/corporate-s/CorporateS-Regular.ttf) format("truetype"); }
@font-face {
font-family: "Corporate S";
font-weight: 400;
font-style: italic;
src: url(/assets/font/corporate-s/CorporateS-RegularItalic.ttf) format("truetype"); }
@font-face {
font-family: "Corporate S";
font-weight: 700;
src: url(/assets/font/corporate-s/CorporateS-Bold.ttf) format("truetype"); }
@font-face {
font-family: "Corporate S";
font-weight: 700;
font-style: italic;
src: url(/assets/font/corporate-s/CorporateS-BoldItalic.ttf) format("truetype"); }
/* #endregion */
/* #region HERMANN */
@font-face {
font-family: "Hermann";
font-weight: 700;
src: url(/assets/font/hermann/Hermann-Bold.ttf) format("truetype"); }
/* #endregion */
---
---
@import "colors";
@import "mixins";
@import "breakpoints";
.footer {
@include relative;
background-color: $color-helmholtz-blue;
color: white;
padding-top: 4em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
img.logo {
margin-top: 0.5em;
margin-right: 27em;
float: left;
width: 280px;
height: 68px;
@media(max-width: $width-tablet) {
width: 345px;
}
@media(max-width: $width-phone) {
width: 240px;
height: 60px;
margin-right: 1em;
}
background-size: contain;
background-repeat: no-repeat;
}
@media(max-width: $width-phone) {
.width {
padding: 0;
}
}
nav {
@media(max-width: $width-phone) {
clear: both;
}
a {
@include button-style
@include borderless
margin-right: 0;
/* Explicitly repeat this or it gets set to default values
by general.scss*/
background-color: $color-helmholtz-blue;
color: white;
}
a:hover,
a:focus {
border: 1px solid currentColor;
}
}
}
---
---
/*
This file contains the general rules that apply all throughout the website.
*/
@import "colors";
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-family: "Corporate S", serif;
font-size: 20px;
line-height: 1.5;
letter-spacing: 0.42px;
}
h3,
h2,
h1 {
margin-top: 0;
word-wrap: break-word;
}
h2 {
font-size: 1.4em;
}
a {
color: $color-helmholtz-blue;
text-decoration: none;
}
p a {
-webkit-transition: color .2s ease;
transition: color .2s ease;
}
p a:hover {
color: $color-helmholtz-bright-blue;
}
figure {
margin: 0;
position: relative;
}
/* Content width rules */
.width {
max-width: 1440px;
margin: auto;
margin-bottom: 0;
padding-left: 1em;
padding-right: 1em;
}
.width-50 {
width: 50%;
}
.width-60 {
width: 60%;
}
.width--narrow {
max-width: 1240px;
}
.width--tight {
max-width: 1024px;
}
.width--tighter {
padding-top: 3rem;
padding-bottom: 2rem;
position: relative;
}
---
---
@import "mixins";
@import "colors";
@import "breakpoints";
.header {
position: fixed;
width: 100%;
background: $color-header-light-gray;
z-index: 1000;
/* Following is the default setup for the header.
Specific settings for smaller screens can be found below the default section.*/
/* Within the header an <img> with the class .logo will be placed in the
top left of the header */
img.logo {
display: inline-block;
margin-left: 0.1rem;
margin-top: 2rem;
width: 350px;
height: auto;
-webkit-box-shadow: 340px -78px 115px white;
box-shadow: 340px -78px 115px white;
@media(max-width: $width-phone){
margin-top: 1rem;
margin-bottom: -0.4rem;
width: 221px; }
}
/*
IMPORTANT:
Do not shuffle the .nav_toggle blocks around unless you know what you
are doing. Potential results may include breaking the drop-down menu on
mobile devices and loss of sanity.
*/
.nav_toggle {
/*
Not displayed by default, only on smaller screens
*/
display: none;
@media(max-width: $width-phone) {
display: block;
}
position: absolute;
top: 0.75rem;
right: 1rem;
height: 1.5rem;
width: 1.5rem;
background-image: url(/assets/img/mobile_menu.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0;
border: none;
background-color: transparent;
outline: none;
}
.nav_toggle.active {
background-image: url(/assets/img/mobile_menu_close.svg);
}
.nav_toggle.active + nav {
display: block;
position: absolute;
font-size: 1.25rem;
color: white;