final touches

This commit is contained in:
cupcakearmy 2020-09-24 19:29:43 +02:00
parent 4df5603222
commit e71457a49d
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
7 changed files with 69 additions and 18 deletions

View File

@ -5,7 +5,7 @@
<style>
h2 {
font-size: 2em;
margin-bottom: 0.75em;
margin-bottom: 0.25em;
}
div {
@ -19,11 +19,11 @@
}
section {
margin-bottom: 4em;
margin-bottom: 6em;
}
ion-icon {
transform: translateY(0.25em);
a {
font-family: monospace;
}
@media (max-width: 30em) {
@ -34,8 +34,9 @@
</style>
<section>
<a href={project.link} target="_blank" rel="noopener">
<h2>{project.title}</h2>
</a>
<div><b>{project.description}</b> <b class="date">{project.date}</b></div>
<p>

View File

@ -19,17 +19,27 @@
.regular {
font-weight: 400;
}
p {
margin-bottom: 6em;
}
a {
font-family: monospace;
}
</style>
<a href={work.link} target="_blank" rel="noopener">
<div class="horizontal">
<div class="title regular">{work.title}</div>
<div>
<ion-icon name="link-outline" />
<a href={work.link} target="_blank">{work.link.replace(/https?:\/\//, '')}</a>
<span>{work.link.replace(/https?:\/\//, '')}</span>
</div>
</div>
<ImageFrame src={work.image.sizes.medium_large} alt={work.image.description} />
</a>
<div class="horizontal regular">
<div>{work.role}</div>
<div>{work.date}</div>

View File

@ -1,4 +1,5 @@
import axios from 'axios'
import dj from 'dayjs'
const isDev = process.env.NODE_ENV !== 'production' && false
axios.defaults.baseURL = `${isDev ? 'http://localhost' : 'https://api.nicco.io'}/wp-json/wp/v2`
@ -39,3 +40,12 @@ export async function getAll(url, params = {}) {
}
return results.map(normalize)
}
export function sortByAndMapDate(data, format = 'MMM YY') {
return data
.sort((a, b) => parseInt(b.date) - parseInt(a.date))
.map((work) => ({
...work,
date: dj(work.date * 1000).format(format),
}))
}

View File

@ -1,4 +1,5 @@
<script context="module">
import WPAdapter from '../components/WPAdapter.svelte'
import { getOne } from '../lib/wp'
export async function preload() {
@ -42,6 +43,7 @@
</svelte:head>
<SimplePage title="About" expanded={false}>
{@html data.content}
<WPAdapter content={data.content} />
<!-- {@html data.content} -->
<img src="/images/about.jpg" alt="decoration" />
</SimplePage>

View File

@ -1,9 +1,9 @@
<script context="module">
import { getAll } from '../lib/wp'
import { getAll, sortByAndMapDate } from '../lib/wp'
export async function preload() {
const data = await getAll('projects')
return { data }
return { data: sortByAndMapDate(data) }
}
</script>

View File

@ -1,9 +1,9 @@
<script context="module">
import { getAll } from '../lib/wp'
import { getAll, sortByAndMapDate } from '../lib/wp'
export async function preload() {
const data = await getAll('works')
return { data }
return { data: sortByAndMapDate(data) }
}
</script>

View File

@ -51,3 +51,31 @@ a {
color: inherit;
text-decoration: none;
}
ion-icon {
transform: translateY(0.2rem);
}
.progress {
box-sizing: border-box;
width: 100%;
position: relative;
background: #fff;
margin: 0.5em 0;
padding: 0.1em 0.5em;
border: 1px solid black;
}
.progress > span {
position: relative;
z-index: 1;
}
.progress > div {
height: 100%;
background: var(--clr-primary);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}