Add some responsive shit
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user