kindle dasb

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  margin: 0px
  padding: 0px
  height: 100vh
  grid-gap: 0px
  grid-template-columns: 100%
  grid-template-rows: 110px 460px 300px minmax(0, 1fr)
  grid-template-areas: |
    "date"
    "current"
    "hourly"
    "daily"
cards:
  - type: markdown
    view_layout:
      grid-area: date
    content: |
      # {{ now().strftime('%A, %d %B %Y') }}
    card_mod:
      style:
        .: |
          ha-card {
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff !important;
            color: #000000 !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 0 25px;
          }
        ha-markdown$: |
          h1 {
            font-size: 48px !important;
            font-weight: 800 !important;
            text-align: center !important;
            text-transform: uppercase;
            line-height: 1.1 !important;
            margin: 0 !important;
            color: #000000 !important;
          }
  - type: weather-forecast
    entity: weather.forecast_home
    name: Home
    show_current: true
    show_forecast: false
    round_temperature: true
    secondary_info_attribute: humidity
    view_layout:
      grid-area: current
    card_mod:
      style: |
        ha-card {
          height: 100% !important;
          box-sizing: border-box;
          background: #ffffff !important;
          color: #000000 !important;
          border: none !important;
          border-top: 3px solid #000 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          padding: 20px 0 !important;
          display: flex !important;
          justify-content: center !important;
        }

        .content {
          height: 100%;
          box-sizing: border-box;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 28px !important;
          padding: 10px 55px !important;
        }

        .icon-image {
          margin: 0 !important;
          min-width: 155px !important;
          justify-content: center !important;
        }

        .icon-image > * {
          width: 155px !important;
          height: 155px !important;
          flex: 0 0 155px !important;
        }

        .weather-icon {
          --mdc-icon-size: 155px;
        }

        .info {
          width: 100% !important;
          flex-grow: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 25px !important;
          overflow: visible !important;
        }

        .name-state {
          flex: 1;
          width: auto !important;
          overflow: visible !important;
        }

        .state {
          font-size: 48px !important;
          font-weight: 700 !important;
          line-height: 1.15 !important;
          color: #000000 !important;
          white-space: normal !important;
          overflow: visible !important;
        }

        .name {
          font-size: 33px !important;
          line-height: 1.4 !important;
          color: #444444 !important;
        }

        .temp-attribute {
          flex: 0 0 auto;
        }

        .temp-attribute .temp {
          font-size: 140px !important;
          font-weight: 800 !important;
          line-height: 1.2 !important;
          letter-spacing: -5px;
          margin-right: 55px !important;
          color: #000000 !important;
        }

        .temp-attribute .temp span {
          font-size: 39px !important;
          font-weight: 600 !important;
          top: 10px !important;
        }

        .attribute {
          font-size: 29px !important;
          color: #333333 !important;
        }
  - type: weather-forecast
    entity: weather.forecast_home
    show_current: false
    show_forecast: true
    forecast_type: hourly
    forecast_slots: 6
    round_temperature: true
    view_layout:
      grid-area: hourly
    card_mod:
      style: |
        ha-card {
          height: 100% !important;
          box-sizing: border-box;
          background: #ffffff !important;
          color: #000000 !important;
          border: none !important;
          border-top: 3px solid #000 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          padding: 10px 0 !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
        }

        /* Six independent hourly columns */
        .forecast {
          display: grid !important;
          grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
          width: 100% !important;
          max-width: 100% !important;
          height: 100% !important;
          box-sizing: border-box !important;
          padding: 12px 16px !important;
          gap: 0 !important;
          align-items: stretch !important;
          justify-content: stretch !important;
          overflow: hidden !important;
          mask-image: none !important;
          --forecast-icon-size: 65px;
        }

        /* Flatten the day-group wrappers */
        .forecast-day {
          display: contents !important;
        }

        .forecast-day-content {
          display: contents !important;
        }

        /* Each forecast entry gets its own space */
        .forecast-item {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          padding: 8px 2px !important;
          gap: 12px !important;
          flex: none !important;
        }

        /* Day header */
        .forecast-day-header-slot {
          min-height: 28px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        .forecast-day-header {
          font-size: 22px !important;
          font-weight: 700 !important;
          line-height: 1.2 !important;
          white-space: nowrap !important;
          color: #000000 !important;
        }

        /* Time */
        .forecast-item-label {
          font-size: 25px !important;
          font-weight: 700 !important;
          line-height: 1.3 !important;
          white-space: nowrap !important;
          color: #000000 !important;
          text-align: center !important;
        }

        /* Icons */
        .forecast-image-icon {
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        .forecast-image-icon > * {
          width: 65px !important;
          height: 65px !important;
        }

        /* Temperature */
        .forecast .temp {
          font-size: 42px !important;
          font-weight: 800 !important;
          line-height: 1.2 !important;
          white-space: nowrap !important;
          color: #000000 !important;
          margin: 0 !important;
          text-align: center !important;
        }

        .forecast .templow {
          display: none !important;
        }
  - type: weather-forecast
    entity: weather.forecast_home
    show_current: false
    show_forecast: true
    forecast_type: daily
    forecast_slots: 7
    round_temperature: true
    view_layout:
      grid-area: daily
    card_mod:
      style: |
        ha-card {
          height: 100% !important;
          box-sizing: border-box;
          background: #ffffff !important;
          color: #000000 !important;
          border: none !important;
          border-top: 3px solid #000 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          padding: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: stretch !important;
        }

        .forecast {
          display: flex !important;
          flex-direction: column !important;
          justify-content: space-between !important;
          align-items: stretch !important;
          flex: 1 1 auto !important;
          height: 100% !important;
          min-height: 0 !important;
          width: 100% !important;
          max-width: none !important;
          box-sizing: border-box;
          overflow: hidden !important;
          mask-image: none !important;
          padding: 0 35px !important;
          gap: 0 !important;
          --forecast-icon-size: 57px;
        }

        .forecast > .forecast-item {
          display: grid !important;
          grid-template-columns: 35% 25% 20% 20%;
          align-items: center !important;
          width: 100% !important;
          min-width: 0 !important;
          min-height: 0 !important;
          flex: 1 1 0 !important;
          box-sizing: border-box;
          padding: 0 10px !important;
          gap: 0 !important;
          border-bottom: 1px solid #aaaaaa;
        }

        .forecast > .forecast-item:last-child {
          border-bottom: none !important;
        }

        /* Weekday */
        .forecast-item-label {
          font-size: 34px !important;
          font-weight: 700 !important;
          color: #000000 !important;
          text-align: left !important;
          justify-self: start;
        }

        /* Weather icon */
        .forecast-image-icon {
          justify-self: center;
          padding: 0 !important;
        }

        .forecast-image-icon > * {
          width: 57px !important;
          height: 57px !important;
        }

        /* High temperature */
        .forecast .temp {
          font-size: 39px !important;
          font-weight: 800 !important;
          color: #000000 !important;
          justify-self: center;
        }

        /* Low temperature */
        .forecast .templow {
          font-size: 34px !important;
          font-weight: 500 !important;
          color: #555555 !important;
          justify-self: center;
        }