• Using css graidents heavily in my new blog. learning about some caveats, such as you cant just wrap an css into a variable. eg this doesnt work.

 --background-gradient: linear-gradient(to right, #24243e, #302b63, #0f0c29); 
 
 div{
   background : var( --background-gradient )
 }
 

• More info on stackoverflow, https://stackoverflow.com/a/29591536

• Struggling a little a bit to figure out how to best compose my css variables for my entire site. Right now it looks something like this

/*
*  _colours.scss
*/

// These are resuable varible only to be consumed in this file.. becasue there is repitition between the data properties and 
:root{
  
  --dark-bg: #161616;
  --dark-text: #dbdbdb;
  --dark-code: #f5f5f5;
  --dark-code-block: #6e6c6c;
  
  --light-bg: white;
  --light-text: #093050;
  --light-code: #740101;
  --light-code-block: #d1d1d1;
}


@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--dark-bg);
    --primary-text: var(--dark-text);
    --secondary-text: var(--dark-text);
    --links: var(--dark-text);
    --code: var(--dark-code);
    --code-block: var(--dark-code-block);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background: var(--light-bg);
    --primary-text: var(--light-text);
    --secondary-text: var(--light-text);
    --links: var(--light-text);
    --code: var(--light-code);
    --code-block: var(--light-code-block);
 }
}

// Overide system preferences
html[data-theme="light"] {    
  --background: var(--light-bg);
  --primary-text: var(--light-text);
  --secondary-text: var(--light-text);
  --links: var(--light-text);
  --code: var(--light-code);
  --code-block: var(--light-code-block);
}

html[data-theme="dark"] {
  --background: var(--dark-bg);
  --primary-text: var(--dark-text);
  --secondary-text: var(--dark-text);
  --links: var(--dark-text);
  --code: var(--dark-code);
  --code-block: var(--dark-code-block);
}