articles.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Articles from the Stade team — longer-form writing on the app's design, cryptography, and the peer-to-peer protocols it's built on." />
<meta name="theme-color" content="#0a0a0a" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<title>Articles — Stade</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --bg-elev: #101010;
  --bg-card: rgba(26,26,26,0.6);
  --bg-card-hover: rgba(34,34,34,0.82);
  --border: rgba(140,140,140,0.1);
  --border-strong: rgba(170,170,170,0.2);
  --border-accent: rgba(224,224,224,0.32);
  --text: #f0f0f0;
  --text-muted: #8a8a8a;
  --text-dim: #545454;
  --accent: #e0e0e0;
  --accent-light: #ffffff;
  --accent-2: #b0b0b0;
  --accent-3: #cacaca;
  --accent-glow: rgba(224,224,224,0.38);
  --gradient: linear-gradient(135deg, #e0e0e0 0%, #b0b0b0 100%);
  --radius: 16px;
  --radius-lg: 24px;
  --nav-h: 65px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Google Sans', 'Product Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 10% -10%, rgba(224,224,224,0.14), transparent 55%),
    radial-gradient(ellipse 45% 35% at 95% 4%, rgba(176,176,176,0.1), transparent 55%);
  pointer-events: none; z-index: 0;
}
a { color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  background: rgba(10,10,10,0.82); border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 100%; max-width: 1200px; margin: 0 auto; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; color: var(--text); flex-shrink: 0; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; display: block; object-fit: cover; flex-shrink: 0; }
.docs-tag {
  font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  color: var(--accent-light); padding: 3px 9px; border-radius: 6px;
  background: rgba(224,224,224,0.1); border: 1px solid var(--border-accent); margin-left: 4px;
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 13px; border-radius: 8px; transition: all 0.2s; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong);
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: all 0.2s; white-space: nowrap;
}
.nav-cta:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.25); }
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; flex-shrink: 0;
  background: none; border: 1px solid var(--border-strong); border-radius: 8px;
  cursor: pointer; color: var(--text); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; transition: all 0.2s;
}
.lang-toggle:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
@media (max-width: 560px) { .nav-links { display: none; } .nav-cta span { display: none; } }

main { position: relative; z-index: 1; padding: 64px 0 40px; }

.articles-header { max-width: 640px; margin: 0 auto 56px; }
.articles-header h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.articles-header .lead { font-size: 17px; color: var(--text-muted); line-height: 1.65; max-width: 560px; }

.articles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 960px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; } }

.article-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; text-decoration: none;
  transition: all 0.3s ease; backdrop-filter: blur(8px);
}
.article-card:hover {
  border-color: var(--border-accent); background: var(--bg-card-hover);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.45), 0 0 32px -18px var(--accent-glow);
}
.article-card .ac-date { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-dim); }
.article-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.article-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

footer { border-top: 1px solid var(--border); padding: 56px 0 32px; position: relative; z-index: 1; margin-top: 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.65; max-width: 340px; margin: 10px 0 16px; }
.footer-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 8px;
  background: rgba(200,200,200,0.06); border: 1px solid rgba(200,200,200,0.2);
  font-size: 12px; font-family: 'JetBrains Mono', monospace; color: #c8c8c8;
}
.footer-badge svg { width: 12px; height: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid var(--border); }
.footer-bottom small { font-size: 13px; color: var(--text-dim); }
</style>
</head>
<body>

<nav>
  <div class="nav-inner">
    <a href="index.html" class="logo">
      <img src="logo.png" class="logo-mark" alt="Stade" />
      Stade
      <span class="docs-tag" data-tr="makaleler">articles</span>
    </a>
    <div class="nav-right">
      <ul class="nav-links">
        <li><a href="docs.html" data-tr="Dokümanlar">Docs</a></li>
        <li><a href="downloads.html" data-tr="İndirmeler">Downloads</a></li>
      </ul>
      <a href="https://github.com/Stade-App/stade" class="nav-cta" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.7.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.3v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"/></svg>
        <span>GitHub</span>
      </a>
      <button class="lang-toggle" id="langToggle" type="button" data-tr-aria="Dili değiştir" aria-label="Switch language">TR</button>
    </div>
  </div>
</nav>

<main>
  <div class="container">

    <div class="articles-header">
      <h1 data-tr="Makaleler">Articles</h1>
      <p class="lead" data-tr="Stade'in tasarımı, kriptografisi ve üzerine kurulduğu eşler arası protokoller hakkında uzun soluklu yazılar. Bunları inşa eden ekipten.">Longer-form writing on Stade's design, cryptography, and the peer-to-peer protocols it's built on &mdash; from the people building it.</p>
    </div>

    <div class="articles-grid">
      <a class="article-card" href="introduction-stade-paddy-and-memepad.html">
        <span class="ac-date" data-tr="14 Eylül 2026">September 14, 2026</span>
        <h3 data-tr="Giriş: Stade Paddy ve Memepad">Introduction: Stade Paddy and Memepad</h3>
        <p data-tr="0.2.6 sürümü, Stade kütüphanesinden meme ve ses klipleri paylaşmak için basit ses tabloları olan Paddy ve Memepad'i tanıtıyor.">Version 0.2.6 introduces Paddy and Memepad, simple soundpads for sharing memes and audio clips from the Stade library.</p>
      </a>
      <a class="article-card" href="discontinuation-of-stade-on-google-play.html">
        <span class="ac-date" data-tr="10 Eylül 2026">September 10, 2026</span>
        <h3 data-tr="Stade'in Google Play'den Kaldırılması">Discontinuation of Stade on Google Play</h3>
        <p data-tr="12 Eylül 2026 itibarıyla Stade artık Google Play'de bulunmayacak. Nedenleri ve Google Play kullanıcılarının yapması gerekenler.">Starting September 12, 2026, Stade will no longer be available on Google Play. Here's why, and what Google Play users should do.</p>
      </a>
    </div>

  </div>
</main>

<footer>
  <div class="container">
    <div class="footer-top">
      <div class="footer-brand">
        <a href="index.html" class="logo">
          <img src="logo.png" class="logo-mark" alt="Stade" />
          Stade
        </a>
        <p data-tr="Merkezi sunucu olmadan, gözetim olmadan, sınır olmadan iletişim kurun. Kotlin Multiplatform ile Android ve masaüstü desteği.">Communicate without a central server, without surveillance, without limits. Android and desktop support via Kotlin Multiplatform.</p>
        <span class="footer-badge">
          <svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.7.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.3v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"/></svg>
          <span data-tr="GPL-3.0 &middot; Açık Kaynak">GPL-3.0 &middot; Open Source</span>
        </span>
      </div>
      <div class="footer-links">
        <a href="index.html" data-tr="Ana Sayfa">Home</a>
        <a href="docs.html" data-tr="Dokümanlar">Docs</a>
        <a href="downloads.html" data-tr="İndirmeler">Downloads</a>
        <a href="https://github.com/Stade-App/stade" target="_blank" rel="noopener">GitHub</a>
        <a href="https://github.com/Stade-App/stade/blob/main/LICENSE" target="_blank" rel="noopener" data-tr="Lisans">License</a>
        <a href="privacy.html" data-tr="Gizlilik Politikası">Privacy Policy</a>
      </div>
    </div>
    <div class="footer-bottom">
      <small data-tr="&copy; 2026 Stade &middot; GPL-3.0 lisansı altında dağıtılmaktadır">&copy; 2026 Stade &middot; Distributed under the GPL-3.0 license</small>
      <small style="font-family:'JetBrains Mono',monospace;font-size:12px;">github.com/Stade-App/stade</small>
    </div>
  </div>
</footer>

<script>
  (function () {
    var LANG_KEY = 'stade-lang';
    var TITLE_EN = document.title;
    var TITLE_TR = 'Makaleler — Stade';
    var DESC_EL = document.querySelector('meta[name="description"]');
    var DESC_EN_TEXT = DESC_EL ? DESC_EL.getAttribute('content') : '';
    var DESC_TR_TEXT = "Stade ekibinden makaleler — uygulamanın tasarımı, kriptografisi ve üzerine kurulduğu eşler arası protokoller hakkında uzun soluklu yazılar.";

    document.querySelectorAll('[data-tr]').forEach(function (el) {
      if (el.dataset.en === undefined) el.dataset.en = el.textContent;
    });
    document.querySelectorAll('[data-tr-aria]').forEach(function (el) {
      if (el.dataset.enAria === undefined) el.dataset.enAria = el.getAttribute('aria-label') || '';
    });

    function applyLang(lang) {
      document.documentElement.lang = lang;
      document.querySelectorAll('[data-tr]').forEach(function (el) {
        el.textContent = lang === 'tr' ? el.getAttribute('data-tr') : el.dataset.en;
      });
      document.querySelectorAll('[data-tr-aria]').forEach(function (el) {
        el.setAttribute('aria-label', lang === 'tr' ? el.getAttribute('data-tr-aria') : el.dataset.enAria);
      });

      var toggle = document.getElementById('langToggle');
      if (toggle) toggle.textContent = lang === 'tr' ? 'EN' : 'TR';
      document.title = lang === 'tr' ? TITLE_TR : TITLE_EN;
      if (DESC_EL) DESC_EL.setAttribute('content', lang === 'tr' ? DESC_TR_TEXT : DESC_EN_TEXT);
      localStorage.setItem(LANG_KEY, lang);
    }

    var stored = localStorage.getItem(LANG_KEY);
    applyLang(stored === 'tr' ? 'tr' : 'en');

    var langToggle = document.getElementById('langToggle');
    langToggle.addEventListener('click', function () {
      applyLang(document.documentElement.lang === 'tr' ? 'en' : 'tr');
    });
  })();
</script>
</body>
</html>