feat: restyle cage cards

This commit is contained in:
moanos [he/him] 2024-07-21 22:23:54 +02:00
parent ecd7027bdd
commit 9341c58dba
4 changed files with 95 additions and 113 deletions

View File

@ -48,7 +48,6 @@ h1, h2 {
label {
font-weight: bold;
word-break: break-word;;
}
.slidecontainer {
@ -92,7 +91,6 @@ label {
}
.input-group {
display: flex;
align-items: center;
@ -116,47 +114,42 @@ label {
height: 36px;
}
.cage-selector{
gap: 15px;
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.card {
text-align: center;
color: var(--text-two);
flex: 1 25%;
}
.card-photo {
height: 200px;
min-width: 200px;
background-color: var(--background-one);
box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
border-radius: 8px;
position: relative;
cursor: pointer;
}
.card-photo img {
width: 70%;
height: 95%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
.card-photo label {
color: var(--text-one);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0.4em;
min-width: 300px;
padding: 10px;
border-radius: 10px;
}
@media screen and (min-width: 40em) {
flex: 0 1 calc(25% - 0.5em);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.info-container {
padding: 2px 16px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 200px;
}
.measurement {
width: 100px;
}
@ -167,32 +160,18 @@ label {
}
input[type="checkbox"] {
-webkit-appearance: none;
position: relative;
width: 100%;
cursor: pointer;
}
input[type="checkbox"]:after {
position: absolute;
font-weight: 400;
content: "0";
font-size: 18px;
color: #478bfb;
right: 10px;
top: -5px;
}
input[type="checkbox"]:checked:after {
font-weight: 900;
content: "X";
color: #478bfb;
display: none;
}
.form-measurements {
max-height: 90%;
}
.form-measurements input {
width: 70%;
}
input.measurement {
margin-top: 5%;
}

BIN
src/assets/img/checked.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 639 B

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Käfigrechner</title>
@ -11,42 +11,46 @@
<h1>Käfigrechner</h1>
<div class="content">
<div class="container-form">
<div class="cage-selector">
<div class="card">
<div class="card-photo">
<div class="cards">
<div class="card" id="card-SavicSuiteRoyaleXL">
<label for="SavicSuiteRoyaleXL">
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
<div>
<div class="card-photo">
<img src="assets/img/savic-xl.jpeg">
</div>
<div class="info-container">
<h4><b>Savic XL</b></h4>
</div>
<label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
</label>
</div>
<div class="card">
<div class="card-photo">
<div class="card" id="card-SavicSuiteRoyale95Double">
<label for="SavicSuiteRoyale95Double">
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
<div class="card-photo">
<div>
<img src="assets/img/savic-95-double.jpg">
</div>
<div class="info-container">
<h4><b>95 Double</b></h4>
</div>
<label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
</div>
</label>
</div>
<div class="card">
<div class="card-photo">
<div class="card" id="card-TiakiKleintierkäfigEtagere">
<label for="TiakiKleintierkäfigEtagere">
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
<div>
<div class="card-photo">
<img src="assets/img/tiaki.jpeg">
</div>
<div class="info-container">
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
</div>
<label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
</label>
</div>
<div class="card">
<div class="card-photo">
<label for="form-cage-measurements">Käfigmaße</label>
<form id="form-cage-measurements" class="form-measurements">
<div class="input-measurement">
@ -64,7 +68,6 @@
</form>
</div>
</div>
</div>
<div class="input-element">
<div class="slidecontainer">
@ -85,7 +88,7 @@
</div>
<div class="container output-element" id="resultsDiv">
</div>
</div>
</div>
</div>
<script>