skylab/enp.one
Archived
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Compare commits

base: skylab:13c93c0af2bd49398c1cd9467e1cc32ea9fd0b83
Branches Tags
skylab:devel
...
compare: skylab:devel
Branches Tags
skylab:devel

5 Commits
13c93c0af2 ... devel

Author SHA1 Message Date
Ethan Paul
abc7e2cadc Update branding to use new skylab naming and colors 2023-04-14 13:32:37 -04:00
Ethan Paul
accd0ca0f6 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)
 2023-02-10 01:14:00 -05:00
Ethan Paul
339d52457d Update page title and copywrite year 2023-02-09 23:24:19 -05:00
Ethan Paul
c8e0616171 Update copyright 2022-05-06 15:52:51 -04:00
Ethan Paul
fa093d8ab5 Remove services page 2022-05-06 15:41:57 -04:00
3 changed files with 90 additions and 174 deletions
Expand all files Collapse all files

177
css/style.css
View File

@@ -3,125 +3,95 @@
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: #1c70d8;
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: #1c70d8;
margin: -95px 0 0 -95px; margin: 15px;
width:180px;
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: #1c70d8;
margin: -80px 0 0 -80px; margin: 25px;
width:150px;
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: #1c70d8;
margin: -65px 0 0 -65px; margin: 35px;
width:120px; }
height:120px; .arc-4 {
border-radius:50%; width:170px;
border-top:5px solid white; height:170px;
border-right:5px solid black; border-top-color: #1c70d8;
border-left:5px solid black; margin: 45px;
border-bottom:5px solid black; }
.arc-5 {
width:150px;
height:150px;
border-top-color: #1c70d8;
margin: 55px;
}
.arc-6 {
width:130px;
height:130px;
border-bottom-color: #1c70d8;
margin: 65px;
} }
footer { footer {
color: grey; color: grey;
@@ -133,4 +103,5 @@ footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
text-align: center; text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} }

39
index.html
View File

@@ -7,39 +7,32 @@
<meta name="author" content="admin@enp.one"/> <meta name="author" content="admin@enp.one"/>
<meta name="keywords" content="enpaul, network, operations, networking, plex, media, server, adds, active, directory, wpi, worcester, polytechnic, institute, boston, mechanical, engineering, solidworks, home, lab, homelab, solid, works, autocad, cad, domain, windows, server, omnipod, open, omni, diy, pancreas, t1d, type, one, diabetes, diabetic"/> <meta name="keywords" content="enpaul, network, operations, networking, plex, media, server, adds, active, directory, wpi, worcester, polytechnic, institute, boston, mechanical, engineering, solidworks, home, lab, homelab, solid, works, autocad, cad, domain, windows, server, omnipod, open, omni, diy, pancreas, t1d, type, one, diabetes, diabetic"/>
<title>ENP.One</title> <title>SkyLab</title>
<link rel="shortcut icon" href="https://cdn.enp.one/img/logos/e-b-sm.png"> <link rel="shortcut icon" href="https://cdn.enp.one/img/logos/skylab/satellite.svg">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/e-b-sm.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/skylab/satellite.svg">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="32x32"> <link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/skylab/satellite_32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="16x16"> <link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/skylab/satellite_16.png" sizes="16x16">
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
</head> </head>
<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/skylab/satellite.svg"/>
<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://enp.one/services/">services</a>
</div>
<div class="link">
<a href="https://enpaul.net/">home</a>
</div>
</div>
</div> </div>
</body> </body>
<footer> <footer>
&copy;2021 E.N.Paul<br> &copy;2023 <a href="https://enpaul.net/">enpaul</a>&nbsp;-&nbsp;
<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>

48
services/index.html
View File

@@ -1,48 +0,0 @@
<html>
<head>
<!-- Web crawler and search indexing meta -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="admin@enp.one"/>
<meta name="keywords" content="enpaul, network, operations, networking, plex, media, server, adds, active, directory, wpi, worcester, polytechnic, institute, boston, mechanical, engineering, solidworks, home, lab, homelab, solid, works, autocad, cad, domain, windows, server, omnipod, open, omni, diy, pancreas, t1d, type, one, diabetes, diabetic"/>
<title>Apps</title>
<link rel="shortcut icon" href="https://cdn.enp.one/img/logos/e-b-sm.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/e-b-sm.png">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="16x16">
<link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div id="links">
<div class="app-link">
<a href="https://cdn.enp.one/">Content Delivery Network</a><br>
<span class="subtitle">powered by <a href="https://www.digitalocean.com/">DigitalOcean</a></span>
</div>
<div class="app-link">
<a href="https://pms.enp.one/">Plex Media Server</a><br>
<span class="subtitle">powered by <a href="https://plex.tv/">Plex</a></span>
</div>
<div class="app-link">
<a href="https://ssv.enp.one/">Secure Storage Vault</a><br>
<span class="subtitle">powered by <a href="https://bitwarden.com/">Bitwarden</a></span>
</div>
<div class="app-link">
<a href="https://vcs.enp.one/">Version Control System</a><br>
<span class="subtitle">powered by <a href="https://gitea.io/">Gitea</a></span>
</div>
<div class="app-link">
<a href="https://org.enp.one/">Organizational Subsystem</a><br>
<span class="subtitle">powered by <a href="https://vikunja.io/">Vikunja</a></span>
</div>
</div>
</body>
<footer>
&copy;2021 E.N.Paul<br>
<a href="https://vcs.enp.one/skylab/enp.one/">source</a>
</footer>
</html>