cssの最適化2

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>

src/routes/(DefaultStyle)/post/[slug]/profile.svelte

@@ -1,29 +1,31 @@
 <div class="profile" aria-label="プロフィール">
-    <div>
+    <div class="topspace"></div>
-        <div class="space topspace"></div>
+
-        <div class="icon">
+    <img class='icon' src="https://moris.day/files/assets/moris_icon_200px.avif" width="200" height="200" alt="moris icon"/>
-            <img src="https://moris.day/files/assets/moris_icon_200px.avif" width="200" height="200" alt="moris icon"/>
+
-        </div>
+    <div style="height:38px;"></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="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 {
+    .name {
-            width: 100%;
+        position: relative;
+        font-family: monospace;
+        font-size: 1.2em;
+        font-weight: 350;
+        width: fit-content;
+        margin: auto;
+    }
+
+    .testtube {
+        position: absolute;
+        left: 100%;
         height: 100%;
-            border-radius: 50%;
+        aspect-ratio: 1;
-        }
+        padding: 1px;
+        box-sizing: border-box;
     }
+
     .discription {
         padding: 8px;
         font-size: 0.9em;

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,8 +48,9 @@
         gap: 4px;
         height: 36px;
         padding: 5px;
+    }
 
-        & > * {
+    .item {
         height: 100%;
         flex: 1;
         border-radius: 3px;
@@ -57,7 +58,7 @@
             background-color: #0001;
         }
     }
-    }
+
     button {
         all: unset;
     }
@@ -68,19 +69,9 @@
         transition: fill 0.2s;
     }
 
-    .link:hover svg {
+    .link:hover svg    {fill: hsl(0, 25%, 30%);}
-        fill: hsl(0, 25%, 30%);
+    .misskey:hover svg {fill: hsl(75, 99%, 40%);}
-    }
+    .threads:hover svg {fill: black;}
-    .misskey:hover svg {
+    .twitter:hover svg {fill: hsl(203, 100%, 65%);}
-        fill: hsl(75, 99%, 40%);
+    .rss:hover svg     {fill: orange;}
-    }
-    .threads:hover svg {
-        fill: black;
-    }
-    .twitter:hover svg {
-        fill: hsl(203, 100%, 65%);
-    }
-    .rss:hover svg {
-        fill: orange;
-    }
 </style>

src/routes/(DefaultStyle)/post/[slug]/toc.svelte

@@ -39,7 +39,7 @@
 
         &::before {
             content: '・';
-            color: var(--font-color);
+            color: currentColor;
         }
 
         &:hover {

src/routes/code/[slug]/+layout.svelte

@@ -55,17 +55,15 @@
         border-radius: 12px 12px 0 0;
         background-color: var(--head-color);
         border-bottom: solid var(--divider-color) 1px;
-
+    }
-        & >* {
+    button {
         all: unset;
         width: 12px;
         height: 12px;
         margin: 8px 4px;
         border-radius: 50%;
-            background-color: gray;
         cursor: pointer;
     }
-    }
 
     .code {
         height: calc(100% - 28px);