From a494b018662be078993bbaadc3a3f3b31ee19ac2 Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Fri, 24 Jul 2020 08:08:57 +0200
Subject: [PATCH] Add new background color and transition to mission jumbotron
---
_layouts/frontpage.html | 71 ++++++++++++++++++++++-----------------
assets/css/frontpage.scss | 31 ++++++++++-------
2 files changed, 59 insertions(+), 43 deletions(-)
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index 11916a73e..54b88e040 100644
--- a/_layouts/frontpage.html
+++ b/_layouts/frontpage.html
@@ -33,39 +33,48 @@
<a href="{{ 'news/' | relative_url }}" class="btn btn-outline-secondary">More</a>
</section>
</div>
- <div class="frontpage-mission-jumbotron">
- <section>
- <div class="info-col">
- <div class="info-box">
- <a href="{% link index.md %}" class="btn btn-outline-light">
- <h3><i class="fas fa-user-plus" aria-hidden="true"></i> You & HIFIS</h3>
- </a>
- <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">
- <a href="{% link mission/index.md %}" class="btn btn-outline-light">
- <h3><i class="fas fa-atom" aria-hidden="true"></i> HIFIS Mission</h3>
- </a>
- <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
- </div>
- <div class="info-box">
- <a href="{% link partners.md %}" class="btn btn-outline-light">
- <h3><i class="fas fa-globe-europe" aria-hidden="true"></i> HIFIS Partners</h3>
- </a>
- <p>Take a look at our partners, within the Helmholtz Association and throughout the World.</p>
- </div>
- <div class="info-box">
- <a href="{% link roadmap/index.md %}" class="btn btn-outline-light">
- <h3><i class="fas fa-road" aria-hidden="true"></i> Now & tomorrow - The HIFIS Roadmap</h3>
- </a>
- <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months and years to come.
-</p>
+ <div class="transition-block">
+
+ {% include transition.html direction="top" %}
+ <div class="frontpage-mission-jumbotron">
+ <section>
+ <div class="info-col">
+ <div class="info-box">
+ <a href="{% link index.md %}" class="btn btn-outline-primary">
+ <h3><i class="fas fa-user-plus" aria-hidden="true"></i> You & HIFIS</h3>
+ </a>
+ <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">
+ <a href="{% link mission/index.md %}" class="btn btn-outline-primary">
+ <h3><i class="fas fa-atom" aria-hidden="true"></i> HIFIS Mission</h3>
+ </a>
+ <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
+ </div>
+ <div class="info-box">
+ <a href="{% link partners.md %}" class="btn btn-outline-primary">
+ <h3><i class="fas fa-globe-europe" aria-hidden="true"></i> HIFIS Partners</h3>
+ </a>
+ <p>Take a look at our partners, within the Helmholtz Association and throughout the World.
+ </p>
+ </div>
+ <div class="info-box">
+ <a href="{% link roadmap/index.md %}" class="btn btn-outline-primary">
+ <h3><i class="fas fa-road" aria-hidden="true"></i> Now & tomorrow - The HIFIS
+ Roadmap
+ </h3>
+ </a>
+ <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months
+ andyears to
+ come.</p>
+ </div>
</div>
- </div>
- </section>
+ </section>
+ </div>
</div>
-
+
</main>
{% include footer.html %}
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 77006050a..4cd6fdd18 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -35,13 +35,8 @@
padding: 1rem;
}
- .btn-outline-light {
+ .btn-outline-primary {
border: none;
-
- &:focus,
- &:hover {
- color: $color-helmholtz-dark-blue;
- }
}
}
@@ -99,7 +94,7 @@
h1, h2, h3 {
@include font-heading;
- margin-top: 0.50rem;
+ margin-top: 0.55rem;
margin-bottom: 0.25rem;
}
@@ -133,15 +128,27 @@
}
}
+.transition-block {
+ filter: drop-shadow(-.1rem -.1rem .1rem rgba(0,0,0,0.1));
+
+ .transition_on_top {
+ margin-bottom: -1px;
+ .fill_right {
+ fill: lighten($color-helmoltz-gray, 55%);
+ }
+ }
+}
+
.frontpage-mission-jumbotron {
@extend .frontpage-jumbotron;
- padding-top: 1rem;
- padding-bottom: 1rem;
+ // Ensure that the base jumbotron always ends below the footer.
+ padding-bottom: $transition-max-height;
+ margin-bottom: -$transition-max-height;
- position: relative;
- background-color: $color-helmholtz-blue;
- color: white;
+ position: relative;
+ background-color: lighten($color-helmoltz-gray, 55%);
+ color: darken($color-helmoltz-gray, 20%);
}
.btn-logo {
--
GitLab