fix(layout): dim meta content

This commit is contained in:
Rafael Bardini 2021-11-11 10:43:03 +01:00
parent 06ce831c75
commit f0267684dc
9 changed files with 122 additions and 88 deletions

View File

@ -6,14 +6,16 @@
<article> <article>
<header> <header>
<h4>{{title}}</h4> <h4>{{title}}</h4>
{{#awarder}} <div class="meta">
<div> {{#awarder}}
Awarded by <strong>{{.}}</strong> <div>
</div> Awarded by <strong>{{.}}</strong>
{{/awarder}} </div>
{{#date}} {{/awarder}}
<time datetime="{{.}}">{{formatDate .}}</time> {{#date}}
{{/date}} <time datetime="{{.}}">{{formatDate .}}</time>
{{/date}}
</div>
</header> </header>
{{#summary}} {{#summary}}
{{{markdown .}}} {{{markdown .}}}

View File

@ -6,14 +6,16 @@
<article> <article>
<header> <header>
<h4>{{> link}}</h4> <h4>{{> link}}</h4>
{{#issuer}} <div class="meta">
<div> {{#issuer}}
Issued by <strong>{{.}}</strong> <div>
</div> Issued by <strong>{{.}}</strong>
{{/issuer}} </div>
{{#date}} {{/issuer}}
<time datetime="{{.}}">{{formatDate .}}</time> {{#date}}
{{/date}} <time datetime="{{.}}">{{formatDate .}}</time>
{{/date}}
</div>
</header> </header>
</article> </article>
{{/each}} {{/each}}

View File

@ -6,12 +6,14 @@
<article> <article>
<header> <header>
<h4>{{> link name=institution}}</h4> <h4>{{> link name=institution}}</h4>
{{#area}} <div class="meta">
<strong>{{.}}</strong> {{#area}}
{{/area}} <strong>{{.}}</strong>
<div> {{/area}}
<time datetime="{{startDate}}">{{formatDate startDate}}</time> <div>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div>
</div> </div>
</header> </header>
{{#studyType}} {{#studyType}}

View File

@ -6,17 +6,19 @@
<article> <article>
<header> <header>
<h4>{{> link}}</h4> <h4>{{> link}}</h4>
<div> <div class="meta">
{{#if roles}} <div>
<strong>{{join roles}}</strong> {{#if roles}}
{{/if}} <strong>{{join roles}}</strong>
{{#entity}} {{/if}}
at <strong>{{.}}</strong> {{#entity}}
{{/entity}} at <strong>{{.}}</strong>
</div> {{/entity}}
<div> </div>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> <div>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div>
</div> </div>
</header> </header>
{{#description}} {{#description}}

View File

@ -6,14 +6,16 @@
<article> <article>
<header> <header>
<h4>{{> link}}</h4> <h4>{{> link}}</h4>
{{#publisher}} <div class="meta">
<div> {{#publisher}}
Published by <strong>{{.}}</strong> <div>
</div> Published by <strong>{{.}}</strong>
{{/publisher}} </div>
{{#releaseDate}} {{/publisher}}
<time datetime="{{.}}">{{formatDate .}}</time> {{#releaseDate}}
{{/releaseDate}} <time datetime="{{.}}">{{formatDate .}}</time>
{{/releaseDate}}
</div>
</header> </header>
{{#summary}} {{#summary}}
{{{markdown .}}} {{{markdown .}}}

View File

@ -6,10 +6,12 @@
<article> <article>
<header> <header>
<h4>{{position}}</h4> <h4>{{position}}</h4>
<strong>{{> link name=organization}}</strong> <div class="meta">
<div> <strong>{{> link name=organization}}</strong>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> <div>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div>
</div> </div>
</header> </header>
{{#summary}} {{#summary}}

View File

@ -6,19 +6,21 @@
<article> <article>
<header> <header>
<h4>{{position}}</h4> <h4>{{position}}</h4>
<div> <div class="meta">
<strong>{{> link}}</strong> <div>
{{#description}} <strong>{{> link}}</strong>
<span class="bullet-item">{{.}}</span> {{#description}}
{{/description}} <span class="bullet-item">{{.}}</span>
{{/description}}
</div>
<div>
<time datetime="{{startDate}}">{{formatDate startDate}}</time>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div>
{{#location}}
<div>{{.}}</div>
{{/location}}
</div> </div>
<div>
<time datetime="{{startDate}}">{{formatDate startDate}}</time>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div>
{{#location}}
<div>{{.}}</div>
{{/location}}
</header> </header>
{{#summary}} {{#summary}}
{{{markdown .}}} {{{markdown .}}}

View File

@ -173,6 +173,10 @@ blockquote > * + * {
margin-top: 0.6em; margin-top: 0.6em;
} }
.meta {
color: var(--color-secondary);
}
.stack { .stack {
display: grid; display: grid;
gap: 1.5em; gap: 1.5em;

View File

@ -189,6 +189,10 @@ blockquote > * + * {
margin-top: 0.6em; margin-top: 0.6em;
} }
.meta {
color: var(--color-secondary);
}
.stack { .stack {
display: grid; display: grid;
gap: 1.5em; gap: 1.5em;
@ -299,15 +303,17 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4>CEO/President</h4> <h4>CEO/President</h4>
<div> <div class="meta">
<strong><a href="http://piedpiper.example.com">Pied Piper</a></strong> <div>
<span class="bullet-item">Awesome compression company</span> <strong><a href="http://piedpiper.example.com">Pied Piper</a></strong>
<span class="bullet-item">Awesome compression company</span>
</div>
<div>
<time datetime="2013-12-01">Dec 2013</time>
<time datetime="2014-12-01">Dec 2014</time>
</div>
<div>Palo Alto, CA</div>
</div> </div>
<div>
<time datetime="2013-12-01">Dec 2013</time>
<time datetime="2014-12-01">Dec 2014</time>
</div>
<div>Palo Alto, CA</div>
</header> </header>
<p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores that are not merely competitive, but approach the theoretical limit of lossless compression.</p> <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
<ul> <ul>
@ -324,10 +330,12 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4>Teacher</h4> <h4>Teacher</h4>
<strong><a href="http://coderdojo.example.com/">CoderDojo</a></strong> <div class="meta">
<div> <strong><a href="http://coderdojo.example.com/">CoderDojo</a></strong>
<time datetime="2012-01-01">Jan 2012</time> <div>
<time datetime="2013-01-01">Jan 2013</time> <time datetime="2012-01-01">Jan 2012</time>
<time datetime="2013-01-01">Jan 2013</time>
</div>
</div> </div>
</header> </header>
<p>Global movement of free coding clubs for young people.</p> <p>Global movement of free coding clubs for young people.</p>
@ -343,10 +351,12 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4><a href="https://www.ou.edu/">University of Oklahoma</a></h4> <h4><a href="https://www.ou.edu/">University of Oklahoma</a></h4>
<strong>Information Technology</strong> <div class="meta">
<div> <strong>Information Technology</strong>
<time datetime="2011-06-01">Jun 2011</time> <div>
<time datetime="2014-01-01">Jan 2014</time> <time datetime="2011-06-01">Jun 2011</time>
<time datetime="2014-01-01">Jan 2014</time>
</div>
</div> </div>
</header> </header>
<p>Bachelor</p> <p>Bachelor</p>
@ -364,13 +374,15 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4><a href="missdirection.example.com">Miss Direction</a></h4> <h4><a href="missdirection.example.com">Miss Direction</a></h4>
<div> <div class="meta">
<strong>Team lead and Designer</strong> <div>
at <strong>Smoogle</strong> <strong>Team lead and Designer</strong>
</div> at <strong>Smoogle</strong>
<div> </div>
<time datetime="2016-08-24">Aug 2016</time> <div>
<time datetime="2016-08-24">Aug 2016</time> <time datetime="2016-08-24">Aug 2016</time>
<time datetime="2016-08-24">Aug 2016</time>
</div>
</div> </div>
</header> </header>
<p>A mapping engine that misguides you</p> <p>A mapping engine that misguides you</p>
@ -388,10 +400,12 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4>Digital Compression Pioneer Award</h4> <h4>Digital Compression Pioneer Award</h4>
<div> <div class="meta">
Awarded by <strong>Techcrunch</strong> <div>
</div> Awarded by <strong>Techcrunch</strong>
<time datetime="2014-11-01">Nov 2014</time> </div>
<time datetime="2014-11-01">Nov 2014</time>
</div>
</header> </header>
<p>There is no spoon.</p> <p>There is no spoon.</p>
</article> </article>
@ -403,10 +417,12 @@ blockquote > * + * {
<article> <article>
<header> <header>
<h4><a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">Video compression for 3d media</a></h4> <h4><a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">Video compression for 3d media</a></h4>
<div> <div class="meta">
Published by <strong>Hooli</strong> <div>
</div> Published by <strong>Hooli</strong>
<time datetime="2014-10-01">Oct 2014</time> </div>
<time datetime="2014-10-01">Oct 2014</time>
</div>
</header> </header>
<p>Innovative middle-out compression algorithm that changes the way we store data.</p> <p>Innovative middle-out compression algorithm that changes the way we store data.</p>
</article> </article>