Dinawo/Julianum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Update header styles for sticky navigation
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
.dinawo
2024-07-07 03:35:53 +02:00
parent 9345f2c8ec
commit 98fac9e68b
3 changed files with 89 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
views/feathures.ejs
View File

@@ -111,6 +111,26 @@
text-decoration: none;
font-size: 1.2rem;
}
.header-scrolled {
background-color: #1f2937; /* bg-gray-900 */
padding: 1rem; /* p-4 */
position: sticky;
top: 0; /* Collé en haut de la page */
z-index: 50; /* z-50 */
max-width: 40rem; /* max-w-xl */
border-radius: 9999px; /* rounded-full */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
transform: scale(0.8); /* Réduction de la taille */
left: 50%; /* Alignement horizontal au milieu */
transform: translateX(-50%);
}
.header-scrolled:hover {
transform: translateX(-50%) scale(1); /* Agrandissement au survol */
padding: 2rem; /* Agrandissement du padding au survol */
}
</style>
</head>
@@ -159,9 +179,6 @@
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🛠️</span>: Bannir un membre
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🗡️</span>: Gérer les rapports de blocage
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">📊</span>: Afficher les informations du bot
</div>
@@ -171,9 +188,6 @@
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🤖</span>: Obtenir l'image d'un emoji personnalisé
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🦾</span>: Générer une chaîne aléatoire
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">⌨️</span>: Afficher les commandes disponibles
</div>
@@ -183,27 +197,12 @@
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🗡️</span>: Expulser un membre
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">⌨️</span>: Envoyer un message privé à un utilisateur spécifique
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🛡️</span>: Mettre un membre en sourdine
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🗡️</span>: Gérer les 'nr'
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🗡️</span>: Gérer les notes de mise à jour
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🪛</span>: Afficher les notes de mise à jour du bot
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">🪄</span>: Supprimer toutes les invitations du serveur
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">📝</span>: Créer un rapport
</div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">⌨️</span>: Rechercher un utilisateur
</div>
@@ -239,6 +238,15 @@
drawerButton.addEventListener('click', toggleDrawer);
drawerClose.addEventListener('click', toggleDrawer);
drawerOverlay.addEventListener('click', toggleDrawer);
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) { // Commence à changer après 100px de défilement
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
</script>
</body>