Merge pull request #19 from natanielf/dev

Small style updates

Author: natanielf

assets/css/style.css

@@ -7,6 +7,7 @@
     --red: #EC1F28;
     --red-transparent: rgba(236, 31, 40, 0.75);
     --br: 8px;
+    --shadow-transition: all 0.25s ease-out;
     --dt-main: #000000;
     --dt-accent: #FFFFFF;
     --dt-content-bkgd: rgba(0, 0, 0, 0.75);
@@ -63,10 +64,13 @@ body {
     height: auto;
     display: grid;
     place-items: center;
+    background-color: var(--lt-main);
     border-style: solid;
     border-width: thin;
     border-color: var(--red);
     border-radius: var(--br);
+    -webkit-transition: var(--shadow-transition);
+    transition: var(--shadow-transition);
 }
 
 hr {
@@ -110,12 +114,14 @@ nav {
     overflow: hidden;
     z-index: 1;
     border-radius: var(--br);
-    -webkit-transition: all 0.25s ease-out;
-    transition: all 0.25s ease-out;
+    -webkit-transition: var(--shadow-transition);
+    transition: var(--shadow-transition);
 }
 
 nav:hover,
-nav:focus-within {
+nav:focus-within,
+.footer:hover,
+.footer:focus-within {
     -webkit-box-shadow: var(--lt-box-shadow);
     box-shadow: var(--lt-box-shadow);
 }
@@ -252,7 +258,7 @@ iframe {
     right: 0;
     width: 100%;
     height: 100%;
-    border-radius: var(--br);
+    border: none;
 }
 
 .logo-container {
@@ -330,12 +336,15 @@ canvas {
         box-shadow: var(--dt-box-shadow);
     }
 
-    nav {
+    nav,
+    .footer {
         background-color: var(--dt-main);
     }
 
     nav:hover,
-    nav:focus-within {
+    nav:focus-within,
+    .footer:hover,
+    .footer:focus-within {
         -webkit-box-shadow: var(--dt-box-shadow);
         box-shadow: var(--dt-box-shadow);
     }

assets/js/app.js

@@ -3,7 +3,7 @@ particlesJS('particles-js',
     {
         "particles": {
             "number": {
-                "value": 100,
+                "value": 90,
                 "density": {
                     "enable": true,
                     "value_area": 800

index.html

@@ -171,24 +171,24 @@ <h2>Nature Shots</h2>
         <h2>Check out my latest YouTube video:</h2>
 
         <div class="iframe-container">
-            <iframe title="My Latest YouTube Video" src="https://www.youtube.com/embed/2zy5Bbt_RDY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe title="My Latest YouTube Video" src="https://www.youtube.com/embed/2zy5Bbt_RDY" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
 
         <h2>Client Work</h2>
 
         <h3>"Snowfall On My Home" Music Video</h3>
         <div class="iframe-container">
-            <iframe title="Snowfall On My Home" src="https://www.youtube.com/embed/QDmmBW2WU0M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe title="Snowfall On My Home" src="https://www.youtube.com/embed/QDmmBW2WU0M" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
 
         <h3>"Prophet King of Lions" Music Video</h3>
         <div class="iframe-container">
-            <iframe title="Prophet King of Lions" src="https://www.youtube.com/embed/YzAtiBxJgDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe title="Prophet King of Lions" src="https://www.youtube.com/embed/YzAtiBxJgDo" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
 
         <h3>"A Flower Child" Music Video</h3>
         <div class="iframe-container">
-            <iframe title="A Flower Child" src="https://www.youtube.com/embed/xxs7sWJ2BvQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe title="A Flower Child" src="https://www.youtube.com/embed/xxs7sWJ2BvQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
 
         <hr>