fix: markdown styles

threejs animations

components/models/cloud-model.tsx

@@ -27,17 +27,11 @@ const CloudModel = () => {
   };
   const [_, api] = useSpring(
     {
-      from: {
-        z: camera.position.z,
-      },
+      z: camera.position.z,
       config: {
         duration: 1200,
         easing: easings.easeOutCirc,
       },
-      to: {
-        z: camera.position.z - 5.2,
-      },
-      pause: true,
       onChange: (e) => {
         camera.position.z = Number(e.value.z);
       },
@@ -78,7 +72,9 @@ const CloudModel = () => {
     window.addEventListener('touchmove', moveHandler);
 
     setTimeout(() => {
-      api.resume();
+      api.start({
+        z: camera.position.z - 5.2,
+      });
       setDarkMode();
     }, 1000);
 

components/pages/blog/post-card-loading.tsx

@@ -5,7 +5,7 @@ const PostCardLoading = () => {
   return (
     <article
       className={clsx(
-        'rounded-lg-xl py-4 px-5 md:p-7 ',
+        'rounded-lg py-4 px-5 md:p-7 ',
         'hover:bg-sky-100 hover:bg-opacity-50',
         'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
         'flex justify-between text-gray-800 ',

components/pages/blog/post-card.tsx

@@ -13,13 +13,13 @@ const PostCard = ({ post }: Props) => {
       <Link href={`/p/${post.slug}`} passHref>
         <article
           className={clsx(
-            'rounded-lg-xl py-4 px-5 md:p-7 ',
+            'rounded-lg py-4 px-5 md:p-7 ',
             'hover:bg-sky-100 hover:bg-opacity-50',
             // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
             'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
             'flex justify-between text-gray-800',
             'mb-4 dark:text-gray-200',
-            'flex-col',
+            'flex-col transition-all duration-300',
           )}
         >
           <div className="flex justify-between">

components/pages/dark-mode-btn.tsx

@@ -42,7 +42,7 @@ const DarkModeBtn = () => {
       <button>
         <div
           className={clsx(
-            'w-5 h-5 rounded-lg-md animate-pulse',
+            'w-5 h-5 rounded-md animate-pulse',
             'bg-gray-300 dark:bg-gray-500',
           )}
         ></div>

components/pages/friends/friend-card.tsx

@@ -7,7 +7,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
     <a href={friend.link} target="_blank">
       <div
         className={clsx(
-          'py-3 px-4 rounded-lg-xl bg-slate-100',
+          'py-3 px-4 rounded-lg bg-slate-100',
           'hover:bg-slate-200',
           'transition-all duration-300',
           'flex items-center cursor-pointer',

components/pages/gists/gists-code-skeleton.tsx

@@ -22,21 +22,21 @@ const GistsCode = () => {
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-lg-full bg-[#ce5347]',
+                'rounded-lg bg-[#ce5347]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-lg-full bg-[#d6a243]',
+                'rounded-lg bg-[#d6a243]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px]',
-                'rounded-lg-full bg-[#58a942]',
+                'rounded-lg bg-[#58a942]',
               )}
             ></div>
           </div>

components/pages/gists/gists-code.tsx

@@ -47,21 +47,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-lg-full bg-[#ce5347]',
+                  'rounded-full bg-[#ce5347]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-lg-full bg-[#d6a243]',
+                  'rounded-full bg-[#d6a243]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px]',
-                  'rounded-lg-full bg-[#58a942]',
+                  'rounded-full bg-[#58a942]',
                 )}
               ></div>
             </div>

components/pages/gists/gists-skeleton.tsx

@@ -8,7 +8,7 @@ const GistSkeleton = () => {
           <div className="flex items-center py-1 ">
             <div
               className={clsx(
-                'w-8 h-8 rounded-lg-full',
+                'w-8 h-8 rounded-lg',
                 'animate-pulse bg-gray-300',
                 'dark:bg-gray-400 ',
               )}

components/pages/gists/user-info-skeleton.tsx

@@ -15,7 +15,7 @@ const UserInfoLoading = () => {
           <div
             className={clsx(
               'w-16 h-16 mr-4 overflow-hidden',
-              'md:w-72 md:h-72 bg-gray-200 rounded-lg-full',
+              'md:w-72 md:h-72 bg-gray-200 rounded-lg',
               'animate-pulse dark:bg-rua-gray-800',
             )}
           ></div>

components/pages/gists/user-info.tsx

@@ -27,7 +27,7 @@ const UserInfo = async () => {
               src={avatar}
               alt="Avatar"
               priority
-              className="rounded-lg-full"
+              className="rounded-full"
             />
           </div>
 

components/pages/nav-bar.tsx

@@ -90,7 +90,7 @@ const HeadBar = () => {
             className={clsx(
               'font-semibold',
               'text-3xl tracking-widest',
-              'select-none',
+              'select-none font-Lobster',
             )}
           >
             RUA!
@@ -106,7 +106,7 @@ const HeadBar = () => {
         <nav
           className={clsx(
             'text-lg md:block',
-            'bg-white rounded-lg-md',
+            'bg-white rounded-lg',
             'dark:bg-rua-gray-800',
             'absolute md:static',
             'p-5 right-6 top-14',
@@ -154,7 +154,7 @@ const HeadBar = () => {
                 <div
                   className={clsx(
                     'w-[164.453px] h-[30px]',
-                    'bg-[#ebedf0] rounded-lg-[40px] animate-pulse',
+                    'bg-[#ebedf0] rounded-[40px] animate-pulse',
                   )}
                 ></div>
               )}

components/post/copy-button.tsx

@@ -24,7 +24,7 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           ref={ref}
           className={clsx(
             'flex items-center justify-center',
-            'border rounded-lg-md',
+            'border rounded-lg',
             'p-[6px] opacity-0',
             'group-hover:opacity-100',
             'transition-opacity dark:border-gray-700',

components/rua/rua-sandpack.tsx

@@ -14,7 +14,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   if (!mounted) {
     return (
-      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           options={{
@@ -29,7 +29,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   return (
     <>
-      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           theme={

components/rua/tab/index.tsx

@@ -38,7 +38,7 @@ const Tab = ({ defaultValue, children }: Props) => {
               key={child.props.label}
               onClick={() => handleSwitch(child.props.value)}
               className={clsx(
-                'px-5 py-3 rounded-lg-t-lg',
+                'px-5 py-3 rounded-t-lg',
                 child.props.value === currentValue &&
                   'text-teal-500 border-b-[3px] border-teal-500',
                 'select-none cursor-pointer',