Ethan Paul
accd0ca0f6
Fix issue with spinning arcs causing constant dynamic page geometry changes Add more spinning Lessen background gradient Finally fix the seriff font issue Clean up design to be more Modern(tm)
115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
html {
|
|
color: white;
|
|
font-family: Verdana;
|
|
}
|
|
body {
|
|
background-color: #111;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-shadow: 0px 0px 2px #fff;
|
|
}
|
|
|
|
#container {
|
|
width: 270px;
|
|
margin-left: calc(50% - 135px); /* Half the page minus half the width */
|
|
margin-top: 20%;
|
|
}
|
|
|
|
.rotate-clock {
|
|
-webkit-animation:spin-clock 7s linear infinite;
|
|
-moz-animation:spin-clock 7s linear infinite;
|
|
animation:spin-clock 7s linear infinite;
|
|
}
|
|
.rotate-anticlock {
|
|
-webkit-animation:spin-anticlock 5s linear infinite;
|
|
-moz-animation:spin-anticlock 5s linear infinite;
|
|
animation:spin-anticlock 5s linear infinite;
|
|
}
|
|
@-moz-keyframes spin-clock { 100% { -moz-transform: rotate(360deg); } }
|
|
@-webkit-keyframes spin-clock { 100% { -webkit-transform: rotate(360deg); } }
|
|
@keyframes spin-clock { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
|
@-moz-keyframes spin-anticlock { 100% { -moz-transform: rotate(-360deg); } }
|
|
@-webkit-keyframes spin-anticlock { 100% { -webkit-transform: rotate(-360deg); } }
|
|
@keyframes spin-anticlock { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
|
|
|
|
#logo {
|
|
width: 80px;
|
|
position: absolute;
|
|
margin: 95px;
|
|
}
|
|
.arc {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border-color: rgba(0,0,0,0);
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.arc-0 {
|
|
width:250px; /* Gap between arcs is 20px */
|
|
height:250px;
|
|
border-right-color: white;
|
|
/* border-left-color: white; */
|
|
margin: 5px; /* Margin is equal to half of the difference between the arc's diameter and the container width */
|
|
}
|
|
.arc-1 {
|
|
width:230px;
|
|
height:230px;
|
|
border-left-color: white;
|
|
/* border-right-color: white; */
|
|
margin: 15px;
|
|
}
|
|
.arc-2 {
|
|
width:210px;
|
|
height:210px;
|
|
border-left-color: white;
|
|
/* border-right-color: white; */
|
|
margin: 25px;
|
|
}
|
|
.arc-3 {
|
|
width:190px;
|
|
height:190px;
|
|
border-right-color: white;
|
|
/* border-left-color: white; */
|
|
margin: 35px;
|
|
}
|
|
.arc-4 {
|
|
width:170px;
|
|
height:170px;
|
|
border-top-color: white;
|
|
/* border-bottom-color: white; */
|
|
margin: 45px;
|
|
}
|
|
.arc-5 {
|
|
width:150px;
|
|
height:150px;
|
|
border-top-color: white;
|
|
/* border-bottom-color: white; */
|
|
margin: 55px;
|
|
}
|
|
.arc-6 {
|
|
width:130px;
|
|
height:130px;
|
|
border-bottom-color: white;
|
|
/* border-top-color: white; */
|
|
margin: 65px;
|
|
}
|
|
footer {
|
|
color: grey;
|
|
padding-bottom: 1rem;
|
|
font-size: .8rem;
|
|
padding-left: 50%;
|
|
margin-left: -5rem;
|
|
width: 10rem;
|
|
position: fixed;
|
|
bottom: 0;
|
|
text-align: center;
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
}
|