Meta:Main Page/styles.css: Difference between revisions
From WikiOasis Meta
More actions
CSS file for main page redesign |
m Tali64³ moved page User:Tali64³/Main page redesign/styles.css to Meta:Main Page/styles.css without leaving a redirect: No longer a draft |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.mp-button { | |||
background: rgba(255, 255, 255, 0.15); | |||
border: 1px solid rgba(255, 255, 255, 0.2); | |||
border-radius: 50px; | |||
color: white; | |||
display: inline-block; | |||
font-size: clamp(0.9rem, 4vw, 1rem); | |||
font-weight: 600; | |||
margin: 0.25rem; | |||
padding: min(0.9rem, 3vw) min(2rem, 5vw); | |||
text-align: center; | |||
transition: all 0.3s ease; | |||
} | |||
.mp-button:hover { | |||
background: rgba(255, 255, 255, 0.25); | |||
} | |||
.mp-card { | .mp-card { | ||
border-radius: min(16px, 4vw); | border-radius: min(16px, 4vw); | ||
| Line 4: | Line 20: | ||
margin-bottom: min(2rem, 6vw); | margin-bottom: min(2rem, 6vw); | ||
padding: min(2rem, 8vw) min(2rem, 6vw); | padding: min(2rem, 8vw) min(2rem, 6vw); | ||
} | |||
.mp-card-heading { | |||
align-items: center; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: min(0.5rem, 2vw); | |||
justify-content: center; | |||
margin-bottom: min(1.5rem, 4vw); | |||
} | |||
.mp-card-heading .mw-heading3 { | |||
font-size: clamp(1.2rem, 5vw, 1.5rem); | |||
font-weight: 700; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* This cannot be merged into the above rule due to the color breaking */ | |||
.mp-card-heading h3 { | |||
color: #2d3748; | |||
} | |||
.mp-card-list { | |||
color: #4a5568; | |||
font-size: clamp(0.9rem, 3.5vw, 1rem); | |||
line-height: 1.6; | |||
} | |||
.mp-card-list-item { | |||
margin-bottom: min(1rem, 3vw); | |||
} | |||
.mp-icon { | |||
align-items: center; | |||
background: radial-gradient(circle, #3650b8 0, #0050b4 100%); | |||
border-radius: 50%; | |||
display: inline-flex; | |||
justify-content: center; | |||
height: min(40px, 10vw); | |||
width: min(40px, 10vw); | |||
} | |||
.mp-icon-inner { | |||
filter: brightness(0) invert(1); | |||
line-height: 1; | |||
} | } | ||