move to webm; try fix pub size on mobile; try fix dark mode on mobile

rmdocherty · rmdocherty · commit 85984b4808ae · 2026-02-08T19:22:05.000Z
diff --git a/README.md b/README.md
@@ -47,7 +47,7 @@ yarn start
 
 ## TODO:
 
-- gha for deploys on merge to main
+- minor fixes: top bar icon size on mobile; dark mode mobile not working; better zod parsing
 
 - add Sheares!
 - add new publications: llama (rsc), evoxels, vulture, image rep (adv sci), hr-dv2 (adv int sys), BIL, prompt to protocol
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
     <title>tldr</title>
   </head>
   <body>
diff --git a/public/assets/micro.gif b/public/assets/micro.gif
diff --git a/public/assets/micro.webm b/public/assets/micro.webm
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
@@ -1,7 +1,7 @@
 export const MainContent = () => {
   return (
     <div className="outlined-content">
-      <img src="/assets/micro.gif" style={{ maxWidth: "75%", objectFit: "scale-down" }} />
+      <video src="/assets/micro.webm" autoPlay loop muted style={{ maxWidth: "75%", objectFit: "scale-down" }} />
       <p>
         The Tools for Learning, Design and Research (tldr) group is a multidisciplinary team based in the Dyson school
         of Design engineering at Imperial College London. With activities spanning online education, generative design
diff --git a/src/styles.module.scss b/src/styles.module.scss
@@ -1,3 +1,6 @@
+:global(html) {
+  color-scheme: light dark;
+}
 
 // Color variables
 $secondary: #f5a418;
@@ -46,7 +49,8 @@ $text-white: #fafafa;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root[data-theme="dark"] {
+  :root[data-theme="dark"],
+  :root:not([data-theme="light"]) {
     --bg: #{$bg-dark};
     --text-color: #{$text-white};
   }
@@ -103,6 +107,7 @@ ul {
 
 li {
   margin-bottom: 0.5em;
+  max-width: 75%;
 }
 
 .flex-row {
@@ -358,6 +363,8 @@ input:checked + .slider:before {
 }
 
 // PUBLICATIONS
+
+
 li a{
   color: #006666;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
	`1`	`+:global(html) {`
	`2`	`+ color-scheme: light dark;`
	`3`	`+}`
`1`	`4`
`2`	`5`	`// Color variables`
`3`	`6`	`$secondary: #f5a418;`
`@@ -46,7 +49,8 @@ $text-white: #fafafa;`
`46`	`49`	`}`
`47`	`50`
`48`	`51`	`@media (prefers-color-scheme: dark) {`
`49`		`- :root[data-theme="dark"] {`
	`52`	`+ :root[data-theme="dark"],`
	`53`	`+ :root:not([data-theme="light"]) {`
`50`	`54`	`--bg: #{$bg-dark};`
`51`	`55`	`--text-color: #{$text-white};`
`52`	`56`	`}`
`@@ -103,6 +107,7 @@ ul {`
`103`	`107`
`104`	`108`	`li {`
`105`	`109`	`margin-bottom: 0.5em;`
	`110`	`+ max-width: 75%;`
`106`	`111`	`}`
`107`	`112`
`108`	`113`	`.flex-row {`
`@@ -358,6 +363,8 @@ input:checked + .slider:before {`
`358`	`363`	`}`
`359`	`364`
`360`	`365`	`// PUBLICATIONS`
	`366`	`+`
	`367`	`+`
`361`	`368`	`li a{`
`362`	`369`	`color: #006666;`
`363`	`370`	`}`