Merge pull request #14 from missytake/hotel-zuflucht

- adding Hotel Zuflucht theme
- improve theming

Author: MS702

css/list.css

@@ -1,6 +1,6 @@
 #item {
-	width: var(--item_scale);
-	height: var(--item_scale);
+	width: var(--item-width);
+	height: var(--item-height);
 	border-radius: 25px;
 	-ms-word-break: break-all;
 	word-break: break-all;
@@ -14,6 +14,7 @@
 #item #title {
 		font-size: var(--item-title-font-size);
     margin: 5px;
+    text-align: var(--item-text-align);
 }
 
 #item #meta {

css/main.css

@@ -5,7 +5,8 @@
 
 @media (orientation: portrait) {
 	:root {
-		--item_scale: max(75px, 27vw);
+		--item_height: max(75px, 27vw);
+		--item_width: max(75px, 27vw);
 		--item-title-font-size: max(10px, 4vw);
 		--item-meta-font-size: max(8px, 3vw);
 		--input_scale: max(20px, 10vw);
@@ -16,7 +17,8 @@
 }
 @media (orientation: landscape) {
 	:root {
-		--item_scale: max(75px, min(250px, min(22vw, 22vh)));/*min(27vw, 175px);*/
+		--item_height: max(75px, min(250px, min(22vw, 22vh)));/*min(27vw, 175px);*/
+		--item_width: max(75px, min(250px, min(22vw, 22vh)));/*min(27vw, 175px);*/
 		--item-title-font-size: max(10px, min(40px, min(3.5vw, 3.5vh)));
 		--item-meta-font-size: max(8px, min(25px, min(2.5vw, 2.5vh)));
 		--input_scale: max(20px, min(100px, min(10vw, 10vh)));

css/theme.css

@@ -34,7 +34,7 @@
   --list: #49595D;
   --list-text: white;
 
-  --list-active: #F06870;
+  --list-active: #AB6A87;
   --list-active-border: 0px;
   --list-active-text: white;
   --list-active-meta: rgb(235, 235, 235);
@@ -44,7 +44,7 @@
   --list-active-hover-text: white;
   --list-active-hover-meta: rgb(235, 235, 235);
 
-  --list-last: #68B8A8;
+  --list-last: #6AAB8E;
   --list-last-border: 0px;
   --list-last-text: white;
   --list-last-meta: rgb(235, 235, 235);
@@ -77,4 +77,8 @@
   --toast-button: grey;
   --toast-button-border: 0px;
   --toast-button-text: black;
+
+  --item-height: 27vw;
+  --item-width: 27vw;
+  --item-text-align: center;
 }

js/languages.js

@@ -30,6 +30,7 @@ var languages = {
     "style_light": "Bright",
     "style_yb": "Yellow-Blue",
     "style_eink": "E-Ink",
+    "style_zuflucht": "Hotel Zuflucht",
 
     //Tutorial
     "tutorial_title": "Tutorial",
@@ -230,6 +231,7 @@ var languages = {
     "style_dark": "Dunkel",
     "style_light": "Hell",
     "style_yb": "Gelb-Blau",
+    "style_zuflucht": "Hotel Zuflucht",
 
 
     //Tutorial

js/themes.js

@@ -79,6 +79,10 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": null,
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
   },
   oled: {
     "popup": "rgba(20, 20, 20)",
@@ -158,6 +162,10 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": "white",
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
   },
   dark: {
     "popup": "rgba(70, 70, 70)",
@@ -238,6 +246,10 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": "white",
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
   },
   light: {
     "popup": "rgba(220, 220, 220)",
@@ -317,6 +329,10 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": null,
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
   },
   yb: {
     "popup": null,
@@ -396,6 +412,10 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": null,
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
   },
   eink: {
     "popup": "white",
@@ -476,6 +496,94 @@ var themes = {
 
     "toast-button-border": "5px solid black",
     "toast-button-text": "black",
+
+    "item-height": null,
+    "item-width": null,
+    "item-text-align": null,
+  },
+  zuflucht: {
+    "popup": null,
+    "popup-border": null,
+    "popup-text": null,
+
+    "popup-close": null,
+    "popup-close-border": null,
+    "popup-close-text": null,
+
+    "popup-close-hover": null,
+    "popup-close-hover-border": null,
+    "popup-close-hover-text": null,
+
+    "popup-button": null,
+    "popup-button-border": null,
+    "popup-button-text": null,
+
+    "popup-button-hover": null,
+    "popup-button-hover-border": null,
+    "popup-button-hover-text": null,
+
+    "menu": null,
+    "menu-border": null,
+    "menu-toggle": null,
+
+    "menu-button": null,
+    "menu-button-border": null,
+    "menu-button-text": null,
+
+    "menu-button-hover": null,
+    "menu-button-hover-border": null,
+    "menu-button-hover-text": null,
+
+    "list": null,
+    "list-text": null,
+
+    "list-active": null,
+    "list-active-border": null,
+    "list-active-text": null,
+    "list-active-meta": null,
+
+    "list-active-hover-border": null,
+    "list-active-hover-text": null,
+    "list-active-hover-meta": null,
+
+    "list-last-border": null,
+    "list-last-text": null,
+    "list-last-meta": null,
+
+    "list-last-hover": null,
+    "list-last-hover-border": null,
+    "list-last-hover-text": null,
+    "list-last-hover-meta": null,
+
+    "search": null,
+    "search-border": null,
+    "search-text": null,
+
+    "search-hover": null,
+    "search-hover-border": null,
+    "search-hover-text": null,
+
+    "search-button": null,
+    "search-button-border": null,
+    "search-button-text": null,
+
+    "search-button-hover": null,
+    "search-button-hover-border": null,
+    "search-button-hover-text": null,
+
+    "toast": null,
+    "toast-progress": null,
+    "toast-border": null,
+    "toast-text": null,
+
+    "toast-button-border": null,
+    "toast-button-text": null,
+    "item-width": "80%",
+    "item-height": "null",
+
+    "list-last": "rgba(106, 171, 142)",
+    "list-active": "rgba(171, 106, 135)",
+    "item-text-align": "left",
   },
 }