Add light mode, hover effects, and improve colours
This commit is contained in:
Lewin Kelly
parent
f0529c0cb0
commit
afc45328cf
|
|
@ -1,28 +1,44 @@
|
|||
@font-face
|
||||
font-family: "Inter"
|
||||
src: url("/Inter.woff2") format("woff2"), url("/Inter.ttf") format("ttf")
|
||||
font-display: swap
|
||||
|
||||
@font-face
|
||||
font-family: "Inter"
|
||||
src: url("/InterItalic.woff2") format("woff2"), url("/InterItalic.ttf") format("ttf")
|
||||
font-style: italic
|
||||
font-display: swap
|
||||
|
||||
:root, body
|
||||
padding: 0
|
||||
margin: 0
|
||||
background: #100f0e
|
||||
color: white
|
||||
@media (prefers-color-scheme: light)
|
||||
background: #e6e4e3
|
||||
color: black
|
||||
|
||||
font-family: "Inter", sans-serif
|
||||
|
||||
a
|
||||
@apply transition-colors text-orange-500
|
||||
@apply transition-colors
|
||||
text-decoration: none
|
||||
&:hover
|
||||
@apply text-orange-300
|
||||
&:not(.txt)
|
||||
@apply text-orange-500
|
||||
&:hover
|
||||
@apply text-orange-300
|
||||
@media (prefers-color-scheme: light)
|
||||
@apply text-orange-700
|
||||
.txt
|
||||
@apply text-white
|
||||
&:hover
|
||||
@apply text-#aaa
|
||||
|
||||
hr
|
||||
border: none
|
||||
border-top: 1px solid #464443
|
||||
@media (prefers-color-scheme: light)
|
||||
border-top: 1px solid #a6a4a3
|
||||
|
||||
::-webkit-scrollbar
|
||||
position: fixed
|
||||
|
|
@ -32,13 +48,22 @@ hr
|
|||
background: none
|
||||
&-thumb
|
||||
border-radius: 0.2rem
|
||||
|
||||
background: #282625
|
||||
&:hover
|
||||
background: #464443
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
background: white
|
||||
&:hover
|
||||
background: #a6a4a3
|
||||
|
||||
// Utility classes
|
||||
|
||||
.bg-a
|
||||
background: #1f1c1d
|
||||
@media (prefers-color-scheme: light)
|
||||
background: white
|
||||
|
||||
.bg-bg
|
||||
background: #100f0e
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a">
|
||||
<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a @light:text-#4c4b4a">
|
||||
<a href="/" class="pe-1.5">Revival Archive</a>
|
||||
2023-2023
|
||||
<nav class="text-white mt-5 mb-4">
|
||||
|
|
@ -11,10 +11,19 @@
|
|||
<style lang="sass">
|
||||
nav
|
||||
color: #8c8b8a
|
||||
@media (prefers-color-scheme: light)
|
||||
color: #4c4b4a
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
color: white
|
||||
&:hover
|
||||
color: #aaa
|
||||
text-decoration: none
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
color: black
|
||||
&:hover
|
||||
color: #888
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="bg-#282625 px-6">
|
||||
<div class="bg-#282625 @light:bg-white px-6">
|
||||
<span class="inline-block pt-3 pb-3">
|
||||
<a href="/" class="text-light hover:text-#aaa text-xl font-light mb-5">
|
||||
<a href="/" class="txt text-white @light:text-black hover:text-#aaa text-xl font-light mb-5">
|
||||
Revival Archive
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -16,8 +16,13 @@
|
|||
|
||||
<style lang="sass">
|
||||
.navlink
|
||||
@apply no-underline text-white px-2 me-1 rounded-1 transition
|
||||
@apply no-underline px-2 me-1 rounded-1 transition
|
||||
font-size: 0.9rem
|
||||
|
||||
color: white
|
||||
@media (prefers-color-scheme: light)
|
||||
color: black
|
||||
|
||||
&:hover
|
||||
@apply text-#aaa
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
<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)
|
||||
background: linear-gradient(to right, #f1c40f var(--rating), #4f4d4c var(--rating))
|
||||
@media (prefers-color-scheme: light)
|
||||
background: linear-gradient(to right, #f1c40f var(--rating), #bfbdbc var(--rating))
|
||||
|
||||
// APply a mask to hide the gradient outside the star
|
||||
-webkit-mask: url(/star.svg) no-repeat
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col justify-center items-center h-72vh">
|
||||
<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>
|
||||
<div class="bg-a p-8 px-22 rounded-4 text-center">
|
||||
<h1 class="m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
|
||||
{$page.error?.message}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
<h1>Posts</h1>
|
||||
|
||||
{#each data.posts as post}
|
||||
<a href="/blog/{post.path}" class="text-white hover:text-#aaa">
|
||||
<article class="bg-a py-3 px-6 rounded-5 mb-4">
|
||||
<a href="/blog/{post.path}" class="txt text-white @light:text-dark
|
||||
hover:text-#ccc @light:hover:text-#555 block bg-a rounded-3
|
||||
transition durition-500 hover:shadow-xl box-border">
|
||||
<article class="py-3 px-6 mb-4">
|
||||
<h2 class="my-2">{post.title}</h2>
|
||||
<p class="my-2">
|
||||
Published {new Date(post.date).toLocaleDateString("en-GB", {
|
||||
|
|
@ -24,3 +26,8 @@
|
|||
</article>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
<style lang="sass">
|
||||
a:hover
|
||||
transform: translateY(-0.15rem)
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<script lang="ts">
|
||||
const years: { [k: number]: string } = {
|
||||
2009: "bg-red-600",
|
||||
2008: "bg-pink-700",
|
||||
2009: "bg-rose-400 text-black",
|
||||
2010: "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",
|
||||
2013: "bg-lime-500 text-black",
|
||||
2014: "bg-emerald-600 text-black",
|
||||
2015: "bg-cyan-600 text-black",
|
||||
2016: "bg-blue-600 ",
|
||||
2017: "bg-indigo-600",
|
||||
2018: "bg-violet-400 text-black",
|
||||
2019: "bg-purple-600",
|
||||
2020: "bg-slate-600",
|
||||
}
|
||||
|
||||
const revivals = [
|
||||
{
|
||||
name: "Mercury",
|
||||
years: [2013],
|
||||
years: [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
|
|
@ -24,31 +29,31 @@
|
|||
{
|
||||
name: "Finobe",
|
||||
years: [2012, 2016],
|
||||
rating: 4.5
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
name: "Meteorite",
|
||||
years: [2016, 2020],
|
||||
rating: 2.65,
|
||||
},
|
||||
{
|
||||
name: "Tadah",
|
||||
years: [2010, 2012, 2014, 2016],
|
||||
rating: 3.5,
|
||||
},
|
||||
{
|
||||
name: "Krypton",
|
||||
years: [2011],
|
||||
rating: 4.65,
|
||||
},
|
||||
{
|
||||
name: "Tadah",
|
||||
years: [2014],
|
||||
rating: 3.5,
|
||||
name: "Hamblox",
|
||||
years: [2015],
|
||||
rating: 4.65,
|
||||
},
|
||||
{
|
||||
name: "Kapish",
|
||||
years: [2014],
|
||||
rating: 2.35,
|
||||
},
|
||||
{
|
||||
name: "Fobe",
|
||||
years: [2016],
|
||||
name: "Rawblox",
|
||||
years: [2017],
|
||||
rating: 1,
|
||||
},
|
||||
{
|
||||
|
|
@ -56,6 +61,11 @@
|
|||
years: [2018],
|
||||
rating: 1.65,
|
||||
},
|
||||
{
|
||||
name: "Kapish",
|
||||
years: [2014, 2016],
|
||||
rating: 2.35,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
|
|
@ -67,12 +77,17 @@
|
|||
|
||||
<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">
|
||||
<a
|
||||
href="/index"
|
||||
class="txt bg-#1f1c1d @light:bg-white p-5 rounded-2 flex flex-col
|
||||
card transition durition-500 hover:shadow-xl box-border
|
||||
text-white @light:text-black">
|
||||
<h2 class="m-0 mb-1">{revival.name}</h2>
|
||||
<div>
|
||||
<div class="text-white flex flex-wrap">
|
||||
{#each revival.years as year}
|
||||
<span
|
||||
class="rounded-full {years[year]} px-2 py-0.5 text-sm me-2">
|
||||
class="{years[year]}
|
||||
rounded-full px-2 py-0.5 my-1 text-sm me-2">
|
||||
{year}
|
||||
</span>
|
||||
{/each}
|
||||
|
|
@ -84,6 +99,11 @@
|
|||
<div class="mt-a ms-a">
|
||||
<Stars rating={revival.rating} />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="sass">
|
||||
.card:hover
|
||||
transform: translateY(-0.3rem)
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue