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

merge bessere-version-wie-von-moritz #1

Merged
Alpha merged 3 commits from 123niel/Time-Service:bessere-version-wie-von-moritz into master 2019-01-15 10:55:59 +00:00
Conversation 3 Commits 3 Files changed 5 +44 -44
2 changed files with 44 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e93fc12f42 - Show all commits

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