CurrentWeatherTile.html

<style>
    .currentTemperatureTile {
        background-color: #2F2F2F;
        font-size: 3.5vmin;
        border-radius: 1vh;
        font-weight: bold;
        flex-direction: row;
    }

    .currentTemperatureTile .icon {
        padding-top: 1vmin;
        font-size: 9vmin;
    }

    .currentTemperatureTile .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 85%;
        height: 85%;
    }

    .currentTemperatureTile .entries {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex: 1;
    }

    .currentTemperatureTile .temperatures {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .currentTemperatureTile .temperature-entry {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 3vmin;
        justify-content: space-between;
    }

    .currentTemperatureTile .label {
        font-size: 2vmin;
    }

    .currentTemperatureTile .wind {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 2vmin;
        padding-top: 1vmin;
    }

    .currentTemperatureTile .windSpeed {
        padding-left: 1vmin;
    }
</style>

<div class="currentTemperatureTile">
    <div class="content">
        {% if data['isDayTime'] %}
            {% set iconPrefix = 'wi-owm-day-' %}
        {% else %}
            {% set iconPrefix = 'wi-owm-night-' %}
        {% endif %}

        <i class="wi {{ iconPrefix }}{{ data['icon'] }} icon" style="color: {{ data['iconColor'] }};"></i>
        <div class="entries">
            <div class="temperatures">
                <div class="temperature-entry">
                    <div class="label">Aktuell</div>
                    <div style="color: {{ data['temperatureColor'] }}">{{ data['temperature'] }}&deg;C</div>
                </div>
                <div class="temperature-entry">
                    <div class="label">Gefühlt</div>
                    <div style="color: {{ data['feelsLikeColor'] }}">{{ data['feelsLike'] }}&deg;C</div>
                </div>
            </div>
            <div class="wind">
                <i class="wi wi-wind from-{{ data['windDegrees'] }}-deg"></i>
                <div class="windSpeed" style="color: {{ data['windSpeedColor'] }}">{{ data['windSpeed'] }}</div>
            </div>
        </div>
    </div>
</div>