physics-simulations

commit 4350501edb8eb7cf730538cb047638a5784da3be
parent c67aafe3de02f141cdf453095bac2c9b67015112
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sun, 28 Mar 2021 20:55:03 -0700

Improve home page

Diffstat:
M
index.css
 | 
37
+++++++++++++++++++++++++++----------
M
index.html
 | 
16
++++++++--------

2 files changed, 35 insertions(+), 18 deletions(-)
diff --git a/index.css b/index.css
@@ -1,27 +1,44 @@
+/* default styles */
 * {
     padding: 0px;
     margin: 0px;
     box-sizing: border-box;
     font-family: Segoe UI, sans-serif;
+    transition-duration: 0.25s;
+    text-align: center;
 }
 
-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
+/* page header */
 header {
     background-color: #48d1cc;
     width: 100%;
-    text-align: center;
     padding: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 }
 header h1 {
     font-size: 25px;
 }
 
-p {
-    margin-bottom: 5px;
+/* simulation links */
+#simulationLinks {
+    padding: 15px;
+    padding-top: 0px;
+}
+#simulationLinks a {
+    display: inline-block;
+    margin: 15px;
+    line-height: 50px;
+    width: 200px;
+    background-color: #E0E0E0;
+    color: #000000;
+    text-decoration: none;
+}
+#simulationLinks a:hover, #simulationLinks a:focus {
+    box-shadow: 0 0 15px #808080;
+    transform: scale(1.1);
+}
+@media only screen and (max-width: 500px) {
+    #simulationLinks a {
+        width: calc(100% - 30px);
+    }
 }
diff --git a/index.html b/index.html
@@ -18,13 +18,13 @@
 
         <p>A collection of physics simulations</p>
 
-        <ul>
-            <li><a title="Atwood Machine" href="simulations/atwood-machine.html">Atwood Machine</a></li>
-            <li><a title="Circular Motion" href="simulations/circular-motion.html">Circular Motion</a></li>
-            <li><a title="Horizontal Motion" href="simulations/horizontal-motion.html">Horizontal Motion</a></li>
-            <li><a title="Projectile Motion" href="simulations/projectile-motion.html">Projectile Motion</a></li>
-            <li><a title="Simple Pendulum" href="simulations/simple-pendulum.html">Simple Pendulum</a></li>
-            <li><a title="Spring-Mass System" href="simulations/spring-mass-system.html">Spring-Mass System</a></li>
-        </ul>
+        <div id="simulationLinks">
+            <a title="Atwood Machine" href="simulations/atwood-machine.html">Atwood Machine</a>
+            <a title="Circular Motion" href="simulations/circular-motion.html">Circular Motion</a>
+            <a title="Horizontal Motion" href="simulations/horizontal-motion.html">Horizontal Motion</a>
+            <a title="Projectile Motion" href="simulations/projectile-motion.html">Projectile Motion</a>
+            <a title="Simple Pendulum" href="simulations/simple-pendulum.html">Simple Pendulum</a>
+            <a title="Spring-Mass System" href="simulations/spring-mass-system.html">Spring-Mass System</a>
+        </div>
     </body>
 </html>