Add revival index page and improve styling
This commit is contained in:
Lewin Kelly
parent
53313ea02c
commit
f0529c0cb0
|
|
@ -32,6 +32,7 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@material/web": "1.0.0-pre.12",
|
||||
"@unocss/extractor-svelte": "^0.53.4",
|
||||
"unocss": "^0.53.4"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ settings:
|
|||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@material/web':
|
||||
specifier: 1.0.0-pre.12
|
||||
version: 1.0.0-pre.12
|
||||
'@unocss/extractor-svelte':
|
||||
specifier: ^0.53.4
|
||||
version: 0.53.4
|
||||
|
|
@ -300,6 +303,24 @@ packages:
|
|||
'@jridgewell/resolve-uri': 3.1.0
|
||||
'@jridgewell/sourcemap-codec': 1.4.14
|
||||
|
||||
/@lit-labs/ssr-dom-shim@1.1.1:
|
||||
resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
|
||||
dev: false
|
||||
|
||||
/@lit/reactive-element@1.6.2:
|
||||
resolution: {integrity: sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==}
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.1.1
|
||||
dev: false
|
||||
|
||||
/@material/web@1.0.0-pre.12:
|
||||
resolution: {integrity: sha512-hqbb1dZx3Un3q8y6/teC19pPGARfGxVXVvtns/tw77XgdNafgStPbR0oQ8hOlEDWmCEUSW94O0y6k3kG0lD8lg==}
|
||||
dependencies:
|
||||
lit: 2.7.6
|
||||
safevalues: 0.4.3
|
||||
tslib: 2.6.0
|
||||
dev: false
|
||||
|
||||
/@nodelib/fs.scandir@2.1.5:
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
engines: {node: '>= 8'}
|
||||
|
|
@ -430,6 +451,10 @@ packages:
|
|||
resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
|
||||
dev: true
|
||||
|
||||
/@types/trusted-types@2.0.3:
|
||||
resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
|
||||
dev: false
|
||||
|
||||
/@types/unist@2.0.6:
|
||||
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
|
||||
dev: true
|
||||
|
|
@ -1006,6 +1031,28 @@ packages:
|
|||
resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
|
||||
dev: false
|
||||
|
||||
/lit-element@3.3.2:
|
||||
resolution: {integrity: sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==}
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.1.1
|
||||
'@lit/reactive-element': 1.6.2
|
||||
lit-html: 2.7.5
|
||||
dev: false
|
||||
|
||||
/lit-html@2.7.5:
|
||||
resolution: {integrity: sha512-YqUzpisJodwKIlbMFCtyrp58oLloKGnnPLMJ1t23cbfIJjg/H9pvLWK4XS69YeubK5HUs1UE4ys9w5dP1zg6IA==}
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.3
|
||||
dev: false
|
||||
|
||||
/lit@2.7.6:
|
||||
resolution: {integrity: sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg==}
|
||||
dependencies:
|
||||
'@lit/reactive-element': 1.6.2
|
||||
lit-element: 3.3.2
|
||||
lit-html: 2.7.5
|
||||
dev: false
|
||||
|
||||
/local-pkg@0.4.3:
|
||||
resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
|
||||
engines: {node: '>=14'}
|
||||
|
|
@ -1300,6 +1347,10 @@ packages:
|
|||
mri: 1.2.0
|
||||
dev: true
|
||||
|
||||
/safevalues@0.4.3:
|
||||
resolution: {integrity: sha512-pNCNTkx3xs7G5YJ/9CoeZZVUSPRjH0SEPM0QI5Z1FZRlLBviTFWlNKPs8PTvZvERV0gO7ie/t/Zc0S96JS4Xew==}
|
||||
dev: false
|
||||
|
||||
/sander@0.5.1:
|
||||
resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
|
||||
dependencies:
|
||||
|
|
@ -1512,7 +1563,6 @@ packages:
|
|||
|
||||
/tslib@2.6.0:
|
||||
resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
|
||||
dev: true
|
||||
|
||||
/typescript@5.1.6:
|
||||
resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ declare global {
|
|||
}
|
||||
declare const Footer: typeof import("$lib/components/Footer.svelte").default
|
||||
declare const Navbar: typeof import("$lib/components/Navbar.svelte").default
|
||||
declare const Stars: typeof import("$lib/components/Stars.svelte").default
|
||||
}
|
||||
|
||||
export {}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="theme-color" content="#100f0e" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@ a
|
|||
&:hover
|
||||
@apply text-orange-300
|
||||
|
||||
hr
|
||||
border: none
|
||||
border-top: 1px solid #464443
|
||||
|
||||
::-webkit-scrollbar
|
||||
position: fixed
|
||||
width: 0.5rem
|
||||
|
|
@ -31,3 +35,10 @@ a
|
|||
background: #282625
|
||||
&:hover
|
||||
background: #464443
|
||||
|
||||
// Utility classes
|
||||
|
||||
.bg-a
|
||||
background: #1f1c1d
|
||||
.bg-bg
|
||||
background: #100f0e
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
<footer class="mt-auto p-5 text-center text-#8c8b8a">
|
||||
<a
|
||||
href="/"
|
||||
class="no-underline pe-1.5 transition-colors
|
||||
text-purple-600 hover:text-purple-500">
|
||||
Revival Archive
|
||||
</a>
|
||||
<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a">
|
||||
<a href="/" class="pe-1.5">Revival Archive</a>
|
||||
2023-2023
|
||||
<nav class="text-white mt-5 mb-4">
|
||||
<a href="/about">About</a>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<nav class="inline-block ps-4">
|
||||
<a class="navlink" href="/">Home</a>
|
||||
<a class="navlink" href="/about">About</a>
|
||||
<a class="navlink" href="/index">Revival Index</a>
|
||||
<a class="navlink" href="/blog">Blog</a>
|
||||
</nav>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
export let rating: number
|
||||
</script>
|
||||
|
||||
{#each { length: 5 } as _, i}
|
||||
<div
|
||||
class="w-5 h-5 me-1.5 inline-block"
|
||||
style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" />
|
||||
{/each}
|
||||
|
||||
<style lang="sass">
|
||||
div
|
||||
// Fill each star with a gradient based on the rating
|
||||
background: linear-gradient( to right, #f1c40f var(--rating), #f1c40f var(--rating), #7f7d7c var(--rating), #7f7d7c var(--rating), #7f7d7c)
|
||||
|
||||
// APply a mask to hide the gradient outside the star
|
||||
-webkit-mask: url(/star.svg) no-repeat
|
||||
</style>
|
||||
|
|
@ -2,8 +2,12 @@
|
|||
import { page } from "$app/stores"
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$page.error?.message} • Revival Archive</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col justify-center items-center h-72vh">
|
||||
<div class="bg-#1f1c1d p-8 px-22 rounded-4 light-text text-center">
|
||||
<div class="bg-a p-8 px-22 rounded-4 light-text text-center">
|
||||
<h1 class="light-text m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
|
||||
{$page.error?.message}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<Navbar />
|
||||
|
||||
<main
|
||||
class="box-border px-5 pt-12 sm:mx-auto w-full
|
||||
class="box-border px-5 pt-12 sm:mx-a w-full
|
||||
sm:w-140 md:w-180 lg:w-220 xl:w-270 2xl:w-300">
|
||||
<slot />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
{#each data.posts as post}
|
||||
<a href="/blog/{post.path}" class="text-white hover:text-#aaa">
|
||||
<article class="bg-#1f1c1d py-3 px-6 rounded-5 mb-4">
|
||||
<article class="bg-a py-3 px-6 rounded-5 mb-4">
|
||||
<h2 class="my-2">{post.title}</h2>
|
||||
<p class="my-2">
|
||||
Published {new Date(post.date).toLocaleDateString("en-GB", {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ export async function load() {
|
|||
return {
|
||||
posts: Promise.all(
|
||||
Object.entries(allPostFiles).map(async ([path, resolver]) => {
|
||||
const { title, date, html } = await resolver()
|
||||
const { title, date, html } = (await resolver()) as any
|
||||
|
||||
return {
|
||||
title,
|
||||
date,
|
||||
html,
|
||||
path: path.match(/(\w+)\.json/)[1],
|
||||
path: path.match(/(\w+)\.json/)?.[1],
|
||||
}
|
||||
})
|
||||
),
|
||||
|
|
|
|||
|
|
@ -2,10 +2,14 @@
|
|||
export let data
|
||||
</script>
|
||||
|
||||
<article class="w-full sm:w-140 mx-auto">
|
||||
<span class="flex my-10">
|
||||
<h1 class="m-0">{data.title}</h1>
|
||||
<span class="mt-auto ms-3">
|
||||
<svelte:head>
|
||||
<title>{data.title} • Revival Archive</title>
|
||||
</svelte:head>
|
||||
|
||||
<article class="max-w-150 mx-a">
|
||||
<span class="flex mt-10">
|
||||
<h1 class="m-0 text-2rem">{data.title}</h1>
|
||||
<span class="mt-a ms-a mb-0.5">
|
||||
Published {new Date(data.date).toLocaleDateString("en-GB", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
|
|
@ -16,6 +20,8 @@
|
|||
</span>
|
||||
</span>
|
||||
|
||||
<hr class="mt-3 mb-8" />
|
||||
|
||||
<div class="text-justify">
|
||||
{@html data.html}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<script lang="ts">
|
||||
const years: { [k: number]: string } = {
|
||||
2009: "bg-red-600",
|
||||
2011: "bg-orange-500 text-black",
|
||||
2012: "bg-yellow-500 text-black",
|
||||
2013: "bg-green-600",
|
||||
2014: "bg-teal-600",
|
||||
2016: "bg-blue-600",
|
||||
2018: "bg-indigo-600",
|
||||
2020: "bg-purple-600",
|
||||
}
|
||||
|
||||
const revivals = [
|
||||
{
|
||||
name: "Mercury",
|
||||
years: [2013],
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Goodblox",
|
||||
years: [2009],
|
||||
rating: 4,
|
||||
},
|
||||
{
|
||||
name: "Finobe",
|
||||
years: [2012, 2016],
|
||||
rating: 4.5
|
||||
},
|
||||
{
|
||||
name: "Meteorite",
|
||||
years: [2016, 2020],
|
||||
rating: 2.65,
|
||||
},
|
||||
{
|
||||
name: "Krypton",
|
||||
years: [2011],
|
||||
rating: 4.65,
|
||||
},
|
||||
{
|
||||
name: "Tadah",
|
||||
years: [2014],
|
||||
rating: 3.5,
|
||||
},
|
||||
{
|
||||
name: "Kapish",
|
||||
years: [2014],
|
||||
rating: 2.35,
|
||||
},
|
||||
{
|
||||
name: "Fobe",
|
||||
years: [2016],
|
||||
rating: 1,
|
||||
},
|
||||
{
|
||||
name: "idk18",
|
||||
years: [2018],
|
||||
rating: 1.65,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Revival Index • Revival Archive</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Revival Index</h1>
|
||||
|
||||
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{#each revivals as revival}
|
||||
<div class="bg-#1f1c1d p-5 rounded-2 flex flex-col">
|
||||
<h2 class="m-0 mb-1">{revival.name}</h2>
|
||||
<div>
|
||||
{#each revival.years as year}
|
||||
<span
|
||||
class="rounded-full {years[year]} px-2 py-0.5 text-sm me-2">
|
||||
{year}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="my-20 text-center">
|
||||
<code>revival logo goes here</code>
|
||||
</div>
|
||||
|
||||
<div class="mt-a ms-a">
|
||||
<Stars rating={revival.rating} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45 0L58.3495 30.4312L90 34.3769L66.6 57.1302L72.8115 90L45 73.6311L17.1885 90L23.4 57.1302L0 34.3769L31.6505 30.4312L45 0Z" fill="#AFADAC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
Loading…
Reference in New Issue