Add some responsive shit

This commit is contained in:
Laurent
2025-02-28 22:56:46 +01:00
parent 9a4539c7e4
commit 814b243b2b

View File

@@ -19,6 +19,7 @@
</template> </template>
<style scoped> <style scoped>
.container, .introduction, .actions { .container, .introduction, .actions {
@@ -30,18 +31,52 @@
} }
.container { .container {
flex-direction: row;
width: 80%; width: 80%;
gap: 10vw; gap: 10vw;
} }
@media screen and (min-width: 801px) {
.container {
flex-direction: row;
}
.introduction {
width: 50%;
}
.actions {
width: 25%;
}
.button {
width: 15vw;
min-width: 15vw;
}
}
@media screen and (max-width: 800px) {
.container {
flex-direction: column;
}
.introduction, .actions {
width: 95%;
}
.button {
width: 50vw;
min-width: 50vw;
}
}
.introduction, .actions { .introduction, .actions {
flex-direction: column; flex-direction: column;
} }
.introduction { .introduction {
word-break: break-word; word-break: break-word;
width: 50%;
min-height: 40vh; min-height: 40vh;
height: fit-content; height: fit-content;
@@ -68,7 +103,6 @@
.actions { .actions {
justify-content: start; justify-content: start;
width: 25%;
gap: 4vh; gap: 4vh;
min-height: 40vh; min-height: 40vh;
height: fit-content; height: fit-content;
@@ -80,14 +114,12 @@
color: var(--primary-color); color: var(--primary-color);
text-align: center; text-align: center;
align-content: center; align-content: center;
width: 15vw;
height: fit-content;
min-width: 15vw;
min-height: 7vh;
border-radius: var(--radius); border-radius: var(--radius);
background-color: var(--secondary-color); background-color: var(--secondary-color);
word-break: break-word; word-break: break-word;
min-height: 7vh;
} }
.button:hover .button:hover