oembedcard.html

<style>
.indiecard {font-family: "Gill Sans", Roboto,Verdana, sans-serif;
             display: -webkit-flex; display:flex;
            -webkit-flex-direction: column; flex-direction: column;
            -webkit-align-items: stretch; align-items: stretch;
            margin:0; width:100%; height:100%; padding: 0; overflow:hidden;
            font-size:3vw;
            }
.u-banner {height:30vh;}
.u-banner img {width:100%; height:100%; object-fit: cover;}
h1 {display: -webkit-flex; display:flex; 
    -webkit-align-items:center; align-items:center;
    font-size:20vh; margin:0;height:25vh;
    }
text {font-size:20vh;}
a { text-decoration:none;}
.figure {-webkit-flex-grow:1; flex-grow:1;  max-width:20%; height:100%;}
.u-photo {width:100%; max-height:100%; object-fit: contain;
        }
.p-name {-webkit-flex-grow:4; flex-grow:4; } 
h2 { 
    font-weight: 300; margin:0; 
    font-size:6vw;
    }
.h-entry {margin-left: 10vw; margin-bottom:4vh;}
h3 { 
    font-weight: 400; margin:0; 
    font-size:7vh;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:16vh;
    }
p { margin:0;}
</style>
<div class="{{type}} indiecard">
{% if banner %}
<div class="u-featured">
<img src={{banner}} />
</div>
{% endif %}
<h1 >{% if photo %}
<a class="figure" href="{{url}}"><img src="{{photo}}" class="u-photo" /></a>
{% endif %}
<a class="u-url p-name" href="{{url}}">
<svg width="100%" height="100%"><text x="0%"  y="80%" font-size="30vh"  textLength="100%" lengthAdjust="spacingAndGlyphs">{{name}}</text></svg>
</a></h1>
{% if summary %}
{% autoescape false %}
<h2 class="e-summary">{{summary}}</h2>
{% endautoescape  %}
{% endif %}
{% if org %}
{% autoescape false %}
<h3 class="p-org h-card">{{org}}</h3>
{% endautoescape  %}
{% endif %}

{% if entries %}
{% for entry in entries %}
<div class="h-entry"><a href="{{entry.url}}"><h3 class="e-name">{{entry.name}}</h3></a>
{% if entry.featured %}
<img class="u-featured" src="{{entry.featured}}" />
{% elif  entry.photo %}
<img class="u-photo" src="{{entry.photo}}" />
{% endif %}
<p class="e-summary">{{entry.summary}}</p>
</div>
{% endfor %}
{% endif %}
</div>