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

Fix header style

Browse Source
This commit is contained in:
Laurent
2025-02-28 22:42:26 +01:00
parent 1c1d8da51d
commit 9a4539c7e4
5 changed files with 254 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/base.css
View File

@@ -3,7 +3,7 @@
--primary-color : #1b2021;
--secondary-color : #9BC53D;
--header-color : #FCFCFC;
--background-color : #FCFCFC;
--background-color : rgba(252, 252, 252, 0.43);
--radius : 3px;
}
@@ -25,5 +25,4 @@
text-decoration: none;
font-family: 'Afacad Flux', sans-serif;
transition: 0.3s all;
}

153
src/assets/logo.svg
View File

@@ -1 +1,152 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><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>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="2.33333in" height="2.1in"
viewBox="0 0 210 189">
<path id="Sélection"
fill="none" stroke="black" stroke-width="1"
d="M 0.00,0.00
C 0.00,0.00 7.00,0.00 7.00,0.00
7.00,0.00 7.00,53.00 7.00,53.00
7.00,53.00 28.00,53.00 28.00,53.00
28.00,53.00 28.00,60.00 28.00,60.00
28.00,60.00 0.00,60.00 0.00,60.00
0.00,60.00 0.00,0.00 0.00,0.00 Z
M 113.00,0.00
C 113.00,0.00 121.00,0.00 121.00,0.00
120.96,4.95 119.67,17.07 114.61,19.43
112.93,20.21 108.04,20.00 106.00,20.00
110.61,12.43 112.57,9.11 113.00,0.00 Z
M 87.00,6.00
C 87.00,6.00 95.00,6.00 95.00,6.00
95.00,6.00 95.00,20.00 95.00,20.00
95.00,20.00 105.00,20.00 105.00,20.00
105.00,20.00 105.00,26.00 105.00,26.00
105.00,26.00 95.00,26.00 95.00,26.00
95.00,26.00 95.00,60.00 95.00,60.00
95.00,60.00 87.00,60.00 87.00,60.00
87.00,60.00 87.00,26.00 87.00,26.00
87.00,26.00 78.00,26.00 78.00,26.00
78.00,26.00 78.00,20.00 78.00,20.00
78.00,20.00 87.00,20.00 87.00,20.00
87.00,20.00 87.00,6.00 87.00,6.00 Z
M 67.00,47.00
C 67.84,49.29 69.08,52.42 68.60,54.90
67.45,60.75 57.63,61.10 53.00,60.99
40.50,60.68 31.12,50.64 32.19,38.00
33.46,22.89 50.78,13.56 63.99,21.61
71.65,26.28 73.81,33.55 74.00,42.00
74.00,42.00 41.00,42.00 41.00,42.00
43.79,50.19 51.44,55.78 60.00,51.93
62.63,50.74 64.80,48.82 67.00,47.00 Z
M 128.00,48.00
C 130.26,50.82 133.06,53.63 137.00,53.64
140.71,53.65 143.50,50.35 141.92,47.39
139.34,42.55 126.19,43.12 125.11,32.00
124.16,22.22 131.26,18.42 140.00,19.09
142.99,19.32 147.38,20.30 148.89,23.22
150.14,25.66 148.71,29.52 148.00,32.00
145.29,30.13 141.32,26.45 138.02,26.45
134.70,26.45 131.68,29.34 134.42,32.73
137.84,36.97 147.42,36.60 150.30,45.01
152.83,52.42 147.55,59.78 140.00,60.81
133.40,61.71 129.67,59.91 124.00,57.00
124.00,57.00 126.00,48.00 126.00,48.00
126.00,48.00 128.00,48.00 128.00,48.00 Z
M 65.00,36.00
C 61.69,22.75 45.46,22.92 41.00,36.00
41.00,36.00 65.00,36.00 65.00,36.00 Z
M 168.00,43.00
C 168.00,43.00 173.00,43.00 173.00,43.00
173.00,43.00 174.00,55.00 174.00,55.00
174.00,55.00 169.00,55.00 169.00,55.00
169.00,55.00 168.00,43.00 168.00,43.00 Z
M 176.00,44.00
C 176.00,44.00 181.00,44.00 181.00,44.00
181.00,44.00 180.00,56.00 180.00,56.00
184.34,52.55 185.53,51.86 191.00,51.00
189.46,58.20 185.88,59.92 179.00,61.00
179.00,61.00 180.00,56.00 180.00,56.00
180.00,56.00 175.00,56.00 175.00,56.00
175.00,56.00 176.00,44.00 176.00,44.00 Z
M 157.00,52.00
C 162.95,52.30 166.12,52.81 168.00,59.00
162.05,58.70 158.88,58.19 157.00,52.00 Z
M 157.00,71.00
C 158.46,64.21 161.53,63.02 168.00,62.00
166.54,68.79 163.47,69.98 157.00,71.00 Z
M 194.00,95.00
C 191.87,99.14 187.49,102.17 184.42,96.85
184.42,96.85 177.32,73.00 177.32,73.00
176.88,70.29 176.58,65.71 179.31,64.06
181.50,62.75 184.80,63.93 187.00,64.70
190.72,66.00 205.24,73.30 207.69,75.63
211.89,79.66 209.99,84.15 205.00,86.00
206.84,89.66 210.65,98.44 202.96,98.55
200.44,98.59 196.38,96.14 194.00,95.00 Z
M 169.00,67.00
C 169.00,67.00 175.00,68.00 175.00,68.00
174.06,74.47 173.00,77.97 166.00,79.00
165.10,73.74 167.15,71.88 169.00,67.00 Z
M 54.00,126.00
C 54.00,126.00 55.00,146.00 55.00,146.00
55.00,146.00 55.00,188.00 55.00,188.00
55.00,188.00 47.00,188.00 47.00,188.00
47.00,179.60 47.91,156.72 46.00,150.00
46.00,150.00 28.00,177.00 28.00,177.00
28.00,177.00 26.00,177.00 26.00,177.00
26.00,177.00 7.00,150.00 7.00,150.00
7.00,150.00 7.00,188.00 7.00,188.00
7.00,188.00 0.00,188.00 0.00,188.00
0.00,188.00 0.00,127.00 0.00,127.00
0.00,127.00 28.00,163.00 28.00,163.00
28.00,163.00 54.00,126.00 54.00,126.00 Z
M 200.00,128.00
C 200.00,128.00 208.00,128.00 208.00,128.00
208.00,128.00 208.00,146.00 208.00,146.00
208.00,146.00 207.00,168.00 207.00,168.00
207.00,168.00 200.00,168.00 200.00,168.00
200.00,168.00 200.00,128.00 200.00,128.00 Z
M 168.00,148.00
C 168.00,135.23 166.96,134.12 176.00,134.00
176.00,134.00 176.00,148.00 176.00,148.00
176.00,148.00 186.00,148.00 186.00,148.00
186.00,148.00 186.00,154.00 186.00,154.00
186.00,154.00 176.00,154.00 176.00,154.00
176.00,154.00 176.00,188.00 176.00,188.00
176.00,188.00 168.00,188.00 168.00,188.00
168.00,188.00 168.00,154.00 168.00,154.00
168.00,154.00 159.00,154.00 159.00,154.00
159.00,154.00 159.00,148.00 159.00,148.00
159.00,148.00 168.00,148.00 168.00,148.00 Z
M 101.00,175.00
C 101.84,177.29 103.08,180.42 102.60,182.90
101.45,188.75 91.63,189.10 87.00,188.99
75.78,188.71 67.27,181.34 66.18,170.00
64.92,157.00 73.96,147.01 87.00,147.01
91.17,147.01 94.32,147.35 97.96,149.61
105.59,154.35 107.61,161.57 108.00,170.00
108.00,170.00 75.00,170.00 75.00,170.00
77.78,178.15 85.46,183.82 93.99,179.93
96.58,178.74 98.75,176.71 101.00,175.00 Z
M 149.00,175.00
C 149.32,177.26 150.50,181.85 149.68,183.79
146.97,190.19 131.32,189.78 126.00,187.47
117.33,183.71 113.20,175.15 113.76,166.00
114.80,149.05 135.00,140.81 147.91,151.53
154.02,156.60 154.93,162.57 155.00,170.00
155.00,170.00 122.00,170.00 122.00,170.00
125.38,177.40 131.25,183.06 140.00,180.35
143.04,179.41 146.29,176.79 149.00,175.00 Z
M 99.00,164.00
C 95.66,150.80 78.81,151.05 75.00,164.00
75.00,164.00 99.00,164.00 99.00,164.00 Z
M 147.00,164.00
C 140.75,150.34 126.34,151.31 122.00,164.00
122.00,164.00 147.00,164.00 147.00,164.00 Z
M 202.11,178.84
C 210.20,178.30 210.19,186.71 205.85,188.38
200.73,190.36 194.35,183.37 202.11,178.84 Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 B

After

Width:  |  Height:  |  Size: 7.1 KiB

22
src/assets/logo2.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250">
<defs>
<style>
</style>
</defs>
<g id="Header">
<path class="cls-2" d="M225.05,120.76c-2.74,0-4.79-.85-6.15-2.55-1.36-1.7-2.03-3.84-2.03-6.41s.73-4.71,2.2-6.41c1.46-1.7,3.48-2.55,6.04-2.55s4.61.73,6.15,2.2c1.54,1.47,2.31,3.62,2.31,6.47s-.73,5.11-2.2,6.77c-1.46,1.66-3.57,2.49-6.31,2.49ZM225.44,98.43c-.67,0-1.21-.54-1.21-1.21v-9.01c0-6.81-1.19-14.9-3.57-24.29-2.38-9.38-3.57-15.77-3.57-19.18s.86-5.86,2.58-7.36c1.72-1.5,3.82-2.26,6.31-2.26,5.56,0,8.34,3.21,8.34,9.62,0,3.72-1.28,10.21-3.84,19.48-2.56,9.26-3.84,17.3-3.84,24.11v8.89c0,.67-.54,1.21-1.21,1.21h0Z"/>
<g>
<path class="cls-2" d="M80.03,35.29h6.81v34.14h17.12v.9h-23.93v-35.04Z"/>
<path class="cls-2" d="M104.36,57.82c0-7.41,5.71-13.02,13.37-13.02,6.21,0,11.21,3.55,11.21,8.91,0,.95-.15,1.8-.4,2.6h-17.12v.1c0,7.46,4.1,12.02,9.56,12.02,4.71,0,8.26-3.3,9.21-8.01h.95c-1.1,6.06-6.51,10.41-13.32,10.41-7.66,0-13.47-5.61-13.47-13.02ZM111.46,55.42h10.61c.35-1.05.55-2.15.55-3.2,0-3.4-2-6.41-4.91-6.41-3.4,0-6.01,4.31-6.26,9.61Z"/>
<path class="cls-2" d="M134.89,62.58v-16.37h-3.3v-.9h3.5l5.61-7.76h.9v7.76h7.36v.9h-7.36v17.97c0,3.15,1.8,4.86,4.01,4.86s4-1.75,4-4.16c0-.7-.15-1.45-.5-2.2h.9c.4.9.5,1.6.5,2.2,0,3.5-3.2,5.96-7.36,5.96-4.76,0-8.26-3.2-8.26-8.26Z"/>
<path class="cls-2" d="M152.96,49.26v-1.05c.65.45,1.65.75,2.65.75,3.5,0,5.46-3.5,5.46-6.36,0-.2,0-.5-.05-.8-.6,1.1-2,1.95-3.7,1.95-2.5,0-4.46-1.95-4.46-4.51s1.95-4.46,4.61-4.46c3.1,0,4.86,2.65,4.86,6.56,0,4.86-2.65,8.61-6.51,8.61-1,0-2.1-.25-2.85-.7Z"/>
<path class="cls-2" d="M163.77,63.83c0-.8.15-1.65.45-2.45h.95c-.3.8-.45,1.65-.45,2.35,0,3.35,3.75,6.01,8.36,6.01,4.16,0,6.81-2.1,6.81-4.71,0-6.31-15.42-3.81-15.42-12.77,0-4.81,4.36-7.46,9.36-7.46,5.61,0,9.46,3.2,9.46,7.46h-.95c0-3.65-3.45-6.36-7.51-6.36-3.3,0-5.46,1.85-5.46,4,0,5.81,15.42,3.2,15.42,12.67,0,5.26-4.76,8.26-10.76,8.26s-10.26-3-10.26-7.01Z"/>
<path class="cls-2" d="M80.03,84.03h7.01l11.01,26.73,11.31-26.73h6.81v35.04h-6.81v-32.34l-13.72,32.34h-.9l-13.72-32.49v32.49h-1v-35.04Z"/>
<path class="cls-2" d="M120.97,106.56c0-7.41,5.71-13.02,13.37-13.02,6.21,0,11.21,3.55,11.21,8.91,0,.95-.15,1.8-.4,2.6h-17.12v.1c0,7.46,4.1,12.02,9.56,12.02,4.71,0,8.26-3.3,9.21-8.01h.95c-1.1,6.06-6.51,10.41-13.32,10.41-7.66,0-13.47-5.61-13.47-13.02ZM128.08,104.15h10.61c.35-1.05.55-2.15.55-3.2,0-3.4-2-6.41-4.91-6.41-3.4,0-6.01,4.31-6.26,9.61Z"/>
<path class="cls-2" d="M149.56,106.56c0-7.41,5.71-13.02,13.37-13.02,6.21,0,11.21,3.55,11.21,8.91,0,.95-.15,1.8-.4,2.6h-17.12v.1c0,7.46,4.1,12.02,9.56,12.02,4.71,0,8.26-3.3,9.21-8.01h.95c-1.1,6.06-6.51,10.41-13.32,10.41-7.66,0-13.47-5.61-13.47-13.02ZM156.67,104.15h10.61c.35-1.05.55-2.15.55-3.2,0-3.4-2-6.41-4.91-6.41-3.4,0-6.01,4.31-6.26,9.61Z"/>
<path class="cls-2" d="M180.09,111.31v-16.37h-3.3v-.9h3.5l5.61-7.76h.9v7.76h7.36v.9h-7.36v17.97c0,3.15,1.8,4.86,4.01,4.86s4-1.75,4-4.16c0-.7-.15-1.45-.5-2.2h.9c.4.9.5,1.6.5,2.2,0,3.5-3.2,5.96-7.36,5.96-4.76,0-8.26-3.2-8.26-8.26Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

40
src/layouts/LayoutDefault.vue
View File

@@ -7,7 +7,10 @@
<nav class="nav">
<p>Let's<br>Meet</p>
<router-link to="/about"><div>About</div></router-link>
<div class="nav-actions">
<router-link to="/login"><div class="button">Login</div></router-link>
<router-link to="/about"><div class="button">About</div></router-link>
</div>
</nav>
<main class="main">
@@ -30,13 +33,14 @@
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-height: 4vw;
min-height: 5vw;
border: 1px solid;
border-radius: var(--radius);
background-color: var(--header-color);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
padding: 0 1vw 0 1vw;
padding: 0 3vw 0 2vw;
}
nav p {
@@ -44,6 +48,13 @@ nav p {
margin: 4px 0 4px 0;
}
.nav-actions {
display: flex;
flex-direction: row;
gap: 1vw;
}
.main {
display: flex;
flex-direction: column;
@@ -52,4 +63,27 @@ nav p {
flex-grow: 1;
}
.button {
color: var(--primary-color);
text-align: center;
align-content: center;
width: 5vw;
height: fit-content;
min-width: 5vw;
min-height: 4vh;
border-radius: var(--radius);
background-color: var(--secondary-color);
word-break: break-word;
}
.button:hover
{
transform: scale(1.1);
background-color: var(--header-color);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
</style>

44
src/views/HomeView.vue
View File

@@ -11,6 +11,7 @@
</div>
<div class="actions">
<h1>Meet up now !</h1>
<router-link to="/create"><div class="button">Create</div></router-link>
<router-link to="/join"><div class="button">Join</div></router-link>
</div>
@@ -31,6 +32,7 @@
.container {
flex-direction: row;
width: 80%;
gap: 10vw;
}
.introduction, .actions {
@@ -40,6 +42,12 @@
.introduction {
word-break: break-word;
width: 50%;
min-height: 40vh;
height: fit-content;
border-radius: var(--radius);
border-left: solid 4px;
background: rgb(239, 239, 239);
}
.introduction h1
@@ -59,8 +67,13 @@
}
.actions {
width: 50%;
justify-content: start;
width: 25%;
gap: 4vh;
min-height: 40vh;
height: fit-content;
border-radius: var(--radius);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
}
.button {
@@ -68,12 +81,13 @@
text-align: center;
align-content: center;
width: 15vw;
height: 7vh;
height: fit-content;
min-width: 15vw;
min-height: 7vh;
border-radius: var(--radius);
background-color: var(--secondary-color);
word-break: break-word;
}
.button:hover
@@ -83,4 +97,30 @@
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.actions::before,
.actions::after {
content: "";
position: absolute;
width: 5%;
height: 15%;
border: 4px solid black;
}
.actions::before {
top: 0;
left: 0;
border-radius: var(--radius);
border-right: none;
border-bottom: none;
}
.actions::after {
bottom: 0;
right: 0;
border-radius: var(--radius);
border-left: none;
border-top: none;
}
</style>