Cleanups (#20)

* centedbox css

* add font-weight to the css

* some cleanup

css/centered-box-overlay.css

@@ -1,8 +1,7 @@
 #centeredBoxOverlay {
 	background: transparent;
 	opacity: 0;
-	backdrop-filter: blur(0);
+	backdrop-filter: blur(0) brightness(100%);
-	filter: brightness(70%);
 	
 	position: absolute;
 	top: 0;
@@ -21,5 +20,5 @@
 #centeredBoxOverlay.showOverlay {
 	opacity: 1;
 	z-index: 0;
-	backdrop-filter: blur(var(--blur-strength))
+	backdrop-filter: blur(var(--blur-strength)) brightness(70%);
 }

css/clock.css

@@ -2,6 +2,7 @@
 	color: var(--base-color);
 	font-size: 11pt;
 	font-family: roboto-bold, sans-serif;
+	font-weight: 700;
 
 	/*Center lock*/
 	text-align: center;

css/font-face.css

@@ -1,5 +1,10 @@
+@font-face {
+	font-family: 'fantasque-sans-mono';
+	font-style: normal;
+	src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
+}
 
-/* roboto-300 - latin */
+/*Roboto light*/
 @font-face {
 	font-family: 'roboto-light';
 	font-style: normal;
@@ -12,7 +17,8 @@
 		url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
 		url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
 }
-/* roboto-regular - latin */
+
+/*Roboto normal*/
 @font-face {
 	font-family: 'roboto';
 	font-style: normal;
@@ -26,7 +32,7 @@
 		url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
 }
 
-/* roboto-700 - latin */
+/*Roboto bold*/
 @font-face {
 	font-family: 'roboto-bold';
 	font-style: normal;
@@ -38,10 +44,4 @@
 		url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
 		url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
 		url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
-}
+}
-
-@font-face {
-	font-family: 'fantasque-sans-mono';
-	font-style: normal;
-	src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
-}

css/greeter-date-message.css

@@ -2,6 +2,7 @@
 	color: var(--base-color);
 	font-size: 32pt;
 	font-family: roboto-light, sans-serif;
+	font-weight: 300;
 	margin: 5px;
 }
 
@@ -9,5 +10,6 @@
 	color: #f2f2f2;
 	font-size: 12pt;
 	font-family:  roboto, sans-serif;
+	font-weight: 400;
 	margin: 5px;
 }

css/search-box.css

@@ -32,6 +32,7 @@
 	color: var(--base-color);
 	text-align: center;
 	font-family: roboto-bold, sans-serif;
+	font-weight: 700;
 
 	border: none;
 	border-radius: 24px;
@@ -41,6 +42,7 @@
 
 #searchBox::placeholder {
 	font-family: roboto-bold, fantasque-sans-mono, sans-serif;
+	font-weight: 700;
 }
 
 .showSearchBox {

css/search-engine-settings.css

@@ -1,5 +1,6 @@
 .searchEngine {
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/style.css

@@ -1,7 +1,7 @@
 /*Load all CSS*/
+@import url('normalize.css');
 @import url('base.css');
 @import url('font-face.css');
-@import url('normalize.css');
 @import url('body-background.css');
 @import url('bar.css');
 @import url('top-panel.css');

css/theme-engine.css

@@ -1,5 +1,6 @@
 .themeEngine {
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/weather-screen.css

@@ -73,6 +73,7 @@
 #weatherTodayLocation {
 	color: var(--base-color);
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	font-size: 16pt;
 	text-align: center;
 	position: relative;
@@ -81,6 +82,7 @@
 #weatherTodayDescription {
 	color: var(--base-color);
 	font-family: roboto-bold, sans-serif;
+	font-weight: 700;
 	font-size: 20pt;
 	text-align: center;
 	position: relative;
@@ -105,6 +107,7 @@
 .hourDataLabel {
 	color: var(--base-color);
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	font-size: 14pt;
 	text-align: center;
 }
@@ -178,6 +181,7 @@
 .weatherForecastDayDate {
 	color: var(--base-color);
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	font-size: 11pt;
 	text-align: center;
 }

css/weather-settings.css

@@ -1,5 +1,6 @@
 .weatherSettings {
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	width: 100%;
 	height: auto;
 	position: relative;;

css/web-menu.css

@@ -70,6 +70,7 @@
 	
 	text-align: center;
 	font-family: roboto-bold, sans-serif;
+	font-weight: 700;
 	color: var(--panel-color);
 	
 	border: none;
@@ -82,6 +83,7 @@
 
 #webMenuSearchBox::placeholder {
 	font-family: roboto-bold, fantasque-sans-mono, sans-serif;
+	font-weight: 700;
 }
 
 @media screen and (max-width: 580px) {
@@ -201,6 +203,7 @@
 	text-align: center;
 	font-size: 11pt;
 	font-family: roboto, sans-serif;
+	font-weight: 400;
 	word-wrap: break-word;
 	color: var(--base-color);
 

js/body-background-set.js

@@ -17,12 +17,12 @@ class BodyBackground {
 
 	_lazyLoadBackground = fileName => {
 
-		// Set a low quality background image 
-		this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`);
-		
 		// Add a class to blur it
 		this._bodyBackground.classList.add('blurFiltered');
 
+		// Set a low quality background image 
+		this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`);
+		
 		this._hqBackground.onload = () => {
 
 			// After downloading the HQ image, set it as bg

js/keybindings.js

@@ -75,9 +75,9 @@ class KeyBinding {
             return;
         }
 
-        if (searchBoxVisibility === false) {
+        if (!searchBoxVisibility) {
 
-            // Don't show searchbox when web menu, dashboard
+            // Don't show searchbox if web menu, dashboard
             // and weather screen is open
             if (dashboard.getRightDashboardVisibility() ||
                 webMenu.getwebMenuVisibility() ||

js/web-menu.js

@@ -317,6 +317,7 @@ class WebMenu {
 
 		const getIndexByWindowWidth = () => {
 			if (window.innerWidth <= 580) { return 1; }
+
 			// width of elements in pixels
 			const menuItemWidth = 138;
 			const scrollBarWidth = 10;
@@ -372,19 +373,19 @@ class WebMenu {
 			if (key === up) { return changeItemFocus((this._webListIndex >= 0), len) }
 			if (key === down) { return changeItemFocus((this._webListIndex <= len), 0) }
 		}
-
 		
 		changeWebListIndex();
+
 		if (this._webItemFocus) {
 			this._removeClass(this._webItemFocus, 'webItemFocus');
 			changeItemFocusByKey();
 			this._addClass(this._webItemFocus, 'webItemFocus');
-			// console.log(webListIndex);
 		} else {
 			this._webListIndex = 0;
 			this._webItemFocus = this._webMenuList.getElementsByTagName('li')[0];
 			this._addClass(this._webItemFocus, 'webItemFocus');
 		}
+
 	}
 
 	_webMenuKeyDownEvent = e => {
@@ -396,7 +397,6 @@ class WebMenu {
 		this._webMenu.addEventListener('keydown', this._webMenuKeyDownEvent, false);
 	}
 
-
 	_webMenuSearchBoxKeyDownEvent = e => {
 
 		// Don't hijack keyboard navigation buttons (up, down, left, right)