+ + +
\ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..83bfe90 --- /dev/null +++ b/js/script.js @@ -0,0 +1,18 @@ +document.addEventListener('DOMContentLoaded', function() { + // Gestion du menu latéral en mobile si nécessaire + const sidebar = document.querySelector('.sidebar'); + const mainContent = document.querySelector('.main-content'); + + // Ajoute une classe pour le mode mobile + function checkScreenSize() { + if (window.innerWidth <= 768) { + document.body.classList.add('mobile-view'); + } else { + document.body.classList.remove('mobile-view'); + } + } + + // Exécute au chargement et au redimensionnement + checkScreenSize(); + window.addEventListener('resize', checkScreenSize); +}); \ No newline at end of file diff --git a/style.css b/style.css index 3d904c7..9ec2ab8 100644 --- a/style.css +++ b/style.css @@ -1,58 +1,62 @@ /* Theme Name: WP Theme SEN2 -Theme URI: https://ton-site.com/wp-theme-sen2 -Author: Nicolas Houzeau -Author URI: https://ton-site.com -Description: Un thème sobre et moderne pour portfolio photo, en blanc cassé. Compatible avec Envira Gallery et personnalisable via le Customizer. -Version: 1.0.0 -License: GNU General Public License v2 or later -Text Domain: wp-theme-sen2 +Version: 1.4.0 */ /* Réinitialisation et base */ +:root { + --primary-color: #3498DB; + --secondary-color: #2C3E50; + --text-color: #333333; + --light-gray: #F9F9F9; + --medium-gray: #E0E0E0; +} + body { font-family: 'Montserrat', sans-serif; - background-color: #F9F9F9; - color: #333333; + background-color: var(--light-gray); + color: var(--text-color); line-height: 1.6; margin: 0; padding: 0; - font-size: 16px; } -a { - color: #555555; - text-decoration: none; - transition: color 0.3s ease; +/* Structure globale */ +.site-container { + display: grid; + grid-template-columns: 200px 1fr; + min-height: 100vh; } -a:hover { - color: #E1306C; +.sidebar { + background-color: #FFFFFF; + padding: 20px 0; + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 200px; + z-index: 100; + border-right: 1px solid var(--medium-gray); } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; +.main-content { + margin-left: 200px; + padding: 20px; } -/* Header et slogan */ -header { - background-color: #F9F9F9; - padding: 30px 0; - border-bottom: 1px solid #EEEEEE; -} - -.site-branding { - margin-bottom: 20px; +.site-header { + text-align: center; + padding: 20px 0; + border-bottom: 1px solid var(--medium-gray); + margin-bottom: 30px; } .site-title { margin: 0; - font-size: 24px; + font-size: 28px; font-weight: 600; - color: #333333; - line-height: 1.2; + color: var(--secondary-color); } .site-title a { @@ -62,136 +66,85 @@ header { .site-slogan { display: block; - font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 16px; - color: #555555; - letter-spacing: 0.5px; - margin-top: 5px; + color: #7F8C8D; + margin-top: 10px; } -.main-navigation ul { +/* Menu latéral */ +.sidebar-navigation { + padding: 0 20px; +} + +.sidebar-navigation ul { list-style: none; - padding: 0; margin: 0; - display: flex; - gap: 20px; + padding: 0; } -.main-navigation a { - font-weight: 500; - color: #333333; +.sidebar-navigation li { + margin-bottom: 10px; +} + +.sidebar-navigation a { + display: block; + color: var(--text-color); text-decoration: none; -} - -.main-navigation a:hover { - color: #E1306C; -} - -/* Footer */ -footer { - background-color: #F9F9F9; - padding: 20px 0; - text-align: center; - border-top: 1px solid #EEEEEE; - margin-top: 40px; -} - -.social-icons { - margin: 20px 0; -} - -.instagram-icon { - color: #333333; - font-size: 24px; - transition: color 0.3s ease; -} - -.instagram-icon:hover { - color: #E1306C; -} - -/* Galeries Envira */ -.envira-gallery-wrap { - background-color: #F9F9F9; - padding: 20px; + padding: 8px 15px; border-radius: 4px; - margin: 2em 0; + transition: all 0.3s ease; } -.envira-gallery-item { - transition: transform 0.3s ease, opacity 0.3s ease; -} - -.envira-gallery-item:hover { - transform: scale(1.03); - opacity: 0.9; -} - -/* Formulaire de contact */ -.wpforms-container { - max-width: 600px; - margin: 0 auto; - padding: 20px; - background-color: #FFFFFF; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.wpforms-submit { - background-color: #333333; - color: #FFFFFF; - border: none; - padding: 12px 24px; - border-radius: 4px; - font-weight: 600; - cursor: pointer; -} - -.wpforms-submit:hover { - background-color: #E1306C; -} - -/* Page À propos */ -.about-banner { - text-align: center; - padding: 60px 20px; - background-color: #F5F5F5; - margin-bottom: 40px; -} - -.about-banner h1 { - font-size: 36px; - margin-bottom: 20px; -} - -.about-content { - display: flex; - align-items: center; - gap: 40px; - margin-bottom: 40px; -} - -.about-text { - flex: 1; -} - -.about-image { - flex: 1; -} - -.about-image img { - width: 100%; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +.sidebar-navigation a:hover, +.sidebar-navigation .current-menu-item a { + background-color: var(--primary-color); + color: white; } /* Responsive */ @media (max-width: 768px) { - .about-content { - flex-direction: column; + .site-container { + grid-template-columns: 1fr; } - .about-banner h1 { - font-size: 28px; + + .sidebar { + position: relative; + width: 100%; + border-right: none; + border-bottom: 1px solid var(--medium-gray); + } + + .main-content { + margin-left: 0; + } + + .sidebar-navigation ul { + display: flex; + justify-content: center; + gap: 20px; + padding: 0; + } + + .sidebar-navigation li { + margin-bottom: 0; } } + +/* Galerie et contenu */ +.site-main { + padding: 20px 0; +} + +.envira-gallery-wrap { + margin-left: 0; /* Alignement avec le menu latéral */ +} + +/* Footer */ +.site-footer { + background-color: var(--light-gray); + padding: 30px 0; + text-align: center; + border-top: 1px solid var(--medium-gray); + margin-top: 40px; +}