aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/base.css74
-rw-r--r--src/assets/hero-gradient.svg23
-rw-r--r--src/assets/logo.svg1
-rw-r--r--src/components/SearchBar.vue2
-rw-r--r--src/layouts/base.layout.vue72
-rw-r--r--src/plugins/naive.plugin.ts2
6 files changed, 93 insertions, 81 deletions
diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 71dc55a..0000000
--- a/src/assets/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- position: relative;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition: color 0.5s, background-color 0.5s;
- line-height: 1.6;
- font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
- Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/hero-gradient.svg b/src/assets/hero-gradient.svg
new file mode 100644
index 0000000..8d7c624
--- /dev/null
+++ b/src/assets/hero-gradient.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 275">
+ <defs>
+ <linearGradient id="small-hero-gradient-1" x1="13.74" y1="183.7" x2="303.96" y2="45.59" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#25636c"/>
+ <stop offset="0.6" stop-color="#3b956f"/>
+ <stop offset="1" stop-color="#14a058"/>
+ </linearGradient>
+ </defs>
+ <g>
+ <g>
+ <path fill="#14a058" opacity="0.49" d="M0,187.5v25s0,37.5,50,50S300,225,300,225V187.5Z"/>
+ </g>
+ <g>
+ <path fill="#14a058" opacity="0.49" d="M300,237.5S287.5,275,250,275,121.05,237.5,61.4,200s134.21,0,134.21,0Z"/>
+ </g>
+ <g>
+ <path fill="#14a058" opacity="0.38" d="M0,200v12.5a241.47,241.47,0,0,0,112.5,50c73.6,11.69,130.61-14.86,150-25L300,200Z"/>
+ </g>
+ <g>
+ <path fill="url(#small-hero-gradient-1)" d="M0,0V212.5s62.5-12.5,150,25,150,0,150,0V0Z"/>
+ </g>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index bc826fe..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg> \ No newline at end of file
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 9c5f164..fe23e03 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -32,7 +32,7 @@ function onSelect(path: string) {
</script>
<template>
- <div>
+ <div class="search-bar">
<n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect">
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 0c35fa0..dc5fd05 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -3,10 +3,14 @@ import { NIcon } from 'naive-ui';
import { h, ref, type Component } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { LightModeFilled, DarkModeFilled } from '@vicons/material'
+import { Heart } from '@vicons/tabler'
import { toolsByCategory } from '@/tools';
import SearchBar from '../components/SearchBar.vue';
import { useStyleStore } from '@/stores/style.store';
+import HeroGradient from '../assets/hero-gradient.svg?component'
+import { useThemeVars } from 'naive-ui'
+const themeVars = useThemeVars()
const collapsed = ref(false)
const activeKey = ref(null)
const route = useRoute()
@@ -33,20 +37,30 @@ const m = toolsByCategory.map(category => ({
<n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="260" :collapsed="collapsed"
@collapse="collapsed = true" @expand="collapsed = false" :show-trigger="false">
<n-scrollbar>
- <router-link to="/"
- style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;">
- <strong>IT-Tools</strong>
+
+ <router-link to="/" class="hero-wrapper">
+ <hero-gradient class="gradient" />
+ <div class="text-wrapper">
+ <div class="title">IT - TOOLS</div>
+ <div class="divider" />
+ <div class="subtitle">Handy tools for developers</div>
+ </div>
</router-link>
<n-menu :value="route.name" class="menu" :collapsed="collapsed" :collapsed-width="64"
:collapsed-icon-size="22" :options="m" v-model:value="activeKey" />
+
</n-scrollbar>
</n-layout-sider>
<n-layout class="content">
<div class="bar-wrapper">
<search-bar />
-
+ <n-button type="primary" tag="a" href="https://github.com/sponsors/CorentinTh" rel="noopener"
+ target="_blank">
+ <n-icon :component="Heart" />&nbsp;
+ Sponsor
+ </n-button>
<n-button circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
<n-icon size="large" v-if="styleStore.isDarkTheme">
<LightModeFilled />
@@ -62,14 +76,62 @@ const m = toolsByCategory.map(category => ({
</template>
<style lang="less" scoped>
+.n-menu {
+ padding-top: 160px;
+ padding-bottom: 200px;
+}
+
+.hero-wrapper {
+ position: absolute;
+ display: block;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ z-index: 10;
+
+ .gradient {
+ margin-top: -80px;
+ }
+
+ .text-wrapper {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ top: 16px;
+ color: #fff;
+
+ .title {
+ font-size: 25px;
+ font-weight: 600;
+ }
+
+ .divider {
+ width: 50px;
+ height: 2px;
+ border-radius: 4px;
+ background-color: v-bind('themeVars.primaryColor');
+ margin: 0 auto 5px;
+ }
+
+ .subtitle {
+ font-size: 16px;
+ }
+ }
+
+
+}
+
.bar-wrapper {
display: flex;
+ align-items: center;
+ justify-content: center;
&>*:not(:first-child) {
margin-left: 15px;
}
- &> :first-child {
+ .search-bar {
flex-grow: 1;
}
}
diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 90f366a..71ca216 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -49,9 +49,11 @@ import {
NUploadDragger,
NImage,
NScrollbar,
+ NGradientText,
} from 'naive-ui';
const components = [
+ NGradientText,
NScrollbar,
NImage,
NUploadDragger,
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-11 22:44:18 +0000