Merge pull request #4 from natanielf/dev

Added @media (prefers-color-scheme: dark)
natanielf · Dec 8, 2020 · abe42c0 · abe42c0
2 parents 67e9d6e + b4ee677
commit abe42c0
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 9 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,12 +1,12 @@
 :root {
     --light-main: #FFFFFF;
-    --light-accent: #AAAAAA;
+    --light-accent: #000000;
     --light-content-bkgd: rgba(255, 255, 255, 0.8);
     --light-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     --red: #EC1F28;
     --red-transparent: rgba(236, 31, 40, 0.5);
     --dark-main: #000000;
-    --dark-accent: #AAAAAA;
+    --dark-accent: #FFFFFF;
     --dark-content-bkgd: rgba(0, 0, 0, 0.8);
     --dark-box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
 }
@@ -29,7 +29,7 @@ html {
 body {
     margin: 0;
     background-color: var(--light-main);
-    color: #000000;
+    color: var(--light-accent);
     font-family: Space-Grotesk, sans-serif, Arial;
     text-align: center;
 }
@@ -103,14 +103,14 @@ nav a {
 
 a:link,
 a:visited {
-    color: #000000;
+    color: var(--light-accent);
     text-decoration: underline;
     border-radius: 8px;
 }
 
 a:hover,
 a:active {
-    color: #000000;
+    color: var(--light-accent);
     background-color: var(--red);
     text-decoration: none;
 }
@@ -137,7 +137,10 @@ img {
     height: auto;
     overflow: hidden;
     border-radius: 8px;
-    background-color: #FFFFFF;
+    background-color: var(--light-main);
+    border-style: solid;
+    border-width: thin;
+    border-color: var(--red);
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
@@ -210,7 +213,6 @@ img {
     width: 100%;
     padding-top: 56.25%;
     /* 16:9 Aspect Ratio ( 9/16 = 0.5625) */
-    margin-top: 2rem;
 }
 
 iframe {
@@ -234,8 +236,8 @@ iframe {
 
 /* Track */
 ::-webkit-scrollbar-track {
-    background: var(--bkgd);
-    -webkit-box-shadow: inset 0 0 8px var(--light-main);
+    background: var(--light-main);
+    -webkit-box-shadow: inset 0 0 8px var(--light-accent);
     box-shadow: inset 0 0 8px var(--light-accent);
     border-radius: 8px;
 }
@@ -269,3 +271,64 @@ canvas {
     background-position: 50% 50%;
     /* background-repeat: no-repeat; Useful when using a texture */
 }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: var(--dark-main);
+        color: var(--dark-accent);
+    }
+
+    .content {
+        background-color: var(--dark-content-bkgd);
+        -webkit-box-shadow: var(--dark-box-shadow);
+        box-shadow: var(--dark-box-shadow);
+    }
+
+    nav {
+        background-color: var(--dark-main);
+    }
+
+    nav:hover {
+        -webkit-box-shadow: var(--dark-box-shadow);
+        box-shadow: var(--dark-box-shadow);
+    }
+
+    a:link,
+    a:visited {
+        background-color: var(--dark-main);
+        color: var(--dark-accent);
+    }
+
+    a:hover,
+    a:active {
+        color: var(--dark-accent);
+        background-color: var(--red);
+    }
+
+    .view .mask {
+        background-color: var(--dark-main);
+    }
+
+    .view h3 {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .view:hover .mask {
+        -webkit-box-shadow: var(--dark-box-shadow);
+        box-shadow: var(--dark-box-shadow);
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--dark-main);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        -webkit-box-shadow: inset 0 0 8px var(--dark-accent);
+        box-shadow: inset 0 0 8px var(--dark-accent);
+    }
+
+    #particles-js {
+        background-color: var(--dark-main);
+    }
+
+}
diff --git a/index.html b/index.html
@@ -150,6 +150,11 @@ <h2>Nature Shots</h2>
             <img src="images/nature_4.jpg" alt="Nature Photo 4">
         </div>
 
+        <h2>Check out my latest YouTube video:</h2>
+        <div class="iframe-container">
+            <iframe src="https://www.youtube.com/embed/2zy5Bbt_RDY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+
         <h1 id="contact_info">Contact Info</h1>
         <h2>Email: <a href="mailto:natanielfarzan@gmail.com" target="_blank">natanielfarzan@gmail.com</a></h2>