Add more styles

css/style.css

@@ -3,60 +3,73 @@ 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; }
+    background-color: rgba(240, 240, 240, 0.8); }
-  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; }
   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;
-  justify-content: space-between;
   align-items: center;
-  padding: 1rem 2rem;
+  justify-content: center;
-  background-color: black;
+  flex-direction: column; }
-  color: white; }
+  .start-screen .logo, .end-screen .logo {
-  .ingame-header h1 {
+    max-width: 130px; }
-    margin: 0;
+  .start-screen .btn-start, .end-screen .btn-start {
-    padding: 0; }
+    padding: 0.25em;
-
-.question {
-  padding: 2rem; }
-  .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;
-        color: white; }
-  .question .question-answers .answer {
-    display: block;
-    padding: 0.5rem;
-    width: 100%;
-    margin-bottom: 2px;
     border: 1px solid lightgray;
     border-radius: 0;
-    text-align: left; }
+    width: 25%; }
-  .question .btn-continue {
+  .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;
+    background-color: black;
+    color: white; }
+    .ingame-screen .header h1 {
+      margin: 0;
+      padding: 0; }
+  .ingame-screen .question {
+    padding: 2rem; }
+    .ingame-screen .question.revealed .answer {
+      background-color: lightgray; }
+      .ingame-screen .question.revealed .answer.chosen {
+        background-color: #b34040;
+        color: white; }
+      .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%;
+      margin-bottom: 2px;
+      border: 1px solid lightgray;
+      border-radius: 0;
+      text-align: left; }
+  .ingame-screen .btn-continue {
     display: block;
     margin-top: 1rem;
     width: 100%;

css/style.css.map

@@ -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"

css/style.sass

@@ -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
+    background-color: rgba(240, 240, 240, .8)
-
-  .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
 
   h1
     font-family: 'Kaushan Script'
@@ -32,44 +20,74 @@ body
   h2 
     font-weight: regular
 
-.ingame-header
+  button:hover 
+    background-color: #eee
+
+.start-screen, .end-screen
   display: flex
-  justify-content: space-between
   align-items: center
-  padding: 1rem 2rem
+  justify-content: center
-  background-color: black
+  flex-direction: column
-  color: white
 
-  h1 
+  .logo
-    margin: 0
+    max-width: 130px
-    padding: 0
 
-.question
+  .btn-start 
-  padding: 2rem
+    padding: .25em
+    border: 1px solid lightgray
+    border-radius: 0
+    width: 25%
 
-  &.revealed
+  .score
+    text-align: center
 
-    .answer
+.ingame-screen
-      background-color: lightgray
+  display: grid
+  grid-template-rows: 2fr 6fr 2fr
 
-      &.chosen
+  header, footer
-        background-color: red
+    padding: 1rem 2rem
+
+  .header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    background-color: black
+    color: white
+
+    h1 
+      margin: 0
+      padding: 0
+
+  .question
+    padding: 2rem
+
+    &.revealed
+      
+      .answer
+        background-color: lightgray
 
-      &.correct
-        background-color: limegreen
         &.chosen
-          background-color: green
+          background-color: #b34040
           color: white
       
-  .question-answers
+        &.correct
-    .answer
+          background-color: #8fb340
-      display: block
+          color: white
-      padding: .5rem
+
-      width: 100%
+          &.chosen
-      margin-bottom: 2px
+            background-color: #8fb340
-      border: 1px solid lightgray
+            color: white
-      border-radius: 0
+
-      text-align: left
+    .question-answers
+      .answer
+        display: block
+        padding: .5rem
+        width: 100%
+        margin-bottom: 2px
+        border: 1px solid lightgray
+        border-radius: 0
+        text-align: left
 
   .btn-continue
     display: block

index.html

@@ -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">Herzlichen Glückwunsch!<br/>Du hast insgesamt {{score}} Punkte erzielt.</p>
-      <p class="score">Score: {{score}} Punkte</p>
     </section>
   </main>
   

style.css

@@ -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"; }