improve layout
Django CI/CD / test (push) Successful in 1m7s Details
Django CI/CD / build-and-push (push) Successful in 2m12s Details

This commit is contained in:
Lukáš Kucharczyk 2024-09-09 11:25:29 +02:00
parent 58cfaca1a9
commit a9c1135639
Signed by: lukas
SSH Key Fingerprint: SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
2 changed files with 125 additions and 104 deletions

View File

@ -1559,6 +1559,18 @@ input:checked + .toggle-bg {
max-width: 20rem;
}
.max-w-\[90\] {
max-width: 90;
}
.max-w-\[90rem\] {
max-width: 90rem;
}
.max-w-\[30rem\] {
max-width: 30rem;
}
.flex-1 {
flex: 1 1 0%;
}
@ -1742,6 +1754,18 @@ input:checked + .toggle-bg {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-balance {
text-wrap: balance;
}
.text-pretty {
text-wrap: pretty;
}
.rounded {
border-radius: 0.25rem;
}
@ -2543,6 +2567,11 @@ textarea:disabled:is(.dark *) {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.hover\:bg-green-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(14 159 110 / var(--tw-bg-opacity));
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
@ -2558,6 +2587,11 @@ textarea:disabled:is(.dark *) {
background-color: rgb(253 232 232 / var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 82 82 / var(--tw-bg-opacity));
}
.hover\:bg-red-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
@ -2568,16 +2602,6 @@ textarea:disabled:is(.dark *) {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:bg-green-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(14 159 110 / var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 82 82 / var(--tw-bg-opacity));
}
.hover\:text-blue-600:hover {
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity));
@ -2664,16 +2688,16 @@ textarea:disabled:is(.dark *) {
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
}
.focus\:ring-red-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
}
.focus\:ring-green-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(4 108 78 / var(--tw-ring-opacity));
}
.focus\:ring-red-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
@ -2920,6 +2944,11 @@ textarea:disabled:is(.dark *) {
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-green-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-green-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
@ -2930,11 +2959,6 @@ textarea:disabled:is(.dark *) {
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-green-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
}
.dark\:hover\:text-blue-500:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(63 131 248 / var(--tw-text-opacity));
@ -2975,6 +2999,11 @@ textarea:disabled:is(.dark *) {
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-green-500:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-green-800:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));
@ -2985,11 +3014,6 @@ textarea:disabled:is(.dark *) {
--tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-green-500:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:table-cell {
display: table-cell;

View File

@ -8,11 +8,8 @@
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
<div id="game-info" class="mb-10">
<div class="flex gap-5 mb-3">
<span class="text-wrap max-w-80 text-4xl">
<span class="font-bold font-serif">{{ game.name }}</span>&nbsp;
<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">
{{ game.year_released }}
</c-popover>
<span class="text-balance max-w-[30rem] text-4xl">
<span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>
</span>
</div>
<div class="flex gap-4 dark:text-slate-400 mb-3">
@ -94,4 +91,4 @@
return document.getElementById('session-count').textContent.match("[0-9]+");
}
</script>
{% endblock content %}
{% endblock content %}