Skip to content

Commit

Permalink
Initial commit of header and homepage refresh
Browse files Browse the repository at this point in the history 
Signed-off-by: Travis Beckham <[email protected]>
  • Loading branch information
@travisbeckham
travisbeckham committed Sep 6, 2023
1 parent 1f77cac commit bcf83fe
Show file tree
Hide file tree
Showing 90 changed files with 985 additions and 539 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: 500;
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: 500;
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;
}
}
42 changes: 19 additions & 23 deletions linkerd.io/assets/scss/bulma.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,16 @@ $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;
Expand All @@ -30,19 +28,16 @@ $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 +51,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 +77,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 +93,6 @@ $tablet-enabled: false;
color: $light-green !important;
}


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

Expand Down Expand Up @@ -169,36 +163,38 @@ a {
}
}


.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;
letter-spacing: 0.3px;
&: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;
Expand All @@ -208,4 +204,4 @@ a {

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

0 comments on commit bcf83fe

Please sign in to comment.