Template:Main Page/Sandbox/styles.css: Difference between revisions

Latest revision as of 04:11, 4 February 2026

/* Main page (Sandbox) content styles */

/* Social links: icon row, left to right */
ul.mp-socials {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

ul.mp-socials li {
    display: block;
}

ul.mp-socials img {
    vertical-align: middle;
}

/* Social cards: colored icons (Discord, Twitter, etc.) must keep their
   colors; do not invert them in light mode (unlike white monochrome icons). */
.mp-socials-grid .home-card__icon img {
    filter: none !important;
}

@@ Line 1: / Line 1: @@
-/* Main Container */
+/* Main page (Sandbox) content styles */
-.home-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 12px;
-    margin: 1em 0;
-}
-/* Section Headers */
-.home-header {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin: 1.5em 0 0.5em;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #333;
-    display: flex;
-    align-items: center;
-}
-.home-header-icon { margin-right: 10px; }
-/* The Card */
+/* Social links: icon row, left to right */
-.home-card {
+ul.mp-socials {
-    position: relative; /* Essential for the "full click" trick */
-    background: #161b22;
-    border: 1px solid #30363d;
-    border-radius: 4px;
-    padding: 20px 10px;
-    text-align: center;
-    transition: background 0.2s, transform 0.1s;
      display: flex;
-     flex-direction: column;
+     flex-direction: row;
+    flex-wrap: wrap;
      align-items: center;
-     justify-content: center;
+     gap: 8px;
-}
+     margin: 12px 0;
+     padding: 0;
-.home-card:hover {
+     list-style: none;
-     background: #21262d;
-     transform: translateY(-2px);
-     border-color: #8b949e;
 }
-/* Icon styling */
+ul.mp-socials li {
-.home-card__icon {
+     display: block;
-     font-size: 2.5em;
-    margin-bottom: 10px;
-    line-height: 1;
 }
-/* Link styling - The "Full Click" Trick */
+ul.mp-socials img {
-.home-card__label a {
+     vertical-align: middle;
-     color: #c9d1d9 !important;
-    font-weight: bold;
-    text-decoration: none !important;
 }
-/* This makes the link cover the entire .home-card area */
+/* Social cards: colored icons (Discord, Twitter, etc.) must keep their
-.home-card__label a::after {
+   colors; do not invert them in light mode (unlike white monochrome icons). */
-     content: "";
+.mp-socials-grid .home-card__icon img {
-    position: absolute;
+     filter: none !important;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
 }
-/* Colored Accents */
-.home-card--red { border-top: 3px solid #f85149; }
-.home-card--orange { border-top: 3px solid #f0883e; }
-.home-card--green { border-top: 3px solid #3fb950; }
-.home-card--blue { border-top: 3px solid #58a6ff; }