create basic components for index

- Updated layout
- Include CSS reset
- Include Catppuccin color variables
- Add basic styling
- Create navbar component

src/assets/style/global.css

@@ -0,0 +1,61 @@
+@import url('./themes.css');
+@import url('./utils.css');
+
+html {
+  background-color: var(--prj-bg);
+  color: var(--prj-text);
+}
+
+body {
+  max-width: 95vw; /* leave some space in the end by default */
+  margin: auto;
+}
+
+/* TODO: Optimize, clean and realocate where it belogns the links styles */
+a {
+  --boder-color: transparent;
+  color: var(--prj-link-text);
+  border: 1px solid var(--boder-color);
+  border-radius: 4px;
+
+  transition: background-color 200ms, color 200ms;
+}
+
+a.active {
+  border: 1px solid var(--prj-accent-bg);
+}
+
+a:hover {
+  --border-color: var(--prj-accent-bg);
+  background-color: var(--prj-accent-bg);
+  color: var(--prj-accent-text);
+  border: 1px solid var(--border-color);
+}
+
+/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+
+@media screen and (min-width: 640px) {
+  body {
+    min-width: 640px;
+  }
+}
+@media screen and (min-width: 768px) {
+  body {
+    min-width: 768px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  body {
+    min-width: 1024px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  body {
+    min-width: 1280px;
+  }
+}
+@media screen and (min-width: 1536px) {
+  body {
+    max-width: 1536px;
+  }
+}

src/assets/style/themes.css

@@ -0,0 +1,13 @@
+/* Reference: https://github.com/catppuccin/palette/blob/main/css/catppuccin.css */
+@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
+
+/* Variables prefixed with prj to avoid collisions */
+:root {
+  /* Using catppuccin for now, make a theme switcher later */
+  --prj-bg: var(--ctp-macchiato-base);
+  --prj-text: var(--ctp-macchiato-text);
+  --prj-link-text: var(--ctp-macchiato-teal);
+
+  --prj-accent-bg: var(--ctp-macchiato-teal);
+  --prj-accent-text: var(--ctp-macchiato-base);
+}

src/assets/style/utils.css

@@ -0,0 +1,9 @@
+.hstack {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.list-unstyle {
+  list-style: none;
+}