Main Page/styles.css
From Nookipedia, the Animal Crossing wiki
/*==================================================
[[Category:Main Page templates]]
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;
}