No edit summary |
No edit summary |
||
Line 4: | Line 4: | ||
@media screen { | @media screen { | ||
a.image > img { | a.image > img { | ||
max-width: | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | } |
Revision as of 16:10, 30 April 2023
/* CSS placed here will be applied to all skins */ /* Testing this to fix images sizes 4/30/2023 */ @media screen { a.image > img { max-width: 100%; height: auto; } } /* Designed for Vector skin */ /* Hide the Main Page title */ body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } /* Main Page Grid */ .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0.8em 0.8em; grid-auto-flow: row; grid-template-areas: "Banner Banner" "Intro Intro" "Nested NestedR" "Misc Misc" ". ."; } /* Mobile Styling */ @media only screen and (max-width: 768px) { /* For mobile phones: */ .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0.8em 0.8em; grid-auto-flow: row; grid-template-areas: "Banner Banner" "Intro Intro" "NestedR NestedR" "Nested Nested" "Misc Misc" ". ."; } } .Banner { grid-area: Banner; } .Intro { grid-area: Intro; } .Featured { grid-area: Featured; } .FeaturedSponsor { grid-area: FeaturedSponsor; } .MoreFeatured { grid-area: MoreFeatured; } .Contents { grid-area: Contents; } .Lore { grid-area: Lore; } .FAQ { grid-area: FAQ; } .Misc { grid-area: Misc; } /* Nested Grid Styling */ .Nested { grid-area: Nested; } .NestedR { grid-area: NestedR; } .Nested { display: grid; grid-auto-rows: min-content; grid-template-areas: "Featured" "FeaturedSponsor" "MoreFeatured" "Lore" "."; /* grid-template-columns: repeat(1, 1fr); grid-gap: 1em; */ } .NestedR { display: grid; grid-auto-rows: min-content; grid-template-areas: "Contents" "FAQ" "."; /* grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; grid-gap: 1em; */ } /* Main Page Disclaimer styling */ .mp-bordered { margin-bottom: 0.4em; padding: 0.4em; border-width: 1px; border-style: solid; border-color: #ddd; border-radius: 0.5em; overflow: auto; } /* Removed - white-space: nowrap; background-color: #f9f9f9; added border-radius */ /* START - Styling the Main Page content boxes */ /* Changing the margins on the thumbnail in the intro */ div.Intro > div > div >.tleft { margin: 0em 1.4em 0em 0; } .box { display: inline-block; border: 1px solid #d9d9d9; border-radius: 0.5em; } /* Removed - width: 100%; border-radius: 10px 10px 0 0; background-color: #fff; */ .box .box-header { display: block; clear: both; margin: 0; border-bottom: 1px solid #d9d9d9; padding: 8px 20px; overflow: hidden; } /* Removed - border-radius: 10px 10px 0 0; border-top: 1px solid #fff; background-color: #f2f2f2; */ .box-header { text-align: right; font-size: 120%; font-weight: bold; font-family: inherit; margin: 0.5em; } .box-content { margin: 0.5em; padding-top: 0.1em; padding-right: 0.6em; padding-bottom: 0.1em; padding-left: 0.6em; } .Featured > .box > .box-header { background-color: #cef2e0; border-bottom-color: #cef2e0; } .Featured > .box { border-color: #cef2e0; background-color: #f5fffa; } .MoreFeatured > .box > .box-header { background-color: #cef2e0; border-bottom-color: #cef2e0; } .MoreFeatured > .box { border-color: #cef2e0; background-color: #f5fffa; } /* FEATURED SPONSOR SECTION */ .FeaturedSponsor > .box { border-color: #afa3bf; background-color: #faf5ff; } .FeaturedSponsor > .box > .box-header { background-color: #ddcef2; border-bottom-color: #afa3bf; } .featuredtable { background-color:#faf5ff; color:#202122; margin:1em 0; border:1px solid #afa3bf; border-collapse:collapse } .featuredtable > tr > th, .featuredtable > tr > td, .featuredtable > * > tr > th, .featuredtable > * > tr > td { border:1px solid #afa3bf; padding:0.2em 0.4em; } .featuredtable > tr > th, .featuredtable > * > tr > th { background-color:#ddcef2; text-align:center } .featuredtable > caption { font-weight:bold } /* END FEATURED SPONSOR */ .Lore > .box > .box-header { background-color: #cef2e0; border-bottom-color: #cef2e0; } .Lore > .box { border-color: #cef2e0; background-color: #f5fffa; } /* GREEN TABLES */ .web3table { background-color:#f5fffa; color:#202122; margin:1em 0; border:1px solid #ABC9BA; border-collapse:collapse } /* border:1px solid #cef2e0; */ .web3table > tr > th, .web3table > tr > td, .web3table > * > tr > th, .web3table > * > tr > td { border:1px solid #ABC9BA; padding:0.2em 0.4em; } .web3table > tr > th, .web3table > * > tr > th { background-color:#cef2e0; text-align:center } .web3table > caption { font-weight:bold } /*BLUE BOX*/ .Contents > .box > .box-header { background-color: #cedff2; border-bottom-color: #cedff2; } .Contents > .box { border-color: #cedff2; background-color: #f5faff; } .FAQ > .box > .box-header { background-color: #cedff2; border-bottom-color: #cedff2; } .FAQ > .box { border-color: #cedff2; background-color: #f5faff; } /* BLUE TABLES */ .arttable { background-color:#f5faff; color:#202122; margin:1em 0; border:1px solid #ABB9C9; border-collapse:collapse } /* border:1px solid #cedff2; */ .arttable > tr > th, .arttable > tr > td, .arttable > * > tr > th, .arttable > * > tr > td { border:1px solid #ABB9C9; padding:0.2em 0.4em; } .arttable > tr > th, .arttable > * > tr > th { background-color:#cedff2; text-align:center } .arttable > caption { font-weight:bold } /* ORANGE TABLES */ .orgtable { background-color:#FFF8EB; color:#202122; margin:1em 0; border:1px solid #ABB9C9; border-collapse:collapse } .orgtable > tr > th, .orgtable > tr > td, .orgtable > * > tr > th, .orgtable > * > tr > td { border:1px solid #ABB9C9; padding:0.2em 0.4em; } .orgtable > tr > th, .orgtable > * > tr > th { background-color:#FFDEA6; text-align:center } .orgtable > caption { font-weight:bold } /* PURPLE BOX */ .Misc > .box > .box-header { background-color: #ddcef2; border-bottom-color: #afa3bf; } .Misc > .box { border-color: #afa3bf; background-color: #faf5ff; } .mp-bordered { background-color: #eeeeee; } /* END */