Skip to content

Commit

Permalink
Header and homepage refresh (#1675)
Browse files Browse the repository at this point in the history 
* Updated header and home page content

Signed-off-by: Travis Beckham <[email protected]>

---------

Signed-off-by: Travis Beckham <[email protected]>
Signed-off-by: William Morgan <[email protected]>
Co-authored-by: William Morgan <[email protected]>
  • Loading branch information
@travisbeckham @wmorgan
travisbeckham and wmorgan authored Sep 12, 2023
1 parent 1f77cac commit 4d71520
Show file tree
Hide file tree
Showing 92 changed files with 1,145 additions and 589 deletions.
78 changes: 38 additions & 40 deletions linkerd.io/assets/scss/_navbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,39 @@
.navbar-menu {
position: relative;
&.is-active {
// text-align: center;
}
}

.navbar-item-helper {
font-size: 16px;
font-weight: 600;
svg {
margin-right: 5px;
}
.button-spacer {
display: inline-block;
padding: 19px 21px;
height: 56px;
line-height: 16px;
border: 1px solid $white;
border-radius: 8px;

.navbar-item:hover & {
border: 1px solid $primary-bright-blue;
}
}
}

.navbar.is-fixed-top {
z-index: 100000;
}

.navbar {
transition: box-shadow 0.4s;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
img {
width: 210px;
width: 160px;
max-height: none;
}

.dropdown {
position: static;
@include desktop {
position: relative;
align-items: center;
}
}

.dropdown-menu {
top: 0;
width: 100%;
height: 100%;
background-color: $navy-black;
background-color: white;
@include desktop {
top: 100%;
width: auto;
Expand All @@ -55,25 +43,24 @@
}

.dropdown-item {
color: white;
@include desktop {
color: $navy-black;
}
background-color: transparent;
color: $deep-blue;
}

.dropdown-item:hover {
background-color: $navy-black;
background-color: transparent;
color: $primary-bright-blue;
@include desktop {
background-color: white;
color: $primary-bright-blue;
}
}
.dropdown button:not(.back),
.dropdown button:focus {

.dropdown .dropdown-trigger button,
.dropdown .dropdown-trigger button:focus {
outline: none;
background: transparent;
border: none;
font-size: 18px;
font-size: 16px;
cursor: pointer;
padding-right: 28px;

Expand All @@ -86,39 +73,44 @@
top: 50%;
right: 0;
transform: translateY(-50%);
background: url("/images/icon-chevron-down.svg");
background: url("/images/icon-chevron-down-blue.svg");
}
}

button.back {
.dropdown.is-active .dropdown-trigger button:after {
transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu button.back {
color: $primary-bright-blue;
background-color: transparent;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
@include desktop {
display: none;
}
}

.dropdown.is-active button:after {
transform: translateY(-50%) rotate(180deg);
}

.dropdown-content {
background-color: $navy-black;
box-shadow: none;
background-color: white;
@include desktop {
border-radius: 16px;
border: 2px solid $primary-bright-blue;
background-color: white;
box-shadow: $dropdown-shadow;
}
}
.navbar-menu {

.navbar-start {
box-shadow: none;
.navbar-item {
line-height: 1.5!important;
padding-left: 1rem;
padding-right: 1rem;
color: $deep-blue;
&.is-active,
&:hover {
background: none;
color: $deep-blue;
}
&:hover {
.navbar-item-helper {
Expand All @@ -127,10 +119,16 @@
}
&.is-active {
.navbar-item-helper {
border-color: $primary-bright-blue;
color: $primary-bright-blue;
}
}
}
}
}

.github-stars {
span {
display: block;
height: 28px;
}
}
78 changes: 31 additions & 47 deletions linkerd.io/assets/scss/bulma.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,42 @@
@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:300,400,500,600");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700");

// brand colors
$sky-blue: #c8f1ff;
$primary-bright-blue: #0185fd;
$secondary-bright-blue: #005efd;
$light-blue: #E3F2FE;
$deep-blue: #001e64;
$deep-blue: #063359;
$light-grey: #f4f4f4;
$medium-grey: #ececec;
$dark-grey: #818181;
$proxima-font: "Proxima Soft W01 Medium";
$orange: #ff9b21;
$dark-green: #6FF9AB;
$dark-green: #64F9BF;
$light-green: #3BECA9;
$aqua-green: #e9fdf5;

$navy-black: #001443;

// update Bulma's global vars
$box-padding:0;
$box-radius: 4px;
$size-1: 2.8rem;
$family-primary: "Roboto", "Open Sans", sans-serif;
$family-sans-serif: "Roboto", "Open Sans", sans-serif;
$family-primary: "Open Sans", sans-serif;
$family-sans-serif: "Open Sans", sans-serif;
$text: $deep-blue;
$grey-light: $light-grey;
$notification-radius: 0;
$weight-semibold: 600;


$box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
$dropdown-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);

$navbar-height: 6.25rem;
$navbar-padding-vertical: 0;
$navbar-padding-horizontal: 2.625rem;
$navbar-height: 3.4rem;
$navbar-z: 300; // rounded block is 200
$navbar-fixed-z: 300;

$navbar-box-shadow-size: 0 4px 4px 0;
$navbar-box-shadow-color: rgba(0,0,0,0.2);

$navbar-background-color: $navy-black;
$navbar-burger-color: $primary-bright-blue;
$navbar-box-shadow-size: 0;
//$navbar-box-shadow-color: rgba(0,0,0,0.2);
$navbar-background-color: white;

$breadcrumb-item-separator-color: $dark-grey;

Expand All @@ -56,7 +50,7 @@ $menu-list-border-left: none;
$menu-item-color: $dark-grey;
$menu-item-hover-color: $primary-bright-blue;
$menu-item-hover-background-color: inherit;
$menu-item-active-color: $navy-black;
$menu-item-active-color: $deep-blue;
$menu-item-active-background-color: white;

$modal-z: 100001;
Expand All @@ -82,12 +76,12 @@ $tablet-enabled: false;
}

.has-background-navy-black {
background: $navy-black;
background: $deep-blue;
}

.has-text-navy-black,
.has-text-color {
color: $navy-black;
color: $deep-blue;
}

.has-text-dark-grey {
Expand All @@ -98,7 +92,6 @@ $tablet-enabled: false;
color: $light-green !important;
}


.has-background-aqua-green {
background: $aqua-green;

Expand All @@ -110,102 +103,93 @@ $tablet-enabled: false;
}

body {
font: 300 18px/28px "Roboto" !important;
letter-spacing: 0.3px;
font: 400 18px/28px "Open Sans" !important;
}

h1,
.is-size-1,
h1.is-size-1 {
font: 300 40px/48px "Roboto" !important;
letter-spacing: 0.25px;
font: 400 40px/48px "Open Sans" !important;
}

h2,
.is-size-2,
h2.is-size-2 {
font: bold 28px/36px "Roboto" !important;
letter-spacing: 0.25px;
font: 700 28px/36px "Open Sans" !important;
}

h3,
.is-size-3
h3.is-size-3 {
font: 500 26px/34px "Roboto" !important;
letter-spacing: 0.25px;
font: 600 26px/34px "Open Sans" !important;
}

h4,
.is-size-4,
h4.is-size-4 {
font: 300 26px/32px "Roboto" !important;
letter-spacing: 0.5px;
font: 400 26px/32px "Open Sans" !important;
}

h5,
.is-size-5,
h5.is-size-5 {
font: normal 20px/28px "Roboto" !important;
letter-spacing: 0.1px;
font: 400 20px/28px "Open Sans" !important;
}

h6,
.is-size-6,
h6.is-size-6 {
font: 500 16px/22px "Roboto" !important;
letter-spacing: 0.1px;

font: 500 16px/22px "Open Sans" !important;
&.has-text-weight-light {
font-weight: 300 !important;
font-weight: 400 !important;
}
}

a {
font: normal 18px/22px "Roboto" !important;
font: 400 18px/22px "Open Sans" !important;
color: $primary-bright-blue;
letter-spacing: 0.1px;
&:hover {
color: $secondary-bright-blue;
}
}


.button {
border: 1px solid $dark-green;
border-radius: 4px;
color: $dark-green;
background-color: transparent;
font: 500 17px/24px "Roboto" !important;
letter-spacing: 0.9px;
font: 600 18px/22px "Open Sans" !important;
&:hover,
&:active,
&:focus {
border-color: $light-green;
color: $light-green;
}
&.is-primary {
color: $navy-black;
color: $deep-blue;
border-color: transparent;
background-color: $dark-green;
border: 1px solid $dark-green;
&:hover,
&:focus {
color: $navy-black;
color: $deep-blue;
background-color: $light-green;
}
&:active {
color: $navy-black;
color: $deep-blue;
background-color: $light-green;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
}
}
&.is-link {
background-color: $primary-bright-blue;
}
&.is-large {
min-height: 56px;
min-width: 200px;
font-size: 16px;
}
}

.text-nowrap {
white-space: nowrap !important;
}
}
Loading

0 comments on commit 4d71520

Please sign in to comment.