tilman/radioanton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Tilman
2023-06-19 17:00:21 +02:00
parent 0c87c909d6
commit b6ee50fd5b
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.twig
+26 -5
View File
@@ -32,20 +32,24 @@
<link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
<link rel="stylesheet" href="{{ theme_url }}/css/contrailone.css" type="text/css" />
<link rel="stylesheet" href="{{ theme_url }}/css/droidsans.css" type="text/css" />
<style>
.nav-link { font-family: 'Contrail One'; }
</style>
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-5">
<a class="navbar-brand" href="#!"><img src="{{ theme_url }}/assets/radioanton-logo-transparent.png" width="30" height="30" class="d-inline-block align-top" alt="Radio Anton"></a>
<a class="navbar-brand" href="#!"><img src="{{ theme_url }}/assets/radioanton-logo-transparent.png" height="50" class="d-inline-block align-top" alt="Radio Anton"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Services</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Radio</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Podcast</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Über uns</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Kontakt</a></li>
</ul>
</div>
</div>
@@ -116,6 +120,23 @@
<script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
// https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_shrink_scroll
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
</script>
</body>
</html>