diff --git a/p/camelianimes/style.css b/p/camelianimes/style.css index 8561004..39f9dca 100644 --- a/p/camelianimes/style.css +++ b/p/camelianimes/style.css @@ -9,6 +9,7 @@ body { background-color: #2c2f33; color: #ffffff; overflow: auto; + font-size: 16px; } body a { @@ -31,11 +32,18 @@ header { z-index: 1000; } +nav { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + nav a { - margin: 0 15px; + margin: 5px 10px; color: #ffffff; text-decoration: none; font-weight: bold; + font-size: 0.9em; } nav a:hover { @@ -45,8 +53,10 @@ nav a:hover { .container { padding-top: 70px; - max-width: 800px; + max-width: 100%; margin: auto; + padding-left: 15px; + padding-right: 15px; } /* Carousel Styles */ @@ -90,18 +100,20 @@ nav a:hover { color: #ffffff; text-align: center; background-color: rgba(35, 39, 42, 0.9); - padding: 20px; + padding: 15px; border-radius: 10px; z-index: 2; + width: 80%; + max-width: 400px; } .carousel-text h1 { - font-size: 3em; + font-size: 2em; margin: 0 0 10px; } .carousel-text p { - font-size: 1.5em; + font-size: 1em; } /* Page-specific Styles */ @@ -122,24 +134,27 @@ nav a:hover { text-align: center; color: #ffffff; background: rgba(0, 0, 0, 0.5); - padding: 20px; + padding: 15px; border-radius: 10px; + width: 80%; + max-width: 400px; } .home-content h1 { - font-size: 48px; + font-size: 2em; margin: 0; } .home-content p { - font-size: 24px; + font-size: 1em; } /* Description Page */ ol { background: #40444b; - padding: 20px; + padding: 15px; border-radius: 10px; + margin-left: 20px; } ol li { @@ -167,29 +182,29 @@ ul li a:hover { /* Liste page */ .anime-list { - list-style-type: none; - padding: 0; - margin: 20px; - font-size: 1rem; - color: #b9bbbe; + list-style-type: none; + padding: 0; + margin: 20px 0; + font-size: 1rem; + color: #b9bbbe; } .anime-list li { - margin-bottom: 10px; + margin-bottom: 15px; } .anime-list a { - color: #7289da; - text-decoration: none; - transition: color 0.3s ease; + color: #7289da; + text-decoration: none; + transition: color 0.3s ease; } .anime-list a:hover { - color: #ffffff; + color: #ffffff; } .anime-list a:visited { - color: #a58dff; + color: #a58dff; } /* Footer */ @@ -198,4 +213,72 @@ footer { text-align: center; margin-top: 20px; color: #99aab5; + font-size: 0.9em; +} + +/* Media Queries for Responsive Design */ +@media screen and (max-width: 768px) { + body { + font-size: 14px; + } + + nav a { + margin: 5px; + font-size: 0.8em; + } + + .carousel-text h1 { + font-size: 1.8em; + } + + .carousel-text p { + font-size: 0.9em; + } + + .home-content h1 { + font-size: 1.8em; + } + + .home-content p { + font-size: 0.9em; + } + + .container { + padding-top: 60px; + } +} + +@media screen and (max-width: 480px) { + body { + font-size: 12px; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav a { + margin: 3px 0; + } + + .carousel-text h1 { + font-size: 1.5em; + } + + .carousel-text p { + font-size: 0.8em; + } + + .home-content h1 { + font-size: 1.5em; + } + + .home-content p { + font-size: 0.8em; + } + + .container { + padding-top: 50px; + } }