Naaturel/letsmeet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving style

Browse Source
This commit is contained in:
Laurent
2025-02-27 08:15:26 +01:00
parent cfdff8d3b7
commit 0fdd2fec00
8 changed files with 94 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -3,10 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Afacad+Flux">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:slnt,wght@-14..14,100..1000&family=PT+Sans&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's meet</title> <title>Let's meet</title>
</head> </head>
<body> <body>

29
src/assets/base.css
View File

@@ -1,5 +1,32 @@
:root
{
--primary-color : #fff8ed;
--secondary-color : #fff8ed;
--tertiary-color : #fff8ed;
--radius : 3px;
}
@media screen and (min-width: 601px) {
:root {
--font-size : 18px;
}
}
@media screen and (max-width: 600px) {
:root {
--font-size : 15px;
}
}
* *
{ {
transition: 0.3s all; color: #141115;
text-decoration: none;
font-size: var(--font-size);
font-family: 'PT Sans', sans-serif; font-family: 'PT Sans', sans-serif;
transition: 0.3s all;
}
h1 {
font-size: calc(var(--font-size, 1vw) * 2.15);
} }

2
src/assets/main.css
View File

@@ -2,7 +2,7 @@
body body
{ {
background-color: #fff8ed; background-color: var(--primary-color);
} }
footer footer

2
src/layouts/LayoutDefault.vue
View File

@@ -26,7 +26,7 @@ nav {
text-decoration: none; text-decoration: none;
height: 2vw; height: 2vw;
border: 1px solid; border: 1px solid;
border-radius: 3px; border-radius: var(--radius);
} }
.main { .main {

14
src/router/index.ts
View File

@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue' import AboutView from '../views/AboutView.vue'
import ErrorView from '../views/ErrorView.vue' import ErrorView from '../views/ErrorView.vue'
import CreateView from "../views/CreateView.vue";
import JoinView from "../views/JoinView.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,8 +22,18 @@ const router = createRouter({
path: '/error', path: '/error',
name: 'error', name: 'error',
component: ErrorView, component: ErrorView,
},
{
path: '/create',
name: 'create',
component: CreateView,
},
{
path: '/join',
name: 'join',
component: JoinView,
} }
], ]
}) })
export default router export default router

11
src/views/CreateView.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
<h1>Create an event</h1>
</template>
<style scoped>
</style>

42
src/views/HomeView.vue
View File

@@ -7,17 +7,12 @@
<div class="container"> <div class="container">
<div class="introduction"> <div class="introduction">
<h1>Welcome !</h1> <h1>Welcome !</h1>
<p>This website is currently under development and might look like ugly as fuck</p> <p>This website is currently under development and might look ugly as fuck</p>
</div> </div>
<div class="actions"> <div class="actions">
<div> <div class="button"><router-link to="/create">Create an event</router-link></div>
Join an event <div class="button"><router-link to="/join">Join an event</router-link></div>
</div>
<div>
Create an event
</div>
</div> </div>
</div> </div>
@@ -34,19 +29,36 @@
} }
.introduction { .introduction {
justify-items: center; display: flex;
align-content: center; flex-direction: column;
flex-grow: 10; justify-content: center;
align-items: center;
width: 70%;
height: 100%; height: 100%;
border: solid 1px;
} }
.actions { .actions {
justify-items: center; display: flex;
flex-direction: column; flex-direction: column;
align-content: center; justify-content: center;
flex-grow: 4; align-items: center;
gap: 4vh;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.1); width: 30%;
border: solid 1px;
}
.button {
text-align: center;
align-content: center;
min-width: 10vw;
min-height: 5vh;
border-radius: var(--radius);
background-color: var(--secondary-color);
box-shadow: 2px 2px 5px;
border: solid 1px;
} }
</style> </style>

11
src/views/JoinView.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
<h1>Join an event</h1>
</template>
<style scoped>
</style>