Add QR-code to all popups, add direction indicator to popup and visual feedback, make reviews accessible to screenreaders (both to read them and to make them)

This commit is contained in:
Pieter Vander Vennet 2023-12-24 05:01:10 +01:00
parent 5567869bb4
commit bfd818cb38
33 changed files with 415 additions and 98 deletions

View file

@ -1347,6 +1347,10 @@ video {
appearance: none;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -1450,14 +1454,26 @@ video {
row-gap: 0.5rem;
}
.gap-x-1 {
-webkit-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-x-2 {
-webkit-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-1 {
-webkit-column-gap: 0.25rem;
column-gap: 0.25rem;
.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.125rem * var(--tw-space-x-reverse));
margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
@ -1466,6 +1482,18 @@ video {
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -1554,6 +1582,10 @@ video {
text-overflow: clip;
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
@ -1695,11 +1727,6 @@ video {
border-color: rgb(219 234 254 / var(--tw-border-opacity));
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));