|
|
| Line 1: |
Line 1: |
| /* Styles for the Main Page */
| |
|
| |
|
| /* Top banner */
| |
| #mp-topbanner {
| |
| padding: 20px;
| |
| background-color: #eaf3ff; /* Light blue background */
| |
| border-bottom: 2px solid #a2a9b1;
| |
| margin-bottom: 20px;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Flexbox layout for the top sections */
| |
| .mp-upper-grid {
| |
| display: flex;
| |
| flex-wrap: wrap; /* Ensures content wraps on smaller screens */
| |
| justify-content: space-between; /* Distributes space between columns */
| |
| margin-top: 20px; /* Adds some space above the grid */
| |
| }
| |
|
| |
| .mp-box {
| |
| flex: 1 1 48%; /* Allows flexibility with a base width of 48% */
| |
| padding: 15px; /* Adds padding inside each box */
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 5px; /* Rounded corners for a smooth look */
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
| |
| margin-bottom: 20px; /* Adds space below each box */
| |
| }
| |
|
| |
| /* Specific background colors for different sections */
| |
| #mp-featured-article {
| |
| background-color: #f3eacb; /* Light gold background for a regal feel */
| |
| }
| |
|
| |
| #mp-left {
| |
| background-color: #e1f0e6; /* Light green background to reflect nature */
| |
| }
| |
|
| |
| #mp-lower {
| |
| background-color: #f0e5f9; /* Light purple background for a mystical vibe */
| |
| }
| |
|
| |
| #mp-otd-h2, .mp-otd {
| |
| background-color: #f9f4e5; /* Soft cream background for ancient lore */
| |
| }
| |
|
| |
| #mp-right {
| |
| background-color: #eaf3ff; /* Light blue background for harmony with water themes */
| |
| }
| |
|
| |
| /* Background for main content areas */
| |
| .MainPageBG {
| |
| padding: 15px;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| /* Style for floated content containers */
| |
| .mp-contains-float {
| |
| clear: both;
| |
| overflow: auto;
| |
| }
| |
|
| |
| /* "Explore More" text styling */
| |
| .explore-more {
| |
| margin-top: 15px;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| color: #0645ad; /* Wikipedia link blue */
| |
| padding: 10px;
| |
| background-color: #f0f8ff; /* Light blue background for emphasis */
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| /* Header styling */
| |
| .mp-h2 {
| |
| font-size: 1.5em;
| |
| margin-bottom: 15px;
| |
| border-bottom: 2px solid #a2a9b1;
| |
| padding-bottom: 5px;
| |
| color: #333333; /* Darker text for headers */
| |
| }
| |
|
| |
| /* Gallery container to add spacing */
| |
| .gallery-container {
| |
| margin-top: 20px; /* Adds space above the gallery */
| |
| margin-bottom: 20px; /* Adds space below the gallery */
| |
| padding: 10px;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 5px;
| |
| background-color: #ffffff; /* White background for contrast */
| |
| }
| |
|
| |
| /* Style for gallery images */
| |
| .gallery img {
| |
| border-radius: 5px;
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Small shadow for depth */
| |
| }
| |
|
| |
| /* Featured image style */
| |
| .featured-image {
| |
| border: 1px solid #a2a9b1;
| |
| padding: 10px;
| |
| border-radius: 5px;
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Small shadow for depth */
| |
| background-color: #ffffff; /* White background for contrast */
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Caption styling */
| |
| .featured-caption {
| |
| margin-top: 10px;
| |
| font-size: 0.9em; /* Slightly smaller font size */
| |
| color: #555555; /* Dark grey color for caption text */
| |
| text-align: center;
| |
| font-style: italic; /* Italic style for captions */
| |
| }
| |
|
| |
|
| |
|
| |
| /* Adjust children elements spacing */
| |
| #mp-tfa > * {
| |
| margin-right: 15px; /* Adds space between children */
| |
| }
| |
|
| |
| #mp-tfa > *:last-child {
| |
| margin-right: 0; /* Removes margin from the last child to prevent extra space */
| |
| }
| |
|
| |
| /* Thumbnail image styling */
| |
| #mp-tfa img {
| |
| margin-right: 15px; /* Adds space between the image and text */
| |
| border-radius: 5px; /* Rounds the corners of the image */
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a slight shadow for depth */
| |
| }
| |
|
| |
| /* Text styling for the Featured Article */
| |
| #mp-tfa p {
| |
| margin: 0;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| #mp-tfa a {
| |
| color: #0645ad; /* Wikipedia link blue */
| |
| text-decoration: none; /* Removes underline from links */
| |
| }
| |
|
| |
| #mp-tfa a:hover {
| |
| text-decoration: underline; /* Adds underline on hover */
| |
| }
| |
|
| |
| /* Mobile responsiveness */
| |
| @media (max-width: 768px) {
| |
| #mp-tfa {
| |
| flex-direction: column; /* Stacks children vertically on smaller screens */
| |
| align-items: center; /* Centers the children items */
| |
| text-align: center; /* Centers the text */
| |
| }
| |
|
| |
| #mp-tfa img {
| |
| margin-right: 0; /* Removes right margin on images for centered alignment */
| |
| margin-bottom: 15px; /* Adds space below the image */
| |
| max-width: 100%; /* Ensures the image doesn't overflow on smaller screens */
| |
| height: auto; /* Maintains the aspect ratio */
| |
| }
| |
|
| |
| #mp-tfa p {
| |
| margin: 0; /* Resets margin for paragraphs */
| |
| text-align: left; /* Aligns text to the left for better readability */
| |
| }
| |
|
| |
| #mp-tfa > * {
| |
| margin-right: 0; /* Removes right margin on stacked items */
| |
| }
| |
|
| |
| .mp-box {
| |
| flex: 1 1 100%; /* Stacks the columns on smaller screens */
| |
| margin-bottom: 20px; /* Ensures space remains between stacked items */
| |
| }
| |
| }
| |
| /* Delve into the Lore Section */
| |
| #mp-otd {
| |
| background-color: #f9f4e5; /* Matches the section background */
| |
| padding: 15px;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| /* List styling within the Delve into the Lore section */
| |
| #mp-otd ul li {
| |
| background-color: #f9f4e5; /* Matches the section background */
| |
| }
| |
|
| |
| #mp-otd ul li a:hover {
| |
| text-decoration: underline; /* Adds underline on hover for links */
| |
| }
| |
|
| |
| /* Add this to MediaWiki:Common.css */
| |
| .gallery-slideshow {
| |
| max-width: 200px; /* Adjust the width as needed */
| |
| margin: 0 auto; /* Center the slideshow */
| |
| }
| |
|
| |
| /* Specific styles for the sister content navigation list */
| |
| #mp-sister-content ul {
| |
| list-style: none; /* Removes default bullet points */
| |
| padding: 0;
| |
| }
| |
|
| |
| #mp-sister-content li {
| |
| margin-bottom: 10px; /* Adds spacing between navigation links */
| |
| }
| |
