Minor adjustments
This commit is contained in:
parent
fee3766c2b
commit
4f76b65fd4
4 changed files with 46 additions and 18 deletions
|
@ -4,7 +4,8 @@ export async function api<T>(url: string): Promise<T> {
|
|||
return fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText)
|
||||
console.error(response.status, response.statusText)
|
||||
throw new Error("Request failed :(")
|
||||
}
|
||||
return response.json() as Promise<T>
|
||||
})
|
||||
|
|
26
src/App.css
26
src/App.css
|
@ -16,6 +16,10 @@ body {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.info_container {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
@ -24,7 +28,7 @@ body {
|
|||
}
|
||||
|
||||
.info_container > * {
|
||||
border: 3px solid white;
|
||||
border: 3px solid #fff;
|
||||
margin: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
|
@ -40,7 +44,7 @@ body {
|
|||
|
||||
.info_description {
|
||||
padding-top: 10px;
|
||||
border-right: 3px solid white;
|
||||
border-right: 3px solid #fff;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
letter-spacing: -5px;
|
||||
|
@ -55,3 +59,21 @@ body {
|
|||
width: 220px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button_link {
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
width: 150px;
|
||||
background-color: #020355;
|
||||
border: 3px solid #fff;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.button_link:hover {
|
||||
background-color: #004;
|
||||
}
|
||||
|
|
|
@ -30,15 +30,16 @@ export default function Lastfm() {
|
|||
link="https://www.last.fm/user/TTTaevas"
|
||||
description="Music"
|
||||
elements={[
|
||||
<a href={lastfm.url} target="_blank" className="flex">
|
||||
<img alt="album thumbnail" src={lastfm.image} className="my-auto mx-auto h-2/5 w-2/5"></img>
|
||||
<div className="my-auto mx-auto w-min">
|
||||
<p className="leading-4 mb-2"><strong>{lastfm.artist}</strong></p>
|
||||
<p className="leading-4 mt-2"><strong>{lastfm.name}</strong></p>
|
||||
<div className="flex mx-auto">
|
||||
<img alt="album thumbnail" src={lastfm.image} className="my-auto h-2/5 w-2/5"></img>
|
||||
<div className="my-auto ml-4 w-fit text-left">
|
||||
<p className="mb-2"><strong>{lastfm.artist}</strong></p>
|
||||
<p className="mt-2"><strong>{lastfm.name}</strong></p>
|
||||
</div>
|
||||
</a>,
|
||||
<p><strong>{lastfm.album}</strong></p>,
|
||||
<p>{lastfm.listening ? "(Currently listening!)" : "(Last listened)"}</p>
|
||||
</div>,
|
||||
<p className="mt-2"><strong>{lastfm.album}</strong></p>,
|
||||
<p className="mt-4">{lastfm.listening ? "(Currently listening!)" : "(Last listened)"}</p>,
|
||||
<a className="button_link" href={lastfm.url} target="_blank">Music Details</a>
|
||||
]}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -25,8 +25,7 @@ export default function Speedruncom() {
|
|||
return <></>
|
||||
}
|
||||
|
||||
let game = speedruncom.game
|
||||
speedruncom.details.forEach((d) => game += ` - ${d}`)
|
||||
let details = speedruncom.details.map((d) => <p>{d}</p>)
|
||||
|
||||
return (
|
||||
<Info
|
||||
|
@ -34,11 +33,16 @@ export default function Speedruncom() {
|
|||
link="https://www.speedrun.com/Taevas/"
|
||||
description="Speedrun"
|
||||
elements={[
|
||||
<a href={speedruncom.link} target="_blank" className="p-0">
|
||||
<img alt="game thumbnail" src={speedruncom.thumbnail} className="h-32 mx-auto mb-2"></img>
|
||||
<p className="leading-5"><strong>#{speedruncom.place}</strong> on <strong>{game}</strong></p>
|
||||
</a>,
|
||||
<p className="mt-2"><strong>{speedruncom.date}</strong></p>
|
||||
<div className="flex">
|
||||
<img alt="game thumbnail" src={speedruncom.thumbnail} className="h-32 my-auto mb-2"></img>
|
||||
<div className="my-auto ml-2">
|
||||
<p className="mb-2">Placed <strong>#{speedruncom.place}</strong> on:</p>
|
||||
<p><strong>{speedruncom.game}</strong></p>
|
||||
{details}
|
||||
</div>
|
||||
</div>,
|
||||
<p className="mt-2"><strong>{speedruncom.date}</strong></p>,
|
||||
<a className="button_link" href={speedruncom.link} target="_blank">Run Details</a>
|
||||
]}
|
||||
/>
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue