MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 18: | Line 18: | ||
width: 100%; | width: 100%; | ||
} | } | ||
} | |||
.cards-container { | |||
display: flex; /* Use flexbox to layout cards horizontally */ | |||
flex-wrap: wrap; /* Allow cards to wrap to the next line */ | |||
} | |||
.card { | |||
position: relative; | |||
width: 300px; /* Adjust width as needed */ | |||
height: 400px; /* Adjust height as needed */ | |||
margin: 10px; /* Adjust margin between cards */ | |||
} | |||
.card-frame { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; /* Ensure the frame fills the container */ | |||
} | |||
.card-overlay { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.card-art { | |||
width: 100%; | |||
height: 100%; | |||
background-size: cover; | |||
} | |||
.card-text { | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
width: 100%; | |||
padding: 10px; | |||
background-color: rgba(255, 255, 255, 0.8); /* Background color with transparency */ | |||
} | |||
.card-text h2 { | |||
margin: 0; | |||
} | |||
.card-text p { | |||
margin: 5px 0; | |||
} | } |
Revision as of 20:54, 2 April 2024
/* CSS placed here will be applied to all skins */ body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } body.page-Test_Main.action-view h1.firstHeading, body.page-Test_Main.action-submit h1.firstHeading { display: none; } #p-logo { height: 250px; width: 160px; } #p-logo a { height: 250px; width: 160px; } div#mw-panel { padding-top: 2em; } img { max-width: 100%; height: auto; } @media (max-width: 760px) { /* Adjust as needed */ table, tbody, tr, td { display: block; width: 100%; } } .cards-container { display: flex; /* Use flexbox to layout cards horizontally */ flex-wrap: wrap; /* Allow cards to wrap to the next line */ } .card { position: relative; width: 300px; /* Adjust width as needed */ height: 400px; /* Adjust height as needed */ margin: 10px; /* Adjust margin between cards */ } .card-frame { width: 100%; height: 100%; object-fit: cover; /* Ensure the frame fills the container */ } .card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card-art { width: 100%; height: 100%; background-size: cover; } .card-text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background-color: rgba(255, 255, 255, 0.8); /* Background color with transparency */ } .card-text h2 { margin: 0; } .card-text p { margin: 5px 0; }