fix up work page

This commit is contained in:
a 2021-12-15 18:25:13 -06:00
parent e716903eb2
commit eeafa6ef1b
2 changed files with 23 additions and 14 deletions

View file

@ -16,17 +16,19 @@
&::before {
content: 'TODAY';
position: absolute;
top: 0;
bottom: 0;
left: 2.5em;
}
&::after {
content: '';
position: absolute;
width: 0.5em;
background-color: #ddd;
top: 0;
background: #ddd;
top: -2em;
bottom: 0;
left: 1.5em;
z-index: -1;
border-radius: 100em;
}
&-item {
padding: 1em 0;
@ -48,7 +50,7 @@
&::before {
content: " ";
position: absolute;
top: 1em;
top: 0.75em;
width: 2em;
height: 2em;
z-index: 1;
@ -99,6 +101,7 @@
font-size: 1.4em;
font-weight: 700;
margin-bottom: 0.5em;
margin-top: 0.5em;
grid-area: title;
@media (min-width: 30em) {
@ -112,8 +115,15 @@
margin-bottom: 0.5em;
}
&__readmore {
width: 15ch;
width: max-content;
height: min-content;
grid-area: readmore;
background: #06f;
padding: 0.5em 1em;
color: white;
text-decoration: none;
border-radius: 0.25em;
display: block;
}
}
}
@ -133,9 +143,7 @@
margin-bottom: 1.4em;
strong {
font-weight: 700;
background: hsl(120, 240, 80,);
border-radius: 0.25em;
padding: .15em 0.5em 0.35em;
color: green;
}
}
.buttons {
@ -144,8 +152,8 @@
grid-template-columns: 1fr;
width: 100%;
font-size: 1.25em;
@media (min-width: 34em) {
grid-template-columns: 1fr 1fr;
@media (min-width: 33.75em) {
grid-template-columns: 1fr 1fr 1fr;
width: unset;
}
gap: 1em;

View file

@ -7,7 +7,7 @@
</header>
<section class="timeline section">
<div class="container">
{{ range .Pages }}
{{ range .Pages.ByDate }}
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
<span class="timeline-item__daterange">
<datetime class="timeline-item__date">{{ .Params.start }}</datetime> <datetime class="timeline-item__date">{{ .Params.end }}</datetime>
@ -22,11 +22,12 @@
</section>
<section class="cta section">
<div class="container">
<h1 class="title">wanna hire me?</h1>
<p class="blurb">i'm currently <strong>available</strong> for work. let's get in touch.</p>
<h1 class="title">You could be here.</h1>
<p class="blurb">I'm currently <strong>available</strong> for work. Let's get in touch.</p>
<div class="buttons">
<a href="mailto:a@trwnh.com" class="email button"><i class="fa fa-envelope"></i> email me</a>
<a href="mailto:a@trwnh.com" class="email button"><i class="fa fa-envelope"></i>Email me</a>
<a href="https://resume.abdullahtarawneh.com" class="resume button"><i class="fa fa-id-card-o"></i> Résume (HTML)</a>
<a href="https://resume.abdullahtarawneh.com/resume.pdf" class="resume button"><i class="fa fa-download"></i> Résume (PDF)</a>
</div>
</div>
</section>