Add mobile styling

This commit is contained in:
Jorit Tijsen
2024-03-20 12:31:55 +01:00
parent 04b4a3b3e5
commit 5b9dc7c7f3
26 changed files with 828 additions and 128 deletions

View File

@@ -5,7 +5,6 @@
<html>
@include('layouts._head')
<body>
<button style="position: fixed; top: 0; left: 0;display: none;" onclick="refreshCSS()">Refresh</button>
<!-- Google Tag Manager (noscript) -->
<noscript>
@@ -19,15 +18,42 @@
<div class="header_container small">
<div class="header clearfix">
<div class="logo">
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg" class="ri"/></a>
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
</div>
<div style="float: right;width: 728px;height: 90px;margin: 11px auto 0px auto;background-color: #efefef;"></div>
<div class="advertisement" style="margin: 11px auto 0 auto;background-color: #efefef;"></div>
</div>
</div>
<div class="menu_mobile_container d-flex d-md-none sticky clearfix">
<div class="mobile_menu_button">
<a href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
</div>
<div class="logo_mobile">
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
</div>
<div class="right_menu_container">
<ul class="right_menu">
<li>
<a href="{{url('contact')}}">Tip <i class="fa-solid fa-circle-plus"></i></a>
</li>
@if(isset($searchURL))
<li>
<form class="search_form" action="{{url($searchURL)}}">
<input type="text" name="query" placeholder="Zoeken..."
value="{{isset($query) ? $query : null}}" class="search_input">
<a href="javascript:void(0)" onclick="this.form.submit()" class="search_submit"><i
class="fa-solid fa-magnifying-glass"></i></a>
</form>
<a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i
style="display: none" class="fa-solid fa-xmark"></i></a>
</li>
@endif
</ul>
</div>
</div>
<div class="menu_container sticky clearfix">
<div class="top_menu_container">
<ul>
<div class="top_menu_container d-none d-md-block">
<ul class="right_menu">
<li>
<a href="{{url('contact')}}">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
</li>
@@ -36,7 +62,8 @@
<form class="search_form" action="{{url($searchURL)}}">
<input type="text" name="query" placeholder="Zoeken..."
value="{{isset($query) ? $query : null}}" class="search_input">
<a href="javascript:void(0)" onclick="this.form.submit()" class="search_submit"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="javascript:void(0)" onclick="this.form.submit()" class="search_submit"><i
class="fa-solid fa-magnifying-glass"></i></a>
</form>
<a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i
style="display: none" class="fa-solid fa-xmark"></i></a>
@@ -67,7 +94,7 @@
<div class="footer_container">
<div class="footer_menu">
<div class="row">
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>NH Gooi</span></h4>
<p class="about">
<b>NH Gooi</b> is de streekomroep voor het Gooi in samenwerking met NH Media.
@@ -75,7 +102,7 @@
<a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Contact</span></h4>
<p class="buttons">
<a href="{{url('contact')}}">Contactgegevens</a>
@@ -85,7 +112,7 @@
<a href="https://nhnieuws.nl/" target="_blank">NH Nieuws</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Kijk & luister</span></h4>
<p class="buttons">
<a class="player" href="{{url('luister/live')}}">Luister live</a>
@@ -95,7 +122,7 @@
<a href="{{url('nieuws')}}">Nieuws</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Radio</span></h4>
<p class="buttons">
<a href="{{url('gids')}}">Programmagids</a>
@@ -113,11 +140,15 @@
<li><a href="{{url('cookie-statement')}}">Cookie statement</a></li>
</ul>
<ul class="footer_social_media">
<li><a class="facebook" title="Facebook" target="_blank" href="https://www.facebook.com/WijZijnNHGooi"><i class="fa-brands fa-facebook-f"></i></a>
<li><a class="facebook" title="Facebook" target="_blank"
href="https://www.facebook.com/WijZijnNHGooi"><i class="fa-brands fa-facebook-f"></i></a>
</li>
<li><a class="twitter-x" title="Twitter/X" target="_blank" href="https://twitter.com/nhgooi"><i class="fa-brands fa-twitter"></i></a>
<li><a class="twitter-x" title="Twitter/X" target="_blank" href="https://twitter.com/nhgooi"><i
class="fa-brands fa-twitter"></i></a>
</li>
<li><a class="youtube" title="Youtube" target="_blank" href="https://www.youtube.com/channel/UC0qLwqmXiLoL5PrLlgB6B4Q"><i class="fa-brands fa-youtube"></i></a></li>
<li><a class="youtube" title="Youtube" target="_blank"
href="https://www.youtube.com/channel/UC0qLwqmXiLoL5PrLlgB6B4Q"><i
class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>