feature: finish minimalistic template

sapachev · Jan 23, 2023 · 8cd4704 · 8cd4704
1 parent 7ee5cce
commit 8cd4704
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 ## Custom HTTP Error Pages
 
-Lightweight tool to create own static HTTP Error Pages in minimalistic responsive and accessible design features and customization support including localization.
+Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support.
 
 # Features
 
-* Static pages with simple design
+* Static pages with simple and responsive design
 * Lightweight and fast running
 * Extensibility
 * Customization

diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "error-pages",
   "version": "0.0.1",
-  "description": "Lightweight tool to create own static HTTP Error Pages in minimalistic responsive and accessible design features and customization support including localization",
+  "description": "Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support",
   "main": "index.ts",
   "scripts": {
     "build": "npx ts-node index.ts",
-    "build:tailwind": "npx tailwindcss -i $INPUT -o $OUTPUT",
+    "build:tailwind": "npx tailwindcss -i $INPUT -o $OUTPUT -m",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Pavel Sapachev",

diff --git a/src/en/common.json b/src/en/common.json
@@ -1,5 +1,7 @@
 {
   "apology": "We are sorry for the inconvenience.",
   "comment": "Created with Error Pages",
-  "go-back": "Go back"
+  "comment-aria": "Visit Error Pages repository",
+  "go-back": "Go back",
+  "go-back-aria": "Return to previous page"
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,9 +3,7 @@
 const { DefaultPaths } = require("./lib/_constants");
 const config = require('./config');
 
-console.log(config.theme);
 const { theme } = require(`${DefaultPaths.THEMES}/${config.theme}/theme.tailwind.config.js`);
-console.log(theme);
 
 module.exports = {
   content: [

diff --git a/themes/minimalistic/@assets/css/main.tcss b/themes/minimalistic/@assets/css/main.tcss
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html, body {
+  font-family: 'Noto Sans Display', sans-serif;
+}
+
+html,
+body,
+.wrapper {
+  @apply h-full;
+}
diff --git a/themes/minimalistic/template.html b/themes/minimalistic/template.html
@@ -8,20 +8,32 @@
     <meta name="author" content="Pavel Sapachev" />
 
     <link href="/%40assets/css/main.css" rel="preload" as="style" />
-
-    <link href="https://fonts.googleapis.com/css?family=Oxygen:400,700" rel="stylesheet" type="text/css" />
     <link href="/%40assets/css/main.css" rel="stylesheet" type="text/css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;600&display=swap" rel="stylesheet">
   </head>
 
-  <body class="bg-myfantasy">
-    <div class="wrapper grid md:items-center">
-      <div>{{ code }}</div>
-      <div>{{ name }}</div>
-      <div>{{ message }}</div>
-      <div>{{ apology }}</div>
-      <a href="javascript:window.history.back();">{{ go-back }}</a>
-    </div>
+  <body class="bg-slate-200 text-slate-700">
+    <div class="wrapper grid gap-4 items-center grid-rows-centered justify-items-center py-4">
+      <div class="grid gap-8 items-center w-full sm:w-min">
+        <header class="grid grid-flow-row sm:grid-flow-col grid-cols-centered gap-4 items-center justify-items-center">
+          <h1 class="text-9xl font-semibold">{{ code }}</h1>
+          <h2 class="text-5xl text-center sm:text-left sm:w-max sm:max-w-xs break-words">{{ name }}</h2>
+        </header>
 
-    <a href="https://github.com/sapachev/error-pages" target="_blank">{{ comment }}</a>
+        <main class="text-xl text-center mx-4 sm:-mx-4">
+          <p class="mb-8">{{ message }}</p>
+          <p>{{ apology }}</p>
+        </main>
+
+        <button onclick="window.history.back()" class="justify-self-center border-solid border-2 border-slate-700 px-4 py-2 text-slate-200 bg-slate-700 hover:bg-slate-300 hover:text-slate-700 mb-4 focus:ring-2 focus:ring-offset-4 focus:ring-offset-slate-200 focus:ring-slate-700 focus-visible:outline-none" aria-label="{{ go-back-aria }}" title="{{ go-back-aria }}">{{ go-back }}</button>
+      </div>
+
+      <footer>
+        <a href="https://github.com/sapachev/error-pages" target="_blank" class="text-slate-500 focus:ring-2 focus:ring-offset-4 focus:ring-offset-slate-200 focus:ring-slate-700 focus-visible:outline-none" aria-label="{{ comment-aria }}" title="{{ comment-aria }}">{{ comment }}</a>
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/themes/minimalistic/theme.tailwind.config.js b/themes/minimalistic/theme.tailwind.config.js
@@ -1,4 +1,8 @@
 // Place here your custom Tailwind theme variables
 exports.theme = {
-  extend: {},
+  extend: {
+    gridTemplateRows: {
+      centered: "1fr auto",
+    },
+  },
 }