Update mainpage styling
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)
This commit is contained in:
parent
339d52457d
commit
accd0ca0f6
GPG Key ID:
DAF443CA3A2FA6FA
184
css/style.css
184
css/style.css
@ -3,125 +3,102 @@
|
|||||||
font-family: Verdana;
|
font-family: Verdana;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background-color: black;
|
background-color: #111;
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
color: white;
|
a {
|
||||||
}
|
color: inherit;
|
||||||
#container {
|
|
||||||
width: 50%;
|
|
||||||
margin-left: 25%;
|
|
||||||
margin-top: 10%;
|
|
||||||
}
|
|
||||||
#links {
|
|
||||||
line-height: 1.75rem;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 4rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
width: 50%;
|
|
||||||
padding: .25rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
.app-link {
|
|
||||||
width: 80%;
|
|
||||||
padding: .25rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
.link a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: Verdana;
|
|
||||||
}
|
}
|
||||||
.app-link a {
|
|
||||||
font-family: sans;
|
a:hover {
|
||||||
|
text-shadow: 0px 0px 2px #fff;
|
||||||
}
|
}
|
||||||
.link:hover {
|
|
||||||
border-left-color: grey;
|
#container {
|
||||||
border-left-style: solid;
|
width: 270px;
|
||||||
border-left-width: 2px;
|
margin-left: calc(50% - 135px); /* Half the page minus half the width */
|
||||||
border-right-color: grey;
|
margin-top: 20%;
|
||||||
border-right-style: solid;
|
|
||||||
border-right-width: 2px;
|
|
||||||
}
|
}
|
||||||
.app-link .subtitle {
|
|
||||||
font-style: italic;
|
.rotate-clock {
|
||||||
font-size: .9rem;
|
-webkit-animation:spin-clock 7s linear infinite;
|
||||||
margin-top: .5rem;
|
-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 {
|
#logo {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
position: relative;
|
position: absolute;
|
||||||
top: 150px;
|
margin: 95px;
|
||||||
left: 50%;
|
|
||||||
margin-left: -40px;
|
|
||||||
}
|
}
|
||||||
.rotate {
|
.arc {
|
||||||
-webkit-animation:spin 7s linear infinite;
|
position: absolute;
|
||||||
-moz-animation:spin 7s linear infinite;
|
|
||||||
animation:spin 7s linear infinite;
|
|
||||||
}
|
|
||||||
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
|
||||||
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
|
||||||
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
|
||||||
.arc-outside {
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
width:210px;
|
|
||||||
height:210px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border-top:5px solid black;
|
border-color: rgba(0,0,0,0);
|
||||||
border-right:5px solid white;
|
border-width: 5px;
|
||||||
border-left:5px solid black;
|
border-style: solid;
|
||||||
border-bottom:5px solid black;
|
}
|
||||||
|
|
||||||
|
.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 {
|
.arc-1 {
|
||||||
position: relative;
|
width:230px;
|
||||||
top: 50%;
|
height:230px;
|
||||||
left: 50%;
|
border-left-color: white;
|
||||||
margin: -95px 0 0 -95px;
|
/* border-right-color: white; */
|
||||||
width:180px;
|
margin: 15px;
|
||||||
height:180px;
|
|
||||||
border-radius:50%;
|
|
||||||
border-top:5px solid black;
|
|
||||||
border-right:5px solid black;
|
|
||||||
border-left:5px solid black;
|
|
||||||
border-bottom:5px solid white;
|
|
||||||
}
|
}
|
||||||
.arc-2 {
|
.arc-2 {
|
||||||
position: relative;
|
width:210px;
|
||||||
top: 50%;
|
height:210px;
|
||||||
left: 50%;
|
border-left-color: white;
|
||||||
margin: -80px 0 0 -80px;
|
/* border-right-color: white; */
|
||||||
width:150px;
|
margin: 25px;
|
||||||
height:150px;
|
|
||||||
border-radius:50%;
|
|
||||||
border-top:5px solid black;
|
|
||||||
border-right:5px solid black;
|
|
||||||
border-left:5px solid white;
|
|
||||||
border-bottom:5px solid black;
|
|
||||||
}
|
}
|
||||||
.arc-3 {
|
.arc-3 {
|
||||||
position: relative;
|
width:190px;
|
||||||
top: 50%;
|
height:190px;
|
||||||
left: 50%;
|
border-right-color: white;
|
||||||
margin: -65px 0 0 -65px;
|
/* border-left-color: white; */
|
||||||
width:120px;
|
margin: 35px;
|
||||||
height:120px;
|
}
|
||||||
border-radius:50%;
|
.arc-4 {
|
||||||
border-top:5px solid white;
|
width:170px;
|
||||||
border-right:5px solid black;
|
height:170px;
|
||||||
border-left:5px solid black;
|
border-top-color: white;
|
||||||
border-bottom:5px solid black;
|
/* 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 {
|
footer {
|
||||||
color: grey;
|
color: grey;
|
||||||
@ -133,4 +110,5 @@ footer {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
24
index.html
24
index.html
@ -19,24 +19,20 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<img id="logo" src="https://cdn.enp.one/img/logos/e-w-sm.png"/>
|
<img id="logo" src="https://cdn.enp.one/img/logos/e-w-sm.png"/>
|
||||||
<div class="arc-outside rotate">
|
<div class="arc arc-shadow arc-0 rotate-clock"></div>
|
||||||
<div class="arc-1 rotate">
|
<div class="arc arc-0 rotate-clock"></div>
|
||||||
<div class="arc-2 rotate">
|
<div class="arc arc-1 rotate-anticlock"></div>
|
||||||
<div class="arc-3 rotate">
|
<div class="arc arc-2 rotate-clock"></div>
|
||||||
</div>
|
<div class="arc arc-3 rotate-anticlock"></div>
|
||||||
</div>
|
<div class="arc arc-4 rotate-clock"></div>
|
||||||
</div>
|
<div class="arc arc-5 rotate-anticlock"></div>
|
||||||
</div>
|
<div class="arc arc-6 rotate-clock"></div>
|
||||||
<div id="links">
|
<div class="arc arc-7 rotate-anticlock"></div>
|
||||||
<div class="link">
|
|
||||||
<a href="https://enpaul.net/">about</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
©2023 E.N.Paul<br>
|
©2023 <a href="https://enpaul.net/">enpaul</a> -
|
||||||
<a href="https://vcs.enp.one/skylab/enp.one/">source</a>
|
<a href="https://vcs.enp.one/skylab/enp.one/">source</a>
|
||||||
</footer>
|
</footer>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user