mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 00:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(style): cleaner layout

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-14 22:41:51 +02:00
parent 2df3f53b78
commit 1d09a01bb2
No known key found for this signature in database
GPG key ID: DBD997E935996158
10 changed files with 351 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/assets/base.css
View file

@ -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;
}

23
src/assets/hero-gradient.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 894 B

1
src/assets/logo.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 308 B

2
src/components/SearchBar.vue
View file

@ -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 }">

72
src/layouts/base.layout.vue
View file

@ -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;
}
}

2
src/plugins/naive.plugin.ts
View file

@ -49,9 +49,11 @@ import {
NUploadDragger,
NImage,
NScrollbar,
NGradientText,
} from 'naive-ui';
const components = [
NGradientText,
NScrollbar,
NImage,
NUploadDragger,