From 4b18319dc0eddcae46034297e732b94f47524ba3 Mon Sep 17 00:00:00 2001
From: aqquq <jannik.wurche@student.uni-halle.de>
Date: Tue, 2 Jul 2024 17:25:35 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20style=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Pages/ResultView.elm | 4 +--
src/style.css | 53 ++++++++++++++++++++++++++++------------
2 files changed, 40 insertions(+), 17 deletions(-)
diff --git a/src/Pages/ResultView.elm b/src/Pages/ResultView.elm
index c108061..96047dc 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 336706f..5236dbc 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;
--
GitLab