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

View File

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

View File

@ -1,4 +1,5 @@
import axios from 'axios' import axios from 'axios'
import dj from 'dayjs'
const isDev = process.env.NODE_ENV !== 'production' && false const isDev = process.env.NODE_ENV !== 'production' && false
axios.defaults.baseURL = `${isDev ? 'http://localhost' : 'https://api.nicco.io'}/wp-json/wp/v2` 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) 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"> <script context="module">
import WPAdapter from '../components/WPAdapter.svelte'
import { getOne } from '../lib/wp' import { getOne } from '../lib/wp'
export async function preload() { export async function preload() {
@ -42,6 +43,7 @@
</svelte:head> </svelte:head>
<SimplePage title="About" expanded={false}> <SimplePage title="About" expanded={false}>
{@html data.content} <WPAdapter content={data.content} />
<!-- {@html data.content} -->
<img src="/images/about.jpg" alt="decoration" /> <img src="/images/about.jpg" alt="decoration" />
</SimplePage> </SimplePage>

View File

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

View File

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

View File

@ -51,3 +51,31 @@ a {
color: inherit; color: inherit;
text-decoration: none; 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;
}