commit 0485bf60b04e95f9083d83d3dc9a9b730569f9d7
parent 31c64e39be70821e4b89cfc3a2f4244503a7161e
Author: hrryt <harry@mayesfield.uk>
Date: Mon, 26 Oct 2026 18:49:12 +0000
Overhaul style, add svg titles, fix points on chrome
Diffstat:
7 files changed, 136 insertions(+), 42 deletions(-)
diff --git a/TODO.md b/TODO.md
@@ -8,10 +8,8 @@
- Transformations of shapes and graphs (curves)
- tricky parallel lines / internal angles etc questions
- Solve and represent inequalities
+ - Intervals on number lines
# Other stuff
- minesweeper / youtube video.
-- crosswords
- blog
-- unique style
-- mobile layout
diff --git a/src/components/QuestionCard.jsx b/src/components/QuestionCard.jsx
@@ -86,7 +86,7 @@ export default function QuestionCard({ data }) {
{showAnswers ? "Show questions" : "Show answers"}
</button>
</fieldset>
- <div class="field-border">
+ <div class="print">
<ol class="master-question-list">
{questions}
</ol>
diff --git a/src/components/plotting/Plot.jsx b/src/components/plotting/Plot.jsx
@@ -79,8 +79,9 @@ export default function Plot({ children, mode="graph", viewBox, width="300", hei
return (
<svg
width={width} height={height} viewBox={viewBox.join(' ')}
- xmlns="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg" role="img"
>
+ <title>Plot</title>
<defs>
<g>
<marker
diff --git a/src/components/plotting/Point.jsx b/src/components/plotting/Point.jsx
@@ -4,7 +4,7 @@ import { getColourClass } from '../../scripts/graphUtils.js';
export default function Point({ point, label=null, colour="auto", position="top" }) {
return (
<g>
- <path marker-start="url(#cross)" d={`M ${point}`} class={getColourClass(colour)}/>
+ <path marker-start="url(#cross)" d={`M ${point} Z`} class={getColourClass(colour)}/>
{label && <Label point={point} position={position} spacing={5} colour={colour}>{label}</Label>}
</g>
);
diff --git a/src/index.jsx b/src/index.jsx
@@ -78,7 +78,7 @@ function Sidebar() {
</Route>
</SidebarLink>
<SidebarLink href="/renderer" title="LaTeX Renderer" />
- <li><a href="https://git.ttmaths.uk">Source Code</a></li>
+ <li><a href="https://git.ttmaths.uk" target="_blank">Source Code</a></li>
</ul>
</nav>
);
diff --git a/src/pages/LatexRenderer.jsx b/src/pages/LatexRenderer.jsx
@@ -24,7 +24,7 @@ export default function LatexRenderer() {
onChange={e => updateText(e)}
spellcheck={false}
/>
- <div class="field-border">
+ <div class="print">
<Equation equation={text} />
</div>
</Card>
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,11 +1,40 @@
:root {
- --highlight: #d7834f;
- --background: #2a2a2a;
- --main-bg: #333333;
- --main-border: #5e5e5a;
- --font-color: #b3b1b1;
- --light-font-color: #bdbbb0;
- --nav-link-color: #979594;
+
+ /* https://ethanschoonover.com/solarized/ */
+ --base03: #002b4f; /* #002b36 */
+ --base02: #001020; /* #072632 */
+ --base01: #586e75;
+ --base00: #657b83;
+ --base0: #839496;
+ --base1: #93a1a1;
+ --base2: #d0d0d3; /* #eee8d5 */
+ --base3: #e7ddf0; /* #fdf6e3 */
+ --yellow: #b58900;
+ --orange: #cb4b16;
+ --red: #dc322f;
+ --magenta: #d33682;
+ --violet: #3c3174; /* #6c71c4 */
+ --blue: #268bd2;
+ --cyan: #2aa198;
+ --green: #859900;
+
+ --light-accent: var(--violet);
+ --dark-accent: var(--base03);
+ --light-bg: var(--base3);
+ --dark-bg: var(--base2);
+ --dark-border: var(--base01);
+ --light-border: var(--base0);
+ --text: var(--base02);
+
+ --body-bg: var(--light-bg);
+ --main-bg: var(--dark-bg);
+ --main-border: var(--dark-border);
+ --inner-border: var(--light-border);
+
+ --textarea-bg: var(--body-bg);
+ --print-border: var(--dark-accent);
+ --link: var(--text);
+ --button-bg: var(--dark-accent);
--graph-1: #008080;
--graph-2: #43509E;
@@ -14,23 +43,69 @@
--graph-5: #FFB000;
}
-body {
- background-color: var(--background);
- color: var(--font-color);
+@media (min-width: 960px) {
+ div#sidebar-and-main {
+ display: flex;
+ }
+ main {
+ width: 670px;
+ }
+ #app {
+ width: 940px;
+ }
+}
+
+@media (max-width: 959px) {
+ nav#sidebar > ul {
+ display: flex;
+ gap: 1.5em;
+ }
+ nav#sidebar > ul > li > ul {
+ display: none;
+ }
+}
+
+@media print {
+ body:has(.print) {
+ visibility: hidden;
+ }
+ .print {
+ visibility: visible;
+ position: absolute;
+ left: 0;
+ top: 0;
+ border: none !important;
+ }
+}
+
+html {
+ background-color: var(--body-bg);
+ color: var(--text);
font-family: Adelle,Roboto Slab,DejaVu Serif,Georgia,Times New Roman,sans-serif;
- width: 940px;
- margin: 0 auto;
+ accent-color: var(--dark-accent);
}
-div#sidebar-and-main {
- display: flex;
+body {
+ background-image:
+ radial-gradient(at top left, var(--light-accent) 0, rgb(0 0 0 / 0) 50%),
+ radial-gradient(at top right, var(--dark-accent) 0, rgb(0 0 0 / 0) 50%);
+ margin: 0;
+ height: 50em;
+ max-height: 100vh;
+}
+
+#app {
+ margin: 0 auto;
+ padding: 0 1em 1em 1em;
}
main {
background-color: var(--main-bg);
- border: solid 1px var(--main-border);
padding: 22px;
- width: 670px;
+ padding-top: 5px;
+ border: solid 1px var(--main-border);
+ min-width: min-content;
+ max-width: 670px;
}
nav#sidebar {
@@ -48,8 +123,12 @@ ul {
}
a {
+ color: var(--link);
text-decoration: none;
- color: var(--highlight);
+}
+
+a[href^="http"]::after {
+ content: " ⎘";
}
nav#sidebar > ul {
@@ -62,18 +141,21 @@ nav#sidebar details {
}
nav#sidebar a {
- transition-duration: .3s;
- transition-property: color;
- background-color: initial;
- color: var(--nav-link-color);
+ color: inherit;
}
-nav#sidebar :is(a.active,a:hover) {
- color: var(--highlight);
+nav#sidebar a:hover {
+ color: var(--link);
+ text-decoration: dotted underline;
}
+nav#sidebar a.active {
+ color: var(--link);
+ text-decoration: underline;
+}
+
+
header {
- padding: 1rem 0;
display: grid;
grid-template-areas: "logo tagline";
grid-template-columns: auto 1fr;
@@ -82,18 +164,18 @@ header {
header #logo {
grid-area: logo;
+ color: inherit;
}
header #tagline {
grid-area: tagline;
margin-left: .8em;
- font-size: clamp(.8rem,2vw,1.3rem);
- color: var(--light-font-color);
+ font-size: 1.3rem;
}
fieldset {
margin-bottom: 0.5em;
- border: solid 1px var(--main-border);
+ border: solid 1px var(--inner-border);
}
.variables {
@@ -105,26 +187,39 @@ fieldset {
}
button {
- background-color: var(--background);
- border: solid 1px var(--main-border);
- color: var(--font-color);
+ background-color: var(--button-bg);
margin-right: 9px;
+ font-weight: 700;
+ color: white;
+ border-color: var(--button-bg);
+}
+
+button:hover {
+ filter: brightness(95%);
+}
+
+button,input {
+ border-radius: 3px;
+}
+
+button,input,input + label {
+ cursor: pointer;
}
textarea {
- background-color: var(--background);
+ background-color: var(--textarea-bg);
border: solid 1px var(--main-border);
- color: var(--font-color);
+ color: inherit;
width: 100%;
}
-.field-border {
+.print {
font-size: large;
padding: 20px;
margin-top: 20px;
background-color: white;
color: black;
- border: solid 8px var(--highlight);
+ border: 3px double var(--print-border);
line-height: 1.8em;
}
