Open Beta is out on IOS/Android, PC & Mac! Play Now for Free! |
Testing Main Page/styles.css
/*==================================================
MAIN PAGE
==================================================*/
.mainpage { text-align: center; border-radius: 10px; }
.mainpage-block { position: relative; text-align: center; margin: 5px auto; padding: 5px; font-family: Varela Round; border-radius: 10px; }
.mainpage-category { width: 100%; height: 32px; background: #fceca6; border: 2px solid #d59e10; border-radius: 15px; padding: 0 10px 0 10px; margin: 0 auto; }
.mainpage-categoryimage { display: contents; margin: 0 auto; vertical-align: middle; text-align: center; width: 32px; }
.mainpage-categorytext { display: block; margin: 0 auto; text-align: right; width: 100%; padding: 6px 0 0 0; }
.mainpage-container { display: grid; grid-auto-flow: row dense; gap: 5px 5px; align-content: stretch; justify-items: stretch; }
.mainpage-header { position: relative; text-align: center; margin-top: 20px; background: #e8dec5; color: #503b06; font-family: Varela Round; font-weight: bold; font-size: 2em; border: 2px solid #503b06; border-radius: 10px; }
.mainpage-secondaryheader { background: #fbfeee; border-radius: 10px; margin: 0 0 5px; }
.mainpage-update { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 250px); grid-gap: 1em; grid-row-gap: 1px; margin: auto; justify-content: center; align-items: center; }
.main-flex-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; }
.main-flex-item { flex: 1; margin: 0 auto; display: block; padding: 15px 40px 15px 15px; } .main-img { width: 360px; max-height: 275px; } .main-img img { max-width: 100%; width: 360px; max-height: 275px; height: auto; object-fit: contain; }
@media (max-width: 1500px) { .main-flex-container {
display: block;
} .main-img { max-height: none; } .main-img img { width: 360px; max-height: none;
height: auto;
} }
@media (min-width: 851px) { .mainpage-container { grid-template-columns: 1fr 1fr; } .nookipedia-logo { padding: 0; width: 375px; height: 91px; margin: 0 auto; } .mainpage { width: 100%; } } @media (max-width: 850px) { .nookipedia-logo { padding: 0; height: 89px; width: 280px; margin: 0 auto; } .mainpage { width: 98%; } }
.stripes { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 12px, transparent 12px, transparent 24px); }
.ajaxpoll { width: 90%; border: none; background: transparent; padding: 10px 20px 10px 10px; margin: 0 auto; border-radius: 10px; }
.ajaxpoll .ajaxpoll-question { font-size: 1.3em; background: #fbfeee; border-radius: 10px; padding: 0 0 5px; text-align: center; }
.ajaxpoll .ajaxpoll-answer-name, .ajaxpoll-answer-name-revoke { font-size: 1.1em; }
.ajaxpoll .ajaxpoll-misc, .ajaxpoll .ajaxpoll-info { text-align: center; }
.ajaxpoll .ajaxpoll-id-info { display: none; }
.ajaxpoll .ajaxpoll-ajax { background: transparent; }
.ajaxpoll .ajaxpoll-hover-vote, .ajaxpoll .ajaxpoll-hover-revoke, .ajaxpoll .ajaxpoll-checkevent { background: transparent; font-weight: bold; }