diff --git a/.gitignore b/.gitignore index 1e4ef7a..b882b0d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,8 @@ -/* +/** !/root +!/root/static +!/root/static/** !/.gitignore -!/uptime-kuma-homepage.py !/example.env.py -!/requirements.txt - -/root/homepagehtml.html +!/requirements.txt \ No newline at end of file diff --git a/requirements.txt b/requirements.txt index 23e7ceb..516a32f 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1 @@ uptime-kuma-api -json \ No newline at end of file diff --git a/root/css/base.css b/root/css/base.css index 62c3cba..31a2512 100644 --- a/root/css/base.css +++ b/root/css/base.css @@ -1,7 +1,18 @@ +:root { + --foreground: #aa998fff; /*cinereous*/ + --background: hsl(20, 12%, 75%); + --text: #454545ff; /*onyx*/ + --tea-green: #e0fbb1ff; + --celestial-blue: #20a4f3ff; + --rust: #bc3908ff; +} + body { padding: 0; margin: 0; font-family: Roboto; + color: var(--text); + background: var(--background); } @font-face { @@ -10,71 +21,81 @@ body { } .darkerbar { - background: lightgrey; + background: var(--foreground); width: 100%; } -#content > p { - text-align: justify; -} - -#topbar { +header { display: inline-block; height: 5em; border-bottom: grey 1px solid; } -#content { +main { padding: 1em; } -a.item { - text-decoration: none; - display: inline-flex; - flex: 0 2 80em; +main > p { + text-align: justify; +} + +#links-container { + justify-content: center; + display: flex; + width: 100%; } div.item { - background: lightgrey; + margin: 0 0.4em; display: flex; - flex: 0 2 80em; - margin: 0.1em; - padding: 0em 0.4em; - border: 1px grey solid; - border-radius: 0.5em; - box-sizing: border-box; - vertical-align: middle; + position: relative; + width: min-content; + background: var(--foreground); + border: solid grey 2px; + border-radius: 15pt; +} + +div.item > a { + border-radius: inherit; + position: absolute; + height: 100%; + width: 100%; } div.item:hover { - background: beige; + animation:hover 0.2s forwards; } -h2.item { - text-decoration: none; - white-space: nowrap; - color: black; - min-width: 7em; - margin: 1em 0; +@keyframes hover { + 0% {background: var(--foreground)} + 100% {background: var(--tea-green)} } -.desc { - text-decoration: none; - font-size: 1em; - color: black; - margin: 0 3em; +img.item { + height: inherit; +} + +div.image { + border-radius: 15pt; + height: 58pt; + width: auto; + display: inline-block; + padding: 5pt; + margin: 12pt 10pt 12pt 12pt; + background: white; +} + +div.desc { + margin: auto 6pt auto 0; text-align: center; - align-self: center; -} - -div.item-list { - display: flex; - justify-content: center; - flex-wrap: wrap; + font-weight: 700; + font-size:15pt; } footer { - display: block; + position: fixed; + display: flex; + left: 0; bottom: 0; height: 10em; border-top: grey 1px solid; diff --git a/root/index.php b/root/index.php index 61721ea..49c0e48 100644 --- a/root/index.php +++ b/root/index.php @@ -10,17 +10,27 @@ $title = "Marcel's Homepage"; -

+

-
-

Hi, I am Marcel and this is my server (and my ugly homepage)! Lorem ipsum dolor sit amet or something.
-Most of my services are for private use, because I don't want to track every user on my server or guarantee flawless connectivity.
-If you know me personally, you may ask me for an account on one of my services. -If you don't know me personally, then I probably won't give you access to my services.

-
- -
+
+ +

+ You've reached my realm. Now look around or leave. +

+
diff --git a/root/static/authentik.svg b/root/static/authentik.svg new file mode 100644 index 0000000..0bb8a8b --- /dev/null +++ b/root/static/authentik.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/root/static/element.svg b/root/static/element.svg new file mode 100644 index 0000000..981ee88 --- /dev/null +++ b/root/static/element.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/root/static/forgejo.svg b/root/static/forgejo.svg new file mode 100644 index 0000000..bcacdc0 --- /dev/null +++ b/root/static/forgejo.svg @@ -0,0 +1,27 @@ + + + + + + + + + +