Fix tiny issues

* fix tags margin
* modify article padding
* fix search page icon position
* add custom color

components/post-card/PostCardTags.tsx

@@ -10,7 +10,7 @@ const PostCardTags: FC<Props> = ({ tags }) => {
     <>
       {Array.isArray(tags) ? (
         tags.map((tag) => (
-          <div key={tag} className="flex items-center">
+          <div key={tag} className="flex items-center mr-3">
             <FiTag className="mr-2" />
             {tag}
           </div>

components/post/PostHeader.tsx

@@ -20,13 +20,13 @@ const PostHeader: FC<Props> = ({ title, tags, date }) => {
 
       <div className={'mb-4'}>
         {Array.isArray(tags)
-          ? // Mutil tags
+          ? // Multi tags
             tags.map((item) => (
               <div
                 key={item}
                 className={cn(
                   'rounded-md bg-gray-100 px-2 py-1 inline text-sm',
-                  'text-gray-700'
+                  'text-gray-700 mr-3'
                 )}
               >
                 {item}

pages/p/[slug].tsx

@@ -104,7 +104,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
             </div>
           )}
 
-          <article className={cn('p-4 lg:p-7')}>
+          <article className={cn('p-4 lg:p-8')}>
             <PostHeader title={title} tags={tags} date={date} />
 
             <section className={cn()} id={'write'}>

pages/search.tsx

@@ -21,13 +21,6 @@ const Search = () => {
       </Head>
 
       <div className="relative text-gray-600">
-        <FiSearch
-          className={cn(
-            'absolute right-3 top-[50%] transform-gpu translate-y-[-50%]',
-            'w-6 h-6'
-          )}
-        />
-
         <input
           type="text"
           className={cn(
@@ -38,6 +31,13 @@ const Search = () => {
           onChange={handleInput}
           placeholder="Search something..."
         />
+
+        <FiSearch
+          className={cn(
+            'absolute right-6 top-[50%] transform-gpu translate-y-[-50%]',
+            'w-6 h-6'
+          )}
+        />
       </div>
     </>
   );

styles/rua.css

@@ -32,20 +32,19 @@
   padding-left: 15px;
 }
 #table-of-contents + ul li::before {
+  @apply text-rua-gray-100;
   content: ' - ';
   position: absolute;
   font-weight: bold;
   font-size: 2rem;
-  color: #aabfc5;
   transform: translate(-1.4rem, -1rem);
 }
 #table-of-contents + ul li li::before {
+  @apply text-rua-gray-100 top-[50%];
+  @apply transform-gpu translate-x-[-1rem] translate-y-[-50%];
   content: ' · ';
   position: absolute;
-  font-size: 2rem;
-  font-weight: bold;
-  color: #aabfc5;
-  transform: translate(-1rem, -0.75rem);
+  font-size: 1.5rem;
 }
 #table-of-contents + ul::-webkit-scrollbar {
   width: 0;

tailwind.config.js

@@ -10,6 +10,11 @@ module.exports = {
         bluish: {
           gray: 'rgba(245,247,250)',
         },
+        rua: {
+          gray: {
+            100: '#aabfc5'
+          }
+        }
       },
       boxShadow: {
         outline: '0 0 0 3px rgba(83, 220, 246, 0.6)',