18.4

[GTI]
- better tap targets spacing
- change styling of block buttons
- restructure css
- minor fixes

[general]
- minor tweaks and fixes

Author: miermontoto

package.json

@@ -1,5 +1,5 @@
 ---
-title: mier (not found)
+title: mier (404)
 layout: base.njk
 permalink: /404.html
 ---

src/404.md

@@ -23,7 +23,7 @@ buttons: [
 </div>
 <span class="button" id="reset"><img src="/assets/icons/button/reset.svg" class="icon invert" alt="reset"> reset</span>
 <div id="options">
-	<h3>opciones.</h3>
+	<h2>opciones.</h2>
 	<input type="checkbox" id="shuffle-questions" checked>
 	<label for="shuffle-questions">saltear preguntas</label>
 	<br>

src/content/collections/projects/gti.njk

@@ -1,22 +1,30 @@
 @use '../base'
 
-.disabled.selected
-	background-color: base.$wrong
+.selected // selected answers
+	&.correct
+		background-color: base.$correct !important
 
-.correct.selected
-	background-color: base.$correct
+	&.disabled
+		background-color: base.$wrong
 
-.disabled
-	background-color: base.$light
+.disabled // not selected answers
+	background-color: base.$dark
+
+	&.correct:not(.selected)
+		background-color: base.$correct-background
 
-.disabled.correct:not(.selected)
-	background-color: base.$correct-background
+.question-block
+	&.correct
+		border-color: base.$correct-background
 
-.question-block.correct
-	border-color: base.$correct-background
+	&.wrong
+		border-color: base.$wrong-background
+
+.select-block
+	background-color: base.$light
 
-.question-block.wrong
-	border-color: base.$wrong-background
+	&.selected
+		background-color: base.$white
 
 .disabled:hover
 	cursor: auto
@@ -73,3 +81,4 @@
 #options input
 	height: 1.25em
 	width: 1.25em
+	margin: 6px

src/static/css/app/gti.sass

@@ -47,9 +47,6 @@ a, a:visited
     &.disabled:hover
         animation: none
 
-.active:not(.section)
-    animation: base.$animation
-
 .disabled
     cursor: not-allowed !important
     opacity: 0.5

src/static/css/global.sass

@@ -23,8 +23,8 @@ window.addEventListener('load', () => { // when the page loads (the content is r
 			currentQuestionsDiv.innerHTML = questionsBlock.innerHTML;
 
 			resetAll(false);
-			document.querySelectorAll('.select-block').forEach((b) => b.classList.remove('active'));
-			block.classList.add('active');
+			document.querySelectorAll('.select-block').forEach((b) => b.classList.remove('selected'));
+			block.classList.add('selected');
 		});
 	});