"ഫലകം:Listofdistricts2/styles.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
No edit summary |
No edit summary |
||
| വരി 4: | വരി 4: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: space-between; /* distribute evenly */ | justify-content: space-between; /* distribute evenly */ | ||
gap: 12px; | gap: 12px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
/* Each item | /* Each link/item inside district-items */ | ||
.district-items a { | .district-items a, | ||
flex: 1 1 calc(25% - 12px); /* 4 per row | .district-items span, /* in case MediaWiki uses spans */ | ||
.district-items div { /* fallback for other wrappers */ | |||
flex: 1 1 calc(25% - 12px); /* 4 per row on desktop */ | |||
box-sizing: border-box; | box-sizing: border-box; | ||
background: #ffffff; | background: #ffffff; | ||
| വരി 22: | വരി 23: | ||
text-decoration: none; | text-decoration: none; | ||
box-shadow: 2px 2px 6px rgba(0,0,0,0.08); | box-shadow: 2px 2px 6px rgba(0,0,0,0.08); | ||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
transition: all 0.25s ease; | transition: all 0.25s ease; | ||
} | } | ||
/* Hover effect */ | /* Hover effect */ | ||
.district-items a:hover { | .district-items a:hover, | ||
.district-items span:hover, | |||
.district-items div:hover { | |||
background: #81bffc; | background: #81bffc; | ||
color: #ffffff; | color: #ffffff; | ||
| വരി 39: | വരി 42: | ||
/* Subtext (if used) */ | /* Subtext (if used) */ | ||
.district-items a small { | .district-items a small, | ||
.district-items span small, | |||
.district-items div small { | |||
display: block; | display: block; | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
| വരി 48: | വരി 53: | ||
/* Responsive: 2 per row on tablets */ | /* Responsive: 2 per row on tablets */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.district-items a { | .district-items a, | ||
.district-items span, | |||
.district-items div { | |||
flex: 1 1 calc(45% - 12px); | flex: 1 1 calc(45% - 12px); | ||
font-size: 0.95rem; | font-size: 0.95rem; | ||
| വരി 56: | വരി 63: | ||
/* Responsive: 1 per row on mobile */ | /* Responsive: 1 per row on mobile */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.district-items a { | .district-items a, | ||
.district-items span, | |||
.district-items div { | |||
flex: 1 1 100%; | flex: 1 1 100%; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
} | } | ||
} | } | ||