refactor: header as flexbox instead of grid (#15)

* refactor: header as flexbox instead of grid * 1.7.0 * fix: remove unused variable in Compiler test
sapachev · Feb 9, 2023 · 51385cb · 51385cb
1 parent 1b9a337
commit 51385cb
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "error-pages",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support",
   "main": "index.ts",
   "scripts": {

diff --git a/test/Compiler.spec.ts b/test/Compiler.spec.ts
@@ -239,7 +239,7 @@ describe("class Compiler", async () => {
 
         await compiler.makePages().then(
           () => assert.ok(false),
-          (err) => {
+          () => {
             assert.ok(true);
           }
         );

diff --git a/themes/minimalistic/template.html b/themes/minimalistic/template.html
@@ -17,13 +17,13 @@
 
   <body class="bg-slate-200 text-slate-700">
     <div class="wrapper grid grid-rows-centered items-center justify-items-center gap-4 py-4">
-      <div class="grid w-full items-center gap-8 sm:w-min">
-        <header class="grid-cols-centered grid grid-flow-row items-center justify-items-center gap-4 sm:grid-flow-col">
-          <h1 class="text-9xl font-semibold">{{ code }}</h1>
-          <h2 class="break-words text-center text-5xl sm:w-max sm:max-w-xs sm:text-left">{{ name }}</h2>
+      <div class="grid w-full items-center gap-8">
+        <header class="flex flex-col items-center justify-center justify-items-center md:flex-row">
+          <h1 class="text-9xl font-semibold sm:inline-block">{{ code }}</h1>
+          <h2 class="text-center text-5xl sm:inline-block md:ml-4">{{ name }}</h2>
         </header>
 
-        <main class="mx-4 text-center text-xl sm:-mx-4">
+        <main class="mx-4 justify-self-center text-center text-xl sm:-mx-4 sm:w-152">
           <p class="mb-8">{{ message }}</p>
           <p>{{ apology }}</p>
         </main>

diff --git a/themes/minimalistic/theme.tailwind.config.js b/themes/minimalistic/theme.tailwind.config.js
@@ -4,5 +4,8 @@ exports.theme = {
     gridTemplateRows: {
       centered: "1fr auto",
     },
+    width: {
+      152: "38rem",
+    },
   },
 };