clock position fix
This commit is contained in:
parent
291772fe8f
commit
cc10197053
2 changed files with 38 additions and 19 deletions
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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()
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue