diff --git a/src/css/clock.css b/src/css/clock.css index dea02e6..b63db0a 100644 --- a/src/css/clock.css +++ b/src/css/clock.css @@ -2,27 +2,46 @@ position: fixed; display: flex; flex-direction: row; - gap: 10px; - overflow-y: hidden; + /* gap: 10px; */ + overflow: hidden; align-items: start; justify-content: start; height: 100px; transition: opacity .2s; /* opacity: 0; */ mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent ); -} #clock > .digit { - display: flex; - flex-direction: column; - align-items: start; - justify-content: start; - transition: transform .4s; - gap: 0; -} #clock > .digit > span { - font-weight: 800; - font-size: 80px; - font-family: 'Nunito'; - margin: 0; - padding: 0; -} #clock > .digit.l { - transform: translateY(-7px); -} \ No newline at end of file + + .digit { + display: flex; + flex-direction: column; + align-items: start; + justify-content: start; + transition: transform .4s; + gap: 0; + + span { + font-weight: 800; + font-size: 80px; + height: 100px; + font-family: 'Nunito'; + 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; + } + } +} \ No newline at end of file diff --git a/src/js/builtin.js b/src/js/builtin.js index 58a9fd3..04681bc 100644 --- a/src/js/builtin.js +++ b/src/js/builtin.js @@ -1,6 +1,6 @@ const clock = 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 time = new Date() var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat()