volandsz/astro_name_numbers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix SVG scale issue

Browse Source
This commit is contained in:
VolandSZ
2026-06-20 12:07:51 +03:00
parent 7d2cd0759e
commit 0245d93497
3 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Программа мамы</title> <title>NVK&SNZ</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

5
src/App.vue
View File

@ -60,6 +60,7 @@ const createResultRow = (label, value) => {
value: steps.join(' → '), value: steps.join(' → '),
image: digitImages[`../${finalDigit}.svg`], image: digitImages[`../${finalDigit}.svg`],
imageAlt: `Цифра ${finalDigit}`, imageAlt: `Цифра ${finalDigit}`,
imageClass: `digit-icon--${finalDigit}`,
}; };
}; };
@ -155,7 +156,9 @@ const reset = () => {
<span class="result-value"> <span class="result-value">
<span>{{ row.value }}</span> <span>{{ row.value }}</span>
<span aria-hidden="true">→</span> <span aria-hidden="true">→</span>
<img class="digit-icon" :src="row.image" :alt="row.imageAlt" /> <span class="digit-icon-frame">
<img class="digit-icon" :class="row.imageClass" :src="row.image" :alt="row.imageAlt" />
</span>
</span> </span>
</dd> </dd>
</template> </template>

40
src/styles.css
View File

@ -132,13 +132,39 @@ h1 {
gap: 10px; gap: 10px;
} }
.digit-icon { .digit-icon-frame {
width: 58px; width: 1.2em;
height: 58px; height: 1.2em;
object-fit: contain; display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
} }
.digit-icon {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(var(--digit-scale, 1.06));
transform-origin: center;
}
.digit-icon--6 {
--digit-scale: 0.75;
}
.digit-icon--7 {
--digit-scale: 0.75;
}
.digit-icon--8 {
--digit-scale: 0.75;
}
.digit-icon--9 {
--digit-scale: 0.75;
}
.result-button { .result-button {
justify-self: center; justify-self: center;
width: min(525px, 100%); width: min(525px, 100%);
@ -194,8 +220,8 @@ h1 {
font-size: 26px; font-size: 26px;
} }
.digit-icon { .digit-icon-frame {
width: 48px; width: 1.18em;
height: 48px; height: 1.18em;
} }
} }