new mobile header

assets/images/SLOWTWITCH.svg

@@ -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>

assets/js/st-nav.js

@@ -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');
         } 
     }
     

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-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" aria-label="Open Navigation"><i class="fa fa-bars"></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">&times;</button>
             <?php

single.php

@@ -51,4 +51,7 @@
             }
         }
     }?>
-<?php get_footer() ?>
+<?php 
+comments_template();
+get_footer(); 
+?>

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-title-scrolled__ball {
-    .st-site-title {
+    transform: scale(.85, .85) translate(0, -120px);
-        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;
-    }
-}
 
 /*
 ============================
@@ -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 {