styling (WIP)

This commit is contained in:
Settel 2021-11-09 22:28:52 +01:00
parent a956f8e2f2
commit 2eb4d73472
2 changed files with 37 additions and 6 deletions

View File

@ -9,11 +9,11 @@
</div>
</div>
<div class="collect-quote__inputgroup">
<form>
<form class="collect-quote__textinput-container">
<input type="hidden" name="id" :value="quote.id" />
<textarea v-model="quote.quote" cols="60" rows="4" />
<textarea class="collect-quote__textinput" v-model="quote.quote" />
</form>
<button @click="save">Save</button>
<button class="collect-quote__cta" @click="save">Save</button>
</div>
</div>
</div>
@ -64,21 +64,52 @@ export default {
width: 50%;
height: 100%;
border-right: 1px solid #ffffff;
padding: 48px;
overflow: hidden;
}
&__title {
font-size: 32px;
font-family: "Wendy One";
margin-bottom: 16px;
margin: 48px 0 16px 48px;
}
&__quote {
align-self: center;
max-width: 400px;
margin: 0 48px;
}
&__inputgroup {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
}
&__textinput-container {
margin: 48px 48px 0 48px;
}
&__textinput {
width: 100%;
}
&__cta {
align-self: flex-end;
margin: 48px;
background-color: #40a020;
width: 80px;
height: 48px;
border: 4px solid #c0c060;
border-radius: 8px;
color: #ffff80;
font-family: Dosis;
font-size: 24px;
&:hover {
background-color: #60c040;
color: #ffffc0;
}
}
}
</style>

View File

@ -1,4 +1,4 @@
{
"quote": "Ein Diktumanuist ist eine Person, die Wörter erfindet und sie als Selbstzitat getarnt im Internet veröffentlicht. Und das sollte man sich nicht entgehen lassen. \n\n\nMit der Zeit wird das Zitat von anderen Autoren aufgegriffen. So kommt es zur Verbreitung und — in seltenen Fällen — zur Abwandlung des Zitats.",
"quote": "Ein Diktumanuist ist eine Person, die Wörter erfindet und sie als Selbstzitat getarnt im Internet veröffentlicht. Und das sollte man sich nicht entgehen lassen.\n\n\nMit der Zeit wird das Zitat von anderen Autoren aufgegriffen. So kommt es zur Verbreitung und — in seltenen Fällen — zur Abwandlung des Zitats.",
"source": "7de2fcfa-6ac0-4ff6-8337-a224effc826d"
}