Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat(ui): use CSS container queries for precise header font scaling

Browse source
This commit is contained in:
Alexander Minges 2025-07-17 19:40:25 +02:00
parent 9ea6bfac84
commit dfb2a4a781
Signed by: Athemis
GPG key ID: 31FBDEF92DDB162B
2 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/components/actor/_actor_header.scss
View file

@ -42,6 +42,7 @@
align-items: center; align-items: center;
border-bottom: 0; border-bottom: 0;
margin: 0; margin: 0;
container-type: inline-size;
} }
&__name-input[type="text"] { &__name-input[type="text"] {
@ -49,7 +50,7 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
flex: 1; flex: 1;
font-size: clamp(0.75em, 2.5vw, 1.25em); font-size: clamp(0.75em, 8cqi, 1.25em);
height: auto; height: auto;
// Use lighter font weight for better readability // Use lighter font weight for better readability

3
scss/components/item/_item_header.scss
View file

@ -33,6 +33,7 @@
&__name { &__name {
border: none; border: none;
margin: 0; margin: 0;
container-type: inline-size;
} }
&__name-label { &__name-label {
@ -43,7 +44,7 @@
@include mixins.font-heading-upper; @include mixins.font-heading-upper;
background-color: transparent; background-color: transparent;
border: none; border: none;
font-size: clamp(0.75em, 2.5vw, 1.25em); font-size: clamp(0.75em, 8cqi, 1.25em);
height: auto; height: auto;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;