Template:Main Page/styles.css: Difference between revisions

[checked revision][checked revision]
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* ==================================================
/* ==================================================
   RESET & TEMEL AYARLAR
   ANA KAPSAYICI
================================================== */
================================================== */
* {
.sa-mainpage {
   box-sizing: border-box;
   max-width: 1200px;
}
   margin: 0 auto;
 
   padding: 16px;
body {
   margin: 0;
   background-color: #f8f9fa;
  color: #202122;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
               Roboto, Inter, Arial, sans-serif;
  color: #202122;
   line-height: 1.6;
   line-height: 1.6;
}
}


/* ==================================================
/* ==================================================
   ANA KAPSAYICI
   WIKIPEDIA TABLO HİSSİ
================================================== */
================================================== */
.sa-mainpage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
/* Wikipedia'deki tablo hissi */
.sa-box {
.sa-box {
   background: #ffffff;
   background-color: #ffffff;
   border: 1px solid #a2a9b1;
   border: 1px solid #a2a9b1;
  border-radius: 2px;
   padding: 16px;
   padding: 16px;
   margin-bottom: 16px;
   margin-bottom: 16px;
Line 41: Line 30:


.sa-title {
.sa-title {
   font-size: 2.2rem;
   font-size: 2.2em;
   font-weight: 600;
   font-weight: 600;
   margin: 0 0 8px;
   margin: 0 0 8px;
Line 47: Line 36:


.sa-tagline {
.sa-tagline {
   font-size: 1rem;
   font-size: 1em;
   color: #54595d;
   color: #54595d;
   margin: 0 0 16px;
   margin: 0 0 12px;
}
}


.sa-stats {
.sa-stats {
   list-style: none;
   list-style: none;
  margin: 0;
   padding: 0;
   padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
}
}


.sa-stats li {
.sa-stats li {
   font-size: 0.95rem;
  display: inline;
   font-size: 0.95em;
}
 
.sa-stats li::after {
  content: " · ";
  font-weight: bold;
}
 
.sa-stats li:last-child::after {
  content: "";
}
}


/* ==================================================
/* ==================================================
   GRID (Wikipedia ana sayfa gibi iki kolon)
   İKİ KOLON DÜZEN (MP-UPPER)
================================================== */
================================================== */
.sa-grid {
.sa-grid {
   display: grid;
   display: table;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   gap: 16px;
  border-spacing: 16px 0;
}
 
.sa-col {
  display: table-cell;
   vertical-align: top;
  width: 50%;
}
}


Line 78: Line 80:
================================================== */
================================================== */
.sa-box h2 {
.sa-box h2 {
   font-size: 1.1rem;
   font-size: 1.1em;
   font-weight: 600;
   font-weight: bold;
   border-bottom: 1px solid #a2a9b1;
   border: 1px solid #a2a9b1;
   padding-bottom: 4px;
  background-color: #f8f9fa;
   padding: 4px 8px;
   margin: 0 0 8px;
   margin: 0 0 8px;
}
}


.sa-later {
.sa-later {
   font-size: 0.85rem;
   font-size: 0.85em;
   color: #72777d;
   color: #72777d;
   font-weight: normal;
   font-weight: normal;
Line 92: Line 95:


/* ==================================================
/* ==================================================
   İÇERİK ALANI
   İÇERİK
================================================== */
================================================== */
.sa-content {
.sa-content {
   font-size: 0.95rem;
   font-size: 0.95em;
}
}


/* Float temizliği (DYK, ITN vb. için) */
/* FLOAT TEMİZLEME (TemplateStyles-safe) */
.sa-content::after {
.sa-clearfix {
  content: "";
  display: block;
   clear: both;
   clear: both;
}
}
Line 128: Line 129:
@media (max-width: 800px) {
@media (max-width: 800px) {
   .sa-grid {
   .sa-grid {
     grid-template-columns: 1fr;
     display: block;
   }
   }


   .sa-stats {
   .sa-col {
     flex-direction: column;
     display: block;
     gap: 4px;
     width: 100%;
   }
   }


   .sa-title {
   .sa-title {
     font-size: 1.8rem;
     font-size: 1.8em;
   }
   }
}
}