Skip to content

Commit

Permalink
frontpage cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
Jan Forberg committed Jan 26, 2024
1 parent 96a0631 commit 6ff7139
Show file tree
Hide file tree
Showing 12 changed files with 697 additions and 623 deletions.
24 changes: 21 additions & 3 deletions public/css/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,23 @@
// COLOR PALETTE

// Navbar
$nav-background-dark: #353e47;
$nav-background-medium: #434f5c;
$nav-search-border: #fff;
$nav-links: #fff;
$nav-search-background: $nav-background-medium;

// Action Banner
$banner-background: #e6e7ec;
$banner-box-frame: #fff;
$banner-box-background: #366281;
$banner-box-background-hover: rgb(255 255 255 / 13%);

// Backgrounds
$background-white: #fff;
$background-light: #fff;


$link: #3867d6;

$highlight: #f5f5f5;
Expand All @@ -9,7 +28,6 @@ $icon-color: #b5b5b5;
$yasqe-disabled-background: $background;
$yasqe-disabled-border: #e6e6e6;

$navbar-background: #24292e;

$topic-header: #7a7a7a;
$grey-light: #dbdbdb;
Expand All @@ -30,12 +48,12 @@ $entity-artifact: #66a0c9;
$entity-artifact-bg: #7BA0BB;

$entity-consumer: #29acbf;
$entity-consumer-bg: #29acbf;
$entity-consumer-bg: #28b0c5;

$entity-group: #6e7699;
$entity-group-bg: #7B89AB;

$entity-version: #4dbca5;
$entity-version: #47b49f;
$entity-version-bg: #89BDB7;

$entity-collection: #81b180;
Expand Down
3 changes: 0 additions & 3 deletions public/css/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,6 @@

// NAVBAR

.navbar-db {
background-color: $navbar-background;
}

// Settings and boxes

Expand Down
34 changes: 34 additions & 0 deletions public/css/_fonts.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
@font-face {
font-family: 'PT Sans';
src: url('./../fonts/PTSans-Regular.ttf');
}

@font-face {
font-family: "PT Sans";
src: url("./../fonts/PTSans-Bold.ttf");
font-weight: bold;
}

@font-face {
font-family: "PT Sans";
src: url("./../fonts/PTSans-Italic.ttf");
font-style: italic;
}

@font-face {
font-family: "PT Sans";
src: url("./../fonts/PTSans-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'Roboto';
src: url('./../fonts/Roboto-Regular.ttf');
}

@font-face {
font-family: 'Roboto';
src: url('./../fonts/Roboto-Bold.ttf');
font-weight: bold;
}
192 changes: 55 additions & 137 deletions public/css/_frontpage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,172 +1,90 @@
.databus-navbar {
height: 78px;
}

.databus-navbar-container {
z-index: 8000;
height: 78px;
align-items: center;
background-color: #36404b;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);
}

.databus-navbar-content {
display: flex;
height: inherit;
justify-content: stretch;
align-items: center;
width: 100%;
.section.call-to-action {
background-color: $banner-background;
padding: 3em 0em;
position: relative;
}

.frontpage-box-frame {

background-color: $banner-box-frame;
border-radius: 20px;
padding: 0px;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05);

@media screen and (min-width: 1500px),
print {
.databus-navbar-content {
max-width: 1500px;
margin: auto;
}
}

.navbar-dropdown {
min-width: 200px;
font-size: 1em;
}



.databus-home-icon {
.frontpage-box {
background-color: $banner-box-background;
border-radius: 20px;
display: flex;
align-items: center;
}

.databus-home-icon .org-icon {
max-width: 200px;
max-height: 36px;
min-height: 1.5em;
}

.databus-home-icon .org-separator {
width: 2px;
height: 20px;
background-color: white;
margin: 0em 1em;
}


.databus-home-icon .org-subtitle {
font-size: 1.2em;
color: white;
margin-right: 2em;
letter-spacing: 1px;
}

.databus-navbar .nav-search {
flex: 1;
}


.databus-navbar .databus-navbar-item.fill {
flex-grow: 1;
}

.databus-navbar-brand {
display: flex;
margin-left: 1.5em;
}

.databus-navbar-menu {
display: flex !important;
height: inherit;
width: 380px;
padding: 1.2em;
position: relative;
flex: 1;
}

.databus-navbar-item {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}

.databus-navbar-item.is-light:hover {
opacity: 1;
.frontpage-box.left {
background-color: $entity-consumer-bg;
}

a.databus-navbar-item {
color: white;
margin-right: 1em;
}

.databus-navbar-item.is-light {
opacity: 0.7;
.frontpage-box.center {
background-color: $entity-version;
}

.databus-navbar-group {
display: flex;
align-items: stretch;
flex: 1;
flex-grow: 10;
}

.databus-navbar-end {
display: flex;
justify-content: flex-end;
justify-self: flex-end;
margin: 0em 1em;
align-items: stretch;
}
$frontpage-box-scale-time: 0.4s;
$frontpage-box-scale-amount: -4px;

.databus-navbar-item.account-name {
padding-right: 1em;
padding-left: 1em;
margin-right: .5em;
justify-content: stretch;
display: flex;
}
.frontpage-box:hover {
-moz-transform: translateY($frontpage-box-scale-amount);
-webkit-transform: translateY($frontpage-box-scale-amount);
-o-transform: translateY($frontpage-box-scale-amount);
-ms-transform: translateY($frontpage-box-scale-amount);
-webkit-transform: translateY($frontpage-box-scale-amount);
transform: translateY($frontpage-box-scale-amount);

.databus-navbar-item.account-name:hover {
opacity: 0.8;
-webkit-transition: transform $frontpage-box-scale-time ease-out;
-moz-transition: transform $frontpage-box-scale-time ease-out;
-ms-transition: transform $frontpage-box-scale-time ease-out;
}

.databus-navbar-item.has-dropdown {
position: relative;
cursor: pointer;
align-items: stretch;
.frontpage-box-arrow {
position: absolute;
right: 1em;
top: 1em;
}

.databus-navbar-item.has-dropdown .databus-navbar-dropdown {
display: none;
.frontpage-box-frame:not(:last-child) {
margin-right: 2em;
}

.databus-navbar-item.has-dropdown.is-active .databus-navbar-dropdown {
display: block;
.frontpage-box .content {
padding: 0;
margin-left: 1em;
}

.databus-navbar-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: #404751;
border-top: 2px solid white;
padding-bottom: 8px;
min-width: 250px;
.frontpage-box .content h1 {
margin-bottom: 4px;
color: white;
font-weight: 600;
}

.databus-navbar-dropdown-arrow {
margin-left: 8px;
.frontpage-box .headline databus-icon {
margin-right: .7em;
}

.databus-navbar-item.has-dropdown:hover .databus-navbar-dropdown-arrow {
opacity: 0.7;

.frontpage-box h1 {
font-size: 1.2em;
margin-top: 0;
}

@media screen and (max-width: 1024px),
print {
.databus-navbar-group.is-hidden-for-mobile {
display: none;
}
.has-background-pattern {
background-image: url(../img/banner-background.png);
background-repeat: repeat;
background-position: center;
background-size: 150px;
}
Loading

0 comments on commit 6ff7139

Please sign in to comment.