MediaWiki:Common.css: Difference between revisions

From The Political Machine - Official Wiki
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;
}