Can't replicate clockwork card look/feel

[Traxtar928]

I can't replicate the look of the clockwork card that stopped functioning and gives the incorrect time, which led me to your card. I'm sure it's just my own lack of experience with styling code. Can you assist by recommending changes?

In the screenshot below, you can see the overall card size, padding between side locations, and font size for city name is different than clockwork, which is the look I prefer:

  - type: custom:better-moment-card
    parentStyle: |
      line-height:normal;
      padding-bottom:0en;
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr; 
      grid-template-rows: 0fr 0fr; 
      gap: 0px; 
      grid-template-areas: 
        'time time LA'
        'date date Miami'; 
    moment:
      - format: h:mm a
        style: >
          font-size:4em; text-align:left; font-weight:400; grid-area: time;
        timezone: America/Chicago
      - format: dddd, MMMM DD
        style: >
          font-size:1.6em; line-height:1em; text-align:left; grid-area: date; 
      - format: ddd h:mm a
        timezone: America/Los_Angeles
        style: |
          text-align:left; line-height:1.5em; grid: LA;
        template: |
          <strong>Los Angeles</strong>
          <div style="font-size:0.9em;">{{moment}}</div>
      - format: ddd h:mm a
        timezone: America/Puerto_Rico
        style: |
          text-align:left; line-height:1.5em; grid: Miami
        template: |
          <strong>Miami</strong>
          <div style="font-size:0.9em;">{{moment}}</div>

[ibz0q]

Sorry for the delay. I have pushed a feature that makes this+other templating options easier.

templateRaw lets you place multiple 'moments' anywhere in your template.

If you're okay with my shortcut. I took clockworks original stylesheet CSS and placed it directly inside replicating clockworks original look and feel. (https://github.com/robmarkoski/ha-clockwork-card/blob/master/clockwork-card.js)

The result is identical to clockwork - bottom is clockwork plugin.

Code:

type: custom:better-moment-card
parentStyle: |
  padding: 0px;
moment:
  - parentStyle: |
      padding: 5px 5px 5px;
      display:flex;
      flex-flow: row wrap;
      justify-content: space-around;
      align-items: flex-start;
    templateRaw: |
      <style>
        .clock {
            padding: 5px 5px 5px 0px;
            margin: auto;
        }
        .other_clocks {
            float: right;
            margin: auto;
        }
        .otime {
            padding: 0px 5px 2px;
            font-size: 14px;
            font-family: var(--paper-font-headline_-_font-family);
            letter-spacing: var(--paper-font-headline_-_letter-spacing);
            text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }
        .tz_locale {
            padding: 0px 5px 1px;
            color: var(--secondary-text-color);
            font-size: 11px;
            font-family: var(--paper-font-headline_-_font-family);
            letter-spacing: var(--paper-font-headline_-_letter-spacing);
            text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }     
        .time {
            padding: 
            font-family: var(--paper-font-headline_-_font-family);
            -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
            font-size: 56px;
            font-weight: var(--paper-font-headline_-_font-weight);
            letter-spacing: var(--paper-font-headline_-_letter-spacing);
            line-height: 1em;
            text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }
        .date {
            font-family: var(--paper-font-headline_-_font-family);
            -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
            font-size: 24px;
            font-weight: var(--paper-font-headline_-_font-weight);
            letter-spacing: var(--paper-font-headline_-_letter-spacing);
            line-height: var(--paper-font-headline_-_line-height);
            text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }          
      </style>
      <div class="clock">
          <div class="time" id="time">{{moment format=HH:mm a}}</div>
          <div class="date" id="date">{{moment format=dddd, DD MMMM timezone=Europe/Berlin }}</div>
      </div>
          <div class="other_clocks">
            <div class="tz_locale">America/New_York</div> 
            <div class="otime">{{moment format=ddd h:mm a timezone=America/New_York }}</div>
            <div class="tz_locale">Australia/Sydney</div> 
            <div class="otime">{{moment format=ddd h:mm a timezone=Australia/Sydney }}</div>
      </div>