From 92b78e9eb51594da78cb4a6458f209868eaff267 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Thu, 30 May 2024 10:23:26 -0600
Subject: [PATCH] header draft 1

---
 assets/images/search.svg   |  44 ++++++++++++++++
 assets/images/txt-logo.svg |  80 +++++++++++++++++++++++++++++
 functions.php              |   6 +--
 header.php                 | 102 +++++++++++++++++++++----------------
 style.css                  |  67 +++++++++++++++++++++++-
 5 files changed, 252 insertions(+), 47 deletions(-)
 create mode 100644 assets/images/search.svg
 create mode 100644 assets/images/txt-logo.svg

diff --git a/assets/images/search.svg b/assets/images/search.svg
new file mode 100644
index 0000000..61f2efc
--- /dev/null
+++ b/assets/images/search.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="19.300003"
+   height="19.299995"
+   viewBox="0 0 19.300003 19.299995"
+   xml:space="preserve"
+   sodipodi:docname="sprite.svg"
+   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="defs276" /><sodipodi:namedview
+   id="namedview276"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1" />&#10;<style
+   type="text/css"
+   id="style1">&#10;	.st0{fill:#FFFFFF;}&#10;	.st1{fill:#676767;}&#10;	.st2{fill:url(#SVGID_1_);}&#10;	.st3{fill:#AFAFB0;}&#10;	.st4{fill:#1CA8BD;}&#10;	.st5{fill:#388E43;}&#10;	.st6{fill:#F3A61D;}&#10;	.st7{fill:#074E9E;}&#10;	.st8{fill:#BEBDBD;}&#10;	.st9{fill:#0069E6;}&#10;	.st10{fill:#074E9D;}&#10;	.st11{fill:#ADADAD;}&#10;	.st12{fill:url(#SVGID_2_);}&#10;	.st13{fill:#F5861F;}&#10;	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#0B4FA0;}&#10;	.st15{fill:#0B4FA0;}&#10;	.st16{fill:url(#SVGID_3_);}&#10;	.st17{fill:#FFFFFF;stroke:#A3131D;stroke-miterlimit:10;}&#10;	.st18{fill:#A3000C;}&#10;	.st19{fill:url(#SVGID_4_);}&#10;	.st20{fill:#FFFFFF;stroke:#0B4FA0;stroke-miterlimit:10;}&#10;	.st21{fill:url(#SVGID_5_);}&#10;	.st22{fill:#FFFFFF;stroke:#622A7F;stroke-miterlimit:10;}&#10;	.st23{fill:url(#SVGID_6_);}&#10;	.st24{fill:#FFFFFF;stroke:#F5A700;stroke-miterlimit:10;}&#10;	.st25{fill:url(#SVGID_7_);}&#10;	.st26{fill:#FFFFFF;stroke:#2F8617;stroke-miterlimit:10;}&#10;	.st27{fill:#F5A700;}&#10;	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:#2F8617;}&#10;	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}&#10;	.st30{fill:none;stroke:#2F8617;stroke-width:0.4822;stroke-miterlimit:10;}&#10;	.st31{fill:url(#SVGID_8_);}&#10;	.st32{fill:#FFFFFF;stroke:#FF6D00;stroke-miterlimit:10;}&#10;	.st33{fill:#FF6D00;}&#10;	.st34{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6D00;}&#10;	.st35{fill:#622A7F;}&#10;	.st36{fill:none;stroke:#0B4FA0;stroke-width:1.5;stroke-miterlimit:10;}&#10;	.st37{fill-rule:evenodd;clip-rule:evenodd;fill:#034BA1;}&#10;	.st38{opacity:0.2;}&#10;	.st39{fill:#62C8F8;}&#10;	.st40{opacity:0.7;fill:#FFFFFF;}&#10;	.st41{fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;}&#10;	.st42{fill:none;stroke:#074E9D;stroke-width:0.5;stroke-miterlimit:10;}&#10;	.st43{fill:#06509B;}&#10;	.st44{fill-rule:evenodd;clip-rule:evenodd;fill:#09509C;}&#10;	.st45{fill:#268AFF;}&#10;	.st46{fill:#034BA1;}&#10;	.st47{fill:#2283F5;}&#10;	.st48{fill:#0D519D;}&#10;	.st49{fill:url(#SVGID_9_);}&#10;	.st50{fill:#FFFFFF;stroke:#0088B7;stroke-miterlimit:10;}&#10;	.st51{fill:#1D9ECC;}&#10;</style>&#10;&#10;&#10;<linearGradient
+   id="SVGID_1_"
+   gradientUnits="userSpaceOnUse"
+   x1="18.870399"
+   y1="582.78119"
+   x2="89.075401"
+   y2="623.51343"
+   gradientTransform="matrix(1,0,0,-1,-100.7,786.1)">&#10;	<stop
+   offset="0"
+   style="stop-color:#074E9D"
+   id="stop15" />&#10;	<stop
+   offset="1"
+   style="stop-color:#3A6AB2"
+   id="stop16" />&#10;</linearGradient>&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;<path
+   class="st7"
+   d="m 19.300003,17.099997 -4.8,-4.8 c 0.8,-1.2 1.3,-2.6999997 1.3,-4.3999997 0,-4.4 -3.5,-7.8999999901199 -7.8999999,-7.8999999901199 -4.4,0 -7.9000000482422,3.4999999901199 -7.9000000482422,7.8999999901199 0,4.3999997 3.5000000482422,7.8999997 7.9000000482422,7.8999997 1.6,0 3.0999999,-0.5 4.2999999,-1.3 l 4.8,4.8 z M 2.5000031,7.9999973 c 0,-3 2.5,-5.5 5.5,-5.5 2.9999999,0 5.4999999,2.5 5.4999999,5.5 0,2.9999997 -2.5,5.4999997 -5.4999999,5.4999997 -3,0 -5.5,-2.5 -5.5,-5.4999997 z"
+   id="path38" />&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;</svg>
diff --git a/assets/images/txt-logo.svg b/assets/images/txt-logo.svg
new file mode 100644
index 0000000..ee1459f
--- /dev/null
+++ b/assets/images/txt-logo.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="195.79999"
+   height="18"
+   viewBox="0 0 195.79999 18"
+   xml:space="preserve"
+   sodipodi:docname="sprite.svg"
+   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="defs276" /><sodipodi:namedview
+   id="namedview276"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1" />&#10;<style
+   type="text/css"
+   id="style1">&#10;	.st0{fill:#FFFFFF;}&#10;	.st1{fill:#676767;}&#10;	.st2{fill:url(#SVGID_1_);}&#10;	.st3{fill:#AFAFB0;}&#10;	.st4{fill:#1CA8BD;}&#10;	.st5{fill:#388E43;}&#10;	.st6{fill:#F3A61D;}&#10;	.st7{fill:#074E9E;}&#10;	.st8{fill:#BEBDBD;}&#10;	.st9{fill:#0069E6;}&#10;	.st10{fill:#074E9D;}&#10;	.st11{fill:#ADADAD;}&#10;	.st12{fill:url(#SVGID_2_);}&#10;	.st13{fill:#F5861F;}&#10;	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#0B4FA0;}&#10;	.st15{fill:#0B4FA0;}&#10;	.st16{fill:url(#SVGID_3_);}&#10;	.st17{fill:#FFFFFF;stroke:#A3131D;stroke-miterlimit:10;}&#10;	.st18{fill:#A3000C;}&#10;	.st19{fill:url(#SVGID_4_);}&#10;	.st20{fill:#FFFFFF;stroke:#0B4FA0;stroke-miterlimit:10;}&#10;	.st21{fill:url(#SVGID_5_);}&#10;	.st22{fill:#FFFFFF;stroke:#622A7F;stroke-miterlimit:10;}&#10;	.st23{fill:url(#SVGID_6_);}&#10;	.st24{fill:#FFFFFF;stroke:#F5A700;stroke-miterlimit:10;}&#10;	.st25{fill:url(#SVGID_7_);}&#10;	.st26{fill:#FFFFFF;stroke:#2F8617;stroke-miterlimit:10;}&#10;	.st27{fill:#F5A700;}&#10;	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:#2F8617;}&#10;	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}&#10;	.st30{fill:none;stroke:#2F8617;stroke-width:0.4822;stroke-miterlimit:10;}&#10;	.st31{fill:url(#SVGID_8_);}&#10;	.st32{fill:#FFFFFF;stroke:#FF6D00;stroke-miterlimit:10;}&#10;	.st33{fill:#FF6D00;}&#10;	.st34{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6D00;}&#10;	.st35{fill:#622A7F;}&#10;	.st36{fill:none;stroke:#0B4FA0;stroke-width:1.5;stroke-miterlimit:10;}&#10;	.st37{fill-rule:evenodd;clip-rule:evenodd;fill:#034BA1;}&#10;	.st38{opacity:0.2;}&#10;	.st39{fill:#62C8F8;}&#10;	.st40{opacity:0.7;fill:#FFFFFF;}&#10;	.st41{fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;}&#10;	.st42{fill:none;stroke:#074E9D;stroke-width:0.5;stroke-miterlimit:10;}&#10;	.st43{fill:#06509B;}&#10;	.st44{fill-rule:evenodd;clip-rule:evenodd;fill:#09509C;}&#10;	.st45{fill:#268AFF;}&#10;	.st46{fill:#034BA1;}&#10;	.st47{fill:#2283F5;}&#10;	.st48{fill:#0D519D;}&#10;	.st49{fill:url(#SVGID_9_);}&#10;	.st50{fill:#FFFFFF;stroke:#0088B7;stroke-miterlimit:10;}&#10;	.st51{fill:#1D9ECC;}&#10;</style>&#10;&#10;<g
+   id="g15"
+   inkscape:export-filename="g15.png"
+   inkscape:export-xdpi="95.189873"
+   inkscape:export-ydpi="95.189873"
+   transform="translate(-170.10001,-200.10001)">&#10;	<path
+   d="m 205.9,213.9 c -1.7,0 -3.5,-0.4 -4.4,-1 v -1.6 c 0.8,0.7 2.6,1.4 4.4,1.4 2,0 3.3,-0.7 3.3,-1.5 0,-2.3 -7.9,-0.6 -7.9,-4.4 0,-1.8 2.3,-2.5 4.5,-2.5 1.5,0 3.2,0.3 4,0.9 v 1.5 c -1,-0.7 -2.5,-1.1 -4.1,-1.1 -0.9,0 -2.8,0.3 -2.8,1.3 0,2.4 7.9,0.7 7.9,4.3 -0.1,1.9 -2.5,2.7 -4.9,2.7 z"
+   id="path2" />&#10;	<path
+   d="m 214.2,212.3 h 7.4 v 1.2 h -8.8 v -9 h 1.4 z"
+   id="path3" />&#10;	<path
+   d="m 227.8,204.2 c 3.6,0 6.4,2.2 6.4,4.9 0,2.7 -2.9,4.8 -6.4,4.8 -3.6,0 -6.4,-2.2 -6.4,-4.8 0,-2.8 2.9,-4.9 6.4,-4.9 z m 0,8.5 c 2.7,0 5,-1.6 5,-3.6 0,-2 -2.2,-3.6 -5,-3.6 -2.7,0 -5,1.6 -5,3.6 0,2 2.3,3.6 5,3.6 z"
+   id="path4" />&#10;	<path
+   d="m 245.7,211 3.4,-6.5 h 1.5 l -4.9,9.5 -3.4,-6.9 -3.3,6.9 -4.9,-9.5 h 1.5 l 3.4,6.5 3.4,-7 z"
+   id="path5" />&#10;	<path
+   d="m 251.1,205.7 v -1.2 h 10.6 v 1.2 h -4.6 v 7.8 h -1.4 v -7.8 z"
+   id="path6" />&#10;	<path
+   d="m 273.7,211 3.4,-6.5 h 1.5 l -4.9,9.5 -3.4,-6.9 -3.3,6.9 -4.9,-9.5 h 1.5 l 3.4,6.5 3.4,-7 z"
+   id="path7" />&#10;	<path
+   d="m 280.6,213.5 v -9 h 1.4 v 9 z"
+   id="path8" />&#10;	<path
+   d="m 283.7,205.7 v -1.2 h 10.6 v 1.2 h -4.6 v 7.8 h -1.4 v -7.8 z"
+   id="path9" />&#10;	<path
+   d="m 300.5,212.7 c 1.8,0 3.4,-0.6 4.3,-1.7 v 1.7 c -1.1,0.8 -2.6,1.2 -4.3,1.2 -3.6,0 -6.4,-2.2 -6.4,-4.8 0,-2.7 2.9,-4.9 6.4,-4.9 1.6,0 3.1,0.5 4.3,1.2 v 1.7 c -0.9,-1.1 -2.5,-1.7 -4.3,-1.7 -2.7,0 -5,1.6 -5,3.6 0,2 2.3,3.7 5,3.7 z"
+   id="path10" />&#10;	<path
+   d="m 316.7,209.3 h -7.9 v 4.2 h -1.4 v -9 h 1.4 v 3.6 h 7.9 v -3.6 h 1.4 v 9 h -1.4 z"
+   id="path11" />&#10;	<path
+   d="m 321.7,212.8 c 0,0.5 -0.4,0.9 -0.9,0.9 -0.5,0 -0.9,-0.4 -0.9,-0.8 0,-0.5 0.4,-0.9 0.9,-0.9 0.5,-0.1 0.9,0.3 0.9,0.8 z"
+   id="path12" />&#10;	<path
+   class="st1"
+   d="m 329.5,212.7 c 1.8,0 3.4,-0.6 4.3,-1.7 v 1.7 c -1.1,0.8 -2.6,1.2 -4.3,1.2 -3.6,0 -6.4,-2.2 -6.4,-4.8 0,-2.7 2.9,-4.9 6.4,-4.9 1.6,0 3.1,0.5 4.3,1.2 v 1.7 c -0.9,-1.1 -2.5,-1.7 -4.3,-1.7 -2.7,0 -5,1.6 -5,3.6 0,2 2.3,3.7 5,3.7 z"
+   id="path13" />&#10;	<path
+   class="st1"
+   d="m 342.5,204.2 c 3.6,0 6.4,2.2 6.4,4.9 0,2.7 -2.9,4.8 -6.4,4.8 -3.5,0 -6.4,-2.2 -6.4,-4.8 0,-2.8 2.8,-4.9 6.4,-4.9 z m 0,8.5 c 2.7,0 5,-1.6 5,-3.6 0,-2 -2.2,-3.6 -5,-3.6 -2.7,0 -5,1.6 -5,3.6 0,2 2.3,3.6 5,3.6 z"
+   id="path14" />&#10;	<path
+   class="st1"
+   d="m 350.8,213.5 h -1.5 l 3.4,-9.5 4.9,7.5 4.9,-7.5 3.4,9.5 h -1.5 l -2.4,-6.5 -4.5,7 -4.5,-7 z"
+   id="path15" />&#10;</g>&#10;<linearGradient
+   id="SVGID_1_"
+   gradientUnits="userSpaceOnUse"
+   x1="18.870399"
+   y1="582.78119"
+   x2="89.075401"
+   y2="623.51343"
+   gradientTransform="matrix(1,0,0,-1,-170.10001,635.89999)">&#10;	<stop
+   offset="0"
+   style="stop-color:#074E9D"
+   id="stop15" />&#10;	<stop
+   offset="1"
+   style="stop-color:#3A6AB2"
+   id="stop16" />&#10;</linearGradient>&#10;&#10;&#10;<path
+   class="st3"
+   d="m 17.499994,4.9999892 c 0.7,-0.1 1.6,0 3,0.3 -1.3,-0.4 -2.2,-0.7 -2.8,-1.1 0.5,-0.4 1.4,-0.8 2.7,-1.2 -1.3,0.3 -2.3,0.5 -2.9,0.5 0.3,-0.6 0.8,-1.4 1.7,-2.4 -1,0.9 -1.7,1.6 -2.3,1.9 -0.1,-0.7 0,-1.6 0.3,-2.999999972145 -0.4,1.299999972145 -0.7,2.199999972145 -1.1,2.799999972145 -0.4,-0.5 -0.8,-1.4 -1.2,-2.69999997 0.3,1.19999997 0.4,1.99999997 0.5,2.59999997 -0.1,-0.1 -0.2,-0.2 -0.3,-0.3 -4.3,-3.29999997 -9.2000001,-0.7 -10.3000001,3.4 -0.9,3.4 -3.5,3.5 -2.5,0.3 1.1,-3.8 4.9,-5.99999997 8.1000001,-5.89999997 -0.5000001,-0.1 -0.9000001,-0.1 -1.4000001,-0.1 -5,0 -9.0000000035157,3.99999997 -9.0000000035157,8.99999997 0,2.1999998 0.8000000035157,4.0999998 2.0000000035157,5.6999998 4,-7.3999998 9.4000001,-10.5999998 14.5000001,-10.6999998 -4.8,0.7 -10.0000001,6.4999998 -10.8000001,12.8999998 3.4,0.7 6.6000001,-1.6 7.5000001,-4.7 0.9,-3.3999998 3.5,-3.4999998 2.5,-0.3 -1.1,3.8 -4.9,6 -8.1000001,5.9 0.5,0.1 0.9,0.1 1.4,0.1 5.0000001,0 9.0000001,-4 9.0000001,-8.9999998 0,-1.1 -0.2,-2.1 -0.6,-3.1 0.6,0.3 1.2,0.8 2.1,1.6 -1,-1.2 -1.7,-1.9 -2,-2.5 z"
+   id="path18" />&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;</svg>
diff --git a/functions.php b/functions.php
index 01cc420..be93fce 100644
--- a/functions.php
+++ b/functions.php
@@ -8,9 +8,9 @@ function slowtwitch_theme_support() {
 add_action('wp_enqueue_scripts', 'slowtwitch_register_styles');
 
 function slowtwitch_register_styles() {
-    wp_enqueue_style('slowtwitch-styles', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get('version'), 'all');
-    //wp_enqueue_style('slowtwitch-skeleton', get_template_directory_uri() . '/assets/css/skeleton.css', array(), '1.0', 'all');
-    //wp_enqueue_style('slowtwitch-normalize', get_template_directory_uri() . '/assets/css/normalize.css', array(), '1.0', 'all');
+    wp_enqueue_style('slowtwitch-styles', get_template_directory_uri() . '/style.css', array('slowtwitch-skeleton', 'slowtwitch-normalize'), wp_get_theme()->get('version'), 'all');
+    wp_enqueue_style('slowtwitch-skeleton', get_template_directory_uri() . '/assets/css/skeleton.css', array(), '1.0', 'all');
+    wp_enqueue_style('slowtwitch-normalize', get_template_directory_uri() . '/assets/css/normalize.css', array(), '1.0', 'all');
 }
 
 add_action( 'init', 'slowtwitch_menus' );
diff --git a/header.php b/header.php
index 46222c3..b1e7997 100644
--- a/header.php
+++ b/header.php
@@ -1,63 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 
-  <!-- Basic Page Needs
+    <!-- Basic Page Needs
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta charset="utf-8">
+    <meta charset="utf-8">
 
-  <meta name="description" content="">
-  <meta name="author" content="">
+    <meta name="description" content="">
+    <meta name="author" content="">
 
-  <!-- Mobile Specific Metas
+    <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-  <?php wp_head() ?>
+    <?php wp_head() ?>
 
 </head>
+
 <body>
 
-<!-- Header html starts here
+    <!-- Header html starts here
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<div class="container slowtwitch-header">
-    <div class="row">
-        <div class="ten columns">
+    <div class="container">
+        <div class="container slowtwitch-desktop-header">
             <div class="row">
-                <div class="one-third column">
-                    <img src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
+                <div class="ten columns">
+                    <div class="row text-logo-header">
+                        <img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
+                        <p>Subscribe</p>
+                    </div>
+                    <div class="row flex-row">
+                        <img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
+                        <img class="slowtwitch-ad-header" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
+                    </div>
+                    <div class="row flex-row-right">
+                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo">
+                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/vimeo.svg" alt="vimeo logo">
+                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/facebook.svg" alt="facebook logo">
+                    <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/youtube.svg" alt="youtube logo">
+                        <form method="get" action="">
+                            <div class="searchBarContainer">
+                                <input type="text" class="searchBox" name="s" id="s" placeholder="Search" />
+                                <button class="btn-search">
+                                    <img src="/wp-content/themes/slowtwitch-wp/assets/images/search.svg">
+                                </button>
+                            </div>
+                    </div>
                 </div>
-                <div class="two-thirds column">
-                    <img src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
+                <div class="two columns desktop-tag-logos">
+                    <div class="row">
+                        <img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim">
+                    </div>
+                    <div class="row">
+                        <img src="/wp-content/themes/slowtwitch-wp/assets/images/bike-lrg.svg" alt="run">
+                    </div>
+                    <div class="row">
+                        <img src="/wp-content/themes/slowtwitch-wp/assets/images/running-lrg.svg" alt="run">
+                    </div>
                 </div>
             </div>
         </div>
-    <div class="two columns">
-        <div class="row">
-            <img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim">
-        </div>
-        <div class="row">
-            <img src="/wp-content/themes/slowtwitch-wp/assets/images/bike-lrg.svg" alt="run">
-        </div>
-        <div class="row">
-            <img src="/wp-content/themes/slowtwitch-wp/assets/images/running-lrg.svg" alt="run">
-        </div>
-    </div>
-    </div>
-</div>
-<nav>
-    <div class="main-menu-wrapper">
-    <?php
-        wp_nav_menu(
-            array(
-                'menu' => 'primary',
-                'container' => '',
-                'theme_location' => 'primary',
-                'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul><label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>'
-            )
-        );
-    ?>
-    </div>
-</nav>
-
+        <nav>
+            <div class="main-menu-wrapper">
+                <?php
+                wp_nav_menu(
+                    array(
+                        'menu' => 'primary',
+                        'container' => '',
+                        'theme_location' => 'primary',
+                        'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul><label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>'
+                    )
+                );
+                ?>
+            </div>
+        </nav>
+    </div>
\ No newline at end of file
diff --git a/style.css b/style.css
index cabc69c..739a06a 100644
--- a/style.css
+++ b/style.css
@@ -11,8 +11,69 @@
     font-family: Oswald;
 }
 
+.slowtwitch-desktop-header {
+    width: 100%;
+}
+
+.searchBarContainer {
+    border: none;
+    height: 2rem;
+    background-color: #fff;
+    border-radius: 2px;
+    box-sizing: border-box;
+    width: 20%;
+    max-width: 60%;
+    display: flex;
+}
+
+.slowtwitch-logo-social {
+    margin: 0 5px 0 5px;
+}
+
+.flex-row {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.flex-row-right {
+    display: flex;
+    justify-content: end;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.slowtwitch-logo-header {
+    max-width: 25%;
+}
+
+.slowtwitch-ad-header {
+    max-width: 85%;
+    margin-left: auto;
+}
+
+.desktop-tag-logos img {
+    float: right;
+}
+
+.text-logo-header {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    border-bottom: 1px solid black;
+}
+
+.text-logo-header p {
+    margin-left: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 nav {
-    position: fixed;
+    position: relative;
+    margin: 0 auto;
     background-color: #0b4fa0;
     width: 100%;
     z-index: 999;
@@ -177,4 +238,8 @@ nav {
     .nav-links li a:hover {
         background-color: #0b4fa0;
     }
+
+    .slowtwitch-desktop-header {
+        display: none;
+    }
 }
\ No newline at end of file