formatting

This commit is contained in:
Lukáš Kucharczyk 2024-09-10 14:26:06 +02:00
parent a9c1135639
commit 1f535a6e84
Signed by: lukas
SSH Key Fingerprint: SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
2 changed files with 42 additions and 66 deletions

View File

@ -1539,8 +1539,8 @@ input:checked + .toggle-bg {
width: 100%; width: 100%;
} }
.max-w-80 { .max-w-\[30rem\] {
max-width: 20rem; max-width: 30rem;
} }
.max-w-screen-lg { .max-w-screen-lg {
@ -1559,18 +1559,6 @@ input:checked + .toggle-bg {
max-width: 20rem; 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 {
flex: 1 1 0%; flex: 1 1 0%;
} }
@ -1750,22 +1738,10 @@ input:checked + .toggle-bg {
white-space: nowrap; white-space: nowrap;
} }
.text-wrap {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-balance { .text-balance {
text-wrap: balance; text-wrap: balance;
} }
.text-pretty {
text-wrap: pretty;
}
.rounded { .rounded {
border-radius: 0.25rem; border-radius: 0.25rem;
} }

View File

@ -18,11 +18,11 @@
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
<script> <script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC // On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} else { } else {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
} }
</script> </script>
</head> </head>
<body hx-indicator="#indicator"> <body hx-indicator="#indicator">
@ -45,46 +45,46 @@
{% block scripts %} {% block scripts %}
{% endblock scripts %} {% endblock scripts %}
<script> <script>
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings // Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden'); themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}
var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function () {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else { } else {
if (document.documentElement.classList.contains('dark')) { themeToggleDarkIcon.classList.remove('hidden');
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
} }
}); var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function () {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
</script> </script>
</body> </body>
</html> </html>