- improved favicon support

- now using a compressed background image
This commit is contained in:
Tobias 2023-02-24 15:53:51 +01:00
parent 8cfb1b09ae
commit 4454bc3840
8 changed files with 40 additions and 21 deletions

View File

@ -57,7 +57,7 @@
- x und im combatant-modal ein weiterer OK-Button, der das Modal offenlässt
- noch mehr Design
- favicon -> https://stackoverflow.com/questions/48956465/favicon-standard-2023-svg-ico-png-and-dimensions
- x favicon
- imput[type=range] schicker machen
- input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
- Seite für größere Screens anpassen

View File

@ -12,7 +12,11 @@
"license": "ISC",
"source": "src/index.html",
"devDependencies": {
"@parcel/packager-raw-url": "^2.8.3",
"@parcel/packager-xml": "^2.8.3",
"@parcel/transformer-sass": "^2.8.3",
"@parcel/transformer-webmanifest": "^2.8.3",
"@parcel/transformer-xml": "^2.8.3",
"parcel": "^2.8.3",
"parcel-reporter-static-files-copy": "^1.5.0"
},

View File

@ -24,7 +24,6 @@ $sr2-fg: deeppink;
}
@mixin button() {
border: 0;
border-radius: 1px;
padding-inline: 0px;
@ -53,7 +52,7 @@ body {
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg");
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
@ -354,6 +353,7 @@ header.navbar {
right: 0px;
bottom: 0px;
}
footer {
// z-index: -10 !important;
@ -430,7 +430,6 @@ footer {
label {
order: 2;
text-align: right;
}
input {
@ -536,15 +535,15 @@ footer {
border: none;
}
hr {
border-top: 2px solid cyan;
opacity: .5;
}
}
/*
hr {
margin: .5rem 0;
}
th span{
position: absolute;

BIN
src/img/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 KiB

View File

@ -23,6 +23,16 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
<!-- favicon related info -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/sr2ini.webmanifest">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#004aa5">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<meta name="theme-color" content="#004aa5">
</head>
<body>
@ -34,8 +44,10 @@
<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="img/newround.png" alt="a die being rolled"></button>
</nav>
</header>
</div>
<div class="table-responsive overflow-visible">
<div class="container">
<main class="table-responsive overflow-visible">
<table class="table table-sm table-borderless" id="combatants-table">
<thead>
<tr data-augmented-ui="tl-2-clip-y r-clip-y">
@ -48,7 +60,7 @@
<tbody>
</tbody>
</table>
</div>
</main>
</div>
<div class="footer-container">
@ -98,18 +110,15 @@
</div>
<div class="my-2">
<label for="combatant-modal-stun" class="form-label">Stun Damage Level</label>
<label for="combatant-modal-stun" class="form-label">Stun Damage <span id="combatant-modal-penalty-stun"></span></label>
<input type="range" class="form-range" min="0" max="10" id="combatant-modal-stun" list="damage">
<datalist id="damage">
<option>-</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
</datalist>
<div class="label-swap">
<label for="combatant-modal-physical" class="form-label">Physical Damage Level</label>
<label for="combatant-modal-physical" class="form-label">Physical Damage <span id="combatant-modal-penalty-physical"></span></label>
<input type="range" class="form-range" min="0" max="10" id="combatant-modal-physical" list="damage">
</div>
<p>Wound penalties: <span id="combatant-modal-penalties"></span></p>
</div>
</form>
</div>

View File

@ -439,12 +439,19 @@ $(document).ready(function () {
$("#confirm-modal-new-round-ok-button").on("click", startNewRound);
$("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
// add event listener to damage sliders in combatant modal
$("#combatant-modal-stun, #combatant-modal-physical").on("change", function() {
if ($("#combatant-modal-stun").val() == "10" || $("#combatant-modal-physical").val() == "10") {
$("#combatant-modal-penalties").text("incapacitated");
// add event listeners to damage sliders in combatant modal
$("#combatant-modal-stun").on("change", function() {
if ($("#combatant-modal-stun").val() == "10") {
$("#combatant-modal-penalty-stun").text("(K.O.)");
} else {
$("#combatant-modal-penalties").text("-" + DAMAGE_PENALTY[$("#combatant-modal-stun").val()] + " (stun) and -" + DAMAGE_PENALTY[$("#combatant-modal-physical").val()] + " (physical)");
$("#combatant-modal-penalty-stun").text("(wound penalty -" + DAMAGE_PENALTY[$("#combatant-modal-stun").val()] + ")");
}
});
$("#combatant-modal-physical").on("change", function() {
if ($("#combatant-modal-physical").val() == "10") {
$("#combatant-modal-penalty-physical").text("(dead)");
} else {
$("#combatant-modal-penalty-physical").text("(wound penalty -" + DAMAGE_PENALTY[$("#combatant-modal-physical").val()] + ")");
}
});

View File

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB