From accd0ca0f6b546582cfad6b1b95b5c7252a45223 Mon Sep 17 00:00:00 2001
From: Ethan Paul <24588726+enpaul@users.noreply.github.com>
Date: Fri, 10 Feb 2023 01:14:00 -0500
Subject: [PATCH] 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)
---
css/style.css | 184 ++++++++++++++++++++++----------------------------
index.html | 24 +++----
2 files changed, 91 insertions(+), 117 deletions(-)
diff --git a/css/style.css b/css/style.css
index 8d639f9..aab17b9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,125 +3,102 @@
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: 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 {
- 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: white;
+ /* border-right-color: white; */
+ 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: white;
+ /* border-right-color: white; */
+ 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: 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;
@@ -133,4 +110,5 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
}
diff --git a/index.html b/index.html
index aa85d18..73ca1bc 100644
--- a/index.html
+++ b/index.html
@@ -19,24 +19,20 @@
-
-
+
+
+
+
+
+
+
+
+