Template:Main Page/styles.css: Difference between revisions
| [checked revision] | [checked revision] |
Aurelianus (talk | contribs) No edit summary Tag: Reverted |
Aurelianus (talk | contribs) No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* | /* ================================================== | ||
RESET & TEMEL AYARLAR | |||
================================================== */ | |||
* { | * { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 6: | Line 8: | ||
body { | body { | ||
margin: 0; | margin: 0; | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
color: #202122; | color: #202122; | ||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", | |||
Roboto, Inter, Arial, sans-serif; | |||
line-height: 1.6; | |||
} | } | ||
/* | /* ================================================== | ||
. | ANA KAPSAYICI | ||
================================================== */ | |||
.sa-mainpage { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
padding: 16px; | |||
} | } | ||
/* | /* Wikipedia'deki tablo hissi */ | ||
. | .sa-box { | ||
background: #ffffff; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 2px; | |||
padding: 16px; | |||
margin-bottom: 16px; | margin-bottom: 16px; | ||
} | } | ||
/* | /* ================================================== | ||
. | HERO / GİRİŞ | ||
================================================== */ | |||
.sa-hero { | |||
text-align: center; | |||
} | |||
.sa-title { | |||
font-size: 2.2rem; | font-size: 2.2rem; | ||
font-weight: 600; | font-weight: 600; | ||
margin: 0; | margin: 0 0 8px; | ||
} | } | ||
.sa-tagline { | |||
. | |||
font-size: 1rem; | font-size: 1rem; | ||
color: #54595d; | color: #54595d; | ||
margin: | margin: 0 0 16px; | ||
} | |||
.sa-stats { | |||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
display: flex; | |||
justify-content: center; | |||
gap: 24px; | |||
} | |||
.sa-stats li { | |||
font-size: 0.95rem; | |||
} | } | ||
/* | /* ================================================== | ||
. | GRID (Wikipedia ana sayfa gibi iki kolon) | ||
================================================== */ | |||
.sa-grid { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 16px; | |||
} | } | ||
. | /* ================================================== | ||
border- | BAŞLIKLAR | ||
================================================== */ | |||
.sa-box h2 { | |||
font-size: 1.1rem; | |||
font-weight: 600; | |||
border-bottom: 1px solid #a2a9b1; | |||
padding-bottom: 4px; | |||
margin: 0 0 8px; | |||
} | } | ||
.sa-later { | |||
. | |||
font-size: 0.85rem; | font-size: 0.85rem; | ||
color: #72777d; | color: #72777d; | ||
font-weight: normal; | |||
} | |||
/* ================================================== | |||
İÇERİK ALANI | |||
================================================== */ | |||
.sa-content { | |||
font-size: 0.95rem; | |||
} | |||
/* Float temizliği (DYK, ITN vb. için) */ | |||
.sa-content::after { | |||
content: ""; | |||
display: block; | |||
clear: both; | |||
} | } | ||
/* | /* ================================================== | ||
@media (max-width: | MEDYA (POTD) | ||
. | ================================================== */ | ||
.sa-media img, | |||
.sa-media video { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
/* ================================================== | |||
BANNER | |||
================================================== */ | |||
.sa-banner { | |||
text-align: center; | |||
} | |||
/* ================================================== | |||
MOBİL | |||
================================================== */ | |||
@media (max-width: 800px) { | |||
.sa-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.sa-stats { | |||
flex-direction: column; | |||
gap: 4px; | |||
} | |||
.sa-title { | |||
font-size: 1.8rem; | font-size: 1.8rem; | ||
} | } | ||
} | } | ||