refactor: use nuxt compatiable 4 folder

app/styles/animation.scss

@@ -0,0 +1,38 @@
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+// scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(122, 122, 122, 0.3);
+
+  &:window-inactive {
+    background-color: rgba(122, 122, 122, 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(122, 122, 122, 0.7);
+  }
+
+  &:active {
+    background-color: rgba(122, 122, 122, 0.9);
+  }
+}

app/styles/css-vars.scss

@@ -0,0 +1,32 @@
+:root {
+  --c-primary: #5fc178;
+  --c-text: #333;
+
+  --c-bg: white;
+  --c-bg-alt: #f9fbfd;
+}
+
+.dark {
+  --c-text: #fafafa;
+
+  --c-bg: #121212;
+  --c-bg-alt: #333;
+}
+
+// ylf
+:root {
+  --ylf-c-bg-alt: var(--c-bg-alt);
+  --ylf-c-border: #eaeaea;
+}
+
+.dark {
+  --ylf-c-border: #666;
+}
+
+// cook custom
+:root {
+  --cook-bottom-menu-padding-bottom: 20px;
+  --cook-bottom-menu-height: calc(
+    64px + var(--cook-bottom-menu-padding-bottom)
+  );
+}

app/styles/index.scss

@@ -0,0 +1,65 @@
+@use './animation.scss';
+// markdown
+@use './markdown.scss';
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  background: var(--c-bg);
+}
+
+input:focus {
+  outline: none;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13, 148, 136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+html {
+  color: var(--c-text);
+  background-color: var(--c-bg);
+
+  scroll-behavior: smooth;
+
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: var(--c-text);
+}
+
+button {
+  outline: none;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
+hr {
+  opacity: 0.1;
+}
+
+.tag {
+  margin: 4px;
+  padding: 2px 4px;
+  // border: 1px solid var(--c-text);
+}

app/styles/markdown.scss

@@ -0,0 +1,36 @@
+@use 'star-markdown-css/src/scss/theme/yun.scss';
+
+.markdown-body {
+  li {
+    list-style: disc;
+  }
+}
+
+blockquote {
+  border-left: 0.25em solid #ddd;
+  padding: 0 1em;
+  color: #777;
+  quotes: '\\201C' '\\201D' '\\2018' '\\2019';
+}
+
+ol {
+  list-style: decimal;
+  padding-left: 2em;
+
+  li {
+    line-height: 2;
+  }
+}
+
+ul {
+  list-style: disc;
+  padding-left: 2em;
+
+  li {
+    line-height: 2;
+  }
+}
+
+a {
+  border-bottom: 1px dashed #ddd;
+}