discourse
/
discourse-offline-page
mirror of https://github.com/discourse/discourse-offline-page.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

styling

This commit is contained in:
Jeff Wong 2023-11-01 12:15:48 -07:00
parent ef15b887b3
commit 0beb07e239
No known key found for this signature in database
GPG Key ID: D4EEB78E484F8A83
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
html/error_page.html
View File

@ -6,20 +6,26 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
:root {
--background-color: #dddddd;
--color: #222222;
--border-color: #bbbbbb;
--background-color: #ffffff;
--background-color-base: #f8f8f8;
--color: #434343;
--border-color: #e9e9e9;
@media (prefers-color-scheme: dark) {
--color: #dddddd;
--border-color: #444444;
--background-color-base: #282828;
--background-color: #222222;
}
}
body {
margin: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
background-color: var(--background-color);
color: var(--color);
background-color: var(--background-color-base);
}
#page {
height: 100vh;
background-image: url(error-page-bg.png)
}
main {
@ -27,7 +33,7 @@
margin-inline: auto;
background-color: var(--background-color);
box-shadow: 0 4px 19px 6px rgba(0,0,0,.05);
padding: 1em;
padding: 2em;
border: 1px solid var(--border-color);
border-radius: 8px;
}
@ -66,22 +72,24 @@
</style>
</head>
<body>
<main>
<picture>
<source srcset="error-page-dark.png" media="(prefers-color-scheme: dark)"/>
<img src="error-page.png"/>
</picture>
<h1>Site offline</h1>
<p>
Please wait while Discourse is being configured.
This page will refresh when everything is ready.
</p>
<div id="loading">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
<div id="page">
<main>
<picture>
<source srcset="error-page-dark.png" media="(prefers-color-scheme: dark)"/>
<img src="error-page.png"/>
</picture>
<h1>Site offline</h1>
<p>
Please wait while Discourse is being configured.
This page will refresh when everything is ready.
</p>
<div id="loading">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
</div>
</body>
</html>