No edit summary |
No edit summary |
||
Line 90: | Line 90: | ||
margin: 0 auto; /* Center the image */ | margin: 0 auto; /* Center the image */ | ||
} | } | ||
/* MediaWiki:Common.css */ | |||
/* Container to hold the custom boxes */ | |||
.custom-box-container { | |||
display: flex; | |||
flex-wrap: wrap; /* Allows boxes to wrap to the next line if necessary */ | |||
justify-content: center; /* Centers the boxes horizontally */ | |||
gap: 20px; /* Space between the boxes */ | |||
margin: 20px auto; /* Center the container itself */ | |||
max-width: 1000px; /* Adjust as needed */ | |||
} | |||
/* Custom box styles */ | |||
.custom-box { | .custom-box { | ||
background-color: #444444; | background-color: #444444; | ||
Line 95: | Line 108: | ||
border-radius: 5px; | border-radius: 5px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
padding: -10px 0px; /* Adjusted padding to reduce height */ | |||
padding: 0px | |||
text-align: center; | text-align: center; | ||
max-width: 300px; /* Maximum width of the box */ | max-width: 300px; /* Maximum width of the box */ | ||
flex: 1 1 calc(33.333% - 40px); /* Adjust width as needed */ | |||
transition: transform 0.2s; /* Optional: Add a transition effect */ | transition: transform 0.2s; /* Optional: Add a transition effect */ | ||
} | } | ||
/* Additional styles for links inside the custom box */ | |||
.custom-box a { | |||
color: #333; | |||
} | text-decoration: none; | ||
display: block; /* Make the link fill the entire box */ | |||
} | |||
.custom-box a:hover { | |||
transform: scale(1.05); /* Optional: Slightly enlarge the box on hover */ | |||
} | |||
/* Example for different background color variations */ | |||
.custom-box.bg-blue { | |||
background-color: #e0f7fa; /* Light blue background */ | |||
} | |||
.custom-box.bg-green { | |||
background-color: #e8f5e9; /* Light green background */ | |||
} | |||
.custom-box.bg-yellow { | |||
background-color: #fffde7; /* Light yellow background */ | |||
} |
Revision as of 11:12, 16 June 2024
.page-Main_Page .firstHeading { display:none; } #home-header { padding: 0.5rem 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff, #e8f2f8) repeat scroll 0 0; border-bottom:1px solid #aaa; } #home-header .title { border:none; margin-top:0 } #home-left { float:left; width:100%; clear:both; } #home-center { float:center; width:60%; word-wrap: break-word; clear:both; } #home-right { float:right; width:33%; } #home-cat { display:flex; flex-flow:row wrap; justify-content: space-evenly; align-items:stretch; } .home-block { border-radius:0.3rem; box-shadow:0 0 0.3rem #999; margin:0.8rem 0; padding: 0.1rem 1rem 1rem; } #home-cat .home-block { width:30%; padding:0; overflow:hidden; text-align:center; display:flex; flex-direction:column; } #home-cat .home-block .head { background-size: cover; height: 64px; } #home-cat .home-block .head .cattitle { display: block; position: relative; float:center; width: 100%; height: 100%; } #home-cat .home-block .head .cattitle span { display: block; position:absolute; top:25px; left:20px; font-size:30px; } #home-cat .home-block .content { padding:0 1rem; flex:1; justify-content: flex-end } #home-cat .home-block table { font-size:8pt; width:100%; border-spacing:0px 5px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; } .responsive-image { max-width: 100%; height: auto; display: block; margin: 0 auto; /* Center the image */ } /* MediaWiki:Common.css */ /* Container to hold the custom boxes */ .custom-box-container { display: flex; flex-wrap: wrap; /* Allows boxes to wrap to the next line if necessary */ justify-content: center; /* Centers the boxes horizontally */ gap: 20px; /* Space between the boxes */ margin: 20px auto; /* Center the container itself */ max-width: 1000px; /* Adjust as needed */ } /* Custom box styles */ .custom-box { background-color: #444444; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: -10px 0px; /* Adjusted padding to reduce height */ text-align: center; max-width: 300px; /* Maximum width of the box */ flex: 1 1 calc(33.333% - 40px); /* Adjust width as needed */ transition: transform 0.2s; /* Optional: Add a transition effect */ } /* Additional styles for links inside the custom box */ .custom-box a { color: #333; text-decoration: none; display: block; /* Make the link fill the entire box */ } .custom-box a:hover { transform: scale(1.05); /* Optional: Slightly enlarge the box on hover */ } /* Example for different background color variations */ .custom-box.bg-blue { background-color: #e0f7fa; /* Light blue background */ } .custom-box.bg-green { background-color: #e8f5e9; /* Light green background */ } .custom-box.bg-yellow { background-color: #fffde7; /* Light yellow background */ }