Keep shadows as classes

victrme · Nov 17, 2019 · 50f6bbf · 50f6bbf
1 parent 2578775
commit 50f6bbf
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -44,13 +44,13 @@
 
 	<div id="background"></div>
 
-	<div id="showSettings">
+	<div id="showSettings" class="distract">
 		<button><img src="src/images/icons/gear.png"></button>
 	</div>
 
-	<div id="interface">
+	<div id="interface" class="distract">
 		<div id="time">
-			<img src="src/images/shadow.png" id="shadow" draggable="false" defer>
+			<img src="src/images/shadow.png" class="shadow" draggable="false" defer>
 			<div class="time-container">
 				<div id="clock"></div>
 			</div>
@@ -63,7 +63,7 @@
 		</div>
 
 		<div id="main">
-			<img src="src/images/shadow.png" id="shadow" draggable="false" defer>
+			<img src="src/images/shadow.png" class="shadow" draggable="false" defer>
 			<h3 id="greetings"></h3>
 			<div id="weather">
 				<div class="w_desc_container">

diff --git a/src/styles/SCSS/_media.scss b/src/styles/SCSS/_media.scss
@@ -118,12 +118,12 @@ body.dark, body.autodark {
 	#interface {
 		font-size: .7em;
 
-		#time #shadow {
+		#time .shadow {
 			width: 39em;
 		}
 
 		#main {
-			#shadow {
+			.shadow {
 				width: 39em;
 			}
 

diff --git a/src/styles/SCSS/_mixins.scss b/src/styles/SCSS/_mixins.scss
@@ -49,7 +49,7 @@
 			align-items: center;
 
 			#widget {
-				opacity: 1;
+				opacity: 0;
 				height: 60px;
 				width: 60px;
 				border: none;

diff --git a/src/styles/SCSS/style.scss b/src/styles/SCSS/style.scss
@@ -32,7 +32,7 @@
 		margin-left: auto;
 		transition: opacity .2s;
 
-		#shadow {
+		.shadow {
 			z-index: -1;
 			position: absolute;
 			overflow: hidden;
@@ -66,7 +66,7 @@
 			opacity: 1;
 		}
 
-		#shadow {
+		.shadow {
 			z-index: -1;
 			position: absolute;
 			width: 55em;

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -95,7 +95,7 @@ body {
     margin-right: auto;
     margin-left: auto;
     transition: opacity .2s; }
-    #interface #time #shadow {
+    #interface #time .shadow {
       z-index: -1;
       position: absolute;
       overflow: hidden;
@@ -117,9 +117,9 @@ body {
     margin-right: auto;
     margin-left: auto;
     transition: opacity .2s; }
-    #interface #main #weather #widget.shown {
+    #interface #main #weather #w_icon #widget.shown {
       opacity: 1; }
-    #interface #main #shadow {
+    #interface #main .shadow {
       z-index: -1;
       position: absolute;
       width: 55em;
@@ -139,7 +139,7 @@ body {
       justify-content: center;
       align-items: center; }
       #interface #main #weather #w_icon #widget {
-        opacity: 1;
+        opacity: 0;
         height: 60px;
         width: 60px;
         border: none;
@@ -856,9 +856,9 @@ body.dark #showSettings button, body.autodark #showSettings button {
 @media screen and (max-height: 650px) {
   #interface {
     font-size: .7em; }
-    #interface #time #shadow {
+    #interface #time .shadow {
       width: 39em; }
-    #interface #main #shadow {
+    #interface #main .shadow {
       width: 39em; }
     #interface #main #weather #w_icon {
       height: 70px; }