Add Christmas Background image (#248)

fixes #242 * add CSS * add images * remove christmas tree images * remove christmas tree images
KendallDoesCoding · Mar 25, 2022 · 16e60d4 · 16e60d4
1 parent 0ac10da
commit 16e60d4
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 82 deletions.
diff --git a/images/dark-bg.png b/images/dark-bg.png
diff --git a/images/light-bg.png b/images/light-bg.png
diff --git a/index.html b/index.html
@@ -72,14 +72,6 @@ <h1 class="heading">A very Mogul Christmas</h1>
                <i id="grey" class="fab fa-github"></i>
             </div>
       </div>
-  <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    </body>
    <script type="text/javascript" src="scripts/christmasday.js"></script>
    <script type="text/javascript" src="index.js"></script>            

diff --git a/lyrics/alliwantforchristmas/index.html b/lyrics/alliwantforchristmas/index.html
@@ -35,14 +35,6 @@ <h1 class="heading"> All I Want For Christmas Lyrics</h1>
          <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
       </div>   
    </body>
-  <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/lyrics/babyitscoldoutside/index.html b/lyrics/babyitscoldoutside/index.html
@@ -36,14 +36,6 @@ <h1 class="heading"> Baby It's Cold Outside Lyrics</h1>
          <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
       </div>
    </body>
-   <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/lyrics/christmassong/index.html b/lyrics/christmassong/index.html
@@ -35,14 +35,6 @@ <h1 class="heading"> The Christmas Song Lyrics</h1>
          <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
       </div>
    </body>
-   <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/lyrics/index.html b/lyrics/index.html
@@ -44,13 +44,5 @@ <h1 class="heading">Lyrics of songs in the playlist!</h1>
       <p><a href="/lyrics/alliwantforchristmas">All I Want For Christmas</a></p>
     </div>
   </body>
-  <div class="christmas-tree-images">
-    <div class="image-a">
-      <img src="/images/christmastree.png" />
-    </div>
-    <div class="image-b">
-      <img src="/images/christmastree.png" />
-    </div>
-  </div>
   <script type="text/javascript" src="darkmode.js"></script>
 </html>
diff --git a/lyrics/lastchristmas/index.html b/lyrics/lastchristmas/index.html
@@ -35,14 +35,6 @@ <h1 class="heading"> Last Christmas Lyrics</h1>
       <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
    </div>
    </body>
-   <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/lyrics/littlesaintnick/index.html b/lyrics/littlesaintnick/index.html
@@ -35,14 +35,6 @@ <h1 class="heading">Little Saint Nick Lyrics</h1>
          <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
       </div>
    </body>
-   <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/lyrics/wonderfultimeoftheyear/index.html b/lyrics/wonderfultimeoftheyear/index.html
@@ -35,14 +35,6 @@ <h1 class="heading">The Most Wonderful Time Of The Year Lyrics</h1>
          <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
       </div>
    </body>
-  <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
-</div>
    <script src="../lyrics.js"></script>
    <script src="index.js"></script>
 </html>
diff --git a/styles.css b/styles.css
@@ -14,28 +14,34 @@
   --font-color-heading2: #1abc9c;
   --font-color-sub-heading: #d35400;
   --font-color-christmas_message: violet;
-  --lyrics-text-color: #1abc9c;
+  --lyrics-text-color: red;
   --yml-btn: #1abc9c;
   --rate-song-btn: purple;
   --grey: black;
   font-family: "Roboto", sans-serif;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  --bg-image: url("/images/light-bg.png");
 }
 
 .darkMode {
-  --bg-color: #121212;
+  --bg-color: white;
   --font-color-red: red;
-  --font-color-blue: aqua;
+  --font-color-blue: blue;
   --ludsocials-color-blue: yellow;
-  --font-color-heading: lightgreen;
+  --font-color-heading: #1abc9c;
   --ludsocials-color-heading: green;
-  --font-color-heading2: lime;
-  --font-color-sub-heading: #f5b041;
-  --font-color-christmas_message: pink;
-  --lyrics-text-color: lime;
-  --yml-btn: yellow;
-  --rate-song-btn: violet;
-  --grey: grey;
+  --font-color-heading2: #1abc9c;
+  --font-color-sub-heading: #d35400;
+  --font-color-christmas_message: violet;
+  --lyrics-text-color: red;
+  --yml-btn: #1abc9c;
+  --rate-song-btn: purple;
+  --grey: black;
   font-family: "Roboto", sans-serif;
+  --bg-image: url("/images/dark-bg.png");
 }
 
 /* Body */
@@ -60,6 +66,11 @@ body {
   background-repeat: no-repeat, no-repeat;
   background-position: right bottom, left bottom;
   background-color: var(--bg-color);
+  background: var(--bg-image) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 
 /* Headings, etc */

diff --git a/you-may-like/index.html b/you-may-like/index.html
@@ -51,13 +51,6 @@ <h1 class="heading"> You May Also Like</h1>
       </div>
       <div class="container">
    </body>
-  <div class="christmas-tree-images">
-     <div class="image-a">
-    <img src="/images/christmastree.png">
- </div>
-     <div class="image-b">
-    <img src="/images/christmastree.png">
- </div>
    <script type="text/javascript" src="/scripts/christmasday.js"></script>
    <script src="random-song.js"></script>
     <script src="darkmode.js"></script>