Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve design of error pages (#68)

Browse Source
This commit is contained in:
Daniel Roe 2022-03-10 20:26:33 +00:00 committed by GitHub
parent 62e2f94fcd
commit 2d0f988ed1
2 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui-templates/templates/error-500/index.html
View File

@ -17,22 +17,23 @@
dark:text-sky-surface dark:text-sky-surface
"> ">
<div class="min-h-screen md:flex"> <div class="min-h-screen md:flex">
<div class="flex items-center justify-center w-full md:w-1/2"> <div class="flex items-center justify-center w-full max-w-full">
<div class="max-w-sm m-8"> <div class="max-w-full lg:max-w-10xl m-8 p-4">
<div class="text-5xl font-bold dark:text-white md:text-15xl"> <div class="md:max-w-sm text-5xl font-bold dark:text-white md:text-15xl">
{{ messages.statusCode }} {{ messages.statusCode }}
</div> </div>
<div class="w-16 h-1 my-3 bg-primary md:my-6"></div> <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
<p class=" <div class="
mb-8 mb-8
text-2xl text-2xl
font-light font-light
leading-normal leading-normal
dark:text-cloud-lighter dark:text-cloud-lighter
md:text-3xl md:text-3xl
max-w-sm
"> ">
{{ messages.description }} {{ messages.description }}
</p> </div>
</div> </div>
</div> </div>
<div class=" <div class="

41
packages/ui-templates/templates/error-dev/index.html
View File

@ -1,45 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title> <title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
content="width=device-width,initial-scale=1.0,minimum-scale=1.0"
name="viewport"
/>
<script type="module" src="/styles.ts"></script> <script type="module" src="/styles.ts"></script>
</head> </head>
<body
class=" <body class="
font-sans font-sans
antialiased antialiased
bg-cloud-surface bg-cloud-surface
dark:bg-sky-darker dark:bg-sky-darker
text-sky-darkest text-sky-darkest
dark:text-sky-surface dark:text-sky-surface
" ">
>
<div class="min-h-screen md:flex"> <div class="min-h-screen md:flex">
<div class="flex items-center justify-center w-full md:w-1/2"> <div class="flex items-center justify-center w-full max-w-full">
<div class="max-w-sm m-8"> <div class="max-w-full lg:max-w-10xl m-8 p-4">
<div class="text-5xl font-bold dark:text-white md:text-15xl"> <div class="md:max-w-sm text-5xl font-bold dark:text-white md:text-15xl">
{{ messages.statusCode }} {{ messages.statusCode }}
</div> </div>
<div class="w-16 h-1 my-3 bg-primary md:my-6"></div> <div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
<p <div class="
class="
mb-8 mb-8
text-2xl text-2xl
font-light font-light
leading-normal leading-normal
dark:text-cloud-lighter dark:text-cloud-lighter
md:text-3xl md:text-3xl
" max-w-sm
> ">
{{ messages.description }} {{ messages.description }}
</p> </div>
<div class="
mb-8
text-sm
leading-normal
dark:text-cloud-lighter
md:text-lg
white
overflow-scroll
max-w-full
">
{{ messages.stack }}
</div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>