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