Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* General Section Styling */
.featured-section {
max-width: 1200px; /* Restrict maximum width */
margin: auto; /* Center the section */
padding: 20px;
text-align: center;
font-family: 'Lora', serif;
color: #fff;
}
.featured-section h2 {
margin-bottom: 20px;
font-size: 24px;
color: #f5eccc; /* Optional: Subtle gold for title */
}
/* Featured Grid */
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 items per row */
gap: 20px; /* Space between grid items */
justify-items: center; /* Center items within their grid cells */
}
/* Featured Item */
.featured-item {
position: relative;
width: 300px; /* Fixed width for each card */
height: 300px; /* Fixed height to keep cards square */
overflow: hidden;
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
background-color: #222; /* Fallback color for card background */
}
/* Image Container */
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image fills the card while maintaining aspect ratio */
}
/* Card Label */
.card-label {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(245, 236, 204, 0.9); /* Light gold, semi-transparent */
color: #333;
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
z-index: 2; /* Ensure it stays above the image */
}
/* Card Description */
.card-description {
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* Span the full width of the card */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
color: #fff;
font-size: 14px;
padding: 10px;
text-align: center;
z-index: 2; /* Ensure it stays above the image */
}
/* Header */
.main-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url('flourish.svg'); /* Could also be SVG code */
background-size: contain;
animation: flourishAnimation 5s infinite; /* Example animation */
}
@keyframes flourishAnimation {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Main page background */
.page-Main_Page {
background: url('https://predictive-pulse.com/images/5ean444_winter_cabin_forest_snow_night_sky_stars_peaceful_reali_fc7e7992-0c1e-4564-bf78-2930ff9dc2f9.png') no-repeat center center fixed;
background-size: cover;
}
.mainpage-navigation {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
gap: 10px; /* Adds spacing between grid items */
justify-content: center; /* Centers the items horizontally */
padding: 10px;
align-items: stretch; /* Ensures all items align consistently */
/* max-width: 660px; /* Ensures three items per row (3 items * 200px width + 2 gaps of 10px each)
margin: 0 auto; /* Centers the container horizontally */
}
.nav-item {
position: relative; /* Enables positioning of child elements */
width: 175px; /* Fixed width for each grid item. Affected by flex-basis */
height: 150px; /* Fixed height for each grid item */
border-radius: 6px; /* Consistent rounded corners */
overflow: hidden; /* Ensures child content stays within bounds */
background-color: rgba(0, 0, 0, 0.2); /* Light gray background for uniformity */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
display: flex;
flex-direction: column; /* Stacks the image and text vertically */
align-items: center; /* Centers items horizontally */
justify-content: flex-start; /* Aligns items to the top */
padding: 0; /* Removes padding */
flex-shrink: 1; /* Prevents flexbox from resizing items */
flex-basis: 150px; /* Ensures all items take up the same width. Needs flex-shrink>0 */
transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}
/* the pre element, which is a block-level element, preserves all the whitespace,
line breaks, and formatting inside it, often causing it to exceed the intended
dimensions of the parent container (in this case, .nav-item). This can happen
if MediaWiki or some part of your content generation wraps the rendered content
(e.g., from [[File:...]]) inside a <pre> tag. */
.nav-item pre {
margin: 0; /* Removes extra margin */
padding: 0; /* Removes extra padding */
min-width: 100%; /* Ensures the pre spans at least the full width of the container */
min-height: 100%; /* Ensures the pre spans at least the full height of the container */
max-width: 100%; /* Prevents it from exceeding the container's width */
max-height: 100%; /* Prevents it from exceeding the container's height */
/*box-sizing: border-box; /* Includes padding within the specified dimensions */
overflow: hidden; /* Clips content that exceeds the container */
white-space: normal; /* Allows text to wrap instead of preserving whitespace */
}
.nav-item img {
width: 100%; /* Ensures the image takes the full width of the container */
height: 70%; /* Allocates 70% of the height to the image */
object-fit: cover; /* Ensures the image fills the area without distortion */
border-radius: 8px 8px 0 0; /* Apply rounded corners only to the top of the image */
margin: 0; /* Removes extra margin */
}
.nav-item span {
/* display: block; /* Ensures the text takes full width */
display: flex; /* Make span a flex container */
align-items: center; /* Center vertically */
justify-content: center;
text-align: center;
width: 100%; /* Matches the width of the container */
height: 30%; /* Allocates x% of the height to the text area */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for text */
color: #fff; /* White text color */
text-align: center !important; /* Centers the text horizontally */
/*font-size: 12px; /* Adjusts font size */
font-size: clamp(10px, 1.5vw, 12px); /* Responsive font size */
font-weight: bold; /* Makes the text bold */
line-height: 1; /* Adjusts line height for wrapped text */
padding: 5px; /* Adds padding inside the text area */
box-sizing: border-box; /* Includes padding in width/height calculations */
overflow-wrap: break-word; /* Ensures long words wrap */
overflow: hidden; /* Prevents overflowing text */
border-radius: 0 0 8px 8px; /* Rounded corners for the bottom of the text area */
}