Feature/banner subtile variant (#387)

* banner (#385) * Update layout.js * Update banner.js * Update banner.js * Update banner.js * Update banner.js * updated banner * updated hero content position * update: text size, backgroud, position, button size --------- Co-authored-by: Alex Beckett <75361908+alex-beckett@users.noreply.github.com>
celestiaorg · Mar 25, 2024 · 3600849 · 3600849
1 parent 540b3a1
commit 3600849
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/src/components/modules/banner.js b/src/components/modules/banner.js
@@ -30,9 +30,10 @@ export default class Banner extends React.Component {
 					<i className={"icon-close"}></i>
 				</div>
 				<div className={"container"}>
-					<div className={"gap-3 justify-content-center align-items-center d-flex flex-column flex-lg-row"}>
+					<div className={"gap-2 gap-lg-4 justify-content-center align-items-center d-flex flex-column flex-lg-row"}>
 						<div className={"banner-text col-auto"}>
-							Get ready for the first Celestia hackathon! Infinite Space Bazaar begins on April 2 <div className={`emoji`}>☄️</div>
+							Get ready for the first Celestia hackathon! Infinite Space Bazaar begins on April 2
+							{/* <div className={`emoji`}>☄️</div> */}
 						</div>
 
 						<a className={"col-auto"} href='https://bazaar.celestia.org' target={"_blank"} rel={"noreferrer"}>

diff --git a/src/scss/modules/header.scss b/src/scss/modules/header.scss
@@ -426,10 +426,10 @@ header {
 }
 
 .banner {
-	background-color: rgba(255, 255, 255, 0.3);
-	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
-	backdrop-filter: blur(50px);
-	padding: 25px 0;
+	background-color: rgba(255, 255, 255, 0.2);
+	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+	backdrop-filter: blur(30px);
+	padding: 12px 0;
 	color: #000000;
 	font-family: $ruberoid;
 	font-size: 18px;
@@ -438,22 +438,13 @@ header {
 	line-height: 26px;
 	z-index: 100;
 	position: relative;
-	top: 8px;
-	left: 10px;
+	top: 0px;
+	left: 0px;
 	width: 100%;
 	text-align: center;
 	overflow: hidden;
-	border-radius: 10px;
-	width: calc(100% - 20px);
-	background: linear-gradient(
-		90deg,
-		rgba(150, 50, 238, 0.5) 0%,
-		rgba(241, 177, 123, 0.5) 35.42%,
-		rgba(135, 204, 233, 0.5) 66.15%,
-		rgba(172, 124, 209, 0.6) 99.48%
-	);
+	width: 100%;
 	background-size: 300% 300%;
-	animation: gradient 10s ease infinite;
 	filter: brightness(1.3);
 	@include transition(500ms all ease-in-out);
 
@@ -496,7 +487,7 @@ header {
 
 	.close-banner {
 		position: absolute;
-		top: 14px;
+		top: 18px;
 		right: 18px !important;
 		font-size: 12px;
 		right: 0;
@@ -509,6 +500,7 @@ header {
 
 	.banner-text {
 		text-wrap: pretty;
+		font-size: 16px;
 		@include media-breakpoint-down(sm) {
 			font-size: 14px;
 			line-height: 1.35em;
@@ -523,9 +515,11 @@ header {
 		}
 	}
 	.button-simple {
+		font-size: 14px;
+		padding: 10px 20px;
 		@include media-breakpoint-down(sm) {
-			font-size: 14px;
-			padding: 10px 20px;
+			font-size: 12px;
+			padding: 8px 16px;
 		}
 	}
 }