Merge: env/dev -> env/prod (#161-#166 Xブランド化・シェア再編・UIトーン統一 ほか)

web/assets/css/color.css

@@ -1,34 +1,44 @@
-.text-twitter {
-  color: #1da1f2;
-}
-.text-facebook {
-  color: #1778f2;
-}
-.text-hatena {
-  color: #1da1f2;
-}
-.text-github {
-  color: #333;
-}
-.text-connpass {
-  color: #666;
-}
+/* デザイントークン(#166)
+   基準は「夜の神社×暖色」(おみくじ演出・実績カード群のトーン)。
+   色はここで一元管理し、各所ではトークンを参照する */
+:root {
+  /* ベース */
+  --color-text: #ffffff;
+  --color-text-muted: #9a9a9a;
+  --color-link: #cccccc;
+
+  /* サーフェス(GitHub実績カード等と同系のダークカード) */
+  --color-surface: #0d1117;
+  --color-surface-border: #30363d;
 
-.bg-twitter {
-  background-color: #1da1f2;
+  /* アクセント(提灯・鈴の金に合わせた琥珀) */
+  --color-accent: #e0a83c;
+  --color-accent-hover: #c98f2a;
+  --color-accent-soft: #ffcf6b;
+
+  /* SNSブランド色 */
+  --color-x: #000000;
+  --color-bluesky: #0085ff;
+  --color-facebook: #1778f2;
+  --color-github: #333333;
+  --color-discord: #5865f2;
+
+  /* レイアウト */
+  --width-content: 600px;
 }
-.bg-facebook {
-  background-color: #1778f2;
+
+.bg-x {
+  background-color: var(--color-x);
 }
-.bg-line {
-  background-color: #00B900;
+.bg-bluesky {
+  background-color: var(--color-bluesky);
 }
-.bg-hatena {
-  background-color: #1da1f2;
+.bg-facebook {
+  background-color: var(--color-facebook);
 }
 .bg-github {
-  background-color: #333;
+  background-color: var(--color-github);
 }
 .bg-discord {
-  background-color: #5865F2;
+  background-color: var(--color-discord);
 }

web/assets/css/common.css

@@ -2,11 +2,17 @@ body {
     background-image: url(/background.png);
     background-repeat: repeat;
     background-size: 8%;
-    color: #fff;
+    color: var(--color-text);
 }
 
 a {
-    color: #ccc;
+    color: var(--color-link);
+}
+
+/* インラインコード(aboutの`でばっぐ神社とは`等)。
+   Bootstrap既定のピンクをやめ、サイトの暖色トーンに合わせる */
+code {
+    color: var(--color-accent-soft);
 }
 
 .w-35 {
@@ -20,3 +26,52 @@ a {
 .h-min-100vh {
    min-height: 100vh;
 }
+
+/* 本文系コンテンツの標準幅(インラインstyleのmax-width散在を置き換える) */
+.content-narrow {
+    max-width: var(--width-content);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* ダークカード(GitHub実績カード・参拝の草と同系のサーフェス) */
+.card-shrine {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-surface-border);
+    border-radius: 0.5rem;
+    color: var(--color-text);
+}
+
+/* セクション見出し(実績カード群の見出しと同じ、太字ゴシック) */
+.section-title {
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+/* 主要アクション(参拝・おみくじ・鈴)は琥珀のボタン。汎用はBootstrap標準のまま */
+.btn-accent {
+    color: #1a1206;
+    font-weight: 700;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+}
+.btn-accent:hover,
+.btn-accent:focus,
+.btn-accent:active {
+    color: #1a1206;
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+}
+
+/* ボタンに見えない強調ラベル(「でばっぐのうりょく」等) */
+.label-accent {
+    color: var(--color-accent-soft);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+/* 経験値バー等の進捗もトーンを揃える */
+.progress-bar {
+    background-color: var(--color-accent);
+    color: #1a1206;
+}

web/assets/css/font.css

@@ -5,6 +5,7 @@
 
 body {
   font-family: var(--font-family-sans-serif);
+  line-height: 1.75;
 }
 
 h1, h2, h3, h4, h5, h6 {

web/components/CommonFooter.vue

@@ -22,33 +22,21 @@
               <!-- SNSリンク -->
               <div class="py-2">
                 <a
-                  class="btn bg-twitter text-white"
-                  href="https://twitter.com/debug_shrine"
+                  class="btn bg-x text-white"
+                  href="https://x.com/debug_shrine"
                   target="_blank"
+                  aria-label="X"
                 >
-                  <i class="fab fa-twitter fa-lg fa-fw"></i>
-                  Twitter
+                  <IconX />
                 </a>
                 <a
                   class="ms-3 btn bg-github text-white"
                   href="https://github.com/428lab/debug-shrine"
                   target="_blank"
+                  aria-label="GitHub"
                 >
                   <i class="fab fa-github fa-lg fa-fw"></i>
-                  GitHub
                 </a>
-                <!-- <a class="d-inline-block" href="https://428lab.net/" target="_blank">
-                <img src="/brandlogo/lab_icon.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://blog.428lab.net/" target="_blank">
-                <img src="/brandlogo/hatena_icon.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://twitter.com/lab_428" target="_blank">
-                <img src="/brandlogo/twitter.svg" alt="" width="40px" />
-              </a>
-              <a class="ms-3 d-inline-block" href="https://www.facebook.com/%E5%9B%9B%E8%B0%B7%E3%83%A9%E3%83%9C-102455797824507/" target="_blank">
-                <img src="/brandlogo/facebook.svg" alt="" width="40px" />
-              </a> -->
               </div>
             </div>
           </div>

web/components/GithubStats.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="github-stats p-3 rounded">
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-      <div class="gh-title"><i class="fab fa-github fa-fw"></i> GitHubの実績</div>
+      <h2 class="gh-title fs-6 mb-0"><i class="fab fa-github fa-fw"></i> GitHubの実績</h2>
       <div v-if="state === 'loaded'" class="gh-sub">
         {{ fetchedAtText }}
       </div>
@@ -205,14 +205,14 @@ export default {
 
 <style scoped>
 .github-stats {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .gh-title {
   font-weight: 700;
 }
 .gh-sub {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 
@@ -239,7 +239,7 @@ export default {
   margin-left: 1px;
 }
 .tile-label {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.8rem;
   margin-top: 2px;
 }
@@ -300,7 +300,7 @@ export default {
   font-weight: 700;
 }
 .repo-desc {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
   margin: 4px 0 6px;
   display: -webkit-box;

web/components/GrassGrid.vue

@@ -37,7 +37,7 @@
 
 <script>
 // 1つの草グリッド(期間分)を描画する。直近1年と年別表示(全期間)で共用。
-const { buildGrassGrid, levelFor } = require("@/components/sanpaiGrass");
+const { buildGrassGrid, levelFor } = require("@/utils/sanpaiGrass");
 
 export default {
   props: {
@@ -95,7 +95,7 @@ export default {
   position: absolute;
   top: 0;
   font-size: 10px;
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   white-space: nowrap;
 }
 
@@ -115,7 +115,7 @@ export default {
   height: 11px;
   line-height: 11px;
   font-size: 10px;
-  color: #9a9a9a;
+  color: var(--color-text-muted);
 }
 
 /* 草本体 */

web/components/IconBluesky.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- FontAwesome kit(5.15.4)にBlueskyアイコンが無いためインラインSVGで描画する -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1.25em"
+    height="1.25em"
+    fill="currentColor"
+    aria-hidden="true"
+    style="vertical-align: -0.25em"
+  >
+    <path
+      d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
+    />
+  </svg>
+</template>

web/components/IconX.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- FontAwesome kit(5.15.4)に fa-x-twitter が無いためインラインSVGで描画する -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1.25em"
+    height="1.25em"
+    fill="currentColor"
+    aria-hidden="true"
+    style="vertical-align: -0.25em"
+  >
+    <path
+      d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z"
+    />
+  </svg>
+</template>

web/components/OmikujiScene.vue

@@ -35,7 +35,7 @@
           </a>
         </div>
         <div v-else>
-          <button class="btn btn-lg btn-danger" @click.stop="onRing">鈴を鳴らす</button>
+          <button class="btn btn-lg btn-accent" @click.stop="onRing">鈴を鳴らす</button>
         </div>
       </div>
       <div v-else-if="phase === 'cascade' || phase === 'fox'" class="hint skip">

web/components/ProfileStats.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="profile-stats p-3 rounded">
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
-      <div class="stats-title">📊 参拝の記録</div>
+      <h2 class="stats-title fs-6 mb-0">📊 参拝の記録</h2>
     </div>
 
     <div v-if="state === 'loading'" class="stats-sub py-3">
@@ -126,14 +126,14 @@ export default {
 
 <style scoped>
 .profile-stats {
-  background: #0d1117;
+  background: var(--color-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .stats-title {
   font-weight: 700;
 }
 .stats-sub {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
 }
 
@@ -164,7 +164,7 @@ export default {
   margin-left: 1px;
 }
 .tile-label {
-  color: #9a9a9a;
+  color: var(--color-text-muted);
   font-size: 0.8rem;
   margin-top: 2px;
 }