chore: update design (#256)

* chore: update design

* chore: remove useless files

Author: baseballyama

docs-svelte-kit/src/app.css

@@ -6,7 +6,7 @@
   --font-mono: "Fira Mono", monospace;
   --pure-white: #ffffff;
   --primary-color: #b9c6d2;
-  --secondary-color: #d0dde9;
+  --secondary-color: #676778;
   --tertiary-color: #edf0f8;
   --accent-color: #ff3e00;
   --heading-color: rgba(0, 0, 0, 0.7);
@@ -20,12 +20,6 @@ body {
   min-height: 100vh;
   margin: 0;
   background-color: var(--primary-color);
-  background: linear-gradient(
-    180deg,
-    var(--primary-color) 0%,
-    var(--secondary-color) 10.45%,
-    var(--tertiary-color) 41.35%
-  );
 }
 
 body::before {

docs-svelte-kit/src/lib/header/Header.svelte

@@ -21,11 +21,12 @@
         role="img"
         viewBox="0 0 448 512"
         class="icon"
-        ><path
+      >
+        <path
           fill="currentColor"
           d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
-        /></svg
-      >
+        />
+      </svg>
     </div>
     <a href="{baseUrl}/" class="home-link">
       <img src={logo} alt="Logo" />
@@ -88,9 +89,13 @@
   header {
     display: flex;
     justify-content: space-between;
-    position: sticky;
+    padding: 0.5em 2em;
+    position: fixed;
     top: 0;
+    width: calc(100% - 4em);
     z-index: 100;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .corner {
@@ -154,16 +159,8 @@
     height: 100%;
   }
 
-  li.active::before {
-    --size: 6px;
-    content: "";
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--accent-color);
+  li.active > a {
+    color: var(--accent-color);
   }
 
   nav a {

docs-svelte-kit/src/lib/sidemenu/SideMenu.svelte

@@ -26,6 +26,7 @@
     box-sizing: border-box;
     border-right: 1px solid var(--background-without-opacity);
     overflow-y: auto;
+    background-color: var(--secondary-color);
   }
 
   @media (max-width: 959px) {

docs-svelte-kit/src/lib/sidemenu/UlMenu.svelte

@@ -52,7 +52,7 @@
   }
   .sidebar-menu-item,
   .sidebar-menu-item-title {
-    color: var(--heading-color);
+    color: white;
   }
   .sidebar-menu-item-title {
     padding: 0.25rem 1rem 0.25rem 1.25rem;
@@ -69,10 +69,6 @@
   .sidebar-menu-item-title {
     position: relative;
   }
-  .sidebar-menu-item.active,
-  .sidebar-menu-item-title.active {
-    color: var(--accent-color);
-  }
   .sidebar-menu-item-title.active::before {
     --size: 6px;
     content: "";
@@ -82,9 +78,8 @@
     top: calc(50% - var(--size));
     right: 0;
     border: var(--size) solid transparent;
-    border-right: var(--size) solid var(--accent-color);
+    border-right: var(--size) solid white;
   }
-
   a.sidebar-menu-item-title:not(.active) {
     transition: color 0.2s linear;
   }

docs-svelte-kit/src/routes/+layout.svelte

@@ -45,6 +45,9 @@
 <Footer {frontmatter} {fileInfo} />
 
 <style>
+  main {
+    margin-top: 64px;
+  }
   main:not(.hidden-menu) {
     padding-left: 20rem;
   }

docs-svelte-kit/src/site.css

@@ -4,7 +4,7 @@
 /* theme */
 :root {
   --primary-color: #ffffff;
-  --secondary-color: #ffffff;
+  --secondary-color: #676778;
   --tertiary-color: #edf0f8;
   --background-without-opacity: rgba(255, 255, 255, 0.95);
 }