Update branding to use new skylab naming and colors

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-04-14 13:32:37 -04:00 · 2023-02-10 01:14:00 -05:00 · 2023-02-09 23:24:19 -05:00 · 2022-05-06 15:52:51 -04:00 · 2022-05-06 15:41:57 -04:00
3 changed files with 90 additions and 174 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -3,125 +3,95 @@
    font-family: Verdana;
  }
  body {
-    background-color: black;
+    background-color: #111;
  }
-  a {
-    color: white;
-  }
-  #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 {
+
+  a { 
+    color: inherit; 
    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;
-    border-left-style: solid;
-    border-left-width: 2px;
-    border-right-color: grey;
-    border-right-style: solid;
-    border-right-width: 2px;
+  
+  #container {
+    width: 270px;
+    margin-left: calc(50% - 135px);  /* Half the page minus half the width */
+    margin-top: 20%;
  }
-  .app-link .subtitle {
-    font-style: italic;
-    font-size: .9rem;
-    margin-top: .5rem;
+  
+  .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: relative;
-    top: 150px;
-    left: 50%;
-    margin-left: -40px;
+    position: absolute;
+    margin: 95px;
  }
-  .rotate {
-    -webkit-animation:spin 7s linear infinite;
-    -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;
+  .arc {
+    position: absolute;
    border-radius: 50%;
-    border-top:5px solid black;
-    border-right:5px solid white;
-    border-left:5px solid black;
-    border-bottom:5px solid black;
+    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: #1c70d8;
+    margin: 5px;  /* Margin is equal to half of the difference between the arc's diameter and the container width */
  }
  .arc-1 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -95px 0 0 -95px;
-    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;
+    width:230px;
+    height:230px;
+    border-left-color: #1c70d8;
+    margin: 15px;
  }
  .arc-2 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -80px 0 0 -80px;
-    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;
+    width:210px;
+    height:210px;
+    border-left-color: #1c70d8;
+    margin: 25px;
  }
  .arc-3 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -65px 0 0 -65px;
-    width:120px;
-    height:120px;
-    border-radius:50%;
-    border-top:5px solid white;
-    border-right:5px solid black;
-    border-left:5px solid black;
-    border-bottom:5px solid black;
+    width:190px;
+    height:190px;
+    border-right-color: #1c70d8;
+    margin: 35px;
+  }
+  .arc-4 {
+    width:170px;
+    height:170px;
+    border-top-color: #1c70d8;
+    margin: 45px;
+  }
+  .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 {
  color: grey;
@@ -133,4 +103,5 @@ footer {
  position: fixed;
  bottom: 0;
  text-align: center;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
--- a/index.html
+++ b/index.html
@@ -7,39 +7,32 @@
    <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>ENP.One</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">
+    <title>SkyLab</title>
+    <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/skylab/satellite.svg">
+    <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/skylab/satellite_16.png" sizes="16x16">

    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <div id="container">
-      <img id="logo" src="https://cdn.enp.one/img/logos/e-w-sm.png"/>
-      <div class="arc-outside rotate">
-        <div class="arc-1 rotate">
-          <div class="arc-2 rotate">
-            <div class="arc-3 rotate">
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="links">
-        <div class="link">
-          <a href="https://enp.one/services/">services</a>
-        </div>
-        <div class="link">
-          <a href="https://enpaul.net/">home</a>
-        </div>
-      </div>
+      <img id="logo" src="https://cdn.enp.one/img/logos/skylab/satellite.svg"/>
+      <div class="arc arc-shadow arc-0 rotate-clock"></div>
+      <div class="arc arc-0 rotate-clock"></div>
+      <div class="arc arc-1 rotate-anticlock"></div>
+      <div class="arc arc-2 rotate-clock"></div>
+      <div class="arc arc-3 rotate-anticlock"></div>
+      <div class="arc arc-4 rotate-clock"></div>
+      <div class="arc arc-5 rotate-anticlock"></div>
+      <div class="arc arc-6 rotate-clock"></div>
+      <div class="arc arc-7 rotate-anticlock"></div>
    </div>
  </body>

  <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>
  </footer>
 </html>
--- a/services/index.html
+++ b/services/index.html
@@ -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>
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