From ee887860d758dc41735f0ee0515b7cfb668f04d5 Mon Sep 17 00:00:00 2001
From: moris <moris@noreply.moris.day>
Date: Mon, 10 Mar 2025 09:42:23 +0900
Subject: [PATCH] =?UTF-8?q?css=E3=81=AE=E6=9C=80=E9=81=A9=E5=8C=962?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/(DefaultStyle)/about/+page.svelte  | 13 +----
 .../(DefaultStyle)/post/[slug]/profile.svelte | 55 ++++++++++++-------
 .../(DefaultStyle)/post/[slug]/share.svelte   | 45 ++++++---------
 .../(DefaultStyle)/post/[slug]/toc.svelte     |  2 +-
 src/routes/code/[slug]/+layout.svelte         | 18 +++---
 5 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/src/routes/(DefaultStyle)/about/+page.svelte b/src/routes/(DefaultStyle)/about/+page.svelte
index 3018436..5b1a765 100644
--- a/src/routes/(DefaultStyle)/about/+page.svelte
+++ b/src/routes/(DefaultStyle)/about/+page.svelte
@@ -10,17 +10,8 @@
     <title>About | moris.day Blog</title>
 </svelte:head>
 
-<div id="about">
+<div id="about" style="margin:auto; padding:24px; max-width:720px;">
     <article class='markdown'>
         {@html data.md}
     </article>
-</div>
-
-
-<style>
-    #about {
-        margin: auto;
-        padding: 24px;
-        max-width: 720px;
-    }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/routes/(DefaultStyle)/post/[slug]/profile.svelte b/src/routes/(DefaultStyle)/post/[slug]/profile.svelte
index 5fcf431..b14507f 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/profile.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/profile.svelte
@@ -1,29 +1,31 @@
 <div class="profile" aria-label="プロフィール">
-    <div>
-        <div class="space topspace"></div>
-        <div class="icon">
-            <img src="https://moris.day/files/assets/moris_icon_200px.avif" width="200" height="200" alt="moris icon"/>
-        </div>
-        <div class="space bottomspace"></div>
-        <div style="position:relative; text-align:center; font-family:monospace;font-size:1.2em; font-weight:350; width:fit-content; margin:auto;"><span>moris</span><img src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f9ea.svg" alt="test tube" style="position:absolute; left:100%; aspect-ratio:1; height:100%; padding:3%; box-sizing:border-box;"/></div>
+    <div class="topspace"></div>
+
+    <img class='icon' src="https://moris.day/files/assets/moris_icon_200px.avif" width="200" height="200" alt="moris icon"/>
+
+    <div style="height:38px;"></div>
+
+    <div class="name">
+        <span>moris</span>
+        <img class='testtube' src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/72x72/1f9ea.png" alt="test tube"/>
     </div>
 
     <div class="discription">
-        <span>有機化学好きの大学生<br>電子工作やプログラムもいじります<br>誤字 文句 その他連絡→<a href="https://mi.moris.day/@moris" target="_blank">Misskey(Fediverse)</a></span>
+        <span>
+            有機化学好きの大学生<br>
+            電子工作やプログラムもいじります<br>
+            誤字 文句 その他連絡→
+            <a href="https://mi.moris.day/@moris" target="_blank">Misskey(Fediverse)</a>
+        </span>
     </div>
 </div>
 
 <style>
-    .profile {
-        position: relative;
-    }
     .topspace {
         height: 55px;
         background-color: color-mix(in srgb, var(--theme-color) 25%, var(--back-color));
     }
-    .bottomspace {
-        height: 38px;
-    }
+
     .icon {
         position: absolute;
         padding: 4px;
@@ -33,13 +35,26 @@
         top: 14px;  /*calc(55px - 35px - 6px);*/
         left: calc(50% - 41px);  /*calc(50% - 35px - 6px);*/
         background-color: var(--grid-color);
-        
-        & img {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-        }
     }
+
+    .name {
+        position: relative;
+        font-family: monospace;
+        font-size: 1.2em;
+        font-weight: 350;
+        width: fit-content;
+        margin: auto;
+    }
+
+    .testtube {
+        position: absolute;
+        left: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        padding: 1px;
+        box-sizing: border-box;
+    }
+
     .discription {
         padding: 8px;
         font-size: 0.9em;
diff --git a/src/routes/(DefaultStyle)/post/[slug]/share.svelte b/src/routes/(DefaultStyle)/post/[slug]/share.svelte
index 7b83410..2d37c90 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/share.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/share.svelte
@@ -13,29 +13,29 @@
 
 <div style="margin:4px 0 0 8px;color:#aaaa;font-size:0.85em">Share</div>
 <div id="share">
-    <button class="link js" type="button" on:click={copylink} aria-label="urlをコピー" title="copy url">
+    <button class="link item js" type="button" on:click={copylink} aria-label="urlをコピー" title="copy url">
         {#if copyed}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108"><path d="m69.5 94.5l-20-20l6-6l14 14l25-25l6 6zM94.5 49h-9v-22h-9v14h-45v-14h-9v63h27v9h-27c-5 0-9-4-9-9v-63c0-5 4-9 9-9h19c1-5 6-9 12.5-9c6.5 0 11.5 4 12.5 9h19c5 0 9 4 9 9zm-40.5-22c2.5 0 4.5-2 4.5-4.5s-2-4.5-4.5-4.5s-4.5 2-4.5 4.5s2 4.5 4.5 4.5z"/></svg>
         {:else}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108"><path d="m22.5 99c-5 0-9-4-9-9v-63c0-5 4-9 9-9h19c1-5 6-9 12.5-9c6.5 0 11.5 4 12.5 9h19c5 0 9 4 9 9 v63c0 5-4 9-9 9zm0-9h63v-63h-9v14h-45v-14h-9zM54 27c2.5 0 4.5-2 4.5-4.5s-2-4.5-4.5-4.5s-4.5 2-4.5 4.5s2 4.5 4.5 4.5"/></svg>
         {/if}
     </button>
-    <div class="misskey">
+    <div class="misskey item">
         <a href="https://misskey-hub.net/share?url={url}&text={title}+-+moris+Blog" target="_blank" aria-label="misskeyで共有">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136"><path d="m16.5 20c-9 0-16.5 7.5-16.5 16.5v62c0 9 7.5 16.5 16.5 16.5 9 0 16.5-7.5 16.5-16.5v-12c0-3 2.6-2 4 0 2.4 4 7.4 7.6 13.3 7.5s10.9-3.5 13.3-7.5c1.4-2 4-3 4 0v12c0 9 7.5 16.5 16.5 16.5 9 0 16.5-9 16.5-16.5v-62c0-9-7.5-16.5-16.5-16.5-5 0-9.4 2-13 6l-16.5 19.5c-2.45 3.13-5.96 2.92-8.4 0l-16.5-19.5c-3.4-4-7.7-6-13-6zm105.5 0c-8 0-14 6-14 14 0 8 6 14 14 14 8 0 14-6 14-14 0-8-6-14-14-14m0 31c-8 0-14 6 -14 14v35c0 8 6 14 14 14 8 0 14-6 14-14v-35c0-8-6-14-14-14"/></svg>
         </a>
     </div>
-    <div class="threads">
+    <div class="threads item">
         <a href="https://www.threads.net/intent/post?text={title}+-+moris+Blog%0A{url}" target="_blank" aria-label="threadsで共有">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 1100"><path d="m558 1050c-229 0-444-129-446-499v-0.7c1.4-172 56-496 446-499h0.6c231 1.6 377 122 430 315l-85 23.7c-46-165-162-249-346-251-284 2.1-356 208-358 411 2.8 325 179 410 358 411 109-0.8 182-26 242-85 83.6-82 81-212-22.7-273-34.2 240-253 237-344 177-92-60-97-184-17.6-252 82-71 221-57 275-48-25-150-195-129-244-55l-73-49c93-138 393-152 409 130 196 83 203 303 80 432-82 88-172 112-304 112zm11-486c-173 9.7-151 171-6 163 51-2.7 117-22.6 129-155-41-3.7-82-10-123-8z"/></svg>
         </a>
     </div>
-    <div class="twitter">
+    <div class="twitter item">
         <a href="https://twitter.com/share?url={url}&text={title}+-+moris+Blog%0A" target="_blank" aria-label="twitterで共有">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248 248"><path d="M 222,73 C 222,205 87,257 1,201 28,204 54,196 76,180 54,180 35,166 29,145 37,147 44,146 52,144 28,139 11,118 11,94 18,98 26,100 34,100 12,85 5,56 18,33 44,65 81,84 122,86 111,38 172,2 208,40 219,38 230,34 240,28 236,40 228,50 218,56 227,56 238,52 247,48Z"/></svg>
         </a>
     </div>
-    <div class="rss">
+    <div class="rss item">
         <a href="../../feed.rss" target="_blank" aria-label="rss配信">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm480 0q0-117-44-218.5T516-516q-76-76-177.5-120T120-680v-120q142 0 265 53t216 146q93 93 146 216t53 265H680Zm-240 0q0-67-25-124.5T346-346q-44-44-101.5-69T120-440v-120q92 0 171.5 34.5T431-431q60 60 94.5 139.5T560-120H440Z"/></svg>
         </a>
@@ -48,16 +48,17 @@
         gap: 4px;
         height: 36px;
         padding: 5px;
+    }
 
-        & > * {
-            height: 100%;
-            flex: 1;
-            border-radius: 3px;
-            &:hover {
-                background-color: #0001;
-            }
+    .item {
+        height: 100%;
+        flex: 1;
+        border-radius: 3px;
+        &:hover {
+            background-color: #0001;
         }
     }
+
     button {
         all: unset;
     }
@@ -68,19 +69,9 @@
         transition: fill 0.2s;
     }
 
-    .link:hover svg {
-        fill: hsl(0, 25%, 30%);
-    }
-    .misskey:hover svg {
-        fill: hsl(75, 99%, 40%);
-    }
-    .threads:hover svg {
-        fill: black;
-    }
-    .twitter:hover svg {
-        fill: hsl(203, 100%, 65%);
-    }
-    .rss:hover svg {
-        fill: orange;
-    }
+    .link:hover svg    {fill: hsl(0, 25%, 30%);}
+    .misskey:hover svg {fill: hsl(75, 99%, 40%);}
+    .threads:hover svg {fill: black;}
+    .twitter:hover svg {fill: hsl(203, 100%, 65%);}
+    .rss:hover svg     {fill: orange;}
 </style>
diff --git a/src/routes/(DefaultStyle)/post/[slug]/toc.svelte b/src/routes/(DefaultStyle)/post/[slug]/toc.svelte
index e903b1e..44449e3 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/toc.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/toc.svelte
@@ -39,7 +39,7 @@
 
         &::before {
             content: '・';
-            color: var(--font-color);
+            color: currentColor;
         }
 
         &:hover {
diff --git a/src/routes/code/[slug]/+layout.svelte b/src/routes/code/[slug]/+layout.svelte
index 289bd2b..e2c6c8d 100644
--- a/src/routes/code/[slug]/+layout.svelte
+++ b/src/routes/code/[slug]/+layout.svelte
@@ -55,16 +55,14 @@
         border-radius: 12px 12px 0 0;
         background-color: var(--head-color);
         border-bottom: solid var(--divider-color) 1px;
-
-        & >* {
-            all: unset;
-            width: 12px;
-            height: 12px;
-            margin: 8px 4px;
-            border-radius: 50%;
-            background-color: gray;
-            cursor: pointer;
-        }
+    }
+    button {
+        all: unset;
+        width: 12px;
+        height: 12px;
+        margin: 8px 4px;
+        border-radius: 50%;
+        cursor: pointer;
     }
 
     .code {