Toggle menu
7
27
38
5.2K
Sanarchive
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

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

Template page
[checked revision][checked revision]
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* =========================================
/* Genel sıfırlama, çünkü tarayıcılara güven olmaz */
  MAIN PAGE BASE
* {
========================================= */
  box-sizing: border-box;
 
.frame-container {
width: 100%;
display: flex;
justify-content: center;
}
}


.col-12 {
body {
width: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background-color: #f8f9fa;
  color: #202122;
}
}


.col-9 {
/* Ana sayfa kapsayıcı */
width: 90%;
.homepage {
max-width: 900px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
}


/* =========================================
/* Logo */
  HEADER / HERO
.homepage-logo img {
========================================= */
  width: 180px;
 
  height: auto;
.header-part {
  margin-bottom: 16px;
text-align: center;
font-size: 2.3em;
font-weight: 600;
margin: 1.4em 0 0.6em;
line-height: 1.2;
}
}


.header-pics {
/* Site adı */
margin: 0 0.25em;
.homepage-title {
display: inline-flex;
  font-size: 2.2rem;
align-items: center;
  font-weight: 600;
gap: 0.3em;
  margin: 0;
}
}


.homepage-logo {
/* Slogan */
font-size: 0.85em;
.homepage-tagline {
font-weight: 700;
  font-size: 1rem;
}
  color: #54595d;
 
  margin: 8px 0 28px;
/* =========================================
  SEARCH BAR (PROLEWIKI STYLE)
========================================= */
 
.search-bar {
display: flex;
justify-content: center;
margin-bottom: 1.2em;
}
 
.homepage-search {
display: flex;
align-items: center;
gap: 10px;
background-color: #f3f5f7;
border: 1px solid #d5dbe0;
border-radius: 999px;
padding: 14px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
}


/* Arama alanı */
.homepage-search-input {
.homepage-search-input {
border: none;
  width: 360px;
background: transparent;
  max-width: 90%;
outline: none;
  padding: 12px 14px;
font-size: 1.05em;
  font-size: 1rem;
width: 100%;
  border: 1px solid #a2a9b1;
min-width: 120px;
  border-radius: 4px;
}
  outline: none;
 
  transition: border-color 0.15s, box-shadow 0.15s;
.search-icon-homepage img {
vertical-align: middle;
}
 
.search-shortcut {
background-color: #e0e6eb;
border: 1px solid #d5dbe0;
padding: 3px 6px;
border-radius: 4px;
font-size: 0.85em;
color: #444;
}
 
/* =========================================
  HERO STATS
========================================= */
 
.hero-stats {
text-align: center;
font-size: 0.9em;
color: #555;
margin-bottom: 1.8em;
}
 
/* =========================================
  MAIN PAGE BOXES (Wikipedia base)
========================================= */
 
.mp-box {
border: 1px solid #aaa;
padding: 0 0.6em 0.6em;
margin-top: 6px;
}
 
.mp-h2 {
border: 1px solid #aaa;
margin: 0.6em 0;
padding: 0.25em 0.5em;
font-size: 120%;
font-weight: bold;
}
 
.mp-later {
font-size: 85%;
font-weight: normal;
}
 
/* =========================================
  FLEX LAYOUT
========================================= */
 
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
 
#mp-left {
flex: 1 1 55%;
margin-right: 3px;
}
 
#mp-right {
flex: 1 1 45%;
margin-left: 3px;
}
}
 
/* =========================================
  CLEAR FLOAT FIX
========================================= */
 
.mp-contains-float::after {
content: "";
display: block;
clear: both;
}
 
/* =========================================
  COLOR SCHEME (LIGHT)
========================================= */
 
#mp-banner {
background-color: #fffaf5;
border-color: #f2e0ce;
}
 
#mp-left {
background-color: #f5fffa;
border-color: #cef2e0;
}
 
#mp-left .mp-h2 {
background-color: #cef2e0;
border-color: #a3bfb1;
}
 
#mp-right {
background-color: #f5faff;
border-color: #cedff2;
}
 
#mp-right .mp-h2 {
background-color: #cedff2;
border-color: #a3b0bf;
}
 
#mp-middle {
background-color: #fff5fa;
border-color: #f2cedd;
}
 
#mp-middle .mp-h2 {
background-color: #f2cedd;
border-color: #bfa3af;
}
 
#mp-lower {
background-color: #faf5ff;
border-color: #ddcef2;
}
 
#mp-lower .mp-h2 {
background-color: #ddcef2;
border-color: #afa3bf;
}
 
#mp-bottom {
border-color: #e2e2e2;
}
 
#mp-bottom .mp-h2 {
background-color: #eee;
border-color: #ddd;
}
}


/* =========================================
.homepage-search-input:focus {
  NIGHT MODE (MediaWiki)
  border-color: #3366cc;
========================================= */
  box-shadow: 0 0 0 2px rgba(51,102,204,0.15);
 
html.skin-theme-clientpref-night .homepage-search {
background-color: #1f2328;
border-color: #3a3f45;
}
}


html.skin-theme-clientpref-night .homepage-search-input {
/* Enter ipucu */
color: #ddd;
.homepage-search-hint {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #72777d;
}
}


html.skin-theme-clientpref-night .search-shortcut {
/* Mobil */
background-color: #2c3136;
@media (max-width: 480px) {
border-color: #444;
  .homepage-title {
color: #bbb;
    font-size: 1.8rem;
}
  }
 
html.skin-theme-clientpref-night .hero-stats {
color: #bbb;
}
 
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
 
html.skin-theme-clientpref-night #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
 
html.skin-theme-clientpref-night #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
 
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
 
/* =========================================
  MOBILE FIXES
========================================= */
 
@media (max-width: 600px) {
.header-part {
font-size: 1.7em;
}
 
.homepage-search {
padding: 12px 16px;
}
 
.search-shortcut,
.homepage-search small {
display: none;
}
}
}

Revision as of 20:08, 31 January 2026

/* Genel sıfırlama, çünkü tarayıcılara güven olmaz */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background-color: #f8f9fa;
  color: #202122;
}

/* Ana sayfa kapsayıcı */
.homepage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Logo */
.homepage-logo img {
  width: 180px;
  height: auto;
  margin-bottom: 16px;
}

/* Site adı */
.homepage-title {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0;
}

/* Slogan */
.homepage-tagline {
  font-size: 1rem;
  color: #54595d;
  margin: 8px 0 28px;
}

/* Arama alanı */
.homepage-search-input {
  width: 360px;
  max-width: 90%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid #a2a9b1;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.homepage-search-input:focus {
  border-color: #3366cc;
  box-shadow: 0 0 0 2px rgba(51,102,204,0.15);
}

/* Enter ipucu */
.homepage-search-hint {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #72777d;
}

/* Mobil */
@media (max-width: 480px) {
  .homepage-title {
    font-size: 1.8rem;
  }
}