FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Fix landing page layout

Browse source
This commit is contained in:
silverpill 2022-05-12 18:32:04 +00:00
parent 13253a3f19
commit 28b5ac9215
1 changed files with 61 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/views/LandingPage.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="landing-page">
<div class="instance-group">
<div v-if="instance" class="instance-info">
<h1 class="instance-title">{{ instance.title }}</h1>
<div class="instance-description">
@ -48,6 +49,7 @@
<div v-if="registrationErrorMessage" class="error-message">{{ registrationErrorMessage }}</div>
</form>
</div>
</div>
</template>
<script lang="ts">
@ -179,19 +181,24 @@ button {
}
.landing-page {
align-items: flex-start;
background-color: #000;
background-image: url("../assets/startpage.png");
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: $text-color;
min-height: 100vh;
padding-top: 20vh;
}
.instance-group {
align-items: flex-start;
display: flex;
flex-direction: row;
gap: $content-gap;
justify-content: center;
min-height: 100vh;
padding-top: 20vh;
justify-content: space-between;
margin: 0 auto;
max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
}
.instance-info {
@ -208,7 +215,7 @@ button {
}
.instance-description {
font-size: 28px;
font-size: 24px;
line-height: 1.75;
a {
@ -373,9 +380,12 @@ button {
@media screen and (max-width: $screen-breakpoint-small) {
.landing-page {
padding-top: $content-gap;
}
.instance-group {
flex-wrap: wrap;
justify-content: flex-start;
padding-top: $content-gap;
}
.registration-form {