Commit d258eac7 authored by femiadeyemi's avatar femiadeyemi
Browse files

landing-view: use background image

Modification:

- adjust the description text of what helmholtz cloud does.
- upload two images and one of them is used as the background
   image of the site landing page.
- add arrow to indicate that user can scroll down the page
   and remove the scroll down indicator when the user scroll
   down.
- change the sign-in button to go-to-service button. And add
   a little bit of styling to the button for meet the cooperate
   design requirement.

Result:

Target: master
parent 90a8e1d0
...@@ -62,7 +62,10 @@ class LandingView extends LitElement ...@@ -62,7 +62,10 @@ class LandingView extends LitElement
padding: 5%; padding: 5%;
box-sizing: border-box; box-sizing: border-box;
background-attachment: fixed; background-attachment: fixed;
background-image: repeating-radial-gradient(#034679, transparent 22vw); background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('./media/i/blue-background_16_9.jpg');
} }
.hero h1 { .hero h1 {
font-size: 4em; font-size: 4em;
...@@ -70,8 +73,11 @@ class LandingView extends LitElement ...@@ -70,8 +73,11 @@ class LandingView extends LitElement
font-family: 'Hermann'; font-family: 'Hermann';
} }
.hero mwc-button { .hero mwc-button {
--mdc-theme-primary: #e9437a; --mdc-theme-primary: #8cb422;
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
width: 200px;
transform: skew(-20deg);
border-radius: 4px;
} }
.hide { .hide {
display: none; display: none;
...@@ -127,18 +133,12 @@ class LandingView extends LitElement ...@@ -127,18 +133,12 @@ class LandingView extends LitElement
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {
.hero { .hero {
height: 95vh; height: 95vh;
background-image: repeating-radial-gradient(#034679, transparent 17vw);
} }
.hero p { .hero p {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.5em; line-height: 1.5em;
} }
} }
@media screen and (min-width: 1000px) {
.hero {
background-image: repeating-radial-gradient(#034679, transparent 14vw);
}
}
`; `;
} }
...@@ -152,13 +152,10 @@ class LandingView extends LitElement ...@@ -152,13 +152,10 @@ class LandingView extends LitElement
<section class="hero"> <section class="hero">
<div class="inner-section"> <div class="inner-section">
<h1>Helmholtz Cloud</h1> <h1>Helmholtz Cloud</h1>
<p> <p>a portfolio of seamlessly accessible IT services to support scientific work.</p>
provides a portfolio of seamlessly accessible IT
services to support scientific work.
</p>
<div> <div>
<div @click="${this._signIn}"> <div @click="${this._signIn}">
<mwc-button raised>Sign in</mwc-button> <mwc-button raised>Show Services</mwc-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -183,12 +180,12 @@ class LandingView extends LitElement ...@@ -183,12 +180,12 @@ class LandingView extends LitElement
_signIn() _signIn()
{ {
window.location.href = `${window.location.origin}/oauth2/authorization/unity`; window.location.href = `/#/services`;
} }
_scrollListener() _scrollListener()
{ {
this.removeEventListener('wheel', this.scrollListener, true); this.removeEventListener('wheel', this._scrollListener, true);
this.shadowRoot.querySelector('.arrow').classList.add('hide'); this.shadowRoot.querySelector('.arrow').classList.add('hide');
} }
} }
......
Markdown is supported
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