marcel/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

PHP

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
root/css/base.css
View file

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

39
root/index.php
View file

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