Template:MainPageBanner/styles.css: Difference between revisions
Appearance
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* | /* Top Banner Styles */ | ||
#mp-topbanner { | #mp-topbanner { | ||
background-color: # | background-color: #3a3f47; | ||
color: white; | |||
padding: 20px; | |||
text-align: center; | text-align: center; | ||
} | } | ||
#mp- | #mp-topbanner h1 { | ||
font-size: | font-size: 36px; | ||
margin | margin: 0; | ||
} | } | ||
#articlecount { | #mp-free, #articlecount { | ||
font-size: | font-size: 18px; | ||
margin: 5px 0; | |||
margin | |||
} | } | ||
/* Main Container */ | |||
/* Main | |||
#mp-container { | #mp-container { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
padding: 20px; | |||
gap: 20px; | gap: 20px; | ||
} | } | ||
.mp-card { | .mp-card { | ||
background-color: #f9f9f9; | |||
border-radius: 10px; | |||
border-radius: | padding: 20px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |||
box-shadow: | flex: 1; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
} | } | ||
.mp-card:hover { | .mp-card:hover { | ||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |||
box-shadow: | |||
} | } | ||
.section-header h2 { | |||
font-size: 22px; | |||
color: #333; | |||
margin: 0; | |||
padding-bottom: 10px; | |||
border-bottom: 2px solid #eee; | |||
font-weight: bold; | |||
border: | |||
} | } | ||
/* Responsive | /* Responsive Adjustments */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
#mp-container { | #mp-container { | ||
flex-direction: column; | flex-direction: column; | ||
} | } | ||
.mp-card { | .mp-card { | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
} | } |
Revision as of 20:04, 2 January 2025
/* Top Banner Styles */ #mp-topbanner { background-color: #3a3f47; color: white; padding: 20px; text-align: center; } #mp-topbanner h1 { font-size: 36px; margin: 0; } #mp-free, #articlecount { font-size: 18px; margin: 5px 0; } /* Main Container */ #mp-container { display: flex; justify-content: space-between; padding: 20px; gap: 20px; } .mp-card { background-color: #f9f9f9; border-radius: 10px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); flex: 1; transition: all 0.3s ease; } .mp-card:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .section-header h2 { font-size: 22px; color: #333; margin: 0; padding-bottom: 10px; border-bottom: 2px solid #eee; font-weight: bold; } /* Responsive Adjustments */ @media (max-width: 768px) { #mp-container { flex-direction: column; } .mp-card { margin-bottom: 20px; } }