sigmasternchen/mobmash.click
1
0
Fork 0
mirror of https://github.com/sigmasternchen/mobmash.click synced 2025-03-15 08:09:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: First draft of layout

Browse source
This commit is contained in:
overflowerror 2024-07-29 22:26:00 +02:00
parent b6108d1ed9
commit 2566486183
4 changed files with 54 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
html/styles/main.css
View file

@ -1,22 +1,59 @@
body {
padding: 0;
margin: 0;
}
nav {
background-color: red;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
margin: 0;
}
h1 {
text-align: center;
}
.selection {
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 5%;
margin-right: 5%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
max-width: 90vw;
}
.separator {
flex-grow: 1;
font-size: 5vw;
position: relative;
}
.separator div {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translate(0%, -50%);
}
.mob {
background-color: green;
width: 40%;
flex-grow: 1;
width: 40vw;
height: 42vw;
position: relative;
}
.mob h2 {
position: absolute;
width: 100%;
text-align: center;
}
.mob img {
width: 80%;
object-fit: contain;
width: 35vw;
height: 35vw;
margin-top: 5.5vw;
margin-left: 2.5vw;
}

6
view/fragments/mob.php
View file

@ -1,6 +1,4 @@
<div class="mob">
<img src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>"><br />
<?= $mob["id"]; ?><br />
<?= $mob["name"]; ?><br />
<?= $mob["rating"]; ?><br />
<h2><?= $mob["name"]; ?></h2>
<img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">
</div>

7
view/fragments/mobSelection.php
View file

@ -1,10 +1,15 @@
<h1>
Which do you like better?
</h1>
<div class="selection">
<?php
$mob = $left ?? [];
include __DIR__ . "/mob.php";
?>
<div class="separator">
OR
<div>
OR
</div>
</div>
<?php
$mob = $right ?? [];

2
view/layout.php
View file

@ -5,6 +5,8 @@
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
</head>
<body>
<nav>
</nav>
<?php
if (isset($content)) {
$content();