Untitled

index.html

<dash-e-card>
  <dash-e-icon>
    <img src="https://ha.spdustin.com/local/dash-e-card/svg-filled/clear-day.svg">
  </dash-e-icon>
  <dash-e-temp>
    70º
  </dash-e-temp>
  <dash-e-warnings>
  </dash-e-warnings>
  <dash-e-clock>
    12:26pm
  </dash-e-clock>
</dash-e-card>

style.css

body {
  margin: 0;
  padding: 0;
}
dash-e-card {
  outline: 2px solid lime;
  position: absolute;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: url("https://ha.spdustin.com/local/dash/2024-09-27_12-00_tomato.png");
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, 0px 0px 5px black, 0px 0px 10px black, 0px 0px 15px black,
    0px 0px 20px black, 0px 0px 30px black;
  font-size: 10cqmax;
  font-weight: bold;
  font-family: sans-serif;
/*   padding: 2cqmax; */
  gap: 2cqmax;
}

dash-e-icon {
  outline: 2px solid magenta;
  align-self: start;
  justify-self: start;
}

dash-e-icon img {
  height: auto;
  width: 50cqmin;
  outline: 1px dotted green;
  filter: drop-shadow(0px 0px 20px black) drop-shadow(0px 0px 30px black);
}

dash-e-temp {
  padding: 2cqmax;
  outline: 2px solid yellow;
  justify-self: end;
}

dash-e-clock {
  padding: 2cqmax;
  outline: 2px solid green;
  justify-self: end;
  align-self: end;
}

untitled.markdown

Untitled

A Pen by Dustin Miller on CodePen.

License.