new mobile header
This commit is contained in:
parent
a50dbca257
commit
3f03c09dd2
167
assets/images/SLOWTWITCH.svg
Normal file
167
assets/images/SLOWTWITCH.svg
Normal file
@ -0,0 +1,167 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="1440"
|
||||
height="937.32001"
|
||||
viewBox="0 0 1440 937.32001"
|
||||
sodipodi:docname="SLOWTWITCH.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.8849019"
|
||||
inkscape:cx="700.0776"
|
||||
inkscape:cy="349.75628"
|
||||
inkscape:window-width="2548"
|
||||
inkscape:window-height="1355"
|
||||
inkscape:window-x="2564"
|
||||
inkscape:window-y="40"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="group-R5">
|
||||
<inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
inkscape:label="1"
|
||||
id="page1"
|
||||
width="1440"
|
||||
height="937.32001"
|
||||
margin="0"
|
||||
bleed="0" />
|
||||
</sodipodi:namedview>
|
||||
<g
|
||||
id="g1"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="1">
|
||||
<g
|
||||
id="group-R5">
|
||||
<path
|
||||
id="path2"
|
||||
d="m 2664.86,565.391 c -125.27,0 -252.88,28.097 -317.25,72.601 v 113.539 c 56.2,-49.16 191.98,-98.32 319.59,-98.32 145.17,0 237.66,53.82 237.66,107.68 0,167.398 -573.65,43.308 -573.65,318.449 0,128.74 168.59,183.8 323.12,183.8 112.37,0 230.61,-21.07 286.81,-63.24 v -105.35 c -74.91,52.68 -180.28,80.77 -298.52,80.77 -64.4,0 -203.7,-19.92 -203.7,-97.17 0,-173.252 571.3,-53.82 571.3,-309.08 0,-148.672 -173.27,-203.679 -345.36,-203.679"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)"
|
||||
inkscape:export-filename="../Local Sites/st-dev/app/public/wp-content/themes/slowtwitch-news/assets/images/logotype-blue.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
id="path3"
|
||||
d="m 3264.26,677.789 h 537.36 V 589.98 h -636.86 v 653.24 h 99.5 V 677.789"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path4"
|
||||
d="m 4255.84,653.211 c 199.02,0 360.57,117.051 360.57,263.391 0,146.328 -161.55,264.568 -360.57,264.568 -199.03,0 -360.59,-118.24 -360.59,-264.568 0,-146.34 161.56,-263.391 360.59,-263.391 z m 0,615.769 c 257.54,0 465.93,-158.03 465.93,-352.378 0,-194.313 -208.39,-351.211 -465.93,-351.211 -257.56,0 -465.94,156.898 -465.94,351.211 0,194.348 208.38,352.378 465.94,352.378"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path5"
|
||||
d="m 5551.78,774.961 245.84,468.259 h 108.87 L 5551.78,556.031 5308.28,1053.57 5064.76,556.031 4710.05,1243.22 h 108.87 l 245.84,-468.259 243.52,505.719 243.5,-505.719"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path6"
|
||||
d="m 5941.6,1155.4 v 87.82 h 765.66 V 1155.4 H 6374.77 V 589.98 h -99.51 V 1155.4 H 5941.6"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path7"
|
||||
d="m 7584.09,774.961 245.85,468.259 h 108.87 L 7584.09,556.031 7340.6,1053.57 7097.09,556.031 6742.37,1243.22 h 108.87 l 245.85,-468.259 243.51,505.719 243.49,-505.719"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path8"
|
||||
d="m 8079.3,589.98 v 653.24 h 99.51 V 589.98 h -99.51"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path9"
|
||||
d="m 8307.56,1155.4 v 87.82 h 765.68 V 1155.4 H 8740.72 V 589.98 h -99.51 v 565.42 h -333.65"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path10"
|
||||
d="m 9527.46,653.211 c 131.13,0 246.94,46.82 310.18,124.09 V 654.352 c -83.11,-56.204 -190.84,-88.961 -310.18,-88.961 -257.58,0 -465.97,156.898 -465.97,351.211 0,194.348 208.39,352.378 465.97,352.378 119.34,0 227.07,-33.94 310.18,-90.14 v -124.08 c -63.24,77.25 -179.05,126.41 -310.18,126.41 -199.01,0 -360.61,-118.24 -360.61,-264.568 0,-146.34 161.6,-263.391 360.61,-263.391"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path11"
|
||||
d="m 10700.4,897.859 h -570.1 V 589.98 h -99.5 v 653.24 h 99.5 V 985.68 h 570.1 v 257.54 h 99.6 V 589.98 h -99.6 v 307.879"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path12"
|
||||
d="m 1803.61,1313.28 c 68.64,8.48 162.85,-4.98 302.05,-28.44 -135.03,41.24 -225.29,71.31 -282.92,109.6 55.22,41.67 143.56,77.13 275.83,126.4 -137.55,-31.78 -230.77,-50.87 -299.8,-46.52 26.96,63.69 85.75,138.55 175.67,247.36 -103.22,-96.3 -174.44,-159.43 -236.38,-190.19 -8.5,68.67 4.96,162.86 28.42,302.07 -41.22,-135.01 -71.31,-225.3 -109.6,-282.9 -41.69,55.2 -77.12,143.52 -126.41,275.83 27.29,-118.06 45.17,-203.43 46.96,-268.92 -11,11.34 -22.33,22.35 -33.89,33.11 -439.19,337.21 -936.634,70.01 -1051.212,-344.91 -95.281,-345.02 -354.773,-355.098 -255.551,-26.53 116.746,386.63 500.192,617.94 828.863,605.6 -47.96,7.74 -97.128,11.87 -147.277,11.87 C 411.16,1836.71 0,1425.55 0,918.359 0,697.141 78.2461,494.23 208.52,335.711 620.746,1087.44 1172.9,1414.55 1689.65,1424.49 1199.57,1352.81 664.016,765.129 581.922,107.328 929.676,31.3008 1254.6,265.781 1344.39,590.93 c 95.28,345.019 354.78,355.101 255.55,26.519 C 1483.22,230.949 1099.98,-0.339844 771.375,11.8594 819.258,4.14844 868.313,0 918.363,0 c 507.197,0 918.357,411.16 918.357,918.359 0,111.591 -19.95,218.511 -56.39,317.451 56.49,-31.37 123.31,-84.41 213.44,-158.93 -96.28,103.24 -159.42,174.43 -190.16,236.4"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path13"
|
||||
d="m 2664.86,5758.59 c -125.27,0 -252.88,28.09 -317.25,72.59 v 113.54 c 56.2,-49.16 191.98,-98.32 319.59,-98.32 145.17,0 237.66,53.82 237.66,107.68 0,167.4 -573.65,43.32 -573.65,318.45 0,128.74 168.59,183.8 323.12,183.8 112.37,0 230.61,-21.06 286.81,-63.23 v -105.36 c -74.91,52.68 -180.28,80.78 -298.52,80.78 -64.4,0 -203.7,-19.92 -203.7,-97.18 0,-173.25 571.3,-53.82 571.3,-309.08 0,-148.66 -173.27,-203.67 -345.36,-203.67"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path14"
|
||||
d="m 3264.26,5870.98 h 537.36 v -87.81 h -636.86 v 653.24 h 99.5 v -565.43"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path15"
|
||||
d="m 4255.84,5846.4 c 199.02,0 360.57,117.05 360.57,263.39 0,146.34 -161.55,264.57 -360.57,264.57 -199.03,0 -360.59,-118.23 -360.59,-264.57 0,-146.34 161.56,-263.39 360.59,-263.39 z m 0,615.78 c 257.54,0 465.93,-158.04 465.93,-352.39 0,-194.31 -208.39,-351.2 -465.93,-351.2 -257.56,0 -465.94,156.89 -465.94,351.2 0,194.35 208.38,352.39 465.94,352.39"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path16"
|
||||
d="m 5551.78,5968.15 245.84,468.26 h 108.87 l -354.71,-687.19 -243.5,497.54 -243.52,-497.54 -354.71,687.19 h 108.87 l 245.84,-468.26 243.52,505.72 243.5,-505.72"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path17"
|
||||
d="m 5941.6,6348.6 v 87.81 h 765.66 v -87.81 h -332.49 v -565.43 h -99.51 V 6348.6 H 5941.6"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path18"
|
||||
d="m 7584.09,5968.15 245.85,468.26 h 108.87 l -354.72,-687.19 -243.49,497.54 -243.51,-497.54 -354.72,687.19 h 108.87 l 245.85,-468.26 243.51,505.72 243.49,-505.72"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path19"
|
||||
d="m 8079.3,5783.17 v 653.24 h 99.51 v -653.24 h -99.51"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path20"
|
||||
d="m 8307.56,6348.6 v 87.81 h 765.68 v -87.81 h -332.52 v -565.43 h -99.51 v 565.43 h -333.65"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path21"
|
||||
d="m 9527.46,5846.4 c 131.13,0 246.94,46.83 310.18,124.09 v -122.95 c -83.11,-56.2 -190.84,-88.95 -310.18,-88.95 -257.58,0 -465.97,156.89 -465.97,351.2 0,194.35 208.39,352.39 465.97,352.39 119.34,0 227.07,-33.95 310.18,-90.15 v -124.08 c -63.24,77.25 -179.05,126.41 -310.18,126.41 -199.01,0 -360.61,-118.23 -360.61,-264.57 0,-146.34 161.6,-263.39 360.61,-263.39"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path22"
|
||||
d="m 10700.4,6091.05 h -570.1 v -307.88 h -99.5 v 653.24 h 99.5 v -257.54 h 570.1 v 257.54 h 99.6 v -653.24 h -99.6 v 307.88"
|
||||
style="fill:#050301;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
<path
|
||||
id="path23"
|
||||
d="m 1803.61,6506.47 c 68.64,8.48 162.85,-4.98 302.05,-28.44 -135.03,41.24 -225.29,71.31 -282.92,109.6 55.22,41.67 143.56,77.13 275.83,126.4 -137.55,-31.77 -230.77,-50.87 -299.8,-46.52 26.96,63.7 85.75,138.56 175.67,247.36 -103.22,-96.3 -174.44,-159.43 -236.38,-190.19 -8.5,68.68 4.96,162.86 28.42,302.07 -41.22,-135.01 -71.31,-225.3 -109.6,-282.9 -41.69,55.2 -77.12,143.53 -126.41,275.83 27.29,-118.05 45.17,-203.43 46.96,-268.92 -11,11.34 -22.33,22.35 -33.89,33.11 -439.19,337.21 -936.634,70.01 -1051.212,-344.91 -95.281,-345.02 -354.773,-355.1 -255.551,-26.52 116.746,386.62 500.192,617.93 828.863,605.59 -47.96,7.74 -97.128,11.87 -147.277,11.87 C 411.16,7029.9 0,6618.74 0,6111.55 0,5890.34 78.2461,5687.42 208.52,5528.9 620.746,6280.63 1172.9,6607.74 1689.65,6617.68 1199.57,6546 664.016,5958.33 581.922,5300.52 c 347.754,-76.03 672.678,158.45 762.468,483.6 95.28,345.02 354.78,355.11 255.55,26.52 -116.72,-386.5 -499.96,-617.79 -828.565,-605.59 47.883,-7.71 96.938,-11.86 146.988,-11.86 507.197,0 918.357,411.16 918.357,918.36 0,111.59 -19.95,218.52 -56.39,317.45 56.49,-31.36 123.31,-84.41 213.44,-158.93 -96.28,103.24 -159.42,174.43 -190.16,236.4"
|
||||
style="fill:#3253ac;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0.13333333,0,0,-0.13333333,0,937.32)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/images/logotype-blue.png
Normal file
BIN
assets/images/logotype-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/images/slowtwitch-ball-blue.png
Normal file
BIN
assets/images/slowtwitch-ball-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -30,9 +30,10 @@ closeSearchButton.addEventListener('click', () => {
|
||||
|
||||
const iconBar = document.querySelector('.st-header-icon-bar');
|
||||
const siteTitle = document.querySelector('.st-site-title');
|
||||
const siteTitleBall = document.querySelector('.st-site-title__ball');
|
||||
const header = document.querySelector('.st-header');
|
||||
let lastScrollPosition = 0;
|
||||
const scrollDepthActivationPoint = 100;
|
||||
const scrollDepthActivationPoint = 80;
|
||||
|
||||
window.addEventListener('scroll', function(event) {
|
||||
const scrollPosition = window.scrollY;
|
||||
@ -41,11 +42,13 @@ window.addEventListener('scroll', function(event) {
|
||||
iconBar.classList.remove('st-icon-bar-sticky');
|
||||
siteTitle.classList.remove('st-title-scrolled');
|
||||
header.classList.remove('st-header-scrolled');
|
||||
siteTitleBall.classList.remove('st-title-scrolled__ball');
|
||||
} else {
|
||||
if(lastScrollPosition < scrollDepthActivationPoint) {
|
||||
iconBar.classList.add('st-icon-bar-sticky');
|
||||
siteTitle.classList.add('st-title-scrolled');
|
||||
header.classList.add('st-header-scrolled');
|
||||
siteTitleBall.classList.add('st-title-scrolled__ball');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
24
header.php
24
header.php
@ -23,21 +23,31 @@
|
||||
<header class="st-header st-main-grid">
|
||||
|
||||
<div class="st-header-icon-bar">
|
||||
<a href="#" class="st-chip st-chip-primary">forum</a>
|
||||
<a href="#" class="st-chip st-chip-primary st-header-icon-bar__item">forum</a>
|
||||
<?php
|
||||
if (is_user_logged_in() == false) {
|
||||
?>
|
||||
<a href="#" class="st-chip st-chip-secondary">join</a>
|
||||
<a href="#" class="st-chip st-chip-secondary st-header-icon-bar__item">join</a>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<a href="#" class="st-header-icon st-header-icon-bar__item"><i class="fa fa-user"></i></a>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
|
||||
<button class="st-nav-btn st-open-search" aria-label="Open Search"><i class="fa fa-search"></i></button>
|
||||
<button class="st-nav-btn st-open-nav" aria-label="Open Navigation"><i class="fa fa-bars"></i></button>
|
||||
|
||||
<button class="st-nav-btn st-open-search st-header-icon-bar__item" aria-label="Open Search"><i class="fa fa-search"></i></button>
|
||||
<button class="st-nav-btn st-open-nav st-header-icon-bar__item" aria-label="Open Navigation"><i class="fa fa-bars"></i></button>
|
||||
</div>
|
||||
|
||||
<a href="<?php echo home_url() ?>" class="st-site-title-link"><h1 class="st-site-title">Slowtwitch</h1></a>
|
||||
|
||||
<div class="st-site-title-grid">
|
||||
<a href="<?php echo home_url() ?>" class="st-site-title-link">
|
||||
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-blue.png" alt="Logotype" class="st-site-title__ball">
|
||||
</a>
|
||||
<a href="<?php echo home_url() ?>" class="st-site-title-link">
|
||||
<img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-blue.png" alt="Logotype" class="st-site-title">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="st-nav st-main-grid">
|
||||
<button class="st-nav-btn st-close-nav" aria-label="Close Navigation">×</button>
|
||||
<?php
|
||||
|
||||
@ -51,4 +51,7 @@
|
||||
}
|
||||
}
|
||||
}?>
|
||||
<?php get_footer() ?>
|
||||
<?php
|
||||
comments_template();
|
||||
get_footer();
|
||||
?>
|
||||
75
style.css
75
style.css
@ -37,42 +37,38 @@ h1 {
|
||||
}
|
||||
|
||||
.st-site-title {
|
||||
text-transform: uppercase;
|
||||
color: #0b4fa0;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
font-size: 3.3rem;
|
||||
transform: scale(1, 1);
|
||||
transition: transform 300ms;
|
||||
transform-origin: top left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.st-site-title__ball {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
transform: scale(1, 1) translate(0%,0%);
|
||||
transition: transform 300ms;
|
||||
}
|
||||
|
||||
.st-site-title-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.st-site-title-grid {
|
||||
margin: 4rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: 15% 85%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.st-title-scrolled {
|
||||
transform: scale(0,0);
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.st-site-title {
|
||||
font-size: 6.9rem;
|
||||
margin-bottom: .10em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.st-site-title {
|
||||
font-size: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.st-site-title {
|
||||
font-size: 13.3rem;
|
||||
}
|
||||
}
|
||||
.st-title-scrolled__ball {
|
||||
transform: scale(.85, .85) translate(0, -120px);
|
||||
}
|
||||
|
||||
/*
|
||||
============================
|
||||
@ -105,24 +101,34 @@ SECTIONS
|
||||
.st-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
-webkit-transition: max-height 300ms;
|
||||
-moz-transition: max-height 300ms;
|
||||
-ms-transition: max-height 300ms;
|
||||
-o-transition: max-height 300ms;
|
||||
transition: max-height 300ms;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.st-header-scrolled {
|
||||
pointer-events: none;
|
||||
max-height: 80px;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.st-header-icon-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
color: black;
|
||||
margin-top: 1em;
|
||||
transition: margin 300ms;
|
||||
}
|
||||
|
||||
.st-header-logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.st-header-icon {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -130,7 +136,16 @@ SECTIONS
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.st-icon-bar-sticky a {
|
||||
.st-header-icon-bar__item {
|
||||
transition: margin 300ms;
|
||||
margin-left: calc((100% - (4 * 47px)) / (4 - 1));
|
||||
}
|
||||
|
||||
.st-icon-bar-sticky .st-header-icon-bar__item {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.st-icon-bar-sticky .sticky-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -140,15 +155,9 @@ SECTIONS
|
||||
padding: .1em .4em;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
|
||||
margin-left: auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.st-icon-bar-sticky .st-open-search {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.st-header-icon-bar {
|
||||
margin-top: 1.5em;
|
||||
@ -198,7 +207,7 @@ SECTIONS
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: -100%;
|
||||
left: -110%;
|
||||
transform: translateX(0);
|
||||
transition: transform ease-in-out 250ms;
|
||||
grid-template-rows: minmax(2.25rem, 3rem) 1fr;
|
||||
@ -207,7 +216,7 @@ SECTIONS
|
||||
|
||||
.st-nav-is-open,
|
||||
.st-search-is-open {
|
||||
transform: translateX(100%);
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
.st-nav-btn {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user