brian/activist
1
0
Fork 0
Code Activity Actions

Make the font scale to the container

Browse source 
While setting font-size: calc() works, using zoom will probably be better for printing.
This commit is contained in:
Brian D 2024-12-03 23:18:26 -05:00
parent 40949188e6
commit b95b8a303f
2 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Sticker.vue
View file

@ -64,10 +64,12 @@ const layout4Class = computed(() => ({
height: 100%; height: 100%;
} }
.sticker { .sticker {
width: 256px;
aspect-ratio: 6 / 1; aspect-ratio: 6 / 1;
background-color: v-bind(color); background-color: v-bind(color);
display: flex; display: flex;
.content { .content {
//font-size: calc(1.5vw + 1.5vh);
padding: 5px; padding: 5px;
width: 100%; width: 100%;
> div > div { > div > div {

6
src/views/StickerView.vue
View file

@ -55,6 +55,7 @@ function claimSticker() {
<div class="flex flex-col gap-5"> <div class="flex flex-col gap-5">
<div id="StickerWrapper"> <div id="StickerWrapper">
<Sticker <Sticker
class="sticker"
v-bind="stickerStore.sticker" v-bind="stickerStore.sticker"
v-if="stickerStore.sticker" v-if="stickerStore.sticker"
/> />
@ -77,5 +78,10 @@ function claimSticker() {
#StickerWrapper { #StickerWrapper {
background-color: #DDD; background-color: #DDD;
padding: 12px; padding: 12px;
@media (screen(sm)) {
.sticker {
zoom: 250%;
}
}
} }
</style> </style>