diff --git a/src/assets/base.css b/src/assets/base.css
index 05cb013..baa6f2c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -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;
-
}
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 7565660..d5b2772 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1,152 @@
-
+
+
+
+
diff --git a/src/assets/logo2.svg b/src/assets/logo2.svg
new file mode 100644
index 0000000..07d1056
--- /dev/null
+++ b/src/assets/logo2.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/src/layouts/LayoutDefault.vue b/src/layouts/LayoutDefault.vue
index 56b824a..77c1c35 100644
--- a/src/layouts/LayoutDefault.vue
+++ b/src/layouts/LayoutDefault.vue
@@ -7,7 +7,10 @@
@@ -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));
+}
+
+
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6c64dea..971f133 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,6 +11,7 @@
+
Meet up now !
Create
Join
@@ -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;
+}
+