From 5ab52bfad365fa8b065992d07e3542217c3a09d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Thu, 10 Apr 2025 14:39:27 +0400 Subject: [PATCH] =?UTF-8?q?add=20MOVEMENT=5FDESCRIPTION=20and=20improve=20?= =?UTF-8?q?impl=C3=A9mentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/styles.css | 157 ++++++++++++++++++++++++++++++- includes/config.local.php.sample | 7 ++ index.php | 52 +++++----- 3 files changed, 191 insertions(+), 25 deletions(-) diff --git a/css/styles.css b/css/styles.css index fd5b631..7ea19b5 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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 */ @@ -1937,4 +1994,96 @@ i.icon-x, .mobile-menu .nav-item:hover { 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; + } } \ No newline at end of file diff --git a/includes/config.local.php.sample b/includes/config.local.php.sample index e348dfe..44d9ac6 100644 --- a/includes/config.local.php.sample +++ b/includes/config.local.php.sample @@ -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 :'); diff --git a/index.php b/index.php index 7c10ad7..def4bed 100644 --- a/index.php +++ b/index.php @@ -313,29 +313,39 @@ endforeach; ?> - -
-

Tendances

- -
- - # - + +
+ + +
+

+ +
+ Les 5 objectifs de Ka-Ubuntu +
+ 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 +
+
-
- - -
-

KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :

+ - KA UBUNTU manifesto + +
+

Tendances

+ +
+ + # + +
+