[O] css > tailwind

src/routes/+error.svelte

@@ -6,14 +6,12 @@
   const t = getI18n().errorPage;
 </script>
  
-<main> 
 <AppBar title={t.title} />
-  <div class="p-content error-page__content">
-    <p class="error-page__text" >{@html t.message}</p>
-    <div class="error-page__button-container">
+<div class="p-content">
+  <p class="mt-12px">{@html t.message}</p>
+  <div class="absolute bottom-16px inset-x-16px">
     <a href="/">
-        <Button class="error-page__button">{t.return}</Button>
+      <Button big>{t.return}</Button>
     </a>
   </div>
 </div>
-</main>

src/routes/+layout.svelte

@@ -33,7 +33,7 @@
   <link rel="icon" href={favicon} />
 </svelte:head>
 
-<div class="app-container vbox h-screen min-h-screen box-border overflow-hidden relative">
+<div class="vbox h-screen min-h-screen box-border overflow-hidden relative max-w-1200px mx-auto">
   {@render children()}
 </div>
 

src/style/app.sass

@@ -38,25 +38,3 @@ body
     overflow-y: auto
     min-height: 0
     flex: 1
-
-.app-container
-    max-width: 1200px
-    margin: 0 auto
-
-.error-page__link
-    text-decoration: underline
-
-.error-page__button
-    display: flex
-    align-items: center
-    justify-content: center
-    width: 100%
-
-
-.error-page__text
-    margin-top: 12px
-
-.error-page__button-container
-    position: absolute
-    bottom: 16px
-    width: calc(100% - 32px)