Template:Mainpage.css: Difference between revisions
Created page with "→===== Main Page Container Styling =====: #mainpage-header { display: flex; align-items: center; justify-content: center; background: #f8f8ff; border: 2px solid #cc0000; border-radius: 12px; padding: 15px; font-size: 120%; } →Logo in header: #mainpage-header .header-logo { flex: 0 0 auto; margin-right: 15px; } →Header text: #mainpage-header .header-text { flex: 1; } →===== Category Boxes =====: .mainpage-cate..." |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* Header */ | ||
#mainpage-header { | #mainpage-header { | ||
display: flex; | display: flex; | ||
| Line 11: | Line 11: | ||
} | } | ||
/* | /* Header logo and text */ | ||
#mainpage-header .header-logo { | #mainpage-header .header-logo { flex:0 0 auto; margin-right:15px; } | ||
#mainpage-header .header-text { flex:1; } | |||
#mainpage-header p { margin:0; } | |||
} | |||
#mainpage-header .header-text { | |||
} | |||
/* | /* Category boxes */ | ||
.mainpage-categories { | .mainpage-categories { | ||
display: flex; | display:flex; | ||
gap: 10px; | gap:10px; | ||
justify-content: center; | justify-content:center; | ||
margin-top: 15px; | margin-top:15px; | ||
} | } | ||
.mainpage-categories .category-box { | .mainpage-categories .category-box { | ||
flex: 1; | flex:1; | ||
display: flex; | display:flex; | ||
padding: 10px; | padding:10px; | ||
border: 1px solid #aaa; | border:1px solid #aaa; | ||
border-radius: 8px; | border-radius:8px; | ||
align-items:center; | |||
align-items: center; | |||
transition: box-shadow 0.2s; | transition: box-shadow 0.2s; | ||
} | } | ||
.mainpage-categories .category-text { flex:1; } | |||
.mainpage-categories .category-text { | |||
} | |||
.mainpage-categories .category-icon { | .mainpage-categories .category-icon { | ||
flex: 0 0 50px; | flex:0 0 50px; | ||
display: flex; | display:flex; | ||
align-items: center; | align-items:center; | ||
justify-content: center; | justify-content:center; | ||
} | } | ||
.mainpage-categories .category-box:hover { | .mainpage-categories .category-box:hover { | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.2); | box-shadow:0 2px 8px rgba(0,0,0,0.2); | ||
cursor: pointer; | cursor:pointer; | ||
} | } | ||
/* | /* Discord box */ | ||
#mainpage-discord { | #mainpage-discord { | ||
text-align: center; | text-align:center; | ||
margin-top: 20px; | margin-top:20px; | ||
} | } | ||
#mainpage-discord .discord-box { | #mainpage-discord .discord-box { | ||
display: inline-flex; | display:inline-flex; | ||
align-items: center; | align-items:center; | ||
gap: 8px; | gap:8px; | ||
border: 1px solid #5865F2; | border:1px solid #5865F2; | ||
border-radius: 8px; | border-radius:8px; | ||
padding: 8px 12px; | padding:8px 12px; | ||
background: #f0f2ff; | background:#f0f2ff; | ||
transition: box-shadow 0.2s; | transition:box-shadow 0.2s; | ||
} | } | ||
#mainpage-discord .discord-box img { vertical-align:middle; } | |||
#mainpage-discord .discord-box img { | |||
} | |||
#mainpage-discord .discord-box:hover { | #mainpage-discord .discord-box:hover { | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.2); | box-shadow:0 2px 8px rgba(0,0,0,0.2); | ||
cursor: pointer; | cursor:pointer; | ||
} | } | ||
#mainpage-discord p { margin:0; } | |||
/* | /* Optional category-specific colors */ | ||
# | .category-pokehero { background:#eaf9e8; } | ||
.category-moves { background:#e8f1fa; } | |||
} | .category-items { background:#fff3e6; } | ||
.category-locations { background:#f6e8fa; } | |||
.category-characters { background:#fceaea; } | |||
.category-mechanics { background:#eaf8f9; } | |||