header round 2

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

108
style.css
View File

@ -68,7 +68,85 @@ h1 {
.st-title-scrolled__ball { .st-title-scrolled__ball {
transform: scale(.85, .85) translate(0, -120px); 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);
}
}
/* /*
============================ ============================
@ -110,7 +188,7 @@ SECTIONS
} }
.st-header-scrolled { .st-header-scrolled {
pointer-events: none; /* pointer-events: none; */
max-height: 80px; max-height: 80px;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
} }
@ -141,6 +219,13 @@ SECTIONS
margin-left: calc((100% - (4 * 47px)) / (4 - 1)); 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 { .st-icon-bar-sticky .st-header-icon-bar__item {
margin-left: .75em; margin-left: .75em;
} }
@ -193,8 +278,14 @@ SECTIONS
padding: .6em .8em; padding: .6em .8em;
} }
.st-header-icon-bar { .st-icon-bar-sticky {
margin-top: 2.5em; 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 { .st-search-box {
width: 1000px; width: 1000px;
} }
@ -809,6 +900,13 @@ COMPONENTS
letter-spacing: 1px; letter-spacing: 1px;
} }
@media (min-width: 1200px) {
.st-icon-bar-sticky .st-chip {
margin-top: auto;
margin-bottom: auto;
}
}
.st-chip-primary { .st-chip-primary {
background: #0b4fa0; background: #0b4fa0;
} }