Initial commit

src/App.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, onMounted, onUpdated, nextTick } from 'vue'
+import { createIcons, icons } from 'lucide'
+
+const visible = ref<boolean>(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    visible.value = true
+  })
+})
+onUpdated(async () => {
+  await nextTick()
+  createIcons({
+    icons,
+    nameAttr: 'icon',
+    attrs: {
+      width: '1.1em',
+      height: '1.1em',
+    },
+  })
+})
+</script>
+
+<template>
+  <main :style="{ display: visible ? 'inherit' : 'none' }">
+    <!-- TODO: 1. rename app -->
+    <h1>
+      <i icon="package"></i>
+      Vue-Boilerplate
+    </h1>
+    <br />
+    <p>
+      Fill this page with <i>whatever</i> you're going to develop.
+      <br />
+      <b>Then enjoy!</b>
+    </p>
+    <div class="button green-400">
+      <i icon="square-arrow-right"></i> This is a sample button yay
+    </div>
+    <br />
+    <hr />
+    <small class="footer">
+      <i icon="at-sign"></i>&nbsp;
+      <a href="https://git.klemek.fr/klemek" target="_blank">Kleπek</a>&nbsp; |&nbsp;
+      <!-- TODO: 1. rename app -->
+      <i icon="git-branch"></i>&nbsp;
+      <a href="https://git.klemek.fr/klemek/template" target="_blank">Repository</a>&nbsp; |&nbsp;
+      <i icon="copyright"></i>&nbsp;2026
+    </small>
+  </main>
+</template>
+
+<style scoped>
+.footer {
+  opacity: 50%;
+}
+</style>

src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.scss

@@ -0,0 +1,217 @@
+@use './material-colors.css';
+
+/*
+=================================================
+https://www.joshwcomeau.com/css/custom-css-reset/
+=================================================
+*/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body,
+div#app {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/*
+=================================================
+CUSTOM STYLE
+=================================================
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+:root {
+  /* https://materialui.co/colors/ */
+  /* TODO: 2. change hue and saturation */
+  --hue-primary: 65.52;
+  --sat-primary: 20%;
+  --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
+  --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
+  --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
+  --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
+  --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
+  --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
+}
+
+/*
+=================================================
+https://blog.koley.in/2019/339-bytes-of-responsive-css
+https://www.swyx.io/css-100-bytes
+https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
+=================================================
+*/
+
+html,
+body {
+  padding: 0;
+  max-width: 100%;
+  color: var(--text-primary);
+  font-family: 'Roboto', Verdana, serif;
+}
+
+body {
+  background-color: var(--background);
+}
+
+main {
+  padding: 1.5rem;
+  margin: auto;
+  background-color: var(--background-primary);
+  min-height: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1em 0 0.5em;
+}
+
+p,
+ul,
+ol {
+  margin-bottom: 2em;
+  color: var(--text-secondary);
+}
+
+hr {
+  opacity: 25%;
+  border-bottom: 0;
+  margin-bottom: 0.5em;
+}
+
+textarea,
+input,
+select,
+.mono {
+  font-family: 'Roboto Mono', monospace;
+}
+
+textarea {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+.button {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  padding: 1em;
+  margin-bottom: 0.75em;
+  border: 1px solid var(--color-primary);
+  border-radius: 0.5em;
+  background-color: var(--background);
+  cursor: pointer;
+  font-size: 1.333em;
+}
+
+.button:hover {
+  background-color: var(--background-secondary);
+}
+
+@media only screen and (min-width: 768px) {
+  main {
+    max-width: 42rem;
+  }
+  table {
+    font-size: inherit;
+  }
+}
+
+/*
+ * LUCIDE ICONS
+ */
+
+svg.lucide {
+  display: inline-block;
+  vertical-align: text-top;
+}
+
+b .lucide,
+h1 .lucide,
+h2 .lucide,
+h3 .lucide,
+h4 .lucide,
+h5 .lucide,
+h6 .lucide {
+  stroke-width: 3;
+}