settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

collect quotes styling (WIP)

Browse Source
This commit is contained in:
Settel 2021-11-07 23:51:37 +01:00
parent 9b3fa31189
commit b7aa3f2f73
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/CollectQuote.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div class="collect-quote"> <div class="collect-quote">
<div class="collect-quote__backdrop" />
<div class="collect-quote__container"> <div class="collect-quote__container">
<div class="collect-quote__quote-container"> <div class="collect-quote__quote-container">
<h2>Preview:</h2> <div class="collect-quote__title">Preview:</div>
<div class="collect-quote__quote"> <div class="collect-quote__quote">
<Quote :text="quote.quote" /> <Quote :text="quote.quote" />
</div> </div>
@ -31,26 +32,27 @@ export default {
<style lang="scss"> <style lang="scss">
.collect-quote { .collect-quote {
color: #ffffff;
&__backdrop {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: #ffffff; }
&__container { &__container {
position: absolute; position: absolute;
display: flex; display: flex;
left: 0; left: 10%;
top: 0; top: 15%;
width: 80%; width: 80%;
height: 50%; height: 400px;
margin: 0 10%;
background-color: #402080; background-color: #402080;
border: 1px solid #ffffff; border: 1px solid #ffffff;
border-radius: 20px; border-radius: 20px;
padding: 48px 0;
} }
&__quote-container { &__quote-container {
@ -62,7 +64,13 @@ export default {
width: 50%; width: 50%;
height: 100%; height: 100%;
border-right: 1px solid #ffffff; border-right: 1px solid #ffffff;
padding: 0 48px; padding: 48px;
}
&__title {
font-size: 32px;
font-family: "Wendy One";
margin-bottom: 16px;
} }
&__quote { &__quote {

2
server/data/games/067fb1b8-8303-4faa-95d2-1832770a791c/quotes/7f3a2876-b8b1-4b29-88be-70d86e1809e8.json
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.", "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" "source": "7de2fcfa-6ac0-4ff6-8337-a224effc826d"
} }