diff --git a/src/Pages/ResultView.elm b/src/Pages/ResultView.elm index c108061e8ea9f283206c409d8dd66bd1b7d2011c..96047dcd216a5f310855bc22137395a80fe4dbdf 100644 --- a/src/Pages/ResultView.elm +++ b/src/Pages/ResultView.elm @@ -1,7 +1,7 @@ module Pages.ResultView exposing (..) import Types exposing (Model, Msg(..), Question, QuestionType(..)) -import Html exposing (Html, div, text, button, a, p, h2, table, tbody, tr, td) +import Html exposing (Html, div, text, button, a, p, h1, table, tbody, tr, td) import Html.Attributes exposing (class, href) import Html.Events exposing (onClick) import Utils.HelperFunction exposing (normalizeString) @@ -13,7 +13,7 @@ resultView model = content = answersToTable model.quiz.questions in div [ class "resultView" ] - [ h2 [] [ text "Ergebnisse" ] + [ h1 [] [ text "Ergebnisse" ] , p [] [ text ("benötigt: " ++ String.fromInt model.curTime ++ " Minuten")] , content , div [ class "navigation" ] diff --git a/src/style.css b/src/style.css index 336706f2cacf0c80431879b272d586bb3ebe617f..5236dbc81e79b30f3c6d4081311dc344a66609d9 100644 --- a/src/style.css +++ b/src/style.css @@ -1,9 +1,15 @@ +html { + width: 100%; + height: 100%; +} + body { - display: flex; font-family: sans-serif; background-color: #111; color: #fff; - align-items: center; + width: 100%; + height: 100%; + margin: 0; } form { @@ -64,6 +70,19 @@ svg { margin-bottom: 10px; } +div.background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url('bg.svg') no-repeat center center; + background-size: contain; + filter: grayscale(100%); + z-index: 1; + filter: invert(1); +} + div.media { display: flex; align-items: center; @@ -77,22 +96,25 @@ div.imgDiv, div.svgDiv { } div.center { - background-color: #333; - border-radius: 15px; - padding: 15px; + position: relative; + z-index: 2; + background: rgba(51, 51, 51, 0.8); + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(15px); } div.home { display: flex; flex-direction: column; width: 100%; - height: 95vh; + height: 100%; justify-content: center; align-items: center; } div.quiz { - padding: 5px; margin-left: 15px; width: 100%; } @@ -100,23 +122,20 @@ div.quiz { div.questionView { display: flex; flex-direction: row; - width: 100%; + padding: 15px; } div.frontPage { background-color: #333; - margin-top: 15px; border-radius: 10px; padding: 10px; } div.resultView { - width: 100%; - height: 100%; display: flex; align-items: stretch; flex-direction: column; - padding: 5px; + padding: 15px; } div.navigation { @@ -158,7 +177,6 @@ div.question { border-radius: 10px; border-width: 1px; background-color: #333; - margin-top: 15px; } div.choice { @@ -230,12 +248,11 @@ div.navBar { width: 100%; max-width: 100px; height: 85vh; - margin-top: 20px; padding-top: 20px; border-radius: 10px; position: sticky; position: -webkit-sticky; - top: 28px; + top: 15px; } div.navBarBtns { @@ -350,6 +367,12 @@ h1 { text-decoration: underline; } +h1.title { + margin-top: 0; + font-size: 50px; + margin-bottom: 20px; +} + p.latex, p.follow { margin: 0; padding: 0;