From 8aa281e1f4362ec5b67d29ec9486581c9be0c13d Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Fri, 4 Aug 2023 16:45:20 +0200 Subject: [PATCH] Improve responsiveness --- index.html | 23 ++++++++++++++------ style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index f7465a0..5486e65 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,33 @@ - Service unavailable + + + + + Service unavailable + - - +

Oh, no!

-

The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and powered off temporarily.

+

The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and/or powered off temporarily.

Please come back later!

Kind regards, Tibo De Peuter

- kitten holding paw to forehead +
- + + + diff --git a/style.css b/style.css index 6b9ec86..c4fce4e 100644 --- a/style.css +++ b/style.css @@ -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%; +} \ No newline at end of file