feat: update README.md with dark mode image link; enhance global.css for improved dark/light mode support; adjust Sun.svelte box-shadow for better visibility; refine layout styles; implement dynamic iframe styling in Empirical_growth_testing; add resources documentation

Author: flmath

README.md

@@ -1,8 +1,9 @@
 On push the github action described in .github/workflows/pages.yml will compile the code with svelte on nodejs. Then the output the compiled code to "gh-pages" branch which is github pages default load source for https://flmath.github.io/.
 
 The main page picture based on: https://www.pexels.com/photo/city-view-photography-2129886/
+In the dark mode: https://pixabay.com/photos/castle-hohenzollern-night-fortress-811336/
 
-The different geometrical fidguresbased on:
+The different geometrical fidgures based on:
 
     the Penrose triangle https://en.wikipedia.org/wiki/Penrose_triangle
     Oscar Reutersward "Blue Meander" http://www.zludzenia.pl/reutersvard,5,5,oscar-reutersward-bryla-4.html#showimage
@@ -15,6 +16,6 @@ CSS animations: https://www.youtube.com/watch?v=q-i0rZBZvBk
 
 PWA: Based on: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36
 
-The rest of resources, links to them and their authors are in devnotes.org and RESOURCES.md.# sv
+The rest of resources, links to them and their authors are in devnotes.org and RESOURCES.md.
 
 

src/lib/assets/global.css

@@ -4,6 +4,8 @@
   font-family: Arial, Helvetica, sans-serif;
   --transition-speed: 600ms;
   --size-limit: 600px;
+
+
   }
 [color-scheme='sun'] {
 	color-scheme: sun; 
@@ -28,7 +30,8 @@
   --contain-border: rgba(255, 255, 255, 0.4);
   --nav-invert: 0;
 
-  --bg-darklight: #ffdf22;
+  --bg-darklight: #00a2d9;
+ 
 
 }
 @media (prefers-color-scheme: sun) {
@@ -60,7 +63,9 @@
   --contain-border: rgba(0, 0, 0, 0.4);
 
   --nav-invert: 1;
---bg-darklight: #00a2d9;
+--bg-darklight: #fff;
+
+
 }
 @media (prefers-color-scheme: moon) {
 	:root {

src/lib/svg/Sun.svelte

@@ -23,7 +23,7 @@
          border-color: var(--bg-darklight);
          border-radius: 102px;
          background-color: var(--bg-darklight);
-         box-shadow: 0 0 10px 7px var(--bg-darklight);
+         box-shadow: 0 0 25px 15px var(--bg-darklight);
       }
       path{
          fill: black;

src/routes/+layout.svelte

@@ -120,6 +120,8 @@
       max-height: calc(100% - 8rem);
       width: 100%;
       max-width: 100%;
+    
+
     }
     .navbar {
       padding-top: 1rem;

src/routes/+page.svelte

@@ -78,6 +78,7 @@ h3{
 .container {
         position: absolute;
         background-color: #d2d9df;
+        
         height: 100%;
         padding: 0;
         padding-top: 2rem;

src/routes/posts/jupyter/Empirical_growth_testing/+page.svelte

@@ -1,19 +1,46 @@
 <script>
     import { onMount } from "svelte";
+	import { theme } from '$lib/components/theme.svelte';
+  
+    let mounted = $state(false);
 
-    let mounted = false;
     /**
      * @type {string | null | undefined}
      */
-    let HTML;
+    let HTML = $state(null);
+    let iframeElement = $state(null); // Reference to the iframe DOM element
+  
 
     onMount(async () => {
         HTML = (await import("./page.html?raw")).default;
         mounted = true;
     });
+
+	function styleIframeContent() {
+		if (!iframeElement?.contentDocument) return;
+
+		const body = iframeElement.contentDocument.body;
+		if (!body) return;
+
+		const rootStyle = getComputedStyle(document.documentElement);
+		const bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
+		const textColor = rootStyle.getPropertyValue('--text-primary').trim();
+
+		body.style.backgroundColor = bgColor;
+		body.style.color = textColor;
+	}
+
+    function onLoad() {
+	    styleIframeContent();
+    }
+
+$effect(() => {
+        $theme.darkstate
+        styleIframeContent();
+})
 </script>
 
-<iframe title="jupyter" srcdoc={HTML}></iframe>
+<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}></iframe>
 
 {#if !mounted}
     <p>Loading...</p>

src/routes/posts/jupyter/Empirical_growth_testing/page.html

@@ -15,7 +15,12 @@
 
     <meta property="date" content="2024-08-25" />
 
-  
+   <style type="text/css">
+/* Set the background color for the content inside the iframe */
+.main-container {
+  background-color: var(--bg-primary);
+}
+</style>
 
   <title>Empirical Growth Testing</title>