Skip to content

Commit

Permalink
fix(home): applying more style fixes and extra assets
Browse files Browse the repository at this point in the history
- reworked stylesheets' directories
  • Loading branch information
rapzo committed Nov 7, 2019
1 parent 3c1f265 commit 44ef110
Show file tree
Hide file tree
Showing 17 changed files with 236 additions and 165 deletions.
Binary file added app/assets/images/mocks/tpi_splash_01.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/app/_colors.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$white: #fff;
$blue: #5587F6;
$blue: #5587F7;
$blue-dark: #0A4BDC;
$blue-darker: #083AAB;
$yellow: #FFDD49;
Expand Down
10 changes: 10 additions & 0 deletions app/assets/stylesheets/app/_sizes.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// TEXT SIZE
// $size-1: 3.5rem;
// $size-2: 3rem;
// $size-3: 2.5rem;
// $size-4: 2rem;
// $size-5: 1.5rem;
// $size-6: 1rem;
$size-6: 0.875rem;
// $size-7: 0.875rem;
$size-7: 0.75rem;
50 changes: 0 additions & 50 deletions app/assets/stylesheets/app/layout.scss

This file was deleted.

2 changes: 1 addition & 1 deletion app/assets/stylesheets/app/tags.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

.tag:not(body) {
border: 1px solid rgba($grey-dark, 0.5);
font-size: $size-8;
font-size: $size-7;
}
14 changes: 2 additions & 12 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
@charset "utf-8";

@import "app/colors";
@import "app/sizes";
@import "app/typography";

$primary: $blue;
$radius: 0;

// TEXT SIZE
// $size-1: 3.5rem;
// $size-2: 3rem;
// $size-3: 2.5rem;
// $size-4: 2rem;
// $size-5: 1.5rem;
$size-6: 1rem;
$size-7: 0.875rem;
$size-8: 0.75rem;

// $control-border-width: 2px;
$input-border-color: $blue;
// $input-shadow: none;
Expand Down Expand Up @@ -93,9 +84,8 @@ $tag-radius: 0;
// @import "bulma/sass/form/all";
@import "bulma/sass/components/all";
@import "bulma/sass/grid/all";
// @import "bulma/sass/layout/all";
@import "bulma/sass/layout/all";

@import "app/layout";
@import "app/buttons";
@import "app/forms";
@import "app/tags";
5 changes: 4 additions & 1 deletion app/assets/stylesheets/tpi.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@import 'settings';
@import "tpi/banner";
@import "tpi/navbar";
@import "tpi/hero";

.container {
display: flex;
Expand Down Expand Up @@ -39,4 +42,4 @@ container-columns {
.companies-size {
font-size: $font-size-36;
font-family: $font-family-bold;
}
}
32 changes: 32 additions & 0 deletions app/assets/stylesheets/tpi/_banner.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@import "app/colors";

.tpi--banner {
.banner {
height: 140px;
display: flex;
align-items: center;

.column {
align-items: flex-end;
}

.partners--container {
.content {
display: flex;
justify-content: flex-end;
color: $grey-dark;
}
}

.partners {
align-items: center;
max-height: 60px;

.column {
flex-grow: 0;
flex-basis: initial;
flex-shrink: 1;
}
}
}
}
58 changes: 58 additions & 0 deletions app/assets/stylesheets/tpi/_hero.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
@import "app/colors";

.tpi-home--hero {
color: $white;
position: relative;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;

&.is-primary {
background: $blue-dark;
}

.hero--body {
.hero--content {
align-items: center;

.title {
color: $white;
}

.description {
line-height: $size-4;
}
}
}


.button--container {
display: flex;
margin-top: 50px;

.button--hero {
@extend .is-medium;

height: 5rem;
padding-left: 4.125rem;
padding-right: 4.125rem;
background-color: $blue-darker;
}
}

.hero--splash {
position: absolute;
top: 0;
left: 45%;
}


&.is-secondary {
background: $blue;

.button--icon {
background: $blue-darker;
}
}
}
File renamed without changes.
27 changes: 27 additions & 0 deletions app/assets/stylesheets/tpi/_navbar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@import "bulma/sass/utilities/all";
@import "app/sizes";
@import "app/colors";

.tpi--navbar {
.header-nav {
width: 100%;
background-color: $dark;
}

.navbar-item,
.navbar-link {
padding: 0.5rem 1.25rem;
}

.navbar-dropdown {
@if $desktop {
width: 300px;
}

> .navbar-item {
font-size: $size-6;
padding-top: 10px;
padding-bottom: 10px;
}
}
}
File renamed without changes.
134 changes: 68 additions & 66 deletions app/views/layouts/_header.html.erb
Original file line number Diff line number Diff line change
@@ -1,79 +1,81 @@
<header class="header">
<navbar class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-hidden-desktop">
<a class="navbar-item" href="#">MENU</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="HeaderMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="HeaderMenu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless">
TPI tool
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
<div class="container">
<div class="navbar-brand is-hidden-desktop">
<a class="navbar-item" href="#">MENU</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="HeaderMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="HeaderMenu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless">
TPI tool
</a>
<a class="navbar-item">
Methodology
</a>
<a class="navbar-item">
Data background
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
TPI tool
</a>
<a class="navbar-item">
Methodology
</a>
<a class="navbar-item">
Data background
</a>
</div>
</div>
</div>

<a class="navbar-item">
Publications and news
</a>

<div class="navbar-item has-dropdown">
<a class="navbar-link is-arrowless is-active">
About
<a class="navbar-item">
Publications and news
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
Overview of the TPI
</a>
<a class="navbar-item">
Partners
</a>
<a class="navbar-item">
Technical advisory
</a>
<a class="navbar-item">
Supporters
</a>
<a class="navbar-item">
Investors
</a>
<a class="navbar-item">
Endorsements
</a>
<a class="navbar-item">
FAQ

<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless">
About
</a>
<!-- <hr class="navbar-divider"> -->

<div class="navbar-dropdown">
<a class="navbar-item">
Overview of the TPI
</a>
<a class="navbar-item">
Partners
</a>
<a class="navbar-item">
Technical advisory
</a>
<a class="navbar-item">
Supporters
</a>
<a class="navbar-item">
Investors
</a>
<a class="navbar-item">
Endorsements
</a>
<a class="navbar-item">
FAQ
</a>
<!-- <hr class="navbar-divider"> -->
</div>
</div>
</div>
</div>

<div class="navbar-end">
<a class="navbar-item">
Newsletter
</a>
<a class="navbar-item">
Login / Register
</a>
<a class="navbar-item">
<%= render 'shared/search-icon' %>
</a>

<div class="navbar-end">
<a class="navbar-item">
Newsletter
</a>
<a class="navbar-item">
Login / Register
</a>
<a class="navbar-item">
<%= render 'shared/search-icon' %>
</a>
</div>
</div>
</div>
</navbar>
Expand Down
Loading

0 comments on commit 44ef110

Please sign in to comment.