website

commit 7681fc52712b8c50555c6bf9ab22c1b778a1376d
parent 4ef389203c56d949ff909ec2a0544b5b1b3e5d24
Author: hrryt <harry@mayesfield.uk>
Date:   Thu, 24 Sep 2026 18:40:37 +0100

Change fieldset layout

Diffstat:
M
TODO.md
 | 
1
-
M
src/components/QuestionCard.jsx
 | 
14
++++++++------
M
src/styles/main.css
 | 
15
++++++++++-----

3 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/TODO.md b/TODO.md
@@ -9,7 +9,6 @@
     - Find all roots of this quintic (or something) polynomial (repeated root knowledge)
     - Transformations of shapes and graphs (curves)
     - tricky parallel lines / internal angles etc questions
-- Put fieldsets side-by-side
 
 # Other stuff
 - minesweeper / youtube video.
diff --git a/src/components/QuestionCard.jsx b/src/components/QuestionCard.jsx
@@ -74,14 +74,16 @@ export default function QuestionCard({ data }) {
 
   return (
     <Card title={data.title}>
-      {fields}
+      <div class="variables">
+        {fields}
+      </div>
       <fieldset>
-        <legend>Options</legend>
-        <button onClick={revealAnswers}>
-          {showAnswers ? "Show Questions" : "Show Answers"}
-        </button>
+        <legend>Display</legend>
         <button onClick={triggerRefresh}>
-          Refresh Questions
+          Randomise questions
+        </button>
+        <button onClick={revealAnswers}>
+          {showAnswers ? "Show questions" : "Show answers"}
         </button>
       </fieldset>
       <div class="field-border">
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -92,14 +92,23 @@ header #tagline {
 }
 
 fieldset {
-  margin-bottom: 7px;
+  margin-bottom: 0.5em;
   border: solid 1px var(--main-border);
 }
 
+.variables {
+  display: flex;
+}
+
+.variables > fieldset {
+  width: 100%;
+}
+
 button {
   background-color: var(--background);
   border: solid 1px var(--main-border);
   color: var(--font-color);
+  margin-right: 9px;
 }
 
 textarea {
@@ -132,10 +141,6 @@ ol.question-list {
   list-style-type: lower-latin;
 }
 
-button {
-  margin-right: 3px;
-}
-
 img.http-error {
   max-width: 400px;
 }