add MOVEMENT_DESCRIPTION and improve implémentation
This commit is contained in:
+153
-4
@@ -790,9 +790,10 @@ img {
|
||||
}
|
||||
|
||||
.info-header {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
@@ -847,8 +848,64 @@ img {
|
||||
}
|
||||
|
||||
.info-image {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Styles for movement figure and caption */
|
||||
.movement-figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-image {
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.movement-caption {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color-secondary);
|
||||
text-align: justify;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Style pour le titre centré */
|
||||
.section-title.centered {
|
||||
text-align: center;
|
||||
margin: 0 0 20px;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-title.centered::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
/* Media queries pour le responsive */
|
||||
@media (max-width: 576px) {
|
||||
.movement-caption {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-image {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
@@ -1938,3 +1995,95 @@ i.icon-x,
|
||||
color: var(--primary-red);
|
||||
background-color: rgba(255, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Styles pour le conteneur flex des sections Informations et Tendances Hashtags */
|
||||
.info-tags-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Ajouter une séparation visuelle avant info-tags-container */
|
||||
.info-tags-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
|
||||
/* Conteneur pour la section des tags */
|
||||
.tags-section-container {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 25px 20px;
|
||||
box-shadow: var(--card-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Section info */
|
||||
.info-section {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 25px 20px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.info-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Media Queries pour grands écrans */
|
||||
@media (min-width: 992px) {
|
||||
.info-tags-container {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.info-section,
|
||||
.tags-section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 3;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.tags-section-container {
|
||||
flex: 2;
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Quand la section info n'est pas présente, la section tags prend toute la largeur */
|
||||
.info-tags-container:not(:has(.info-section)) .tags-section-container {
|
||||
flex: 1;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tags-section {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
@@ -228,3 +228,10 @@ define('PRIORITY_CATEGORIES', [
|
||||
// define('LEGAL_LICENSE_URL', 'https://www.gnu.org/licenses/agpl-3.0.html');
|
||||
// define('LEGAL_SOURCE_CODE_URL', 'https://codeberg.org/Ka-Ubuntu/kaubuntu.re');
|
||||
// define('LEGAL_SERVICE_DESCRIPTION', 'est une plateforme multimédia proposant des contenus vidéo, des actualités et des informations liées au mouvement politique indépendantiste et panafricaniste réunionnais Ka-Ubuntu.');
|
||||
|
||||
// =========================================
|
||||
// Texte de présentation du mouvement
|
||||
// =========================================
|
||||
|
||||
// Pour désactiver le bloc de présentation, commentez cette ligne:
|
||||
// define('MOVEMENT_DESCRIPTION', 'KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :');
|
||||
|
||||
@@ -313,29 +313,39 @@
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
<!-- Section Tendances Hashtags -->
|
||||
<div class="video-section">
|
||||
<h2 class="section-title">Tendances</h2>
|
||||
<!-- Section Flexbox pour Informations et Tendances Hashtags -->
|
||||
<div class="info-tags-container">
|
||||
<?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
|
||||
<!-- Section Informations -->
|
||||
<div class="info-section">
|
||||
<h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
|
||||
|
||||
<div class="tags-section">
|
||||
<?php
|
||||
if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
|
||||
foreach (POPULAR_TAGS as $tag):
|
||||
$encodedTag = urlencode('#' . $tag);
|
||||
?>
|
||||
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
|
||||
<?php
|
||||
endforeach;
|
||||
endif;
|
||||
?>
|
||||
<figure class="movement-figure">
|
||||
<img src="img/movement_presentation.png" alt="Les 5 objectifs de Ka-Ubuntu" class="info-image">
|
||||
<figcaption class="movement-caption">
|
||||
Nos 5 points de lutte. 1. Activer la conscience politique et historique de notre peuple 2. Défendre le droit à I'autodétermination des peuples africains et afro-descendants 3. Arracher I'indépendance de notre pays La Réunion 4. Établir une unité politique, économique et culturelle de l'Afrique 5. Construire une solidarité entre les peuples opprimés
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Section Informations -->
|
||||
<div class="info-section">
|
||||
<h2 class="info-header">KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :</h2>
|
||||
<!-- Section Tendances Hashtags -->
|
||||
<div class="tags-section-container">
|
||||
<h2 class="section-title centered">Tendances</h2>
|
||||
|
||||
<img src="img/ka-ubuntu-manifesto.png" alt="KA UBUNTU manifesto" class="info-image">
|
||||
<div class="tags-section">
|
||||
<?php
|
||||
if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
|
||||
foreach (POPULAR_TAGS as $tag):
|
||||
$encodedTag = urlencode('#' . $tag);
|
||||
?>
|
||||
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
|
||||
<?php
|
||||
endforeach;
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
|
||||
Reference in New Issue
Block a user