theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Optimisation logo header adapté taille fenêtre

Browse Source
This commit is contained in:
Divlo 2019-12-07 09:21:15 +01:00
parent a070e5aefc
commit 2c98cd252d
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.css
View File

@ -47,21 +47,6 @@ header {
.navbar {
border-bottom: var(--border-header-footer);
}
#logo-small-screen {
display: none;
}
@media (max-width: 463px) {
#logo {
display: none;
}
.navbar-brand {
width: 30%;
}
#logo-small-screen {
display: inline-block;
width: 80%;
}
}
.nav-link {
text-align: center !important;
}

3
incl/header.php
View File

@ -45,8 +45,7 @@
<div class="container" id="header-container">
<!-- Brand -->
<a class="navbar-brand" href="/index.php">
<img id="logo" src="/img/FunctionProject_brand-logo.png" alt="FunctionProject">
<img id="logo-small-screen" src="/img/FunctionProject_icon.png" alt="FunctionProject">
<img id="logo-header" src="/img/FunctionProject_brand-logo.png" alt="FunctionProject">
</a>
<!-- Hamburger icon on Mobile -->

15
scripts/main.js
View File

@ -230,6 +230,21 @@ $(function () {
setInterval(change,10000);
}
/* Changement du logo du header selon la largeur de la fenêtre */
$(window).resize(function() {
const windowWidth = $(window).width();
if(windowWidth < 463){
$('#logo-header').attr('src', '/img/FunctionProject_icon.png');
$('#logo-header').attr('style', 'display: inline-block;width: 80%;');
$('.navbar-brand').attr('style', 'width: 30%;');
}
else {
$('#logo-header').attr('src', '/img/FunctionProject_brand-logo.png');
$('#logo-header').removeAttr('style');
$('.navbar-brand').removeAttr('style');
}
});
/* Permet d'afficher l'heure en temps réel sur le footer */
window.onload = realDateTime('realDateTime');