add top banner for Apex event

This commit is contained in:
Jake
2021-08-03 16:23:22 -07:00
parent 74f7af1524
commit c335276643
5 changed files with 186 additions and 1 deletions

56
styles/_top-banner.scss Normal file
View File

@@ -0,0 +1,56 @@
.top-banner {
height: 46px;
background: url(../img/backgrounds/bg-apex-banner.svg);
background-position: center;
background-color: #7919FF;
padding: 2px 8px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 24px;
@include media-breakpoint-up(md) {
padding: 11px 8px;
}
.btn {
margin-top: -4px;
margin-left: 8px;
padding: 2px 4px;
font-size: 12px;
@include media-breakpoint-up(md) {
padding: 8px;
margin-left: 16px;
font-size: 16px;
}
}
p {
font-size: 12px;
line-height: 20px;
width: 280px;
text-align: center;
margin: auto;
@include media-breakpoint-up(md) {
font-size: 16px;
line-height: 24px;
width: initial;
}
}
}
body {
padding-top: 46px;
}
.top-nav {
top: 46px;
}
.right-sidebar,
.left-sidebar {
@include media-breakpoint-up(lg) {
top: 100px;
}
}

View File

@@ -67,6 +67,7 @@ $line-height-base: 1.5;
@import "_rpc-tool.scss";
@import "_blog.scss";
@import "_feedback.scss";
@import "top-banner.scss";
// Light/Dark theme settings ---------------------------------------------------
// Option to only change theme on user system settings. No toggle.