From 186f1f5669843b39f364d05a8953a57c57aac4af Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 25 Feb 2024 15:59:12 +0500
Subject: [PATCH] [THEME] refactor display of 404/500 error pages
---
templates/status/404.tmpl | 2 +-
templates/status/500.tmpl | 5 ++++-
web_src/css/base.css | 10 ++++++++++
3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
index 695dd78c85..c73ee34774 100644
--- a/templates/status/404.tmpl
+++ b/templates/status/404.tmpl
@@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content ui center gt-w-screen {{if .IsRepo}}repository{{end}}">
{{if .IsRepo}}{{template "repo/header" .}}{{end}}
<div class="ui container center">
- <p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/404.png" alt="404" style="max-width: 100%"></p>
+ <h1 style="margin-top: 100px" class="error-code">404</h1>
<p>{{if .NotFoundPrompt}}{{.NotFoundPrompt}}{{else}}{{ctx.Locale.Tr "error404" | Safe}}{{end}}</p>
{{if .NotFoundGoBackURL}}<a class="ui button green" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>{{end}}
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index edcb90f9a4..30cb255643 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -33,7 +33,10 @@
<style> .ui.message.flash-message { text-align: left; } </style>
{{template "base/alert" .}}
</div>
- <p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
+ <div class="ui container center">
+ <h1 class="gt-mt-5 error-code">500</h1>
+ <p>Internal Server Error</p>
+ </div>
<div class="divider"></div>
<div class="ui container gt-my-5">
{{if .ErrorMsg}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 76ecfc9bf5..2620a41a34 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -96,6 +96,16 @@ progress::-moz-progress-bar {
background-color: var(--color-accent);
}
+h1.error-code {
+ font-size: 15em;
+ font-weight: 800;
+ color: transparent;
+ --error-code-color-1: #a2a2a2;
+ --error-code-color-2: #797979;
+ background: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px);
+ background-clip: text;
+}
+
* {
scrollbar-color: var(--color-primary) transparent;
caret-color: var(--color-caret);