Update color scheme, fix typo, enhance navigation and remove unused c…

…omponent, create nav
kigawa01 · May 1, 2024 · 43d3ab6 · 43d3ab6
1 parent c1d55ab
commit 43d3ab6
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 78 deletions.
diff --git a/src/components/ButtonSecondary.astro b/src/components/ButtonSecondary.astro
@@ -0,0 +1,22 @@
+---
+const {href}: { href: string } = Astro.props
+---
+<a href={href}>
+<slot/>
+</a>
+
+<style>
+  a {
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 2px solid var(--mcolor-outline);
+    width: 100%;
+    background: var(--mcolor-primary-container);
+    color: var(--mcolor-on-primary-container);
+    padding: 10px;
+    &:hover{
+      background: var(--mcolor-secondary);
+    color: var(--mcolor-on-secondary);
+    }
+  }
+</style>
diff --git a/src/components/Container.astro b/src/components/Container.astro
diff --git a/src/components/GlobalStyle.astro b/src/components/GlobalStyle.astro
@@ -35,6 +35,7 @@ import Theme from "./Theme.astro";
     font-family      : "DistantGalaxy", sans-serif;
     line-height      : 1.2;
     min-height       : 100vh;
+    color: var(--mcolor-on-surface);
   }
 
   p, div {
@@ -56,4 +57,15 @@ import Theme from "./Theme.astro";
   body, h2, h1 {
     margin : 0;
   }
+
+  ul {
+    padding : 0;
+  }
+
+  li {
+    list-style : none;
+  }
+  a{
+    display: block;
+  }
 </style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -1,13 +1,27 @@
 ---
-
+import ButtonSecondary from "./ButtonSecondary.astro";
 ---
 <div class="nav-wrapper">
   <nav>
-    <h1>kigawa's portfoilio</h1>
+    <h1>kigawa's portfolio</h1>
+    <ul>
+      <li>
+        <ButtonSecondary>profile</ButtonSecondary>
+      </li>
+      <li>
+        <ButtonSecondary>skill</ButtonSecondary>
+      </li>
+      <li>
+        <ButtonSecondary>experience</ButtonSecondary>
+      </li>
+      <li>
+        <ButtonSecondary>products</ButtonSecondary>
+      </li>
+    </ul>
   </nav>
 </div>
 <style>
-  .nav-wrapper{
+  .nav-wrapper {
     height: 100vh;
     padding: 10px 0 10px 10px;
     width: 500px;
@@ -16,9 +30,16 @@
   }
   nav {
     background-color: var(--mcolor-secondary-container);
+    color: var(--mcolor-on-secondary-container);
     width: 100%;
     border-radius: 8px;
     border: 2px solid var(--mcolor-outline);
     padding: 25px;
   }
+  ul {
+    font-size: 1.5rem;
+  }
+  li{
+    margin: 15px 0;
+  }
 </style>
diff --git a/src/components/Theme.astro b/src/components/Theme.astro
@@ -5,14 +5,14 @@ const colors = {
   "onPrimary": "#FFFFFF",
   "primaryContainer": "#E2E993",
   "onPrimaryContainer": "#1B1D00",
-  "secondary": "#5E6044",
+  "secondary": "#5F6044",
   "onSecondary": "#FFFFFF",
   "secondaryContainer": "#E4E5C1",
   "onSecondaryContainer": "#1B1D07",
-  "tertiary": "#815512",
+  "tertiary": "#86521A",
   "onTertiary": "#FFFFFF",
-  "tertiaryContainer": "#FFDDB6",
-  "onTertiaryContainer": "#2A1800",
+  "tertiaryContainer": "#FFDCBF",
+  "onTertiaryContainer": "#2D1600",
   "error": "#BA1A1A",
   "onError": "#FFFFFF",
   "errorContainer": "#FFDAD6",
@@ -29,78 +29,78 @@ const colors = {
   "scrim": "#000000",
   "inverseSurface": "#313128",
   "inverseOnSurface": "#F3F1E4",
-  "inversePrimary": "#C5CC7A",
+  "inversePrimary": "#C6CC7A",
   "primaryFixed": "#E2E993",
   "onPrimaryFixed": "#1B1D00",
-  "primaryFixedDim": "#C5CC7A",
-  "onPrimaryFixedVariant": "#454B03",
+  "primaryFixedDim": "#C6CC7A",
+  "onPrimaryFixedVariant": "#454A03",
   "secondaryFixed": "#E4E5C1",
   "onSecondaryFixed": "#1B1D07",
   "secondaryFixedDim": "#C8C9A6",
   "onSecondaryFixedVariant": "#47492E",
-  "tertiaryFixed": "#FFDDB6",
-  "onTertiaryFixed": "#2A1800",
-  "tertiaryFixedDim": "#F6BC70",
-  "onTertiaryFixedVariant": "#643F00",
+  "tertiaryFixed": "#FFDCBF",
+  "onTertiaryFixed": "#2D1600",
+  "tertiaryFixedDim": "#FEB876",
+  "onTertiaryFixedVariant": "#6A3B02",
   "surfaceDim": "#DCDACE",
   "surfaceBright": "#FCFAEC",
   "surfaceContainerLowest": "#FFFFFF",
   "surfaceContainerLow": "#F6F4E7",
-  "surfaceContainer": "#F0EEE1",
+  "surfaceContainer": "#F1EEE1",
   "surfaceContainerHigh": "#EBE8DB",
   "surfaceContainerHighest": "#E5E3D6"
 } as const;
 ---
 <style is:global>
   :root {
-    --mcolor-primary: rgb(93 99 28);
-    --mcolor-surface-tint: rgb(93 99 28);
-    --mcolor-on-primary: rgb(255 255 255);
-    --mcolor-primary-container: rgb(226 233 147);
-    --mcolor-on-primary-container: rgb(27 29 0);
-    --mcolor-secondary: rgb(94 96 68);
-    --mcolor-on-secondary: rgb(255 255 255);
-    --mcolor-secondary-container: rgb(228 229 193);
-    --mcolor-on-secondary-container: rgb(27 29 7);
-    --mcolor-tertiary: rgb(129 85 18);
-    --mcolor-on-tertiary: rgb(255 255 255);
-    --mcolor-tertiary-container: rgb(255 221 182);
-    --mcolor-on-tertiary-container: rgb(42 24 0);
-    --mcolor-error: rgb(186 26 26);
-    --mcolor-on-error: rgb(255 255 255);
-    --mcolor-error-container: rgb(255 218 214);
-    --mcolor-on-error-container: rgb(65 0 2);
-    --mcolor-background: rgb(252 250 236);
-    --mcolor-on-background: rgb(28 28 20);
-    --mcolor-surface: rgb(252 250 236);
-    --mcolor-on-surface: rgb(28 28 20);
-    --mcolor-surface-variant: rgb(229 227 210);
-    --mcolor-on-surface-variant: rgb(71 72 59);
-    --mcolor-outline: rgb(120 120 105);
-    --mcolor-outline-variant: rgb(200 199 183);
-    --mcolor-shadow: rgb(0 0 0);
-    --mcolor-scrim: rgb(0 0 0);
-    --mcolor-inverse-surface: rgb(49 49 40);
-    --mcolor-inverse-on-surface: rgb(243 241 228);
-    --mcolor-inverse-primary: rgb(197 204 122);
-    --mcolor-primary-fixed: rgb(226 233 147);
-    --mcolor-on-primary-fixed: rgb(27 29 0);
-    --mcolor-primary-fixed-dim: rgb(197 204 122);
-    --mcolor-on-primary-fixed-variant: rgb(69 75 3);
-    --mcolor-secondary-fixed: rgb(228 229 193);
-    --mcolor-on-secondary-fixed: rgb(27 29 7);
-    --mcolor-secondary-fixed-dim: rgb(200 201 166);
-    --mcolor-on-secondary-fixed-variant: rgb(71 73 46);
-    --mcolor-tertiary-fixed: rgb(255 221 182);
-    --mcolor-on-tertiary-fixed: rgb(42 24 0);
-    --mcolor-tertiary-fixed-dim: rgb(246 188 112);
-    --mcolor-on-tertiary-fixed-variant: rgb(100 63 0);
-    --mcolor-surface-dim: rgb(220 218 206);
-    --mcolor-surface-bright: rgb(252 250 236);
-    --mcolor-surface-container-lowest: rgb(255 255 255);
-    --mcolor-surface-container-low: rgb(246 244 231);
-    --mcolor-surface-container: rgb(240 238 225);
-    --mcolor-surface-container-high: rgb(235 232 219);
-    --mcolor-surface-container-highest: rgb(229 227 214);
+    --mcolor-primary: #5D631C;
+    --mcolor-surface-tint: #5D631C;
+    --mcolor-on-primary: #FFFFFF;
+    --mcolor-primary-container: #E2E993;
+    --mcolor-on-primary-container: #1B1D00;
+    --mcolor-secondary: #5F6044;
+    --mcolor-on-secondary: #FFFFFF;
+    --mcolor-secondary-container: #E4E5C1;
+    --mcolor-on-secondary-container: #1B1D07;
+    --mcolor-tertiary: #86521A;
+    --mcolor-on-tertiary: #FFFFFF;
+    --mcolor-tertiary-container: #FFDCBF;
+    --mcolor-on-tertiary-container: #2D1600;
+    --mcolor-error: #BA1A1A;
+    --mcolor-on-error: #FFFFFF;
+    --mcolor-error-container: #FFDAD6;
+    --mcolor-on-error-container: #410002;
+    --mcolor-background: #FCFAEC;
+    --mcolor-on-background: #1C1C14;
+    --mcolor-surface: #FCFAEC;
+    --mcolor-on-surface: #1C1C14;
+    --mcolor-surface-variant: #E5E3D2;
+    --mcolor-on-surface-variant: #47483B;
+    --mcolor-outline: #787869;
+    --mcolor-outline-variant: #C8C7B7;
+    --mcolor-shadow: #000000;
+    --mcolor-scrim: #000000;
+    --mcolor-inverse-surface: #313128;
+    --mcolor-inverse-on-surface: #F3F1E4;
+    --mcolor-inverse-primary: #C6CC7A;
+    --mcolor-primary-fixed: #E2E993;
+    --mcolor-on-primary-fixed: #1B1D00;
+    --mcolor-primary-fixed-dim: #C6CC7A;
+    --mcolor-on-primary-fixed-variant: #454A03;
+    --mcolor-secondary-fixed: #E4E5C1;
+    --mcolor-on-secondary-fixed: #1B1D07;
+    --mcolor-secondary-fixed-dim: #C8C9A6;
+    --mcolor-on-secondary-fixed-variant: #47492E;
+    --mcolor-tertiary-fixed: #FFDCBF;
+    --mcolor-on-tertiary-fixed: #2D1600;
+    --mcolor-tertiary-fixed-dim: #FEB876;
+    --mcolor-on-tertiary-fixed-variant: #6A3B02;
+    --mcolor-surface-dim: #DCDACE;
+    --mcolor-surface-bright: #FCFAEC;
+    --mcolor-surface-container-lowest: #FFFFFF;
+    --mcolor-surface-container-low: #F6F4E7;
+    --mcolor-surface-container: #F1EEE1;
+    --mcolor-surface-container-high: #EBE8DB;
+    --mcolor-surface-container-highest: #E5E3D6;
   }
 </style>