|
|
| 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;
| |
| }
| |
| } | | } |
/* 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;
}
}