header complete

This commit is contained in:
Ross Trottier 2024-05-30 13:28:06 -06:00
parent 3ac79dfc92
commit db96b479fc
2 changed files with 40 additions and 10 deletions

View File

@ -32,15 +32,25 @@
<p>Subscribe</p> <p>Subscribe</p>
</div> </div>
<div class="row flex-row"> <div class="row flex-row">
<img class="slowtwitch-logo-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo"> <a href="<?php echo home_url() ?>" class="slowtwitch-logo-header hide-mobile">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
</a>
<img class="slowtwitch-mobile-text-logo" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo"> <img class="slowtwitch-mobile-text-logo" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
<img class="slowtwitch-ad-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock"> <img class="slowtwitch-ad-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
</div> </div>
<div class="row flex-row-right hide-mobile"> <div class="row flex-row-right hide-mobile">
<img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo"> <a style="display: contents;" class="slowtwitch-logo-social" href="https://twitter.com/slowtwitch">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo">
</a>
<a style="display: contents;" class="slowtwitch-logo-social" href="https://vimeo.com/slowtwitch">
<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/vimeo.svg" alt="vimeo logo">
</a>
<a style="display: contents;" class="slowtwitch-logo-social" href="https://www.facebook.com/slowtwitch/">
<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/facebook.svg" alt="facebook logo">
</a>
<a style="display: contents;" class="slowtwitch-logo-social" href="https://www.youtube.com/slowtwitch">
<img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/youtube.svg" alt="youtube logo"> <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/youtube.svg" alt="youtube logo">
</a>
<form method="get" action=""> <form method="get" action="">
<div class="searchBarContainer"> <div class="searchBarContainer">
<input type="text" class="searchBox" name="s" id="s" placeholder="Search" /> <input type="text" class="searchBox" name="s" id="s" placeholder="Search" />
@ -54,13 +64,19 @@
<label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label> <label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>
<div class="two columns desktop-tag-logos"> <div class="two columns desktop-tag-logos">
<div class="row"> <div class="row">
<a href="<?php echo home_url('tag/swim') ?>">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim"> <img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim">
</a>
</div> </div>
<div class="row"> <div class="row">
<a href="<?php echo home_url('tag/bike') ?>">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/bike-lrg.svg" alt="run"> <img src="/wp-content/themes/slowtwitch-wp/assets/images/bike-lrg.svg" alt="run">
</a>
</div> </div>
<div class="row"> <div class="row">
<a href="<?php echo home_url('tag/run') ?>">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/running-lrg.svg" alt="run"> <img src="/wp-content/themes/slowtwitch-wp/assets/images/running-lrg.svg" alt="run">
</a>
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +89,7 @@
'menu' => 'primary', 'menu' => 'primary',
'container' => '', 'container' => '',
'theme_location' => 'primary', '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>' '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><form class="hide-desktop" 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></form>%3$s</ul>'
) )
); );
?> ?>

View File

@ -36,7 +36,7 @@
} }
.slowtwitch-logo-social { .slowtwitch-logo-social {
margin: 0 5px 0 5px; margin: 0 10px 0 10px;
} }
.flex-row { .flex-row {
@ -64,6 +64,7 @@
} }
.desktop-tag-logos img { .desktop-tag-logos img {
margin-top: 10px;
float: right; float: right;
} }
@ -262,4 +263,17 @@ nav {
.slowtwitch-mobile-text-logo { .slowtwitch-mobile-text-logo {
display: block; display: block;
} }
.hide-desktop {
display: block;
}
.hide-desktop .searchBarContainer {
margin-left: 35px;
margin-top: 10px;
}
.hide-desktop .searchBarContainer button {
background-color: white;
}
} }