Save one of the last spots in our Shell + Git + GitLab introdoctury course on Friday and Monday next week. 👉 Register here.

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
padding: 5%;
box-sizing: border-box;
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 {
font-size: 4em;
......@@ -70,8 +73,11 @@ class LandingView extends LitElement
font-family: 'Hermann';
}
.hero mwc-button {
--mdc-theme-primary: #e9437a;
--mdc-theme-primary: #8cb422;
--mdc-theme-on-primary: white;
width: 200px;
transform: skew(-20deg);
border-radius: 4px;
}
.hide {
display: none;
......@@ -127,18 +133,12 @@ class LandingView extends LitElement
@media screen and (min-width: 700px) {
.hero {
height: 95vh;
background-image: repeating-radial-gradient(#034679, transparent 17vw);
}
.hero p {
font-size: 1.2em;
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
<section class="hero">
<div class="inner-section">
<h1>Helmholtz Cloud</h1>
<p>
provides a portfolio of seamlessly accessible IT
services to support scientific work.
</p>
<p>a portfolio of seamlessly accessible IT services to support scientific work.</p>
<div>
<div @click="${this._signIn}">
<mwc-button raised>Sign in</mwc-button>
<mwc-button raised>Show Services</mwc-button>
</div>
</div>
</div>
......@@ -183,12 +180,12 @@ class LandingView extends LitElement
_signIn()
{
window.location.href = `${window.location.origin}/oauth2/authorization/unity`;
window.location.href = `/#/services`;
}
_scrollListener()
{
this.removeEventListener('wheel', this.scrollListener, true);
this.removeEventListener('wheel', this._scrollListener, true);
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