From 0b30a7a41d83b649da148a0b0317d3d8a0cd0989 Mon Sep 17 00:00:00 2001
From: Tim Grelka <tim@grelka.net>
Date: Sat, 14 Feb 2026 23:08:48 +0100
Subject: [PATCH] feat: improve styling for solutions

---
 assets/style-course.css                 | 12 ++++++------
 src/build.py                            | 19 ++++++++++---------
 templates/html/brightspot.html          | 12 +++++++++---
 templates/html/brightspot_question.html |  4 ++--
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/assets/style-course.css b/assets/style-course.css
index deaf658..f89075a 100644
--- a/assets/style-course.css
+++ b/assets/style-course.css
@@ -19,7 +19,7 @@
   font-style: italic;
 }
 
-.question {
+.question:not(.for-solution) {
   padding: 1ex;
   background: #ddd;
   margin-top: 2em;
@@ -190,7 +190,7 @@ td {
 }
 
 ul {
-    list-style-type: square;
+  list-style-type: square;
 }
 
 ul li::marker {
@@ -438,15 +438,15 @@ span.formula {
 
 /* Enable Line Breaks in Equations ... */
 .course .katex-display > .katex {
-    white-space: normal
+  white-space: normal;
 }
 
 /* Add space between broken lines: */
 .course .katex-display .base {
-    margin: 0.5em 0em
+  margin: 0.5em 0em;
 }
 
 /* Compensate by reducing space around display math */
 .course .katex-display {
-    margin: 1em 0em;
-}
\ No newline at end of file
+  margin: 1em 0em;
+}
diff --git a/src/build.py b/src/build.py
index cbe2c9d..8a88c84 100644
--- a/src/build.py
+++ b/src/build.py
@@ -1,4 +1,3 @@
-import functools
 import json
 import random
 import shutil
@@ -461,16 +460,18 @@ class Build:
                 content = file.read()
                 with (self.config.p_build / f"{brightspot_file.stem}.html").open("w") as file:
                     with FiftyOhmHtmlRenderer(
-                        question_renderer=functools.partial(
-                            self.__build_question,
-                            template_file="html/brightspot_question.html",
-                        ),
+                        question_renderer=self.__build_question,
                         picture_handler=self.__picture_handler,
                         photo_handler=self.__photo_handler,
                         include_handler=self.__include_handler,
                     ) as renderer:
+                        question = self.__build_question(
+                            brightspot_file.stem, template_file="html/brightspot_question.html"
+                        )
                         brightspot_template = self.env.get_template("html/brightspot.html")
-                        result = renderer.render(Document(content))
-                        result = brightspot_template.render(content=result, number=brightspot_file.stem)
-                        result = self.__build_page(result, course_wrapper=False)
-                        file.write(result)
+                        solution = renderer.render(Document(content))
+                        page = brightspot_template.render(
+                            question=question, solution=solution, number=brightspot_file.stem
+                        )
+                        page = self.__build_page(page, course_wrapper=False)
+                        file.write(page)
diff --git a/templates/html/brightspot.html b/templates/html/brightspot.html
index 6667820..aecae60 100644
--- a/templates/html/brightspot.html
+++ b/templates/html/brightspot.html
@@ -1,10 +1,16 @@
-<div class="alert alert-warning text-dark" role="alert">
-	<h2>
+<div class="card" role="alert">
+	<h2 class="card-header text-bg-warning bg-opacity-50">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true" focusable="false" style="width: 1.1em; height: 1.1em; vertical-align: -0.1em;">
 			<path d="M420.9 448C428.2 425.7 442.8 405.5 459.3 388.1C492 353.7 512 307.2 512 256C512 150 426 64 320 64C214 64 128 150 128 256C128 307.2 148 353.7 180.7 388.1C197.2 405.5 211.9 425.7 219.1 448L420.8 448zM416 496L224 496L224 512C224 556.2 259.8 592 304 592L336 592C380.2 592 416 556.2 416 512L416 496zM312 176C272.2 176 240 208.2 240 248C240 261.3 229.3 272 216 272C202.7 272 192 261.3 192 248C192 181.7 245.7 128 312 128C325.3 128 336 138.7 336 152C336 165.3 325.3 176 312 176z"/>
 		</svg>
 		Lösungsweg: {{number}}
 	</h2>
 
-    {{content}}
+	<div class="card-body text-bg-light">	
+		{{question}}
+	</div>
+	<hr class="m-0" />
+	<div class="card-body">
+		{{solution}}
+	</div>
 </div>
diff --git a/templates/html/brightspot_question.html b/templates/html/brightspot_question.html
index cdcad9c..931eaee 100644
--- a/templates/html/brightspot_question.html
+++ b/templates/html/brightspot_question.html
@@ -1,4 +1,4 @@
-<div class="question layout-{{ layout }}" id="{{ number }}">
+<div class="question layout-{{ layout }} for-solution" id="{{ number }}">
     <div class="question-text">{{ number }}: {{ question }}</div>
     {% if picture_question %}
       <div class="question-picture"><img src="pictures/{{ picture_question }}.svg" alt="{{ alt_text_question }}"></div>
@@ -17,6 +17,6 @@
             <b>Falsch: </b> <div class="question-picture"><img src="pictures/{{ answer_pictures[3] }}.svg" alt="{{ alt_text_answers[3] }}"></div><br/>
         {% endif %}
     </div>
-  </div>
+</div>
   
   
\ No newline at end of file