diff --git a/css/style.css b/css/style.css index cacc192..4b02a13 100644 --- a/css/style.css +++ b/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; } - 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; - justify-content: space-between; align-items: center; - padding: 1rem 2rem; - background-color: black; - color: white; } - .ingame-header h1 { - margin: 0; - padding: 0; } - -.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; + 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; - text-align: left; } - .question .btn-continue { + 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; + 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%; diff --git a/css/style.css.map b/css/style.css.map index c9718da..5922bee 100644 --- a/css/style.css.map +++ b/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" diff --git a/css/style.sass b/css/style.sass index 8101a98..cd472a9 100644 --- a/css/style.sass +++ b/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 - - .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,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 - background-color: black - color: white + justify-content: center + flex-direction: column - h1 - margin: 0 - padding: 0 + .logo + max-width: 130px -.question - padding: 2rem + .btn-start + padding: .25em + border: 1px solid lightgray + border-radius: 0 + width: 25% - &.revealed - - .answer - background-color: lightgray + .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 + background-color: black + color: white + + h1 + margin: 0 + padding: 0 + + .question + padding: 2rem + + &.revealed + + .answer + background-color: lightgray - &.chosen - background-color: red - - &.correct - background-color: limegreen &.chosen - background-color: green + background-color: #b34040 + color: white + + &.correct + background-color: #8fb340 color: white - .question-answers - .answer - display: block - padding: .5rem - width: 100% - margin-bottom: 2px - border: 1px solid lightgray - border-radius: 0 - text-align: left + &.chosen + background-color: #8fb340 + color: white + + .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 diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..19dba77 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/wiai-logo.png b/img/wiai-logo.png new file mode 100644 index 0000000..921ed24 Binary files /dev/null and b/img/wiai-logo.png differ diff --git a/index.html b/index.html index 043300f..71b66bc 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,13 @@
+

Willkommen zum WIAI-Weihnachtsquiz!

-
+

WIAI-Weihnachtsquiz

Score: {{score}} Punkte

@@ -29,14 +30,16 @@ {{answer.text}} - +
+ +
+

WIAI-Weihnachtsquiz

-

Wir sind fertig.

-

Score: {{score}} Punkte

+

Herzlichen Glückwunsch!
Du hast insgesamt {{score}} Punkte erzielt.

diff --git a/style.css b/style.css new file mode 100644 index 0000000..d309833 --- /dev/null +++ b/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 `' +/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 `
' +/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 `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass"; }