make label fit inside 7cm by 7cm window

This commit is contained in:
Aadil Ayub 2024-05-29 11:05:21 +00:00
parent 1ab6024a9f
commit 1ec40791c0

View File

@ -17,16 +17,15 @@
} }
.label { .label {
width: 400px; width: calc(0.57* 400px);
height: 400px; height: calc(0.57 *400px);
border-radius: 50%; border-radius: 50%;
padding: 2rem; padding: calc(0.57 * 2rem);
margin: 2rem; /* margin: calc(0.57 * 2rem); */
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transform: scale(0.57);
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(255, 255, 255, 1) 28%, rgba(255, 255, 255, 1) 28%,
@ -36,8 +35,8 @@
.label .product-details { .label .product-details {
font-family: 'Roboto Condensed'; font-family: 'Roboto Condensed';
font-size: 21px; font-size: calc(0.57 * 21px);
letter-spacing: 2px; letter-spacing: calc(0.57 * 2px);
text-transform: uppercase; text-transform: uppercase;
margin-top: 2.5em; margin-top: 2.5em;
margin-bottom: 2em; margin-bottom: 2em;
@ -49,30 +48,30 @@
} }
.label .product-details .origin { .label .product-details .origin {
font-size: 28px; font-size: calc(0.57 * 28px);
font-weight: 700; font-weight: 700;
letter-spacing: 4px; letter-spacing: 4px;
margin-block: 1.2em 0.8em; margin-block: 1.2em 0.8em;
min-height: 33px; min-height: calc(0.57 * 33px);
} }
.label .product-details .weight { .label .product-details .weight {
text-transform: lowercase; text-transform: lowercase;
font-weight: bold; font-weight: bold;
font-family: sans-serif; font-family: sans-serif;
font-weight: 18px; font-size: calc(0.57 * 18px);
} }
.label .product-details .code { .label .product-details .code {
min-height: 20px; min-height: calc(0.57 * 20px);
letter-spacing: 10px; letter-spacing: calc(0.57 * 10px);
margin-top: 1.5em; margin-top: 1.5em;
font-size: 16px; font-size: calc(0.57 * 16px);
} }
.label .order-details { .label .order-details {
padding-bottom: 1em; padding-bottom: 1em;
font-weight: 17px; font-size: calc(0.57 * 17px);
} }
.label .order-details p { .label .order-details p {