frontend: add shadcn vue, replace custom css with tailwind
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger
parent
08d529c381
commit
227332e5d4
19 changed files with 1480 additions and 289 deletions
17
summer2024-frontend/components.json
Normal file
17
summer2024-frontend/components.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"$schema": "https://shadcn-vue.com/schema.json",
|
||||
"style": "default",
|
||||
"typescript": false,
|
||||
"tsConfigPath": "./jsconfig.json",
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/assets/index.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true
|
||||
},
|
||||
"framework": "vite",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<html lang="fr" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
|
|
|
|||
1198
summer2024-frontend/package-lock.json
generated
1198
summer2024-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,22 +11,30 @@
|
|||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"lucide-vue-next": "^0.412.0",
|
||||
"marked": "^13.0.2",
|
||||
"pinia": "^2.1.7",
|
||||
"radix-vue": "^1.9.2",
|
||||
"tailwind-merge": "^2.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vue": "^3.4.29",
|
||||
"vue-fullpage.js": "^0.2.17",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.8.0",
|
||||
"@types/node": "^20.14.11",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"generate-license-file": "^3.5.0",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.4.6",
|
||||
"vite": "^5.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,13 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<a id="kektus-link" href="https://www.kektus.fr"><h1 id="kektus">kektus</h1></a>
|
||||
<h1 style="font-weight: 300">carnet de voyage été 2024</h1>
|
||||
<div class="fixed w-full top-0 z-50 flex items-center backdrop-blur-md bg-black/10">
|
||||
<a href="https://www.kektus.fr"
|
||||
><h1 id="kektus" class="font-bold select-none mx-6 my-3 text-2xl hover:text-3xl transition-all duration-300">kektus</h1></a
|
||||
>
|
||||
<h1 class="font-light text-lg">carnet de voyage été 2024</h1>
|
||||
</div>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 15pt;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
78
summer2024-frontend/src/assets/index.css
Normal file
78
summer2024-frontend/src/assets/index.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,22 +2,9 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
body {
|
||||
background-color: #262626;
|
||||
color: white;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
#kektus {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
user-select: none;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#kektus-link,
|
||||
#kektus-link:visited,
|
||||
#kektus-link:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,36 +14,40 @@ const postActionBtn = ref(null)
|
|||
function postDataToggle() {
|
||||
if (postDataVisible.value) {
|
||||
for (const data of postData.value) {
|
||||
data.classList.remove('post-data-visible')
|
||||
data.classList.remove('backdrop-blur-sm');
|
||||
data.classList.remove('bg-gray-400/10');
|
||||
data.classList.add('bg-gray-400/0');
|
||||
}
|
||||
for (const title of postDataTitle.value) {
|
||||
title.style.display = 'none'
|
||||
title.classList.add("opacity-0");
|
||||
}
|
||||
for (const desc of postDataDescription.value) {
|
||||
desc.style.display = 'none'
|
||||
desc.classList.add("opacity-0");
|
||||
}
|
||||
for (const btn of postActionBtn.value) {
|
||||
btn.style.top = 'auto'
|
||||
btn.style.right = 'auto'
|
||||
btn.style.left = '0'
|
||||
btn.style.bottom = '0'
|
||||
btn.classList.remove("top-0");
|
||||
btn.classList.remove("right-0");
|
||||
btn.classList.add("left-0");
|
||||
btn.classList.add("bottom-0");
|
||||
}
|
||||
postDataVisible.value = false
|
||||
} else {
|
||||
for (const data of postData.value) {
|
||||
data.classList.add('post-data-visible')
|
||||
data.classList.add('backdrop-blur-sm');
|
||||
data.classList.add('bg-gray-400/10');
|
||||
data.classList.remove('bg-gray-400/0');
|
||||
}
|
||||
for (const title of postDataTitle.value) {
|
||||
title.style.display = 'block'
|
||||
title.classList.remove("opacity-0");
|
||||
}
|
||||
for (const desc of postDataDescription.value) {
|
||||
desc.style.display = 'block'
|
||||
desc.classList.remove("opacity-0");
|
||||
}
|
||||
for (const btn of postActionBtn.value) {
|
||||
btn.style.top = '0'
|
||||
btn.style.right = '0'
|
||||
btn.style.left = 'auto'
|
||||
btn.style.bottom = 'auto'
|
||||
btn.classList.add("top-0");
|
||||
btn.classList.add("right-0");
|
||||
btn.classList.remove("left-0");
|
||||
btn.classList.remove("bottom-0");
|
||||
}
|
||||
postDataVisible.value = true
|
||||
}
|
||||
|
|
@ -51,19 +55,24 @@ function postDataToggle() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section" ref="section" :data-anchor="'post-' + post.id">
|
||||
<div class="slide" v-for="asset in post.assets" :key="asset">
|
||||
<img class="post-bg-media" :src="asset" />
|
||||
<div class="post-container">
|
||||
<div ref="postData" class="post-data post-data-visible">
|
||||
<div class="post-action-btn" ref="postActionBtn" @click="postDataToggle">
|
||||
<div class="section relative overflow-hidden" ref="section" :data-anchor="'post-' + post.id">
|
||||
<div class="slide relative overflow-hidden" v-for="asset in post.assets" :key="asset">
|
||||
<img class="absolute top-0 left-0 w-full h-full object-cover -z-10" :src="asset" />
|
||||
<div class="grid grid-cols-3 grid-rows-5 absolute w-full h-full top-0 left-0 pointer-events-none">
|
||||
<div ref="postData" class="col-start-1 col-span-3 lg:col-span-1 row-start-4 row-span-2 self-end place-self-stretch m-6 p-2 bg-gray-400/10 backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500">
|
||||
<div class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100" ref="postActionBtn" @click="postDataToggle">
|
||||
<EyeOff v-if="postDataVisible" :size="20" />
|
||||
<Info :size="20" v-else />
|
||||
</div>
|
||||
<h2 ref="postDataTitle">{{ post.location.city }}, {{ post.location.country }}</h2>
|
||||
<h2
|
||||
ref="postDataTitle"
|
||||
class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
|
||||
>
|
||||
{{ post.location.city }}, {{ post.location.country }}
|
||||
</h2>
|
||||
<div
|
||||
ref="postDataDescription"
|
||||
class="post-data-description scrollable-element"
|
||||
class="m-2 scrollable-element max-h-48 overflow-y-scroll transition-opacity duration-500"
|
||||
v-html="post.formatedDescription"
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -73,84 +82,4 @@ function postDataToggle() {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post-action-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.post-action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.section,
|
||||
.slide {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.post-data-visible {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(205, 205, 205, 0.1);
|
||||
}
|
||||
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 2;
|
||||
padding: 5px 20px;
|
||||
margin: 30px;
|
||||
border-radius: 6px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 3;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 4;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-data-description {
|
||||
max-height: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.post-bg-media {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
object-fit: cover;
|
||||
z-index: -100;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup>
|
||||
|
||||
import { usePostsStore } from '@/stores/posts.js'
|
||||
|
||||
const postsStore = usePostsStore()
|
||||
|
|
@ -7,10 +6,12 @@ const postsStore = usePostsStore()
|
|||
|
||||
<template>
|
||||
<div class="section" ref="section" data-anchor="welcome-section">
|
||||
<div id="welcome-container">
|
||||
<h3 class="welcome-content">3 semaines pour traverser 7 pays d'Europe en train</h3>
|
||||
<div class="flex flex-col w-full h-full items-center justify-center text-center">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight my-4">
|
||||
3 semaines pour traverser 7 pays d'Europe en train
|
||||
</h3>
|
||||
<div v-if="postsStore.posts.length > 0">
|
||||
<p class="welcome-content">suivez mon voyage en naviguant vers le bas</p>
|
||||
<p class="">suivez mon voyage en naviguant vers le bas</p>
|
||||
<div class="arrow" />
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -21,28 +22,13 @@ const postsStore = usePostsStore()
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
#welcome-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-top: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 1.5vw;
|
||||
height: 1.5vw;
|
||||
width: 3vh;
|
||||
height: 3vh;
|
||||
border-bottom: 5px solid white;
|
||||
border-right: 5px solid white;
|
||||
transform: rotate(45deg);
|
||||
|
|
|
|||
23
summer2024-frontend/src/components/ui/button/Button.vue
Normal file
23
summer2024-frontend/src/components/ui/button/Button.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import { Primitive } from 'radix-vue'
|
||||
import { buttonVariants } from '.'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps({
|
||||
variant: { type: null, required: false },
|
||||
size: { type: null, required: false },
|
||||
class: { type: null, required: false },
|
||||
asChild: { type: Boolean, required: false },
|
||||
as: { type: null, required: false, default: 'button' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:as="as"
|
||||
:as-child="asChild"
|
||||
:class="cn(buttonVariants({ variant, size }), props.class)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
30
summer2024-frontend/src/components/ui/button/index.js
Normal file
30
summer2024-frontend/src/components/ui/button/index.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Button } from './Button.vue'
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline'
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
xs: 'h-7 rounded px-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default'
|
||||
}
|
||||
}
|
||||
)
|
||||
6
summer2024-frontend/src/lib/utils.js
Normal file
6
summer2024-frontend/src/lib/utils.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import './assets/index.css'
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import PostsView from '@/views/PostsView.vue'
|
||||
import AdminView from '@/views/AdminView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -8,6 +9,11 @@ const router = createRouter({
|
|||
path: '/',
|
||||
name: 'home',
|
||||
component: PostsView
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: AdminView
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
14
summer2024-frontend/src/views/AdminView.vue
Normal file
14
summer2024-frontend/src/views/AdminView.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script setup>
|
||||
import { Button } from '@/components/ui/button/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-20 w-full justify-center items-center gap-4">
|
||||
<Button>test</Button>
|
||||
<Button>test</Button>
|
||||
<Button>test</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -15,30 +15,37 @@ const fullpageOptions = ref({
|
|||
scrollOverflow: false,
|
||||
onLeave: onLeave,
|
||||
afterLoad: afterLoad,
|
||||
credits: {enabled: false}
|
||||
credits: { enabled: false }
|
||||
})
|
||||
const menu = ref(null)
|
||||
|
||||
function onLeave(origin, destination, direction, trigger) {
|
||||
if (destination.anchor === 'welcome-section') {
|
||||
menu.value.style.opacity = '0'
|
||||
menu.value.classList.add('opacity-0')
|
||||
} else {
|
||||
menu.value.style.opacity = '1'
|
||||
}
|
||||
menu.value.classList.remove('opacity-0')
|
||||
}
|
||||
}
|
||||
|
||||
function afterLoad(origin, destination, direction, trigger) {
|
||||
if (destination.anchor === 'welcome-section') {
|
||||
menu.value.style.opacity = '0'
|
||||
menu.value.classList.add('opacity-0')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="menu-grid">
|
||||
<ul id="menu" class="scrollable-element" ref="menu">
|
||||
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id">
|
||||
<a :href="'#post-' + post.id">{{ post.formatedDate }}</a>
|
||||
<div
|
||||
id="menu-grid"
|
||||
class="fixed z-50 h-full w-full grid grid-cols-5 grid-rows-3 place-items-stretch pointer-events-none"
|
||||
>
|
||||
<ul
|
||||
id="menu"
|
||||
class="scrollable-element col-start-1 col-span-full row-start-1 row-span-1 mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll transition-opacity duration-1000 opacity-0"
|
||||
ref="menu"
|
||||
>
|
||||
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id" class="m-2 backdrop-blur-sm rounded-lg bg-black/10 hover:bg-gray-500/10 transition-colors duration-200">
|
||||
<a :href="'#post-' + post.id" class="block text-right px-4 py-3 transition-all duration-300">{{ post.formatedDate }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -55,66 +62,12 @@ function afterLoad(origin, destination, direction, trigger) {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
#menu-grid {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
z-index: 70;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#menu {
|
||||
grid-area: 3 / 5 / 4 / 6;
|
||||
pointer-events: auto;
|
||||
list-style-type: none;
|
||||
max-height: 220px;
|
||||
overflow-y: scroll;
|
||||
margin-right: 20px;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#menu {
|
||||
grid-area: 4 / 4 / 6 / 6;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#menu {
|
||||
grid-area: 1 / 1 / 2 / 6;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
#menu li {
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#menu li:hover {
|
||||
background-color: rgba(100, 100, 100, 0.1);
|
||||
}
|
||||
|
||||
#menu li.active,
|
||||
#menu li.active:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#menu li a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 9px 18px;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#menu li.active a,
|
||||
#menu li.active:hover a:hover {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
93
summer2024-frontend/tailwind.config.js
Normal file
93
summer2024-frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
const animate = require("tailwindcss-animate")
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
safelist: ["dark"],
|
||||
prefix: "",
|
||||
|
||||
content: [
|
||||
'./pages/**/*.{js,jsx,vue}',
|
||||
'./components/**/*.{js,jsx,vue}',
|
||||
'./app/**/*.{js,jsx,vue}',
|
||||
'./src/**/*.{js,jsx,vue}',
|
||||
],
|
||||
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
xl: "calc(var(--radius) + 4px)",
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
"collapsible-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-collapsible-content-height)' },
|
||||
},
|
||||
"collapsible-up": {
|
||||
from: { height: 'var(--radix-collapsible-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"collapsible-down": "collapsible-down 0.2s ease-in-out",
|
||||
"collapsible-up": "collapsible-up 0.2s ease-in-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [animate],
|
||||
}
|
||||
|
|
@ -3,14 +3,24 @@ import { fileURLToPath, URL } from 'node:url'
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
import tailwind from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import path from 'node:path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwind(), autoprefixer()],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
//'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue