ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed safari mobile header issue

Browse Source
This commit is contained in:
Ross Trottier 2024-07-24 12:29:01 -06:00
parent 29accf73d0
commit 050fb6adc1
2 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/st-nav.js
View File

@ -57,3 +57,6 @@ window.addEventListener('scroll', function(event) {
lastScrollPosition = scrollPosition; lastScrollPosition = scrollPosition;
}); });
const navItems = document.querySelectorAll('.st-header-icon-bar__item');

30
style.css
View File

@ -21,6 +21,7 @@ body {
font-family: "Rubik", sans-serif; font-family: "Rubik", sans-serif;
line-height: 1.6; line-height: 1.6;
overflow-anchor: none; overflow-anchor: none;
/* min-width: 320px; */
} }
input, button, textarea, select { input, button, textarea, select {
@ -219,6 +220,10 @@ SECTIONS
margin-left: calc((100% - (4 * 47px)) / (4 - 1)); margin-left: calc((100% - (4 * 47px)) / (4 - 1));
} }
.st-header-icon-bar__item .safari {
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.st-header-icon-bar__item { .st-header-icon-bar__item {
transition: margin 300ms; transition: margin 300ms;
@ -226,6 +231,31 @@ SECTIONS
} }
} }
/** Safari */
@supports (-webkit-touch-callout: none) {
.st-header-icon-bar__item {
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
@media (min-width: 1200px) {
.st-header-icon-bar__item {
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
}
}
/* @media not all and (min-resolution:.001dpcm)
{
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
.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;
} }