update images

README.md

@@ -370,16 +370,14 @@ drv2605:
 <table>
 	<thead>
 		<tr>
-			<th>Header</th>
+			<th>Global Header</th>
 			<th>Menu</th>
-			<th>Submenu</th>
 			<th>Improv</th>
 		</tr>
 	</thead>
 	<tbody>
 	<tr>
 		<td><img alt="Home & Global Header" src="static/screen_server/index.bmp" width=240></td>
-		<td><img alt="Graphical Display Menu" src="static/screen_server/menu.bmp" width=240></td>
 		<td><img alt="Graphical Display Menu" src="static/screen_server/menu-open.bmp" width=240></td>
 		<td><img alt="Bluetooth / Improv / Access Point" src="static/screen_server/improv.bmp" width=240></td>
 	</tr>
@@ -389,15 +387,49 @@ drv2605:
 ### Watch faces
 
 <table>
+  <thead>
+    <tr>
+      <th>Basic</th>
+      <th>Watch Hands</th>
+      <th>Image as Face</th>
+      <th>Color by time</th>
+    </tr>
+  </thead>
 <tbody>
 	<tr>
 		<td><img alt="" src="static/screen_server/watch.bmp" width=256></td>
-		<td><img alt="" src="static/screen_server/watch-color.bmp" width=256></td>
+		<td><img alt="" src="static/screen_server/watch-face-new.bmp" width=256></td>
 		<td><img alt="" src="static/screen_server/watch-face.bmp" width=256></td>
+    <td><img alt="" src="static/screen_server/watch-face-dynamic.bmp" width=256></td>
 	</tr>
 </tbody>
 </table>
 
+### Navigation
+
+- [x] 4 + 4 Swipe Gestures (up, down, left, right) + diagonal
+- [x] `graphical_display_menu`
+- [x] configured `touchscreen` `binary_sensor` grids to toggle `switch`, press `button` etc.
+
+<table>
+  <thead>
+    <tr>
+      <th>Menu</th>
+      <th>Grid in use</th>
+      <th>3x3 Grid</th>
+      <th>4x4 Grid</th>
+    </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><img alt="Graphical Display Menu" src="static/screen_server/menu.bmp" width=240></td>
+    <td><img alt="" src="static/screen_server/sensors.bmp"></td>
+    <td><img alt="Color test" src="static/screen_server/test-color.bmp" width=256></td>
+    <td><img alt="Grid test" src="static/screen_server/test-grid.bmp" width=256></td>
+  </tr>
+  </tbody>
+</table>
+
 ***
 
 ##  Screenshot Web Server
@@ -428,7 +460,7 @@ screen_server:
 	<tr>
 		<td><img alt="online_image" src="static/screen_server/image-online.bmp" width=256></td>
 		<td><img alt="Spotify Albym Art" src="static/screen_server/image-spotify.bmp" width=256></td>
-		<td><img alt="Color test" src="static/screen_server/test-color.bmp" width=256></td>
+		<td><img alt="Color test" src="static/screen_server/test-error.bmp" width=256></td>
 	</tr>
 	</tbody>
 </table>

static/_config.yml

@@ -1,8 +1,8 @@
 title: T-Watch S3
 description: LILYGO® T-Watch S3 full feature implementation for ESPHome
-theme: jekyll-theme-minima
 #theme: jekyll-theme-slate
-#remote_theme: riggraz/no-style-please
+#theme: jekyll-theme-slate
+remote_theme: riggraz/no-style-please
 plugins:
 - jekyll-remote-theme
 - jekyll-default-layout

assets/css/main.css → static/assets/css/main.css

@@ -109,13 +109,37 @@ img {
 
 :root {
   color-scheme: light dark;
+  --white: #fff;
+  --black: #000;
 }
 
 
+@media (prefers-color-scheme: dark) {
+ :root {
+  --black: #fff;
+  --white: #000;
+ }
+}
+
+html {
+    height: 100%;
+}
+body {
+    min-height: 100%;
+}
+
+html, body{
+    background: var(--white);
+    color: var(--black);
+}
+
+
+
 .markdown-body{
   border:0 !important;
 }
-table{
+
+table, iframe{
   width:100%;
   display: block;
 }
@@ -278,10 +302,10 @@ summary {
 }
 body,
 html {
-    background-color: #fff;
+    background-color: var(--white);
 }
 body {
-    font-family: Roboto, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-weight: 400;
     font-size: 1rem;
 }
@@ -393,7 +417,7 @@ blockquote::before {
     left: 0;
     display: block;
     width: 10px;
-    background: #efefef;
+    background: rgba(128,128,128,0.2);
 }
 button,
 input[type="reset"],

static/index.md

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/assets/css/main.css">
+<link rel="stylesheet" href="assets/css/main.css">
 
 # LILYGO® <img alt="LILYGO" src="logos/lilygo-favicon.svg" height="28">T-Watch S3 <img alt="ESPHome" src="logos/esphome-favicon.svg" height="28">ESPHome