refact front

resources/sass/components/_base.scss

@@ -1,3 +1,35 @@
+h1,
+h2,
+h3,
+h4 {
+    @apply font-bold;
+}
+
+h1 {
+    @apply text-4xl;
+}
+
+h2 {
+    @apply text-3xl;
+}
+
+h3 {
+    @apply text-2xl;
+}
+
+h4 {
+    @apply text-xl;
+}
+
+p {
+    @apply mb-2 mt-1;
+    text-indent: 2rem;
+}
+
+input {
+    @apply border py-2 px-4 rounded;
+}
+
 .text-shadow {
     text-shadow: 1px 1px 2px #000;
 }

resources/sass/components/_btn.scss

@@ -1,7 +1,7 @@
 // Button
 
 .btn {
-    @apply border border-transparent inline-block bg-gray-600 text-white font-semibold whitespace-no-wrap py-2 px-4 shadow-sm rounded cursor-pointer;
+    @apply border border-transparent inline-block bg-gray-600 text-white font-semibold whitespace-no-wrap py-2 px-4 shadow-sm rounded cursor-pointer no-underline;
 
     &:hover {
         @apply text-white bg-gray-800 transition-all duration-300;

resources/sass/components/_elements.scss

@@ -5,10 +5,10 @@
 }
 
 a {
-    @apply text-gray-700;
+    @apply text-marine underline;
 
     &:hover {
-        @apply text-gray-900;
+        @apply text-marine;
     }
 }
 
@@ -27,10 +27,9 @@ a {
 }
 
 .box-toggle {
-    @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 text-white bg-gray-800 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 text-white bg-marine font-bold cursor-pointer;
 
         svg {
             @apply w-8 fill-current;
@@ -53,7 +52,7 @@ a {
 }
 
 .card {
-    @apply bg-gray-300 rounded text-black;
+    @apply bg-white rounded m-2 p-4 h-full flex flex-col justify-between;
 
     svg {
         @apply max-w-full max-h-48 max-w-48 m-auto fill-current;
@@ -63,3 +62,7 @@ a {
         @apply text-2xl text-center font-bold;
     }
 }
+
+.box {
+    @apply bg-white rounded p-4 my-2;
+}

resources/sass/components/nav.scss

@@ -1,10 +1,10 @@
 
 nav {
-    @apply w-48 h-screen bg-gray-800 flex flex-col justify-between shadow;
+    @apply w-48 h-screen bg-marine flex flex-col justify-between shadow;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-gray-300 w-12 p-2;
+        @apply fill-current text-white w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
@@ -13,7 +13,7 @@ nav {
     }
 
     .logo {
-        @apply block;
+        @apply block text-white;
 
         svg {
             @apply w-40 m-2;
@@ -22,7 +22,7 @@ nav {
     }
 
     .nav-item {
-        @apply flex items-center text-gray-100;
+        @apply flex items-center text-white;
         transition: background-color 0.3s;
 
         span {

resources/sass/pages/memos.scss

@@ -1,34 +1,6 @@
 
 .memo-style {
 
-    h1,
-    h2,
-    h3,
-    h4 {
-        @apply font-bold;
-    }
-
-    h1 {
-        @apply text-4xl;
-    }
-
-    h2 {
-        @apply text-3xl;
-    }
-
-    h3 {
-        @apply text-2xl;
-    }
-
-    h4 {
-        @apply text-xl;
-    }
-
-    p {
-        @apply mb-2 mt-1;
-        text-indent: 2rem;
-    }
-
     pre,
     code {
         @apply bg-gray-700 text-white p-1;