feat: enhance global styles and components; update color variables for improved theme support; adjust link colors in articles and navigation; refine layout styles for better responsiveness

Author: flmath

src/lib/assets/global.css

@@ -30,9 +30,12 @@
   --contain-border: rgba(255, 255, 255, 0.4);
   --nav-invert: 0;
 
-  --bg-darklight: #00a2d9;
-
+  --bg-darklight:  #fbfb7c;
+  --fill-darklight: #000000;
   --bg-container-main: #d2d9df;
+  --link-text: rgb(0, 0, 255, 1);
+  
+  --bg-article: rgba(255, 255, 255, 0.33);
 
 }
 @media (prefers-color-scheme: sun) {
@@ -54,21 +57,27 @@
   --bg-gchart:  #000;
   --color-gchart: #fff;
 
-  --bg-glass-shadow: rgb(255, 255, 255, 0.333);
+  --bg-glass-shadow: rgb(0, 191, 255, 0.9);
   --bg-glass: rgb(0, 0, 0, 0.66);
 
-  --contain-background: rgb(0, 0, 0, 0.83);
+  --contain-background:rgb(0, 191, 255, 0.7);
   --containo-background: rgb(0, 0, 0, 0.83);
 
-  --contain-box-shadow: rgb(255, 255, 255, 0.7);
+  --contain-box-shadow: rgba(0, 0, 0, 0.82);
   --contain-border: rgba(0, 0, 0, 0.4);
 
   --nav-invert: 1;
---bg-darklight: #fff;
+--bg-darklight: rgb(0, 191, 255, 0.7);;
 --bg-container-main:
     radial-gradient(ellipse at bottom, #0d3566, transparent),
     radial-gradient(ellipse at top, #000f1b, transparent);
- /* linear-gradient(#204572,#002b4f); */
+
+
+--link-text: rgb(0, 191, 255, 0.9);   
+
+--bg-article: rgba(0, 0, 0, 0.7);
+--text-article: #fff;
+
 }
 @media (prefers-color-scheme: moon) {
 	:root {

src/lib/assets/mdlayouts/article.svelte

@@ -7,16 +7,19 @@
 <style>
 
 
-
+:global(.container-wrapper a) {
+  color: var(--link-text);
+}
 :global(.container-wrapper) {
   visibility: visible;
 
-  background: rgba(255, 255, 255, 0.33);
+  background: var(--bg-glass);
+  color: var(--text-article);
   border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 4px 30px var(--bg-glass-shadow);
   backdrop-filter: blur(6.4px);
   -webkit-backdrop-filter: blur(6.4px);
-  border: 1px solid rgba(255, 255, 255, 0.4);
+  border: 1px solid var(--contain-border);
 
   
 	position: relative;

src/lib/assets/mdlayouts/erldbg.svelte

@@ -25,4 +25,8 @@
 		padding: 1rem;
 		visibility: visible;
 	}
+	:global(.erldbg * a) 
+    {
+		color: var(--link-text);
+	}	
 </style>

src/lib/svg/Sun.svelte

@@ -26,9 +26,16 @@
          box-shadow: 0 0 15px 5px var(--bg-darklight);
       }
       path{
-         fill: black;
+         fill: var(--fill-darklight);
        
       }
+   @media only screen and (max-width: 900px) {
+   svg {
+   margin-top: 1rem;
+   margin-bottom: 1rem; 
+  }
+  
+}
 
       
     </style>

src/routes/curriculum_vitae/+page.svelte

@@ -49,4 +49,7 @@
   
     overflow-x: clip;
   }
+  :global(.cv * a) {
+    color: var(--link-text);
+  }
 </style>

src/routes/curriculum_vitae/Skills.svelte

@@ -61,23 +61,26 @@
 </div>
 <div>
      For personal projects: <hr>
-     Tools: Python/Jupyter, Svelte, Elixir<br>
+     Tools: Python/Jupyter, Svelte, Erlang<br>
      Projects: <a href=https://flmath.github.io/posts>Some notes</a>
-     and my <a href=https://github.com/flmath> repo </a>
+     and my <a href=https://github.com/flmath> github account </a>
 </div>
 </div>
 
 </div>
 <br />
 <div class="glass">
   <p>
-    I graduated in mathematics. I started as a C++ developer. Soon after I
-    transitioned to an Erlang based project. Since then my professional career
-    is connected to it. I was part of Agile teams developing telecommunication
-    solutions. The technical stack based on Linux, Git as the project version
-    control system, and Jenkins for CI/CD. The teams I worked in were tasked
-    with the end-to-end process of delivering solutions. I was usually
-    responsible for:
+I hold a degree in Mathematics and began my career as a C++ developer. 
+Shortly afterward, 
+I transitioned to an Erlang-based project, 
+which has shaped the direction of my professional journey ever since. 
+I’ve worked within Agile teams focused on developing telecommunication solutions, 
+using a tech stack centered around Linux, 
+Git for version control, and Jenkins for CI/CD processes. 
+The teams I’ve been part of were responsible for the full 
+end-to-end delivery of solutions, and my typical responsibilities 
+included:
   </p>
   <ul>
     <li>analyzing requirements</li>

src/routes/curriculum_vitae/TimeLineCv.svelte

@@ -174,7 +174,7 @@
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(6.4px);
         -webkit-backdrop-filter: blur(6.4px);
-        border: 1px solid rgba(255, 255, 255, 0.4);
+        border: 1px solid var(--contain-border);
     }
     .mainContent {
         color: var(--color-gchart);

src/routes/posts/ErlangDBG/+page.svelte

@@ -119,4 +119,5 @@
 		padding: 1rem;
 		visibility: visible;
 	}
+	
 </style>

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

@@ -1,8 +1,7 @@
 <script>
-    import { onMount } from "svelte";
+
 	import { theme } from '$lib/components/theme.svelte';
     import HTML from "./page.html?raw";
-
     /**
      * @type {string | null | undefined}
      */
@@ -23,14 +22,10 @@
 		body.style.backgroundColor = bgColor;
 		body.style.color = textColor;
         visible = true;  
-	  
-       
      
 	}
-
     function onLoad() {
 	    styleIframeContent();
-  
     }
 
 $effect(() => {

src/routes/posts/mdarticles/[slug]/+page.svelte

@@ -33,7 +33,7 @@
   <!-- This part should ideally not be reached if the load function throws a 404 -->
   <p>Sorry, this post could not be loaded or was not found.</p>
 {/if}
-
+ <br />
 <style>
 
 article {