diff --git a/front/src/assets/base.css b/front/src/assets/base.css index 9663859..24fa702 100644 --- a/front/src/assets/base.css +++ b/front/src/assets/base.css @@ -5,7 +5,6 @@ --header-color : #FCFCFC; --background-color : rgba(252, 252, 252, 0.43); --radius : 3px; - --font-size : 1.3rem; } * @@ -15,4 +14,19 @@ font-family: 'Afacad Flux', sans-serif; transition: 0.3s all; box-sizing: border-box; -} \ No newline at end of file +} + +@media screen and (min-width: 1001px) { + :root + { + --font-size : 1.3rem; + } +} + +@media screen and (max-width: 1000px) { + :root + { + --font-size : 1.1rem; + } +} + diff --git a/front/src/assets/main.css b/front/src/assets/main.css index e5e38d6..a6006f6 100644 --- a/front/src/assets/main.css +++ b/front/src/assets/main.css @@ -10,7 +10,6 @@ body { background-color: white; font-size: var(--font-size); - overflow: hidden; } .layout @@ -27,21 +26,22 @@ body align-items: center; height: 100%; max-height: 100%; - gap: 10vw; width: 80%; } -@media screen and (min-width: 801px) { +@media screen and (min-width: 1001px) { .container { flex-direction: row; + gap: 10vw; } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { .container { flex-direction: column; + gap: 50px; } } diff --git a/front/src/components/TextBlock.vue b/front/src/components/TextBlock.vue index abe3c08..dd12a42 100644 --- a/front/src/components/TextBlock.vue +++ b/front/src/components/TextBlock.vue @@ -16,7 +16,6 @@ justify-content: center; align-items: center; - /*justify-content: start;*/ word-break: break-word; height: fit-content; @@ -26,17 +25,16 @@ background: rgb(239, 239, 239); } - -@media screen and (max-width: 800px) { +@media screen and (min-width: 1001px) { .text-block { - padding: 5px 15px 5px 15px; + padding: 30px; + width: 50%; } } -@media screen and (min-width: 801px) { +@media screen and (max-width: 1000px) { .text-block { - padding: 10px 30px 10px 30px; + padding: 10px; } } - diff --git a/front/src/layouts/LayoutDefault.vue b/front/src/layouts/LayoutDefault.vue index c39c413..b3af227 100644 --- a/front/src/layouts/LayoutDefault.vue +++ b/front/src/layouts/LayoutDefault.vue @@ -64,7 +64,7 @@ nav p { height: fit-content; } -@media screen and (min-width: 801px) { +@media screen and (min-width: 1001px) { ::v-deep(nav .button) { width: 5vw; @@ -74,7 +74,7 @@ nav p { } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { ::v-deep(nav .button) { width: 7vw; diff --git a/front/src/views/CreateView.vue b/front/src/views/CreateView.vue index 22233ca..4fdda22 100644 --- a/front/src/views/CreateView.vue +++ b/front/src/views/CreateView.vue @@ -35,7 +35,7 @@ import NavLink from "@/components/NavLink.vue"; } /* MEDIA QUERIES */ -@media screen and (min-width: 801px) { +@media screen and (min-width: 1001px) { .title { width: 50%; @@ -52,7 +52,7 @@ import NavLink from "@/components/NavLink.vue"; } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { .title, .event-form { width: 100%; diff --git a/front/src/views/ErrorView.vue b/front/src/views/ErrorView.vue index 12c7dd9..f589bd8 100644 --- a/front/src/views/ErrorView.vue +++ b/front/src/views/ErrorView.vue @@ -4,10 +4,12 @@ import TextBlock from "@/components/TextBlock.vue"; @@ -15,8 +17,6 @@ import TextBlock from "@/components/TextBlock.vue"; .text-block { border-left: solid 4px red; - width: 35%; - height: 35%; } diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue index be18c3c..5a6d3fd 100644 --- a/front/src/views/HomeView.vue +++ b/front/src/views/HomeView.vue @@ -40,7 +40,6 @@ import TextBlock from "@/components/TextBlock.vue"; .introduction p { - width: 80%; text-align: justify; } @@ -67,13 +66,13 @@ import TextBlock from "@/components/TextBlock.vue"; .actions-group::after { content: ""; position: absolute; - width: 5%; - height: 15%; + width: 50px; + height: 50px; border: 4px solid black; } .actions-group::before { - top: 0; + top: -20px; left: 0; border-radius: var(--radius); border-right: none; @@ -81,60 +80,59 @@ import TextBlock from "@/components/TextBlock.vue"; } .actions-group::after { - bottom: 0; + bottom: -20px; right: 0; border-radius: var(--radius); border-left: none; border-top: none; } - .button { width: 50%; min-width: 50%; } /* MEDIA QUERIES */ -@media screen and (min-width: 801px) { - - .introduction { - padding: 0 0 1vw 0; - width: 50%; - min-height: 40vh; - } +@media screen and (min-width: 1001px) { .actions-group { width: 35%; - min-height: 40vh; + } + + .introduction p + { + width: 90%; + margin-bottom: 0; } .introduction h1 { font-size: 4rem; - margin-bottom: 5px; + margin: 0 5px 5px 5px; } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { .introduction, .actions-group { width: 100%; } - .introduction { - height: 60%; - } - .actions-group { height: 40%; } + .introduction p + { + width: 95%; + margin-bottom: 0; + } + .introduction h1 { font-size: 2.5rem; - margin: 5px; + margin: 0 5px 5px 5px; } } -