|
|
| (6 intermediate revisions by 2 users not shown) |
| Line 7: |
Line 7: |
| font-family: system-ui, -apple-system, Roboto, Arial, sans-serif; | | font-family: system-ui, -apple-system, Roboto, Arial, sans-serif; |
| background: #f3f4f6; | | background: #f3f4f6; |
| }
| |
|
| |
| /* ================================
| |
| CITY ICONS IN SIDEBAR
| |
| ================================ */
| |
| #n-Mumbai a {
| |
| background: url(https://citypedia.online/images/0/0b/Mumbai.png) no-repeat left center;
| |
| padding-left: 26px !important;
| |
| background-size: 18px;
| |
| }
| |
| #n-Pune a {
| |
| background: url(https://citypedia.online/images/8/86/Pune.png) no-repeat left center;
| |
| padding-left: 26px !important;
| |
| background-size: 18px;
| |
| }
| |
| #n-Thane a {
| |
| background: url(https://citypedia.online/images/d/d0/Thane.png) no-repeat left center;
| |
| padding-left: 26px !important;
| |
| background-size: 18px;
| |
| } | | } |
|
| |
|
| Line 69: |
Line 50: |
| } | | } |
|
| |
|
| /* ================================
| | .mw-columns { |
| TWO COLUMN LAYOUT
| | column-count: 2; |
| ================================ */
| | column-gap: 16px; |
| .citypedia-row { | |
| display: flex; | |
| gap: 20px;
| |
| margin-top: 20px;
| |
| }
| |
| | |
| .citypedia-main {
| |
| width: 70%;
| |
| }
| |
| | |
| .citypedia-side {
| |
| width: 30%; | |
| }
| |
| | |
| /* Stack on mobile */
| |
| @media screen and (max-width: 768px) {
| |
| .citypedia-row {
| |
| flex-direction: column;
| |
| }
| |
| .citypedia-main,
| |
| .citypedia-side {
| |
| width: 100%;
| |
| }
| |
| }
| |
| | |
| /* ================================
| |
| CARD SYSTEM (BOTTOM SECTION)
| |
| ================================ */
| |
| .citypedia-card {
| |
| background: #ffffff;
| |
| border-radius: 16px;
| |
| padding: 16px;
| |
| margin-bottom: 18px;
| |
| border: 1px
| |
| | |
| /* =========================
| |
| CITYPEDIA PORTAL CARDS
| |
| ========================= */
| |
| | |
| /* Improve card inner spacing */
| |
| .citypedia-card p,
| |
| .citypedia-card ul,
| |
| .citypedia-card li {
| |
| margin: 8px 0;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| /* Better list style inside cards */
| |
| .citypedia-card ul {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| }
| |
| | |
| .citypedia-card li {
| |
| padding: 6px 8px;
| |
| border-radius: 8px;
| |
| transition: background 0.15s;
| |
| }
| |
| | |
| .citypedia-card li:hover {
| |
| background: rgba(34,197,94,0.08);
| |
| }
| |
| | |
| /* Links inside cards */
| |
| .citypedia-card a {
| |
| color: #166534;
| |
| font-weight: 600;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .citypedia-card a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Featured Cities layout */
| |
| .citypedia-featured li {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| font-weight: 500;
| |
| }
| |
| | |
| /* Quick Access links */
| |
| .citypedia-quick li::before {
| |
| content: "➤ ";
| |
| color: #22c55e;
| |
| font-weight: bold;
| |
| }
| |
| | |
| /* Stats highlight */
| |
| .citypedia-stats strong {
| |
| color: #065f46;
| |
| font-size: 18px;
| |
| } | | } |
|
| |
|
| /* Make the two columns visually separate */
| | @media (max-width: 720px) { |
| .citypedia-main {
| | .mw-columns { |
| padding-right: 10px;
| | column-count: 1; |
| }
| |
| | |
| .citypedia-side {
| |
| padding-left: 10px;
| |
| border-left: 1px solid rgba(0,0,0,0.08);
| |
| }
| |
| /* Citypedia Main Layout */
| |
| .citypedia-row {
| |
| display: grid;
| |
| grid-template-columns: 70% 30%;
| |
| gap: 20px;
| |
| margin-top: 20px;
| |
| }
| |
| | |
| /* Mobile */
| |
| @media (max-width: 900px) { | |
| .citypedia-row { | |
| grid-template-columns: 1fr; | |
| } | | } |
| }
| |
|
| |
| /* Card style */
| |
| .citypedia-card {
| |
| background: #ffffff;
| |
| border-radius: 12px;
| |
| padding: 16px 20px;
| |
| margin-bottom: 18px;
| |
| border: 1px solid #e4e8ee;
| |
| box-shadow: 0 6px 18px rgba(0,0,0,0.06);
| |
| }
| |
|
| |
| /* Headings inside cards */
| |
| .citypedia-card h2,
| |
| .citypedia-card h3 {
| |
| margin-top: 0;
| |
| border-bottom: 2px solid #eef2f6;
| |
| padding-bottom: 6px;
| |
| }
| |
|
| |
| /* Featured cities */
| |
| .citypedia-featured {
| |
| list-style: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .citypedia-featured li {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| padding: 6px 0;
| |
| border-bottom: 1px dashed #ddd;
| |
| }
| |
|
| |
| .citypedia-featured li span {
| |
| color: #555;
| |
| }
| |
|
| |
| /* Quick access */
| |
| .citypedia-quick {
| |
| list-style: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .citypedia-quick li {
| |
| padding: 6px 0;
| |
| }
| |
|
| |
| /* Stats */
| |
| .citypedia-stats {
| |
| background: linear-gradient(135deg, #f5faff, #eef5ff);
| |
| text-align: center;
| |
| font-size: 15px;
| |
| } | | } |
