This commit is contained in:
Michael Rodin 2024-06-13 13:15:47 +02:00
parent b125f86fa9
commit 441e4781de
2 changed files with 39 additions and 29 deletions

View file

@ -8,6 +8,8 @@
}
body {
position: relative;
min-height: 100em;
padding: 0;
margin: 0;
font-family: Roboto;
@ -74,16 +76,18 @@ div.item:hover {
img.item {
height: inherit;
margin: 0 auto;
}
div.image {
border-radius: 15pt;
height: 58pt;
min-width: 58pt;
width: auto;
display: inline-block;
padding: 5pt auto;
display: block;
width: fit-content;
padding: 5pt;
margin: 12pt 10pt 12pt 12pt;
text-align: center;
background: white;
}
@ -95,10 +99,19 @@ div.desc {
}
footer {
position: relative;
display: flex;
left: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10em;
border-top: grey 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 600px) {
div.item {
width: 70%;
}
}

View file

@ -2,6 +2,13 @@
<html>
<?php
$title = "Marcel's Homepage";
$services = [
array("name" => "authentik","displayname" => "Authentik", "link" => "https://auth.marcelsite.com", "image" => "/static/authentik.svg"),
array("name" => "uptime-kuma","displayname" => "Uptime Kuma", "link" => "https://status.marcelsite.com", "image" => "/static/uptime-kuma.svg"),
array("name" => "forgejo","displayname" => "Forgejo", "link" => "https://git.marcelsite.com", "image" => "/static/forgejo.svg"),
array("name" => "peertube","displayname" => "Peertube", "link" => "https://peertube.marcelsite.com", "image" => "/static/peertube.svg"),
array("name" => "element","displayname" => "Matrix (Element)", "link" => "https://element.marcelsite.com", "image" => "/static/element.svg"),
];
?>
<head>
@ -19,30 +26,20 @@ $title = "Marcel's Homepage";
</p>
<div id="links-container">
<div class="item" id="authentik">
<div class="image"><img class="item" alt="logo" src="static/authentik.svg"></div><div class="desc">authentik</div>
<a href="https://auth.marcelsite.com"></a>
</div>
<div class="item" id="uptime-kuma">
<div class="image"><img class="item" alt="logo" src="static/uptime-kuma.svg"></div><div class="desc">Uptime Kuma</div>
<a href="https://status.marcelsite.com"></a>
</div>
<div class="item" id="forgejo">
<div class="image"><img class="item" alt="logo" src="static/forgejo.svg"></div><div class="desc">Forgejo</div>
<a href="https://git.marcelsite.com"></a>
</div>
<div class="item" id="peertube">
<div class="image"><img class="item" alt="logo" src="static/peertube.svg"></div><div class="desc">Forgejo</div>
<a href="https://peertube.marcelsite.com"></a>
</div>
<div class="item" id="element">
<div class="image"><img class="item" alt="logo" src="static/element.svg"></div><div class="desc">Matrix (Element)</div>
<a href="https://element.marcelsite.com"></a>
</div>
<?php
foreach ($services as $service) {
echo " <div class='item' id='$service[name]'>";
echo " <div class='image'><img class='item' alt='logo' src='$service[image]'></div><div class='desc'>$service[displayname]</div>";
echo " <a href='$service[link]'></a>";
echo " </div>";
}
?>
</div>
</main>
<footer id="bottombar" class="darkerbar"> </footer>
<footer id="bottombar" class="darkerbar">
Footer currently completely empty.
</footer>
</body>
</html>