Improve article children spacing
This commit is contained in:
parent
28d6f247d6
commit
d5104af1a5
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<header>
|
||||
<header class="masthead">
|
||||
{{#name}}
|
||||
<h1>{{.}}</h1>
|
||||
{{/name}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
19
style.css
19
style.css
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue