diff --git a/assets/style-course.css b/assets/style-course.css index 846f5e4..59a0bd0 100644 --- a/assets/style-course.css +++ b/assets/style-course.css @@ -24,6 +24,7 @@ background: #ddd; margin-top: 2em; margin-bottom: 2em; + position: relative; } .question p { padding: 0; @@ -34,6 +35,30 @@ font-weight: 600; margin: 1ex 1em 1.5ex 1em; } + +.question.has-brightspot .question-text { + margin-right: 3em; +} + +.question .question-brightspot { + position: absolute; + top: 1ex; + right: 1ex; + line-height: 0; + text-decoration: none; + color: inherit; +} + +.question .question-brightspot-icon { + width: 2em; + height: 2em; + display: block; +} + +.question .question-brightspot:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; +} .question .question-picture { max-width: 100%; margin-bottom: 1em; diff --git a/src/build.py b/src/build.py index 1e70dee..2dc6332 100644 --- a/src/build.py +++ b/src/build.py @@ -103,6 +103,8 @@ class Build: picture_question = "" alt_text_question = "" + brightspot_file = self.config.p_data_brightspots / f"{number}.md" + return question_template.render( question=question["question"], number=number, @@ -112,6 +114,7 @@ class Build: answer_pictures=answer_pictures, alt_text_answers=alt_text_answers, alt_text_question=alt_text_question, + brightspot=brightspot_file.exists(), ) def __build_question_slide(self, input): diff --git a/templates/html/question.html b/templates/html/question.html index a95851c..b8e7a92 100644 --- a/templates/html/question.html +++ b/templates/html/question.html @@ -1,4 +1,11 @@ -
+
+ {% if brightspot %} + + + + {% endif %}
{{ number }}: {{ question }}
{% if picture_question %}
{{ alt_text_question }}