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

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.awards}}
<article>
<header>
<div class="spaced-list">
<h4>{{title}}</h4>
{{#date}}
@ -17,6 +18,7 @@
</div>
{{/awarder}}
</div>
</header>
{{#summary}}
<p>{{.}}</p>
{{/summary}}

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.education}}
<article>
<header>
<div class="spaced-list">
<h4>{{institution}}</h4>
<span>
@ -19,6 +20,7 @@
<a href="{{.}}">{{.}}</a>
{{/url}}
</div>
</header>
{{#studyType}}
<p>{{.}}</p>
{{/studyType}}

View File

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

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.projects}}
<article>
<header>
<div class="spaced-list">
<h4>{{name}}</h4>
<span>
@ -24,6 +25,7 @@
<a href="{{.}}">{{.}}</a>
{{/url}}
</div>
</header>
{{#description}}
<p>{{.}}</p>
{{/description}}

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.publications}}
<article>
<header>
<div class="spaced-list">
<h4>{{name}}</h4>
{{#releaseDate}}
@ -20,6 +21,7 @@
<a href="{{.}}">{{.}}</a>
{{/url}}
</div>
</header>
{{#summary}}
<p>{{.}}</p>
{{/summary}}

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.volunteer}}
<article>
<header>
<div class="spaced-list">
<h4>{{organization}}</h4>
<span>
@ -19,6 +20,7 @@
<a href="{{.}}">{{.}}</a>
{{/url}}
</div>
</header>
{{#summary}}
<p>{{.}}</p>
{{/summary}}

View File

@ -4,6 +4,7 @@
<div class="stack">
{{#each resume.work}}
<article>
<header>
<div class="spaced-list">
<h4>{{name}}</h4>
<span>
@ -19,6 +20,7 @@
<a href="{{.}}">{{.}}</a>
{{/url}}
</div>
</header>
{{#summary}}
<p>{{.}}</p>
{{/summary}}

View File

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

View File

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