sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ added "Tools"-page

Browse source
This commit is contained in:
SindreKjelsrud 2023-08-29 11:57:38 +02:00
parent 95de68bda0
commit 02be38e66e
3 changed files with 112 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/pages/tools.astro Normal file
View file

@ -0,0 +1,51 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import stackData from '../../public/data/tools.json'
---
<!DOCTYPE html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<div class="flex flex-col fixed w-screen p-5">
<Header title={SITE_TITLE} />
<main class="flex flex-col justify-center items-left mx-auto pt-8">
<h1 class="text-2xl">Tools</h1>
<p>Tools I use everyday (or at least most days)</p>
<ul class="pt-2">
{stackData.map((data) =>
<div class="p-2 mb-4 cards">
<ul>
<a
href={data.link}
class="flex gap-2"
>
<img src={data.icon} class="w-20 h-20" />
<div class="flex flex-col">
<p>
{data.name}
</p>
<div class="description">
<p>{data.description}</p>
</div>
<div class="tag">
<button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
#{data.tag}
</button>
</div>
</div>
</a>
</ul>
</div>
)}
</ul>
</main>
<Footer />
</div>
</body>
</html>

40
src/styles/global.css
View file

@ -1,19 +1,39 @@
/*
The CSS in this style tag is based off of Bear Blog's default CSS.
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
:root {
--light-bg: #FFF8EA;
--light-1: #594545;
--light-2: #815B5B;
--light-3: #9E7676;
--light-hover: #DAC0A3;
--dark-bg: #27374D;
--dark-1: #DDE6ED;
--dark-2: #9DB2BF;
--dark-3: #526D82;
--dark-hover: #001C30;
}
html {
background-color: #FFF8EA;
color: #815B5B;
background-color: var(--light-bg);
color: var(--light-1);
}
html.dark {
background-color: #27374D;
color: #DDE6ED;
background-color: var(--dark-bg);
color: var(--dark-1);
}
body {
font-family: Verdana, sans-serif;
}
}
/* TOOLS */
.cards :hover { background: var(--light-hover) }
.dark .cards :hover { background: var(--dark-hover) }
.description p { color: var(--light-2); }
.dark .description p { color: var(--dark-2); }
.tag button { color: var(--light-3); border-color: var(--light-3); }
.dark .tag button { color: var(--dark-3); border-color: var(--dark-3); }