tdpeuter/down-message
tdpeuter/down-message
1
Fork 0
Code Issues 2 Pull requests Releases Activity

Improve responsiveness

Browse source
This commit is contained in:
Tibo De Peuter 2023-08-04 16:45:20 +02:00
parent c020aacdce
commit 8aa281e1f4
2 changed files with 79 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -1,22 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Service unavailable</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<title>Service unavailable</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="assets/icon.jpg">
<meta name="color-scheme" content="light dark">
<meta name="robots" content="noindex">
</head>
<body>
<main>
<h1>Oh, no!</h1>
<p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and powered off temporarily.</p>
<p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and/or powered off temporarily.</p>
<p>Please come back later!</p>
<p>Kind regards, <a href="https://tibo.depeuter.dev">Tibo De Peuter</a></p>
<div id="checkContainer"></div>
<img src="/assets/oh-no-kitten.jpg" alt="kitten holding paw to forehead"/>
</main>
<script src="script.js"></script>
<footer>
<p>
Made with <span class="heart">&hearts;</span>.
<a href="https://git.depeuter.dev/tdpeuter/down-website" about="source code of this webpage" class="hidden">Source code</a>
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

62
style.css
View file

@ -1,3 +1,22 @@
:root {
/* Support dark mode */
color-scheme: light dark;
}
body {
margin: 20px;
padding: 10px;
}
footer {
opacity: 0.6;
font-size: small;
display: flex;
width: 100%;
justify-content: center;
}
.dot {
width: 15px;
height: 15px;
@ -17,3 +36,46 @@
.dot.red {
background-color: red;
}
.heart {
color: #CD001A; /* Cherry red */
}
/* Don't let media go offscreen */
img,
picture,
video {
max-width: 100%;
padding: 2% 0;
}
/* Display the button in the center of small screens such as phones */
@media screen and (max-device-width: 1000px) {
#checkContainer {
display: flex;
justify-content: center;
}
}
/* Hover animation for URLs */
a {
text-decoration: none;
color: inherit; /* Reset to default text color */
position: relative;
}
a::before {
content: '';
position: absolute;
/* Height of the line */
bottom: -2px;
height: 2px;
left: 0;
width: 0;
background-color: orange;
transition: width 0.3s ease;
}
a:hover::before {
width: 100%;
}