fknoch/weihnachtsquiz-2020
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add more styles

Browse Source
This commit is contained in:
Knoch 2020-11-23 19:24:14 +01:00
parent 229b2a2395
commit bba7fc1368
7 changed files with 150 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/style.css
View File

@ -3,52 +3,65 @@ body {
display: flex;
align-items: center;
justify-content: center;
font-family: Roboto; }
font-family: Roboto;
background-image: url(../img/background.jpg);
background-size: cover; }
body .screen {
width: 800px;
max-width: 90vw;
min-height: 60vh;
background-color: #efefef; }
body .start-screen {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; }
body .start-screen .btn-start {
padding: 0.25em;
border: 1px solid lightgray;
border-radius: 0;
width: 25%; }
body .start-screen h1 {
margin-top: 0; }
background-color: rgba(240, 240, 240, 0.8); }
body h1 {
font-family: "Kaushan Script";
font-size: 200%; }
body h2 {
font-weight: regular; }
body button:hover {
background-color: #eee; }
.ingame-header {
.start-screen, .end-screen {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; }
.start-screen .logo, .end-screen .logo {
max-width: 130px; }
.start-screen .btn-start, .end-screen .btn-start {
padding: 0.25em;
border: 1px solid lightgray;
border-radius: 0;
width: 25%; }
.start-screen .score, .end-screen .score {
text-align: center; }
.ingame-screen {
display: grid;
grid-template-rows: 2fr 6fr 2fr; }
.ingame-screen header, .ingame-screen footer {
padding: 1rem 2rem; }
.ingame-screen .header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: black;
color: white; }
.ingame-header h1 {
.ingame-screen .header h1 {
margin: 0;
padding: 0; }
.question {
.ingame-screen .question {
padding: 2rem; }
.question.revealed .answer {
.ingame-screen .question.revealed .answer {
background-color: lightgray; }
.question.revealed .answer.chosen {
background-color: red; }
.question.revealed .answer.correct {
background-color: limegreen; }
.question.revealed .answer.correct.chosen {
background-color: green;
.ingame-screen .question.revealed .answer.chosen {
background-color: #b34040;
color: white; }
.question .question-answers .answer {
.ingame-screen .question.revealed .answer.correct {
background-color: #8fb340;
color: white; }
.ingame-screen .question.revealed .answer.correct.chosen {
background-color: #8fb340;
color: white; }
.ingame-screen .question .question-answers .answer {
display: block;
padding: 0.5rem;
width: 100%;
@ -56,7 +69,7 @@ body {
border: 1px solid lightgray;
border-radius: 0;
text-align: left; }
.question .btn-continue {
.ingame-screen .btn-continue {
display: block;
margin-top: 1rem;
width: 100%;

2
css/style.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAAA,IAAI;EACF,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EAEnB,YAAO;IACL,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,OAAO;EAE3B,kBAAa;IACX,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,MAAM;IACvB,cAAc,EAAE,MAAM;IAEtB,6BAAU;MACR,OAAO,EAAE,MAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,CAAC;MAChB,KAAK,EAAE,GAAG;IAEZ,qBAAE;MACA,UAAU,EAAE,CAAC;EAEjB,OAAE;IACA,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,IAAI;EAEjB,OAAE;IACA,WAAW,EAAE,OAAO;;AAExB,cAAc;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EAEZ,iBAAE;IACA,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;;AAEd,SAAS;EACP,OAAO,EAAE,IAAI;EAIX,0BAAO;IACL,gBAAgB,EAAE,SAAS;IAE3B,iCAAQ;MACN,gBAAgB,EAAE,GAAG;IAEvB,kCAAS;MACP,gBAAgB,EAAE,SAAS;MAC3B,yCAAQ;QACN,gBAAgB,EAAE,KAAK;QACvB,KAAK,EAAE,KAAK;EAGlB,mCAAO;IACL,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,MAAK;IACd,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,IAAI;EAEpB,uBAAa;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,MAAK",
"mappings": "AAAA,IAAI;EACF,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE,0BAA0B;EAC5C,eAAe,EAAE,KAAK;EAEtB,YAAO;IACL,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,wBAAuB;EAE3C,OAAE;IACA,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,IAAI;EAEjB,OAAE;IACA,WAAW,EAAE,OAAO;EAEtB,iBAAY;IACV,gBAAgB,EAAE,IAAI;;AAE1B,0BAA0B;EACxB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;EAEtB,sCAAK;IACH,SAAS,EAAE,KAAK;EAElB,gDAAU;IACR,OAAO,EAAE,MAAK;IACd,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE,CAAC;IAChB,KAAK,EAAE,GAAG;EAEZ,wCAAM;IACJ,UAAU,EAAE,MAAM;;AAEtB,cAAc;EACZ,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,WAAW;EAE/B,4CAAc;IACZ,OAAO,EAAE,SAAS;EAEpB,sBAAO;IACL,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IACnB,gBAAgB,EAAE,KAAK;IACvB,KAAK,EAAE,KAAK;IAEZ,yBAAE;MACA,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;EAEd,wBAAS;IACP,OAAO,EAAE,IAAI;IAIX,yCAAO;MACL,gBAAgB,EAAE,SAAS;MAE3B,gDAAQ;QACN,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;MAEd,iDAAS;QACP,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;QAEZ,wDAAQ;UACN,gBAAgB,EAAE,OAAO;UACzB,KAAK,EAAE,KAAK;IAGlB,kDAAO;MACL,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,MAAK;MACd,KAAK,EAAE,IAAI;MACX,aAAa,EAAE,GAAG;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,CAAC;MAChB,UAAU,EAAE,IAAI;EAEtB,4BAAa;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,MAAK",
"sources": ["style.sass"],
"names": [],
"file": "style.css"

60
css/style.sass
View File

@ -4,26 +4,14 @@ body
align-items: center
justify-content: center
font-family: Roboto
background-image: url(../img/background.jpg)
background-size: cover
.screen
width: 800px
max-width: 90vw
min-height: 60vh
background-color: #efefef
.start-screen
display: flex
align-items: center
justify-content: center
flex-direction: column
.btn-start
padding: .25em
border: 1px solid lightgray
border-radius: 0
width: 25%
h1
margin-top: 0
background-color: rgba(240, 240, 240, .8)
h1
font-family: 'Kaushan Script'
@ -32,11 +20,38 @@ body
h2
font-weight: regular
.ingame-header
button:hover
background-color: #eee
.start-screen, .end-screen
display: flex
align-items: center
justify-content: center
flex-direction: column
.logo
max-width: 130px
.btn-start
padding: .25em
border: 1px solid lightgray
border-radius: 0
width: 25%
.score
text-align: center
.ingame-screen
display: grid
grid-template-rows: 2fr 6fr 2fr
header, footer
padding: 1rem 2rem
.header
display: flex
justify-content: space-between
align-items: center
padding: 1rem 2rem
background-color: black
color: white
@ -53,12 +68,15 @@ body
background-color: lightgray
&.chosen
background-color: red
background-color: #b34040
color: white
&.correct
background-color: limegreen
background-color: #8fb340
color: white
&.chosen
background-color: green
background-color: #8fb340
color: white
.question-answers

BIN
img/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 MiB

BIN
img/wiai-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

11
index.html
View File

@ -10,12 +10,13 @@
<body>
<main id="app">
<section v-if="mode === STARTSCREEN" class="start-screen screen" v-on:keyup.enter="enterGame">
<img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
<h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
<button v-on:click="enterGame" class="btn-start" tabindex="0" v-on:keyup.enter="enterGame">Starten</button>
</section>
<section v-if="mode === INGAME" class="ingame-screen screen" v-on:keyup.enter="showNextQuestion">
<header class="ingame-header">
<header class="header">
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
<p class="score">Score: {{score}} Punkte</p>
</header>
@ -29,14 +30,16 @@
{{answer.text}}
</button>
</div>
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
</article>
<footer class="footer">
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
</footer>
</section>
<section v-if="mode === ENDSCREEN" class="end-screen screen">
<img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
<p>Wir sind fertig.</p>
<p class="score">Score: {{score}} Punkte</p>
<p class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt {{score}} Punkte erzielt.</p>
</section>
</main>

25
style.css Normal file
View File

@ -0,0 +1,25 @@
/*
Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass
Backtrace:
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:454:in `read'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:454:in `update_stylesheet'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:209:in `each'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:294:in `watch'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin.rb:109:in `method_missing'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/sass_scss.rb:358:in `watch_or_update'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/sass_scss.rb:51:in `process_result'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/base.rb:50:in `parse'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/base.rb:18:in `parse!'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/bin/sass:13:in `<top (required)>'
/home/florian/.rvm/gems/ruby-2.5.1/bin/sass:23:in `load'
/home/florian/.rvm/gems/ruby-2.5.1/bin/sass:23:in `<main>'
/home/florian/.rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `eval'
/home/florian/.rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `<main>'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass"; }