PHP
This commit is contained in:
parent
b125f86fa9
commit
441e4781de
|
@ -8,6 +8,8 @@
|
|||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Roboto;
|
||||
|
@ -64,7 +66,7 @@ div.item > a {
|
|||
}
|
||||
|
||||
div.item:hover {
|
||||
animation:hover 0.2s forwards;
|
||||
animation: hover 0.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes hover {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -91,14 +95,23 @@ div.desc {
|
|||
margin: auto 6pt auto 0;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
font-size:14pt;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue