From 02be38e66e5d7a1921f7c4b6a8d44c911826b3a8 Mon Sep 17 00:00:00 2001 From: SindreKjelsrud Date: Tue, 29 Aug 2023 11:57:38 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20added=20"Tools"-page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/tools.json | 31 +++++++++++++++++++++++++ src/pages/tools.astro | 51 ++++++++++++++++++++++++++++++++++++++++++ src/styles/global.css | 40 ++++++++++++++++++++++++--------- 3 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 public/data/tools.json create mode 100644 src/pages/tools.astro diff --git a/public/data/tools.json b/public/data/tools.json new file mode 100644 index 0000000..3b8bc87 --- /dev/null +++ b/public/data/tools.json @@ -0,0 +1,31 @@ +[ + { + "name": "Obsidian", + "description": "Private and flexible note‑taking app that adapts to the way you think", + "link": "https://obsidian.md/", + "icon": "https://img.icons8.com/?size=512&id=q53th37bGbV0&format=png", + "tag": "productivity" + }, + { + "name": "GitHub", + "description": "Code hosting for all projects", + "link": "https://github.com/", + "icon": "https://img.icons8.com/?size=512&id=52539&format=png", + "tag": "webdev" + }, + { + "name": "Alacritty", + "description": "A modern terminal emulator that comes with sensible defaults, but allows for extensive configuration", + "link": "https://alacritty.org/", + "icon": "https://cdn.icon-icons.com/icons2/3053/PNG/512/alacritty_macos_bigsur_icon_190410.png", + "tag": "productivity" + }, + { + "name": "Figma", + "description": "Design tool for all design artifacts and social media handles", + "link": "https://www.figma.com/", + "icon": "https://img.icons8.com/?size=512&id=zfHRZ6i1Wg0U&format=png", + "tag": "design" + } + ] + \ No newline at end of file diff --git a/src/pages/tools.astro b/src/pages/tools.astro new file mode 100644 index 0000000..1cdf25b --- /dev/null +++ b/src/pages/tools.astro @@ -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' +--- + + + + + + + +
+
+
+

Tools

+

Tools I use everyday (or at least most days)

+ +
+
+ + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index b88f3da..e6991d2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; -} \ No newline at end of file +} + +/* 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); } \ No newline at end of file