docu

Author: mathertel

boards/esp8266/ESP8266_OLED_Clock.md

@@ -0,0 +1,25 @@
+---
+title: ESP8266_OLED_Clock
+tags: ["Board"]
+description: 2 connected boards, .
+excerpt: >
+  The **ESP-12F** ...
+---
+
+![alt text](_ESP8266_OLED_Clock.png)
+
+
+* SSD1306 OLED
+* PCF8563T clock
+* CR1220
+* USB for Power only
+* connectors for serial programming
+* no other PINs directly available to connect
+ 
+ 
+## See also
+
+* [ESP-12f Module](/boards/esp8266/esp12f.md)
+  
+*  <https://github.com/green5/esp8266_oled_clock>
+*  <https://de.aliexpress.com/item/1005001727122947.html>

css/card.scss

@@ -38,6 +38,7 @@ $u-card-gap: 16px;
   --card-border: none;
   --card-padding: 0.5em;
   --card-image-size: 120px;
+  --card-icon-size: 2.75em;
   --card-radius: 1em;
 }
 
@@ -110,7 +111,7 @@ $u-card-gap: 16px;
     width: calc(365px * 4 + 10px * 3);
 
     // @container main (width < #{$u-card-4col}) {
-    @container main (width <=#{365px * 4 + 10px * 3}) {
+    @container main (width <= #{365px * 4 + 10px * 3}) {
       width: calc(365px * 3 + 10px * 2);
     }
 
@@ -168,17 +169,17 @@ $u-card-gap: 16px;
     height: var(--card-image-size);
     object-fit: cover;
 
-    &.icon {
-      width: 2.75rem;
-      height: 2.75rem;
+    &.xicon {
+      width: 2.75em;
+      height: 2.75em;
     }
   }
 
   .header {
     grid-area: header;
     background-color: var(--card-head);
     padding: var(--card-padding);
-    min-height: 2.75em; // with or without icon
+    min-height: calc(var(--card-icon-size) + 2 * var(--card-padding)); // with or without icon
     max-height: 4rem;
 
     h3,
@@ -187,12 +188,11 @@ $u-card-gap: 16px;
       margin: 0;
     }
 
-    // images in header
+    // icons in header
     >svg:first-child,
     >img:first-child {
-      // display: block;
       float: left;
-      height: 2.75rem;
+      height: var(--card-icon-size);
       aspect-ratio: 1/1;
       margin-right: var(--card-padding);
     }

css/iot.scss

@@ -48,11 +48,6 @@ $u-off: red;
     padding: 0;
   }
 
-  .icon {
-    width: 2.6rem;
-    height: 2.6rem;
-    vertical-align: top;
-  }
 }
 
 

css/page.scss

@@ -14,7 +14,7 @@
 
 // The width of the page level elements must be known for the @media queries.
 $u-menu-width: 14em;
-$u-main-width: 56em;
+$u-main-width: 42em;
 $u-sidebar-width: 14em;
 $u-menu-width: 14em;
 $u-layout-gap: 1em;
@@ -36,7 +36,7 @@ $u-layout-gap: 1em;
   --header-color: var (--color);
 
   // --main-back: light-dark(white, black);
-  --main-back: var (--back); // light-dark(hsl(#{base.$u-hue} 0 90%), hsl(#{base.$u-hue} 0 10%));
+  --main-back: light-dark(hsl(#{base.$u-hue} 0 90%), hsl(#{base.$u-hue} 0 10%));
   --main-color: var(--color);
   --main-width: #{$u-main-width};
 

pages.js

@@ -2,11 +2,6 @@
 
 "use strict";
 
-// poly.js: some minimal polyfills
-if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = Array.prototype.forEach;
-}
-// End.
 
 // lazy load any htm content
 function lazyLoadHTM(container, url) {