update: design and infomation

0505Keitan · May 5, 2021 · 5fee26f · 5fee26f
1 parent 0e125b7
commit 5fee26f
Show file tree

Hide file tree

Showing 5 changed files with 6,649 additions and 6,015 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -2,26 +2,26 @@
   <header>
     <a href="/" class="title">0505Keitan</a>
     <nav class="nav">
-      <ul class="nav-list">
+      <ul class="nav_list">
         <li><a href="https://scrapbox.io/0505Keitan/index">About</a></li>
-        <li><a href="https://portfolio.0505keitan.now.sh/">Portfolio</a></li>
+        <li><a href="https://0505keitan.com/">Nuxt.js</a></li>
+        <li><a href="https://next.0505keitan.com/">Next.js</a></li>
+        <li><a href="https://jekyll.0505keitan.com/">Jekyll</a></li>
       </ul>
     </nav>
   </header>
 </template>
 
 <style lang="scss" scoped>
-$ruler: 16px;
-$color-red: #AE1100;
-$color-bg: #EBECF0;
-$color-shadow: #9FC98D;
-$color-white: #FFF;
-
 header {
+  display: grid;
+  font-family: 'nobel';
+  grid-template-columns: auto 1fr auto;
   margin: 0 auto;
-  max-width: 1140px;
+  max-width: 1100px;
   padding: 1rem;
   position: relative;
+  z-index: 1;
 }
 
 a {
@@ -34,59 +34,20 @@ a {
 }
 
 .nav {
-  float: right;
-}
-
-.nav-list li {
-  display: inline;
-  font-size: 1.2rem;
-  font-weight: 400;
+  grid-column: 3/4;
 }
 
-li {
-  a {
-    color:#717688;
-    font-weight: bold;
-    box-shadow: -5px -5px 20px $color-white,  5px 5px 20px $color-shadow;
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-    font-weight: 600;
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 30px;
-
-    &:hover {
-      box-shadow: -2px -2px 5px $color-white, 2px 2px 5px $color-shadow;
-    }
-
-    &:active {
-      box-shadow: inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white;
-    }
-
-    .icon {
-      margin-right: $ruler/2;
-    }
-
-    &.unit {
-      border-radius: $ruler/2;
-      line-height: 0;
-      width: $ruler*3;
-      height: $ruler*3;
-      display:inline-flex;
-      justify-content: center;
-      align-items:center;
-      margin: 0 $ruler/2;
-      font-size: $ruler*1.2;
-
-      .icon {
-        margin-right: 0;
-      }
-    }
-
-    &.red {
-      display: block;
-      width: 100%;
-      color:$color-red;
+.nav_list {
+  margin: 0;
+  padding: 0;
+  li {
+    display: inline;
+    font-size: 1.2rem;
+    font-weight: 400;
+    padding: 12px;
+    a {
+      text-decoration: none;
+      color: #474a54;
     }
   }
 }

diff --git a/components/Top.vue b/components/Top.vue
@@ -2,7 +2,7 @@
   <section class="section" id="top">
     <img src="/0505Keitan_v7.jpg">
     <p class="name">0505Keitan</p>
-    <p class="bio">WEB ENGINEER / High School Student</p>
+    <p class="bio">WEB ENGINEER / UNIVERSITY STUDENT</p>
   </section>
 </template>
 

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -6,7 +6,7 @@ export default {
   head: {
     title: '0505Keitan.github.io',
     htmlAttrs: {
-      lang: 'en'
+      lang: 'ja'
     },
     meta: [
       { charset: 'utf-8' },