Damla Okul — Tasarım Sistemi ve UI Mimarisi

Dokümantasyon: Bu projenin belgeleri üç dosyada toplanmıştır; mimari, kurulum veya UI değişikliklerinde ilgili belgeleri birlikte güncelleyin:

• README.md — Genel bakış, kurulum ve hızlı başlangıç
• project.md — Teknik mimari ve geliştirme kuralları
• design.md — Stil, tasarım sistemi ve UI bileşenleri (bu dosya)

Bu belge damlaokul.com sitesinin görsel kimliğini, CSS mimarisini, bileşen kütüphanesini ve tasarım tercihlerini tanımlar. Teknik build/deploy bilgisi için project.md; kurulum için README.md dosyasına bakın.

Tasarım İlkeleri

CSS Mimari Diyagramı

┌─────────────────────────────────────────────────────────────┐
│  bootstrap.min.css        Bootstrap 5.3 (düzenlenmez)       │
├─────────────────────────────────────────────────────────────┤
│  fontawesome-all.min.css  İkonlar (yerel webfont)           │
├─────────────────────────────────────────────────────────────┤
│  theme.css                Tasarım sistemi: token, bileşen   │
├─────────────────────────────────────────────────────────────┤
│  app.css                  Bootstrap override, body, navbar    │
├─────────────────────────────────────────────────────────────┤
│  spotlight.css            Arama modal (async, tüm sayfalar) │
├─────────────────────────────────────────────────────────────┤
│  tiny-slider.css          Anasayfa slider (yalnızca /)      │
└─────────────────────────────────────────────────────────────┘

Yükleme sırası (default.html head)

1. fontawesome-all.min.css
2. bootstrap.min.css
3. theme.css
4. app.css
5. Anasayfada ek: tiny-slider.css (preload + link)
6. spotlight.css — search-lunr.html içinde async (media="print" onload)

Sorumluluk tablosu

Kural: Yeni kalıcı bileşen → theme.css. Bootstrap’ı markaya uydurmak → app.css.

Tasarım Token’ları

Tüm token’lar theme.css → :root bloğunda tanımlıdır. Bileşenlerde mümkün olduğunca bu değişkenler kullanılır; app.css ve spotlight.css fallback değerleriyle (var(--color-primary, #03a87c)) uyumludur.

Renkler

Bootstrap eşlemesi (app.css):

--bs-primary: #03a87c;
--bs-primary-rgb: 3, 168, 124;
--bs-link-color: #03a87c;
--bs-link-hover-color: #028a66;
--bs-body-bg: #fafafa;
--bs-border-color: #dee2e6;

Semantik renkler (bileşen özel):

Tipografi

Boşluk ve boyut

Geçişler

• Linkler ve butonlar: transition: all 0.2s veya 0.15s ease
• Kart hover: box-shadow 0.2s ease, kapak transform: scale(1.02) 0.2s
• Navbar scroll gölgesi: box-shadow 0.2s ease-in-out
• Modal açılış: opacity 0.2s, transform scale/translateY 0.25s

Tipografi Sistemi

Font dosyaları

Tüm @font-face tanımlarında font-display: swap kullanılır. Raykjavik default.html head’de preload edilir.

Font atama haritası

Prose stilleri

İki prose varyantı vardır:

Kitap detayda **kalın** metin aynı font ailesinde font-weight: 700 ile render edilir; ayrı bold font dosyası yüklenmez.

Responsive Breakpoint’ler

Bootstrap 5 breakpoint’leri ile uyumlu:

Mobil navbar yapısı

.container
├── .site-nav__bar          ← logo + arama + hamburger (tek satır)
│   ├── .navbar-brand
│   ├── .site-nav__search-bar (d-lg-none)
│   └── .navbar-toggler
└── .navbar-collapse        ← menü linkleri (mobilde alt satır, tam genişlik)

Masaüstünde (≥992px) .site-nav__bar { display: contents } ile Bootstrap’ın yatay navbar düzeni korunur.

Sayfa İskeleti (Shell)

Layout hiyerarşisi

default.html
├── <nav id="MagicMenu" class="site-nav ... fixed-top">
├── <main class="site-content">  ← <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
        <h1 class="fw-bold title h6 text-uppercase mb-4">Tags</h1>
            
        

        </div>
        
            <div class="col-md-4">
        <div class="sticky-top sticky-top-offset">
    <h4 class="fw-bold spanborder"><span>Featured News</span></h4>  
    <ol class="list-featured">				
           
    </ol>
</div>     
    </div>
        
    </div>
</div>
├── ai-seo-crawler (gizli)
├── scripts (defer)
└── footer-menu.html

• body padding-top: var(--nav-height) — içerik navbar altında kalmaz
• .site-content: min-height: 400px; anasayfa slider için .remove-site-content-margin (margin-top: -30px)
• body.homefirstpage: anasayfa body class’ı

Genel sayfa layout’u (page.html)

<div class="container">
  <h3 class="fw-bold spanborder"><span>Damla Okul — Tasarım Sistemi ve UI Mimarisi</span></h3>  {# show_title != false #}
  <div class="page-content"><div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
        <h1 class="fw-bold title h6 text-uppercase mb-4">Tags</h1>
            
        

        </div>
        
            <div class="col-md-4">
        <div class="sticky-top sticky-top-offset">
    <h4 class="fw-bold spanborder"><span>Featured News</span></h4>  
    <ol class="list-featured">				
           
    </ol>
</div>     
    </div>
        
    </div>
</div></div>
</div>

.spanborder: alt çizgili bölüm başlığı stili — iç span altında kısa vurgu çizgisi.

Bileşen Kataloğu

1. Site Navbar (#MagicMenu)

Dosyalar: _layouts/default.html, assets/css/theme.css, assets/css/app.css, assets/js/nav.js

2. Site Footer (.site-footer)

3 sütunlu koyu footer:

Stil özellikleri:

• Arka plan: --color-footer-bg (#25272a)
• Başlıklar: Punta, uppercase, --color-primary
• Linkler: rgba(255,255,255,0.75) → hover --color-primary
• Alt bölüm: .site-footer__bottom — logo (logo-bw.png) + copyright

Dosya: _includes/footer-menu.html, theme.css → .site-footer__*

3. Sınıf Filtresi (.grade-nav)

9 sütunlu grid (mobilde 2 sütun); okul öncesi + 1–8. sınıf.

Sınıf ikon renkleri:

Durumlar:

• .active — alt çizgi (box-shadow: inset 0 -2px 0)
• .open — alt menü açık; caret 180° döner
• .has-genre — seçili tür etiketi ::after ile gösterilir

Alt menü (.grade-submenu): absolute dropdown; masaüstünde hover ile de açılır.

Dosyalar: _includes/book-grade-nav.html, theme.css, book-filter.js

4. Kitap Kartı (.book-card)

BEM yapısı:

.book-card
├── .book-card__link
│   ├── .book-card__media
│   │   └── .book-card__cover (object-fit: contain)
│   └── .book-card__info
│       └── .book-card__title (line-clamp: 2)

• Sabit toplam yükseklik — grid hizası bozulmaz
• Hover: hafif gölge + kapak scale(1.02)
• Grid: .listbooks-home.row — mobil 2, masaüstü 4 sütun CSS Grid

Dosyalar: _includes/book-card.html, theme.css

5. Tür Grupları (.book-genre-group)

• Başlık: .book-genre-heading — Punta, alt border
• Performans: content-visibility: auto; contain-intrinsic-size: auto 500px

6. Kitap Detay (.book-page)

Dosya: _layouts/book.html

7. Hero Slider (.slider)

• Tiny Slider kütüphanesi
• Aspect ratio: desktop 1250/504, mobil 1181/950
• İlk slide: fetchpriority="high", preload (webp öncelikli)
• Diğer slide’lar: lazy (tns-lazy-img, loading="lazy")
• Container: .remove-site-content-margin ile navbar boşluğu telafi

Dosyalar: _includes/slider.html, theme.css → .slider, tiny-slider.css

8. Instagram Carousel (.ig-carousel)

Tek dosyada inline <style> + <script> — istisna bileşen.

• Site token’larıyla uyumlu: --font-display, --color-primary, --radius, --shadow-sm
• Yatay scroll-snap carousel; skeleton yükleme durumu
• Kart: aspect-ratio: 1, hover caption gradient overlay
• Responsive item genişliği: 50% → 33% → 25%

Dosya: _includes/instagram-carousel.html

9. Spotlight Arama

macOS Spotlight ilhamlı tam ekran modal:

Kısayol göstergesi: Ctrl+K badge. prefers-color-scheme: dark desteği var.

URL senkronu (?q=): Site genelinde geçerli. Sayfa ?q=terim ile yüklenince modal otomatik açılır. Modal’da yazarken history.replaceState ile bulunulan sayfanın URL’sine ?q= eklenir (paylaşılabilir arama linki). ESC / kapatınca ?q= silinir; sayfa hash’i (/urunler#2-sinif/egitim) korunur. Boş Ctrl+K açılışında URL değişmez. SearchAction schema kanonik giriş: /?q={search_term_string}.

Lunr indeks alanları: title (yüksek boost), ean (barkod), authors, categories, grades, genre, anatemalar, tags, body. İndeks kapakları assets/images/ean/{ean}.webp|jpg kullanır. 4+ haneli sayısal sorguda ean doğrudan eşleştirilir.

Dosyalar: _includes/search-lunr.html, _pages/search-index.json, assets/css/spotlight.css, assets/js/lunr.js

10. Kitap Popup’ları (#popup-overlay)

Spotlight ile aynı görsel dil:

• z-index: 10000 (spotlight: 9999)
• Masaüstünde iframe/youtube popup; mobilde yeni sekme
• info popup: prefers-color-scheme: dark metin renkleri ayarlı

Dosya: _includes/popup.html (inline style + script)

11. Satın Al / Bilgi (damlaurl)

Eski .buyout satıcı barı ve buyout.css kaldırıldı. Satın alma akışı kitap front matter’ındaki damlaurl alanı ve book.html aksiyon butonlarıyla yönetilir:

Dosyalar: _layouts/book.html, _includes/popup.html

12. İletişim Bilgisi (.contact-info)

Dosya: _includes/contact-info.html

13. Ürün İnceleme Linkleri (.review-links)

Tek sayfa bileşeni; inline CSS + JS (_pages/linkler.html — include yok).

Token kullanımı: --font-sans, --font-display, --color-primary, --radius, --shadow-sm, --color-border. show_title: false ile sayfa başlığı özel header bloğunda.

Dosya: _pages/linkler.html

İkonografi

• Kütüphane: Font Awesome 5.15.4 (yerel, CDN yok)
• Stiller: fas (solid), fab (brand)
• Grade nav: Her sınıf için 2 ikon (Font Awesome education set)
• Book meta: Renkli ikonlar (text-primary, text-danger, text-dark)
• Sosyal medya: menu-socialmedia.html — fab fa-*
• X (Twitter): .site-social__icon--x özel SVG/block

Görsel İşleme

Kitap kapakları

• Yol: assets/images/ean/{ean}.jpg
• Render: <picture> + koşullu WebP (webp_manifest.yml)
• Kart: object-fit: contain, loading="lazy", fetchpriority="low"
• Gölge: .cover-shadow veya .book img { filter: drop-shadow(...) }

Slider görselleri

• Yol: assets/images/slides/
• Mobil/desktop ayrı dosya (mobile-img / img)
• Hedef: mobil *m.jpg ≤ 120 KB (Photoshop ile optimize)

WebP politikası

Şablonlar yalnızca manifest’te kayıtlı webp için <source type="image/webp"> ekler — 404 oluşmaz.

İsimlendirme Kuralları

Tercih: Yeni bileşenlerde BEM + site prefix; Bootstrap class’ları yalnızca grid/spacing için.

Sayfa Özel Stiller (İstisnalar)

Bazı sayfalar kendi <style> bloğunu taşır. Bu istisnadır; kalıcı bileşenler theme.css‘e taşınmalıdır.

Yeni sayfa özel stil eklerken mevcut token’ları referans alın; hard-coded renk yerine var(--color-*) kullanın.

Koyu Tema Desteği

Site genelinde dark mode yok; body her zaman açık tema. Aşağıdaki bileşenler prefers-color-scheme: dark ile OS koyu temasına uyum sağlar:

• .spotlight-container ve alt elemanları
• .popup-container ve .popup-body metin renkleri

Navbar, footer ve ana içerik koyu tema desteklemez.

Erişilebilirlik Desenleri

Yeni Stil Ekleme Rehberi

Kalıcı bileşen

1. theme.css → Components bölümüne BEM class’ları ekle
2. Gerekirse :root‘a yeni token ekle
3. HTML partial → _includes/ veya layout
4. Bootstrap grid ile layout; özel görünüm theme’den

Bootstrap override

1. app.css‘e ekle
2. Mümkünse CSS değişkeni (--bs-*) kullan
3. !important yalnızca Bootstrap specificity gerektirdiğinde

Tek sayfa / tek kullanım

1. Sayfa front matter altında <style> bloğu kabul edilir
2. Token referansı zorunlu; bileşen büyürse theme.css‘e taşı

Yapılmaması gerekenler

• bootstrap.min.css düzenlemek
• Inline style="" attribute (istisna: dinamik JS)
• CDN font/icon (tüm fontlar yerel)
• jQuery tabanlı UI (theme.js legacy)
• Global CSS’e AI crawler gizleme kuralları (include içi inline style)

Legacy ve Geçiş

İlgili Dosya Referansı