73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
html {
|
|
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: #000;
|
|
color: #858585;
|
|
}
|
|
|
|
::selection {
|
|
background: #000;
|
|
color: #858585;
|
|
}
|
|
|
|
.clock {
|
|
font-size: 45vmin;
|
|
line-height: 0.8;
|
|
position: static;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
font-style: italic;
|
|
font-weight: 1000;
|
|
letter-spacing: -0.05em;
|
|
font-variant-numeric: tabular-nums;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.clock-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: grid;
|
|
place-content: center;
|
|
background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 0.025em, #fff 0.05em);
|
|
filter: contrast(2000%);
|
|
}
|
|
|
|
.numbers {
|
|
font-size: 1em;
|
|
filter: blur(0.0125em);
|
|
transform: rotate(6deg);
|
|
opacity: 0.46;
|
|
}
|
|
|
|
.hour {
|
|
transform: translatex(0.2em);
|
|
}
|
|
|
|
.min {
|
|
transform: translatex(-0.2em);
|
|
}
|
|
|
|
.clock-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
mix-blend-mode: lighten;
|
|
pointer-events: none;
|
|
background: repeating-radial-gradient(circle at -150% -25% , #f7b232 0em, #f7b232 0.05em, #e12626 0.05em, #e12626 0.1em, #733d2c 0.1em, #733d2c 0.15em, #2b1d1d 0.15em, #2b1d1d 0.2em, #511c69 0.2em, #511c69 0.25em, #1c73c4 0.25em, #1c73c4 0.3em, #a0cdfb 0.3em, #a0cdfb 0.35em, #69d6ad 0.35em, #69d6ad 0.4em, #ffcd04 0.4em, #ffcd04 0.45em, #fbaaaa 0.45em, #fbaaaa 0.5em);
|
|
} |