clock position fix

This commit is contained in:
синечка ♡ 2026-03-21 23:42:34 +03:00
parent 291772fe8f
commit cc10197053
2 changed files with 38 additions and 19 deletions

View file

@ -2,27 +2,46 @@
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; /* gap: 10px; */
overflow-y: hidden; overflow: hidden;
align-items: start; align-items: start;
justify-content: start; justify-content: start;
height: 100px; height: 100px;
transition: opacity .2s; transition: opacity .2s;
/* opacity: 0; */ /* opacity: 0; */
mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent ); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent );
} #clock > .digit {
display: flex; .digit {
flex-direction: column; display: flex;
align-items: start; flex-direction: column;
justify-content: start; align-items: start;
transition: transform .4s; justify-content: start;
gap: 0; transition: transform .4s;
} #clock > .digit > span { gap: 0;
font-weight: 800;
font-size: 80px; span {
font-family: 'Nunito'; font-weight: 800;
margin: 0; font-size: 80px;
padding: 0; height: 100px;
} #clock > .digit.l { font-family: 'Nunito';
transform: translateY(-7px); margin: 0;
padding: 0;
}
}
:not(.l) {
margin: 0 3px;
}
.l {
opacity: 0.5;
transform: translateY(-2px);
width: auto !important;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
span {
font-weight: normal;
height: auto !important;
}
}
} }

View file

@ -1,6 +1,6 @@
const clock = async () => { const clock = async () => {
const render = async () => { const render = async () => {
const baseOffset = 109.12 const baseOffset = 100
const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset) const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset)
const time = new Date() const time = new Date()
var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat() var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat()