ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve social media icons

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-09 07:33:03 +04:00
parent a5c13207c1
commit 64de9af6ab
2 changed files with 72 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+62 -2
View File
@@ -181,11 +181,23 @@ img {
background: none; background: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
color: var(--text-color);
margin-left: 15px; margin-left: 15px;
cursor: pointer; cursor: pointer;
} }
.icon-button i {
color: var(--text-color);
}
/* Priorité plus élevée pour les couleurs des réseaux sociaux */
.icon-button i.icon-facebook,
.icon-button i.icon-youtube,
.icon-button i.icon-instagram,
.icon-button i.icon-tiktok,
.icon-button i.icon-twitter {
color: inherit;
}
/* Hero Section */ /* Hero Section */
.hero-mastodon-wrapper { .hero-mastodon-wrapper {
display: flex; display: flex;
@@ -827,13 +839,61 @@ img {
.more-social-item i { .more-social-item i {
margin-right: 10px; margin-right: 10px;
font-size: 18px; font-size: 18px;
color: var(--primary-red);
width: 20px; width: 20px;
text-align: center; text-align: center;
color: inherit;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.more-social-dropdown { .more-social-dropdown {
right: -15px; right: -15px;
} }
}
/* Styles pour les icônes des réseaux sociaux avec leurs couleurs officielles */
i.icon-facebook,
.fab.fa-facebook.icon-facebook {
color: #1877F2 !important; /* Bleu Facebook */
}
i.icon-youtube,
.fab.fa-youtube.icon-youtube {
color: #FF0000 !important; /* Rouge YouTube */
}
i.icon-instagram,
.fab.fa-instagram.icon-instagram {
/* Imiter le dégradé Instagram avec une couleur principale */
color: #E1306C !important; /* Rose/magenta Instagram */
}
i.icon-tiktok,
.fab.fa-tiktok.icon-tiktok {
color: #000000 !important; /* Noir TikTok */
}
i.icon-tiktok-accent {
color: #EE1D52 !important; /* Rouge TikTok */
}
i.icon-twitter,
.fab.fa-twitter.icon-twitter {
color: #1DA1F2 !important; /* Bleu Twitter */
}
/* Maintenir la couleur par défaut pour les icônes dans le footer */
.footer-social a {
margin: 0 10px;
font-size: 24px;
color: var(--text-color);
}
/* Ajustements pour le menu déroulant des réseaux sociaux */
.more-social-item i {
margin-right: 10px;
font-size: 18px;
width: 20px;
text-align: center;
/* Supprimer la couleur rouge par défaut pour utiliser les classes spécifiques */
color: inherit;
} }
index.php
+10 -10
View File
@@ -82,19 +82,19 @@
</div> </div>
<div class="social-icons"> <div class="social-icons">
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button"><i class="fab fa-instagram"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button"><i class="fab fa-instagram icon-instagram"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button"><i class="fab fa-tiktok"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button"><i class="fab fa-tiktok icon-tiktok"></i></a>
<div class="more-social-container"> <div class="more-social-container">
<a href="#" class="icon-button more-social-toggle"><i class="fas fa-ellipsis-h"></i></a> <a href="#" class="icon-button more-social-toggle"><i class="fas fa-ellipsis-h"></i></a>
<div class="more-social-dropdown"> <div class="more-social-dropdown">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item"> <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item">
<i class="fab fa-facebook"></i> Facebook <i class="fab fa-facebook icon-facebook"></i> Facebook
</a> </a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item"> <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item">
<i class="fab fa-youtube"></i> YouTube <i class="fab fa-youtube icon-youtube"></i> YouTube
</a> </a>
<a target="_blank" rel="noreferrer" href="<?php echo TWITTER_URL; ?>" class="more-social-item"> <a target="_blank" rel="noreferrer" href="<?php echo TWITTER_URL; ?>" class="more-social-item">
<i class="fab fa-twitter"></i> Twitter <i class="fab fa-twitter icon-twitter"></i> Twitter
</a> </a>
</div> </div>
</div> </div>
@@ -353,11 +353,11 @@
</div> </div>
<div class="footer-social"> <div class="footer-social">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TWITTER_URL; ?>"><i class="fab fa-twitter"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo TWITTER_URL; ?>"><i class="fab fa-twitter icon-twitter"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok"></i></a> <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
</div> </div>
<div class="footer-contact">CONTACT</div> <div class="footer-contact">CONTACT</div>