Template:Main Page/styles.css
From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
.MainContent { margin: 2px; } /* Top Box */ .MainTopBox { border-radius: 10px; background: #FFF; box-shadow: 0 0 0.2em #999; margin: 1em 0.2em 1.5em 0.2em; box-sizing: border-box; } .MainTitleBox { border-radius: 10px 10px 0 0; padding: 10px; background: #C4E673; text-align: center; } .MainTitle { font-size: 256%; line-height: 120%; } .MainSubtitle { font-size: 110%; } .MainTopCircle { border-radius: 200px; width: 200px; height: 200px; margin: 10px auto; display: flex; justify-content: center; align-items: center; background: #FFF; } .MainTitleMobileButtons { display: flex; justify-content: center; } .MainTitleGrid { display: grid; grid-template-columns: repeat(4, 75px); gap: 8px; width: auto; margin: 10px auto 0 auto; justify-self: center; } .MainTitleButton { border-radius: 10px; background: #E0F2B6; display: flex; align-items: center; justify-content: center; } .MainBulbasaur { float: right; padding: 10px 10px 10px 0; } .MainTopBlurb { padding: 10px 10px 0 10px; text-align: center; min-height: 120px; display: flex; justify-content: center; align-items: center; } .MainTopLinks { clear: both; background: #C4E673; font-size: 85%; border-radius: 10px; margin: 10px; text-align: center; } /* Portal Grid */ .MainPortalGrid { display: grid; gap: 10px; margin: 1em 0.2em 1em 0.2em; } .MainPortalBox { background: #FFE; box-shadow: 0 0 0.2em #999; padding: 8px; border-radius: 10px; text-align: center; align-items: center; display: grid; grid-template-columns: 40px 1fr; } .MainPortalImage { display: flex; justify-content: center; align-items: center; } .MainPortalName { font-size: 145%; font-weight: bold; line-height: 110%; } .MainMoreLink { font-size: 120%; text-align: center; } /* Big Grid */ .MainBigGrid { display: grid; gap: 10px; margin: 1.5em 0.2em; } .MainWidgets { display: flex; justify-content: center; align-items: center; } .MainTwitchLinks { margin-top: 6px; font-size: 110%; text-align: center; } /* Help Out Box */ .MainHelpOutTitle { font-size: 130%; margin-top: 10px; } .MainHelpBulletinGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 5px 0 10px 0; } .MainHelpBulletinBox { border-radius: 10px; text-align: center; color: #FFF; } .MainHelpMoreGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: auto; } .MainHelpMoreItem { display: flex; flex-direction: column; justify-content: center; align-items: center; } .MainHelpMoreCircle { background: #E0F2B6; border-radius: 65px; height: 65px; width: 65px; text-align: center; display: flex; justify-content: center; align-items: center; font-size: larger; } .MainHelpMoreText { font-size: smaller; line-height: 100%; padding-top: 5px; } /* Affiliates */ .MainNIWAGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: minmax(40px, auto); gap: 10px; margin: 10px 5px; } .MainNIWASite { border-radius: 10px; background: #E0F2B6; text-align: center; padding: 2px; } /* MOBILE */ @media (max-width:600px) { .MainPortalGrid { grid-template-columns: 1fr; } .MainTopBlurb, .MainBulbasaur, .MainTopLinks, .MainMoreLink, .MainPortalBlank, .MainBulbagardenBox { display: none; } .MainTitleBox { border-radius: 10px; } } /* SMALL DESKTOP & TABLET */ @media (min-width:601px) { .MainPortalGrid { grid-template-columns: repeat(2, minmax(155px, 1fr)); } .MainTopBox { padding-bottom: 4px; } .MainTitleBox { border-radius: 10px 10px 0 0; } .MainTopCircle, .MainLastPortal, .MainPortalBlank .MainTitleMobileButtons { display: none; } } /* DESKTOP */ @media (min-width:950px) { .MainPortalGrid { grid-template-columns: repeat(4, minmax(155px, 1fr)); } .MainPortalBlank { display: inline; } }