header round 2

This commit is contained in:
Ross Trottier 2024-07-22 14:41:25 -06:00
parent 3f03c09dd2
commit 3b373e72e3

106
style.css
View File

@ -70,6 +70,84 @@ h1 {
transform: scale(.85, .85) translate(0, -120px);
}
@media (min-width: 460px) {
.st-title-scrolled__ball {
transform: scale(.75, .75) translate(-10px, -145px);
}
}
@media (min-width: 590px) {
.st-title-scrolled__ball {
transform: scale(.75, .75) translate(-10px, -155px);
}
}
@media (min-width: 670px) {
.st-title-scrolled__ball {
transform: scale(.75, .75) translate(-10px, -160px);
}
}
@media (min-width: 725px) {
.st-title-scrolled__ball {
transform: scale(.75, .75) translate(-10px, -170px);
}
}
@media (min-width: 760px) {
.st-title-scrolled__ball {
transform: scale(.5, .5) translate(-50px, -270px);
}
}
@media (min-width: 960px) {
.st-title-scrolled__ball {
transform: scale(.45, .45) translate(-90px, -310px);
}
}
@media (min-width: 1025px) {
.st-title-scrolled__ball {
transform: scale(.45, .45) translate(-90px, -320px);
}
}
@media (min-width: 1100px) {
.st-title-scrolled__ball {
transform: scale(.45, .45) translate(-90px, -330px);
}
}
@media (min-width: 1150px) {
.st-title-scrolled__ball {
transform: scale(.45, .45) translate(-90px, -340px);
}
}
@media (min-width: 1200px) {
.st-title-scrolled__ball {
transform: scale(.4, .4) translate(-125px, -435px);
}
}
@media (min-width: 1275px) {
.st-title-scrolled__ball {
transform: scale(.4, .4) translate(-125px, -445px);
}
}
@media (min-width: 1350px) {
.st-title-scrolled__ball {
transform: scale(.4, .4) translate(-125px, -455px);
}
}
@media (min-width: 1350px) {
.st-title-scrolled__ball {
transform: scale(.4, .4) translate(-125px, -465px);
}
}
/*
============================
LAYOUT
@ -110,7 +188,7 @@ SECTIONS
}
.st-header-scrolled {
pointer-events: none;
/* pointer-events: none; */
max-height: 80px;
background-color: rgba(255, 255, 255, 0.95);
}
@ -141,6 +219,13 @@ SECTIONS
margin-left: calc((100% - (4 * 47px)) / (4 - 1));
}
@media (min-width: 1200px) {
.st-header-icon-bar__item {
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
}
.st-icon-bar-sticky .st-header-icon-bar__item {
margin-left: .75em;
}
@ -193,8 +278,14 @@ SECTIONS
padding: .6em .8em;
}
.st-header-icon-bar {
margin-top: 2.5em;
.st-icon-bar-sticky {
margin-top: .5em;
}
.st-icon-bar-sticky .st-open-nav,
.st-icon-bar-sticky .st-open-search {
box-shadow: none;
background: none;
}
}
@ -303,7 +394,7 @@ SECTIONS
}
}
@media (min-width: 120px) {
@media (min-width: 1200px) {
.st-search-box {
width: 1000px;
}
@ -809,6 +900,13 @@ COMPONENTS
letter-spacing: 1px;
}
@media (min-width: 1200px) {
.st-icon-bar-sticky .st-chip {
margin-top: auto;
margin-bottom: auto;
}
}
.st-chip-primary {
background: #0b4fa0;
}