Jump to content

MediaWiki:Mobile.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 9: Line 9:
     display: none;
     display: none;
   }
   }
 
 
   .mobile-view {
   .mobile-view {
     display: block;
     display: block;
   }
   }
 
 
   /* Hero section adjustments */
   /* Hero section adjustments - MORE COMPACT */
  .hero-banner {
    padding: 0.3em 0.2em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }
 
  .hero-banner img {
    max-height: 150px; /* SMALLER - Reduced image height */
    display: block; /* Ensure no extra space below image */
    margin: 0 auto; /* Keep centered */
  }
 
   .hero-title {
   .hero-title {
     font-size: 1.8em;
     font-size: 1.4em; /* SMALLER */
    margin-top: 0.15em; /* TIGHTER */
    margin-bottom: 0; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
   }
   }
 
 
   .hero-subtitle {
   .hero-subtitle {
     font-size: 1.1em;
     font-size: 0.9em; /* SMALLER */
    margin-top: 0.1em; /* TIGHTER */
    margin-bottom: 0.1em; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
   }
   }
 
 
   .quick-access-buttons {
   .quick-access-buttons {
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
    margin-top: 1em; /* Adjusted slightly */
   }
   }
 
 
   .button {
   .button {
     width: 80%;
     width: 80%;
     text-align: center;
     text-align: center;
     margin-bottom: 0.5em;
     margin-bottom: 0.5em;
    padding: 0.5em 1em; /* Slightly smaller buttons */
  }
  /* About Section adjustments - MORE COMPACT */
  .about-section {
    padding: 0.5em 0.3em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin, use 0 horizontal margin for full width */
    font-size: 0.9em; /* SMALLER */
    line-height: 1.4; /* TIGHTER */
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }
  .about-section h2 {
    font-size: 1.2em; /* SMALLER */
    margin-bottom: 0.2em; /* TIGHTER */
   }
   }
    
 
   .about-section p {
    margin-bottom: 0.2em; /* TIGHTER */
  }
 
 
   /* Featured content adjustments */
   /* Featured content adjustments */
   .featured-cards {
   .featured-cards {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
   }
   }
 
 
   /* Main sections mobile */
   /* Main sections mobile - FULL WIDTH */
   .main-sections-mobile {
   .main-sections-mobile {
     margin: 1.5em auto;
     margin: 0.8em 0; /* SMALLER - Reduced top/bottom margin, NO horizontal margin */
     max-width: 100%;
    width: 100%; /* Use full width */
     max-width: none; /* Override any inherited max-width */
    box-sizing: border-box; /* Include padding in width */
   }
   }
 
 
   .wiki-table-mobile {
   .wiki-table-mobile {
     width: 100%;
     width: 100%;
     border-spacing: 0.8em;
     border-spacing: 0; /* TIGHTER - Remove spacing between table cells (borders will touch if any) */
     margin: 0 auto;
     margin: 0; /* Remove default margins */
     background-color: #f8f9fa;
     background-color: #f8f9fa; /* Keep background */
     border-radius: 8px;
     border-radius: 0; /* REMOVED - No rounded corners for edge-to-edge */
     padding: 0.5em;
     padding: 0; /* REMOVED - No padding on the table container itself */
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     box-shadow: none; /* REMOVED - Optional: remove shadow for edge-to-edge */
    box-sizing: border-box;
    display: block; /* Ensure block behavior */
    border-collapse: collapse; /* Make borders merge if needed */
   }
   }
    
 
  .section-header {
   /* Style table headers and cells within the full-width table */
    width: 100%;
  .wiki-table-mobile th,
    font-size: 1.2em;
  .wiki-table-mobile td {
     padding: 1em;
      width: 100% !important; /* Force full width */
     text-align: center;
      display: block; /* Stack elements vertically */
      box-sizing: border-box; /* Include padding/border in width */
      border-radius: 0; /* No radius on individual cells/headers */
      /* Add borders if desired for separation */
      border-left: none;
      border-right: none;
      border-bottom: 1px solid #ddd; /* Example border */
  }
 
  .wiki-table-mobile th {
      padding: 0.8em 0.5em; /* Adjust padding */
      font-size: 1.1em; /* Slightly smaller header font */
      border-top: 1px solid #ddd; /* Example border */
  }
 
  .wiki-table-mobile td {
      padding: 0.8em 0.5em; /* Adjust padding */
      background-color: #fff; /* Reset background if needed */
      box-shadow: none; /* Remove individual cell shadows */
  }
 
  /* Remove bottom border from the very last cell */
  .wiki-table-mobile tr:last-child td:last-child {
      border-bottom: none;
  }
 
 
  /* Ensure two-column lists inside stack */
  .two-column,
  .two-column-mobile,
  .two-column-list { /* Target all similar classes */
     column-count: 1; /* Force single column */
     grid-template-columns: 1fr; /* Ensure grid also stacks */
    display: block; /* Override grid if necessary */
   }
   }
 
 
  .two-column-mobile {
  .two-column-list li,
    column-count: 2;
  .two-column li { /* Add some spacing if needed */
    column-gap: 20px;
      margin-bottom: 0.3em;
  }
  }
 
 
   /* Stats adjustments */
 
   /* Stats adjustments - Make them full width too */
   .stats-container {
   .stats-container {
     flex-direction: column;
     flex-direction: column;
    gap: 0.5em; /* Reduce gap */
    width: 100%;
    box-sizing: border-box;
   }
   }
 
 
   .stat-box {
   .stat-box {
     width: 100%;
     width: 100%;
    margin-bottom: 0.5em; /* Space between boxes */
    padding: 0.8em; /* Adjust padding */
    border-radius: 4px;
    box-sizing: border-box;
  }
  .wiki-stats {
    padding: 1em 0.2em; /* Adjust container padding */
    margin: 0.8em 0; /* Use 0 horizontal margin */
    width: 100%;
    box-sizing: border-box;
    border-radius: 0; /* Optional: remove radius */
   }
   }
 
 
   /* Footer adjustments */
  .wiki-stats h2 {
      font-size: 1.5em; /* Adjust size */
      margin-bottom: 0.6em; /* Adjust spacing */
  }
 
   /* Footer adjustments - Make full width */
   .wiki-footer {
   .wiki-footer {
     padding: 1em;
     padding: 1em 0.5em; /* Adjust padding */
    border-radius: 0; /* REMOVED - Optional for edge-to-edge */
    margin-top: 1em; /* Adjust spacing */
    width: 100%;
    box-sizing: border-box;
   }
   }
 
 
   .footer-links {
   .footer-links {
     flex-direction: column;
     flex-direction: column;
     gap: 10px;
     gap: 8px; /* Adjust gap */
   }
   }
 
 
   /* Featured content section header adjustments */
   /* Featured content section header adjustments (if used on mobile) */
   .featured-content .section-header {
   .featured-content .section-header {
     flex-direction: column;
     flex-direction: column;
     text-align: center;
     text-align: center;
   }
   }
 
 
   .featured-content .section-header h2 {
   .featured-content .section-header h2 {
     margin-bottom: 0.5em;
     margin-bottom: 0.5em;
     text-align: center;
     text-align: center;
   }
   }
 
 
   /* Card content alignment */
   /* Card content alignment */
   .card-content {
   .card-content {
     text-align: center;
     text-align: center;
   }
   }
 
 
   /* List item spacing */
   /* List item spacing inside sections */
   .section-content ul {
   .section-content ul {
     padding-left: 1em;
     padding-left: 1em; /* Keep some indent */
    margin-top: 0.3em;
    margin-bottom: 0.3em;
   }
   }
 
 
   .section-content li {
   .section-content li {
     margin-bottom: 0.5em;
     margin-bottom: 0.3em; /* Reduce list item spacing */
   }
   }
}


} /* End of @media (max-width: 768px) */
/* Remove redundant rules in smaller breakpoint if covered above */
@media (max-width: 480px) {
@media (max-width: 480px) {
   /* Further adjustments for very small screens */
   /* Further adjustments for very small screens ONLY if needed */
   .two-column-mobile {
  /* Most rules from 768px should cascade down */
    column-count: 1;
 
   .hero-banner img {
    max-height: 120px; /* Even smaller image if needed */
  }
 
  .hero-title {
      font-size: 1.3em;
   }
   }
 
   .hero-subtitle {
   .hero-banner {
      font-size: 0.85em;
    padding: 1em 0.5em;
   }
   }
 
 
   .about-section {
   .about-section {
    padding: 1em;
    padding: 0.4em 0.2em;
    font-size: 0.85em;
   }
   }
 
   .about-section h2 {
   .section-content {
    font-size: 1.1em;
    padding: 0.8em;
   }
   }
 
  /* Ensure section headers are properly centered on very small screens */
  .section-header {
    padding: 0.8em 0.5em;
  }
}
/* end of new front page CSS */


  .wiki-table-mobile th,
  .wiki-table-mobile td {
      padding: 0.6em 0.4em; /* Slightly less padding on very small screens */
  }
  .wiki-table-mobile th {
      font-size: 1.0em;
  }
  /* .two-column etc rules already set to 1 column above */
} /* End of @media (max-width: 480px) */
/* Keep infobox full width */
.infobox {
.infobox {
     position: relative !important;
     position: relative !important;
Line 142: Line 262:
     float: none !important;
     float: none !important;
     clear: both !important;
     clear: both !important;
     margin: 0 auto !important;
     margin: 0.5em 0 !important; /* Adjust margin */
    box-sizing: border-box; /* Add box-sizing */
}
}
Retrieved from "https://inzoiwiki.com/wiki/MediaWiki:Mobile.css"