start theming

Just/package-lock.json

@@ -11,6 +11,7 @@
         "@signaldb/core": "^1.3.1",
         "@signaldb/indexeddb": "^1.0.0",
         "@signaldb/vue": "^1.0.0",
+        "lucide-vue-next": "^0.477.0",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
         "vue-i18n": "^11.1.1",
@@ -4762,6 +4763,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.477.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.477.0.tgz",
+      "integrity": "sha512-C7azIKO7aJKf5MD7OIzV7NRDtnjXH3KSXfyJgGqRIMemuMzW/9esuMxDXIXDhBZcJgRtXMUN0FcJwOJZQ8SywA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

Just/package.json

@@ -17,6 +17,7 @@
     "@signaldb/core": "^1.3.1",
     "@signaldb/indexeddb": "^1.0.0",
     "@signaldb/vue": "^1.0.0",
+    "lucide-vue-next": "^0.477.0",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.1",

Just/public/just.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+     viewBox="0 0 37 37">
+    <style>
+        #circle { fill: #ffffff; }
+        #text { fill: #0d0d0d; fill-rule: nonzero; }
+    </style>
+    <path id="circle" d="M37 18.5C37 28.71 28.71 37 18.5 37S0 28.71 0 18.5 8.29 0 18.5 0 37 8.29 37 18.5Z" />
+    <path id="text" d="M12.443 24.432c-1.221 0-2.169-.26-2.844-.778-.676-.519-1.014-1.265-1.014-2.239 0-.084.004-.18.012-.287.008-.107.026-.258.055-.452s.072-.458.13-.793h3.174c-.053.309-.091.539-.114.691a5.821 5.821 0 0 0-.044.322 1.954 1.954 0 0 0-.007.15c0 .309.079.539.239.691.16.152.392.228.695.228.351 0 .639-.108.865-.322.225-.215.374-.543.448-.982l1.343-8.093h3.127l-1.336 8.03c-.204 1.231-.704 2.177-1.5 2.84-.796.662-1.873.994-3.229.994ZM22.523 24.385c-.891 0-1.641-.152-2.251-.456-.611-.304-1.052-.735-1.324-1.293-.273-.557-.346-1.216-.22-1.975l.856-5.17h3.159l-.818 4.95c-.047.282-.034.527.04.734a.914.914 0 0 0 .369.479c.173.113.38.169.621.169.246 0 .472-.056.679-.169.207-.112.381-.272.523-.479.141-.207.235-.452.283-.734l.817-4.95h3.158l-.856 5.17a4.124 4.124 0 0 1-.873 1.975 4.485 4.485 0 0 1-1.752 1.293c-.712.304-1.516.456-2.411.456Z"/>
+</svg>

Just/src/App.vue

@@ -1,6 +1,7 @@
 <template>
-  hi
+  <aside class="sidebar">
-<!--  <RouterView />-->
+    <img class="logo" src="/just.svg" :alt="$t('app.name')" />
+  </aside>
 </template>
 
 <script setup lang="ts">

Just/src/styles/main.scss

@@ -0,0 +1,25 @@
+
+@font-face
+{
+  font-family: 'inter';
+  font-weight: 100 900;
+  font-display: block;
+  src: url('./inter.woff2') format("woff2");
+}
+
+body
+{
+  color: var(--color-text);
+  font-family: 'inter', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background: var(--color-layout-bg);
+}
+
+.app-icon
+{
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: transparent;
+}

Just/src/styles/reset.scss

@@ -0,0 +1,128 @@
+/*
+  inspiration:
+  1. https://www.joshwcomeau.com/css/custom-css-reset/
+  2. https://piccalil.li/blog/a-more-modern-css-reset/
+ */
+
+
+/*
+  Remove default margin
+  Use a more-intuitive box-sizing model
+*/
+*
+{
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/*
+  Use a more-intuitive box-sizing model.
+*/
+*::before, *::after
+{
+  box-sizing: border-box;
+}
+
+/*
+  Templates are always invisible
+ */
+template
+{
+  display: none;
+}
+
+/*
+  Typographic tweaks!
+  Add accessible line-height
+  Improve text rendering
+*/
+body
+{
+  line-height: 1.5;
+  /*-webkit-font-smoothing: antialiased;*/
+  width: 100%;
+  max-width: 100%;
+  text-rendering: optimizelegibility;
+  scroll-behavior: smooth;
+  font-feature-settings: "lnum";
+  font-variant-numeric: lining-nums;
+  overflow-wrap: anywhere;
+  /*hyphens: auto;*/
+}
+
+/*
+  Prevent font size inflation
+  Smooth scrolling (for anchor navigation)
+ */
+html
+{
+  text-size-adjust: none;
+  scroll-behavior: smooth;
+}
+
+/*
+  Improve media defaults
+*/
+img, picture, video, canvas, svg, object, embed, iframe
+{
+  display: inline-block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+
+/*
+  Remove built-in form typography styles
+*/
+input, button, textarea, select
+{
+  font: inherit;
+}
+
+/*
+  Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6
+{
+  overflow-wrap: break-word;
+}
+
+/*
+  Balance text wrapping on headings
+*/
+h1, h2, h3, h4, h5, h6
+{
+  text-wrap: balance;
+}
+
+/*
+  Remove default margin in favour of better control in authored CSS
+*/
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd
+{
+  margin-block-end: 0;
+}
+
+/*
+  Anything that has been anchored to should have extra scroll margin
+*/
+:target {
+  scroll-margin-block: 5ex;
+}
+
+/*
+  Text color for links
+*/
+a, a:any-link
+{
+  color: inherit;
+}
+
+/*
+  Hidden attribute
+*/
+[hidden]
+{
+  display: none !important;
+}

Just/src/styles/styles.scss

@@ -0,0 +1,4 @@
+
+@use './theme';
+@use './reset';
+@use './main';

Just/src/styles/theme.scss

@@ -0,0 +1,23 @@
+
+:root
+{
+  // define all color shades
+  --color-bg-shade-1: #121212;
+  --color-bg-shade-2: #1D1D1D;
+  --color-bg-shade-3: #232323;
+  --color-bg-shade-4: #2D2D2D;
+  --color-bg-shade-5: #343434;
+
+  // define all foreground color shades
+  --color-fg-shade-1: #FFFFFF;
+  --color-fg-shade-2: #A1A1A1;
+  --color-fg-shade-3: #575757;
+
+  // layout shades
+  --color-layout-bg: var(--color-bg-shade-2);
+  --color-layout-icons-fg: var(--color-fg-shade-3);
+  --color-layout-icons-hover-fg: var(--color-fg-shade-2);
+
+  // general text shades
+  --color-text: var(--color-fg-shade-1);
+}