Cliffbreak/Time-Service
3
1
Fork 1
Code Issues Pull requests Releases Wiki Activity

added font-file

Browse source
This commit is contained in:
Niel 2019-01-10 22:09:13 +01:00
parent 84417580d2
commit e93fc12f42
2 changed files with 44 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
page/css/BebasNeue Regular.ttf Executable file
View file

Binary file not shown.

88
page/css/clock.css
View file

@ -1,70 +1,67 @@
/* If you want you can use font-face */ /* If you want you can use font-face */
@font-face { @font-face {
font-family: 'BebasNeueRegular'; font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot'); src: url('BebasNeue\ Regular.ttf') format('truetype');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), font-weight: normal;
url('BebasNeue-webfont.woff') format('woff'), font-style: normal;
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
} }
body, html { body,
html {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
user-select: none; user-select: none;
} }
.clock { .clock {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 30px; padding: 30px;
color: #fff; color: #fff;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
animation-name: show; animation-name: show;
animation-duration: 3s; animation-duration: 3s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
pointer-events: none; pointer-events: none;
} }
#date { #date {
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
text-shadow: 0 0 5px #00c6ff; text-shadow: 0 0 5px #00c6ff;
} }
ul { ul {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 0px; padding: 0px;
list-style: none; list-style: none;
text-align: center; text-align: center;
} }
ul li { ul li {
display: inline; display: inline;
font-size: 10em; font-size: 10em;
text-align: center; text-align: center;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 5px #00c6ff; text-shadow: 0 0 5px #00c6ff;
} }
.point { .point {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
animation: flash 1s ease infinite; animation: flash 1s ease infinite;
top: -11px; top: -11px;
opacity: 0; opacity: 0;
} }
@keyframes flash { @keyframes flash {
@ -72,10 +69,12 @@ ul li {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
} }
50% { 50% {
opacity: 1.0; opacity: 1.0;
text-shadow: 0 0 20px #00c6ff; text-shadow: 0 0 20px #00c6ff;
} }
100% { 100% {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
@ -86,6 +85,7 @@ ul li {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }