gregwhitworth

I am wanting to get developer feedback on what you are expecting based on the code below. Please don't run the code in a browser to determine your answer. Purely based on your knowledge of CSS which color box should the user see? Blue or yellow? Leave your answer in the comments. Thank you!!

  <style type='text/css'>
    div, nav {
		width: 200px;
		height: 200px;
	}

	nav, div.c1 {

position: fixed;

gregwhitworth

(function (window) {
      document.addEventListener("DOMContentLoaded", function (e) {
          var supports = {
            srcset: false,
            currentSrc: false,
            sizes: false,
            picture: false
          };
          var img = new Image();

gregwhitworth

:root {
  --primary: #0B61A4;
  --secondary: #25567B;
}

header {
  background: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

gregwhitworth

body {
  background: var(--primary, blue);
}

gregwhitworth

--building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0; 

gregwhitworth

.distant-building__window
{
    fill: rgb(
    calc(111 + (111 * var(--building-r-mod))),
    calc(79 + (79 * var(--building-g-mod))),
    calc(85 + (85 * var(--building-b-mod)))
    );
}

gregwhitworth

.tail
{
    transform: translateY(10px) rotate(var(--tail-rotate));
    transform-origin: 60% 84%;
    animation: wagTail 250ms infinite;
}

@keyframes wagTail
{
    from

gregwhitworth

var night = function() {
  vars = [
    {name: "--sky-start", value: "rgb(100, 75, 128)"},
    {name: "--sky-end", value: "rgb(45, 45, 81)"},
    {name: "--light-r-mod", value: "-17.5"},
    {name: "--light-g-mod", value: "25"},
    {name: "--light-b-mod", value: "110"},
    {name: "--show-stars", value: "block"},
    {name: "--building-r-mod", value: "-.25"},
    {name: "--building-g-mod", value: 0},

gregwhitworth

--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50)));

gregwhitworth

var myComponent = document.getElementsByClassName('my-component')[0];
var cs = getComputedStyle(myComponent);
cs.getPropertyValue('--primary');