メインページのソースを表示

<html>
<div class="kawanishi-top">

  <!-- Hero -->
  <section class="hero">
    <h1>川西図鑑</h1>
    <p class="catch">
      川西の「お店・人・場所」を集めた地域図鑑
    </p>
    <p class="lead">
      飲食店から地域の活動まで。<br>
      川西市にある情報を、誰でも書き、誰でも探せます。
    </p>
    <div class="hero-actions">
      <a class="btn primary" href="/wiki/飲食店検索">川西を探す</a>
      <a class="btn secondary" href="/wiki/川西図鑑について">このサイトについて</a>
    </div>
  </section>

  <!-- Encyclopedia -->
  <section class="section">
    <h2>図鑑で探す</h2>
    <div class="card-grid">
      <a class="card" href="/wiki/飲食店検索">
        <span class="icon">🍽</span>
        <span class="title">飲食店</span>
        <span class="desc">川西市内の飲食店情報</span>
      </a>
      <div class="card disabled">
        <span class="icon">🏬</span>
        <span class="title">お店・店舗</span>
        <span class="desc">準備中</span>
      </div>
      <div class="card disabled">
        <span class="icon">👤</span>
        <span class="title">人・団体</span>
        <span class="desc">準備中</span>
      </div>
      <div class="card disabled">
        <span class="icon">🗺</span>
        <span class="title">場所・スポット</span>
        <span class="desc">準備中</span>
      </div>
    </div>
  </section>

  <!-- Journal -->
  <section class="section alt">
    <h2>ジャーナル</h2>
    <p class="section-lead">
      川西に関する出来事や体験、記録を集めています。
    </p>
    <div class="journal-list">
      <!-- 後でCargo差し替え -->
      <div class="journal-item">川西能勢口で見つけた小さな名店</div>
      <div class="journal-item">昔の川西と今を比べてみる</div>
      <div class="journal-item">川西で活動する人たち</div>
    </div>
    <a class="text-link" href="/wiki/ジャーナル一覧">ジャーナル一覧を見る →</a>
  </section>

  <!-- Random -->
  <section class="section">
    <h2>今日の川西</h2>
    <p class="section-lead">
      偶然の出会いから、川西を知る。
    </p>
    <a class="btn ghost" href="/wiki/特別:Random">ランダムな図鑑を見る</a>
  </section>

  <!-- Footer Message -->
  <section class="footer-note">
    <p>
      川西図鑑は、川西の情報を少しずつ集めていく<br>
      オープンな地域Wikiです。
    </p>
  </section>

</div>
<style>
.kawanishi-top {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: inherit;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 72px 16px 64px;
}

.hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 12px;
}

.hero .catch {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.hero .lead {
  color: #6b7280;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn.primary {
  background: #2563eb;
  color: #fff;
}

.btn.primary:hover {
  background: #1d4ed8;
}

.btn.secondary {
  background: #f1f5f9;
  color: #1f2937;
  border-color: #d1d5db;
}

.btn.secondary:hover {
  background: #e5e7eb;
}

.btn.ghost {
  border: 1px dashed #9ca3af;
  color: #374151;
  background: transparent;
}

/* ---------- Sections ---------- */
.section {
  padding: 56px 0;
}

.section.alt {
  background: #f9fafb;
  padding-left: 16px;
  padding-right: 16px;
}

.section h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.section-lead {
  color: #6b7280;
  margin-bottom: 24px;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card .icon {
  font-size: 28px;
}

.card .title {
  display: block;
  font-weight: 600;
  margin-top: 8px;
}

.card .desc {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Journal ---------- */
.journal-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.journal-item {
  padding: 12px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.text-link {
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Footer ---------- */
.footer-note {
  text-align: center;
  padding: 48px 0 16px;
  color: #6b7280;
  font-size: 13px;
}

/* ---------- Dark Mode ---------- */
.skin-theme-clientpref-night .hero .lead,
.skin-theme-clientpref-night .section-lead,
.skin-theme-clientpref-night .footer-note {
  color: #9ca3af;
}

.skin-theme-clientpref-night .section.alt {
  background: #1f2937;
}

.skin-theme-clientpref-night .card,
.skin-theme-clientpref-night .journal-item {
  background: #111827;
  border-color: #374151;
}

.skin-theme-clientpref-night .btn.secondary {
  background: #374151;
  color: #f9fafb;
}
</style>
</html>