Minor design improvement (#283)

* Minor design improvement

* Fix config

Author: RunDevelopment

src/elements/components/scroll-to-top.module.scss

@@ -5,7 +5,7 @@
     bottom: 0.5rem;
     right: 0.5rem;
 
-    @media screen and (min-width: 1500px) {
+    @media screen and (min-width: 1600px) {
         right: auto;
         left: calc(50vw + var(--max-page-width) / 2);
         bottom: 1rem;
@@ -20,7 +20,7 @@
     opacity: 0.3;
     transition: opacity 0.5s ease-in-out;
 
-    @media screen and (max-width: 1500px) {
+    @media screen and (max-width: 1600px) {
         opacity: 0.5;
     }
 

src/elements/page.tsx

@@ -13,8 +13,8 @@ export function PageContainer({ children, scrollToTop, wrapper }: PageContainerP
         <div className={style.container}>
             <Header />
             {wrapper ? (
-                <main className={`${style.main} p-0 lg:p-4`}>
-                    <div className={`${style.wrapper} mb-6 bg-fade-100 p-4 dark:bg-fade-800 lg:rounded-lg`}>
+                <main className={`${style.main} p-0 xl:p-4`}>
+                    <div className={`${style.wrapper} mb-6 bg-fade-100 p-4 dark:bg-fade-800 xl:rounded-lg`}>
                         {children}
                     </div>
                 </main>

tailwind.config.js

@@ -27,6 +27,12 @@ module.exports = {
                 'accent-900': '#000c60',
             },
         },
+        screens: {
+            sm: '640px',
+            md: '768px',
+            lg: '1024px',
+            xl: '1400px',
+        },
     },
     darkMode: ['class', '[data-theme="dark"]'],
     plugins: [require('@tailwindcss/line-clamp'), require('@headlessui/tailwindcss')],