masq
/
json-theme-even-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve article children spacing

This commit is contained in:
Rafael Bardini 2020-10-31 13:19:52 +01:00
parent 28d6f247d6
commit d5104af1a5
9 changed files with 202 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
partials/awards.hbs
View File

@ -4,19 +4,21 @@
<div class="stack"> <div class="stack">
{{#each resume.awards}} {{#each resume.awards}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{title}}</h4> <div class="spaced-list">
{{#date}} <h4>{{title}}</h4>
<time datetime="{{.}}">{{formatDate .}}</time> {{#date}}
{{/date}} <time datetime="{{.}}">{{formatDate .}}</time>
</div> {{/date}}
<div class="spaced-list"> </div>
{{#awarder}} <div class="spaced-list">
<div> {{#awarder}}
Awarded by <strong>{{.}}</strong> <div>
</div> Awarded by <strong>{{.}}</strong>
{{/awarder}} </div>
</div> {{/awarder}}
</div>
</header>
{{#summary}} {{#summary}}
<p>{{.}}</p> <p>{{.}}</p>
{{/summary}} {{/summary}}

32
partials/education.hbs
View File

@ -4,21 +4,23 @@
<div class="stack"> <div class="stack">
{{#each resume.education}} {{#each resume.education}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{institution}}</h4> <div class="spaced-list">
<span> <h4>{{institution}}</h4>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> – <span>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
</span> {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div> </span>
<div class="spaced-list"> </div>
{{#area}} <div class="spaced-list">
<strong>{{.}}</strong> {{#area}}
{{/area}} <strong>{{.}}</strong>
{{#url}} {{/area}}
<a href="{{.}}">{{.}}</a> {{#url}}
{{/url}} <a href="{{.}}">{{.}}</a>
</div> {{/url}}
</div>
</header>
{{#studyType}} {{#studyType}}
<p>{{.}}</p> <p>{{.}}</p>
{{/studyType}} {{/studyType}}

2
partials/header.hbs
View File

@ -1,4 +1,4 @@
<header> <header class="masthead">
{{#name}} {{#name}}
<h1>{{.}}</h1> <h1>{{.}}</h1>
{{/name}} {{/name}}

42
partials/projects.hbs
View File

@ -4,26 +4,28 @@
<div class="stack"> <div class="stack">
{{#each resume.projects}} {{#each resume.projects}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{name}}</h4> <div class="spaced-list">
<span> <h4>{{name}}</h4>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> – <span>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
</span> {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div> </span>
<div class="spaced-list"> </div>
<span> <div class="spaced-list">
{{#if roles}} <span>
<strong>{{join roles}}</strong> {{#if roles}}
{{/if}} <strong>{{join roles}}</strong>
{{#entity}} {{/if}}
at <strong>{{.}}</strong> {{#entity}}
{{/entity}} at <strong>{{.}}</strong>
</span> {{/entity}}
{{#url}} </span>
<a href="{{.}}">{{.}}</a> {{#url}}
{{/url}} <a href="{{.}}">{{.}}</a>
</div> {{/url}}
</div>
</header>
{{#description}} {{#description}}
<p>{{.}}</p> <p>{{.}}</p>
{{/description}} {{/description}}

34
partials/publications.hbs
View File

@ -4,22 +4,24 @@
<div class="stack"> <div class="stack">
{{#each resume.publications}} {{#each resume.publications}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{name}}</h4> <div class="spaced-list">
{{#releaseDate}} <h4>{{name}}</h4>
<time datetime="{{.}}">{{formatDate .}}</time> {{#releaseDate}}
{{/releaseDate}} <time datetime="{{.}}">{{formatDate .}}</time>
</div> {{/releaseDate}}
<div class="spaced-list"> </div>
{{#publisher}} <div class="spaced-list">
<span> {{#publisher}}
Published by <strong>{{.}}</strong> <span>
</span> Published by <strong>{{.}}</strong>
{{/publisher}} </span>
{{#url}} {{/publisher}}
<a href="{{.}}">{{.}}</a> {{#url}}
{{/url}} <a href="{{.}}">{{.}}</a>
</div> {{/url}}
</div>
</header>
{{#summary}} {{#summary}}
<p>{{.}}</p> <p>{{.}}</p>
{{/summary}} {{/summary}}

32
partials/volunteer.hbs
View File

@ -4,21 +4,23 @@
<div class="stack"> <div class="stack">
{{#each resume.volunteer}} {{#each resume.volunteer}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{organization}}</h4> <div class="spaced-list">
<span> <h4>{{organization}}</h4>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> – <span>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
</span> {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div> </span>
<div class="spaced-list"> </div>
{{#position}} <div class="spaced-list">
<strong>{{.}}</strong> {{#position}}
{{/position}} <strong>{{.}}</strong>
{{#url}} {{/position}}
<a href="{{.}}">{{.}}</a> {{#url}}
{{/url}} <a href="{{.}}">{{.}}</a>
</div> {{/url}}
</div>
</header>
{{#summary}} {{#summary}}
<p>{{.}}</p> <p>{{.}}</p>
{{/summary}} {{/summary}}

32
partials/work.hbs
View File

@ -4,21 +4,23 @@
<div class="stack"> <div class="stack">
{{#each resume.work}} {{#each resume.work}}
<article> <article>
<div class="spaced-list"> <header>
<h4>{{name}}</h4> <div class="spaced-list">
<span> <h4>{{name}}</h4>
<time datetime="{{startDate}}">{{formatDate startDate}}</time> – <span>
{{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}} <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
</span> {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
</div> </span>
<div class="spaced-list"> </div>
{{#position}} <div class="spaced-list">
<strong>{{.}}</strong> {{#position}}
{{/position}} <strong>{{.}}</strong>
{{#url}} {{/position}}
<a href="{{.}}">{{.}}</a> {{#url}}
{{/url}} <a href="{{.}}">{{.}}</a>
</div> {{/url}}
</div>
</header>
{{#summary}} {{#summary}}
<p>{{.}}</p> <p>{{.}}</p>
{{/summary}} {{/summary}}

19
style.css
View File

@ -116,14 +116,6 @@ h6 {
font-size: var(--scale0); font-size: var(--scale0);
} }
p:not(:first-child) {
margin-top: 1em;
}
p:not(:last-child) {
margin-bottom: 1em;
}
blockquote { blockquote {
border-left: 0.2em solid var(--mutedColor); border-left: 0.2em solid var(--mutedColor);
padding-left: 1em; padding-left: 1em;
@ -138,7 +130,7 @@ cite::before {
content: '— '; content: '— ';
} }
header { .masthead {
background: var(--mutedColor); background: var(--mutedColor);
display: inherit; display: inherit;
gap: inherit; gap: inherit;
@ -148,11 +140,16 @@ header {
row-gap: 0; row-gap: 0;
} }
header > *, .masthead > *,
section { section {
grid-column: main; grid-column: main;
} }
article > * + *,
blockquote > * + * {
margin-top: 0.6em;
}
.stack { .stack {
display: grid; display: grid;
gap: 1.5em; gap: 1.5em;
@ -200,7 +197,7 @@ section {
margin-bottom: inherit; margin-bottom: inherit;
} }
header > *, .masthead > *,
section { section {
grid-column: content; grid-column: content;
} }

165
tap-snapshots/test-render.js-TAP.test.js
View File

@ -132,14 +132,6 @@ h6 {
font-size: var(--scale0); font-size: var(--scale0);
} }
p:not(:first-child) {
margin-top: 1em;
}
p:not(:last-child) {
margin-bottom: 1em;
}
blockquote { blockquote {
border-left: 0.2em solid var(--mutedColor); border-left: 0.2em solid var(--mutedColor);
padding-left: 1em; padding-left: 1em;
@ -154,7 +146,7 @@ cite::before {
content: '— '; content: '— ';
} }
header { .masthead {
background: var(--mutedColor); background: var(--mutedColor);
display: inherit; display: inherit;
gap: inherit; gap: inherit;
@ -164,11 +156,16 @@ header {
row-gap: 0; row-gap: 0;
} }
header > *, .masthead > *,
section { section {
grid-column: main; grid-column: main;
} }
article > * + *,
blockquote > * + * {
margin-top: 0.6em;
}
.stack { .stack {
display: grid; display: grid;
gap: 1.5em; gap: 1.5em;
@ -216,7 +213,7 @@ section {
margin-bottom: inherit; margin-bottom: inherit;
} }
header > *, .masthead > *,
section { section {
grid-column: content; grid-column: content;
} }
@ -232,7 +229,7 @@ section {
</style> </style>
</head> </head>
<body> <body>
<header> <header class="masthead">
<h1>Richard Hendriks</h1> <h1>Richard Hendriks</h1>
<h2>Programmer</h2> <h2>Programmer</h2>
</header> </header>
@ -277,17 +274,19 @@ section {
<h3>Work</h3> <h3>Work</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>Pied Piper</h4> <div class="spaced-list">
<span> <h4>Pied Piper</h4>
<time datetime="2013-12-01">Dec 2013</time> – <span>
<time datetime="2014-12-01">Dec 2014</time> <time datetime="2013-12-01">Dec 2013</time> –
</span> <time datetime="2014-12-01">Dec 2014</time>
</div> </span>
<div class="spaced-list"> </div>
<strong>CEO/President</strong> <div class="spaced-list">
<a href="http://piedpiper.example.com">http://piedpiper.example.com</a> <strong>CEO/President</strong>
</div> <a href="http://piedpiper.example.com">http://piedpiper.example.com</a>
</div>
</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>
<h5>Highlights</h5> <h5>Highlights</h5>
<ul> <ul>
@ -302,17 +301,19 @@ section {
<h3>Volunteer</h3> <h3>Volunteer</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>CoderDojo</h4> <div class="spaced-list">
<span> <h4>CoderDojo</h4>
<time datetime="2012-01-01">Jan 2012</time> – <span>
<time datetime="2013-01-01">Jan 2013</time> <time datetime="2012-01-01">Jan 2012</time> –
</span> <time datetime="2013-01-01">Jan 2013</time>
</div> </span>
<div class="spaced-list"> </div>
<strong>Teacher</strong> <div class="spaced-list">
<a href="http://coderdojo.example.com/">http://coderdojo.example.com/</a> <strong>Teacher</strong>
</div> <a href="http://coderdojo.example.com/">http://coderdojo.example.com/</a>
</div>
</header>
<p>Global movement of free coding clubs for young people.</p> <p>Global movement of free coding clubs for young people.</p>
<h5>Highlights</h5> <h5>Highlights</h5>
<ul> <ul>
@ -325,17 +326,19 @@ section {
<h3>Education</h3> <h3>Education</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>University of Oklahoma</h4> <div class="spaced-list">
<span> <h4>University of Oklahoma</h4>
<time datetime="2011-06-01">Jun 2011</time> – <span>
<time datetime="2014-01-01">Jan 2014</time> <time datetime="2011-06-01">Jun 2011</time> –
</span> <time datetime="2014-01-01">Jan 2014</time>
</div> </span>
<div class="spaced-list"> </div>
<strong>Information Technology</strong> <div class="spaced-list">
<a href="https://www.ou.edu/">https://www.ou.edu/</a> <strong>Information Technology</strong>
</div> <a href="https://www.ou.edu/">https://www.ou.edu/</a>
</div>
</header>
<p>Bachelor</p> <p>Bachelor</p>
<h5>Courses</h5> <h5>Courses</h5>
<ul> <ul>
@ -349,20 +352,22 @@ section {
<h3>Projects</h3> <h3>Projects</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>Miss Direction</h4> <div class="spaced-list">
<span> <h4>Miss Direction</h4>
<time datetime="2016-08-24">Aug 2016</time> – <span>
<time datetime="2016-08-24">Aug 2016</time> <time datetime="2016-08-24">Aug 2016</time> –
</span> <time datetime="2016-08-24">Aug 2016</time>
</div> </span>
<div class="spaced-list"> </div>
<span> <div class="spaced-list">
<strong>Team lead, Designer</strong> <span>
at <strong>Smoogle</strong> <strong>Team lead, Designer</strong>
</span> at <strong>Smoogle</strong>
<a href="missdirection.example.com">missdirection.example.com</a> </span>
</div> <a href="missdirection.example.com">missdirection.example.com</a>
</div>
</header>
<p>A mapping engine that misguides you</p> <p>A mapping engine that misguides you</p>
<h5>Highlights</h5> <h5>Highlights</h5>
<ul> <ul>
@ -377,15 +382,17 @@ section {
<h3>Awards</h3> <h3>Awards</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>Digital Compression Pioneer Award</h4> <div class="spaced-list">
<time datetime="2014-11-01">Nov 2014</time> <h4>Digital Compression Pioneer Award</h4>
</div> <time datetime="2014-11-01">Nov 2014</time>
<div class="spaced-list"> </div>
<div> <div class="spaced-list">
Awarded by <strong>Techcrunch</strong> <div>
</div> Awarded by <strong>Techcrunch</strong>
</div> </div>
</div>
</header>
<p>There is no spoon.</p> <p>There is no spoon.</p>
</article> </article>
</div> </div>
@ -394,16 +401,18 @@ section {
<h3>Publications</h3> <h3>Publications</h3>
<div class="stack"> <div class="stack">
<article> <article>
<div class="spaced-list"> <header>
<h4>Video compression for 3d media</h4> <div class="spaced-list">
<time datetime="2014-10-01">Oct 2014</time> <h4>Video compression for 3d media</h4>
</div> <time datetime="2014-10-01">Oct 2014</time>
<div class="spaced-list"> </div>
<span> <div class="spaced-list">
Published by <strong>Hooli</strong> <span>
</span> Published by <strong>Hooli</strong>
<a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)</a> </span>
</div> <a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)</a>
</div>
</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>
</div> </div>