new_blog/static/css/colors.css

@layer baseline, baseline-raised, print;
/* https://color.adobe.com/create/color-contrast-analyzer */
/*dark theme*/
@layer baseline{
@media (prefers-color-scheme: dark) {
:root {
    --bg-color: #000;
    /*
     * #5ac
     * */
    --normal-text: #CCC;
    --focus-outline-color: #f00;
    --link-clicked: #B250D8;
    --link-unclicked: #d80;
    --link-active: lab(100% 0% 100%);
    --link-highlight: white;
    --link-highlight-bg: blue;
    --header-bg: hsl(0,0%,15%);
    --nav-link-color: #6B0;
    --nav-link-bg-color: hsl(0,0%,25%);
    --nav-link-bg-color-hover:hsl(0,0%,20%);
    --content-border-color: #5ac;
    /*stolen from code theme*/
    
    --codeblock-bg: rgb(29, 31, 33);
    --blockquote-bg: oklch(30% 0.01 325);
    /*--blockquote-accent-color: oklch(45% 0.1628 256.77);*/
    --blockquote-accent-color: oklch(86.64% 0.29 142);
    --highlight-bg: lime;
    --highlight-fg: #000;
    --nav-link-bg-color-active: #118411;
    --nav-link-color-active: white;

    scrollbar-color: yellow transparent;
}
}
/*
 *#ABABD4;
 *bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
 * */
/*light theme*/
@media (prefers-color-scheme: light) {
:root {
    --bg-color: #fff;
    --normal-text: #000;
    --focus-outline-color: #f00;
    --link-unclicked: #2535B4;
    --link-clicked: #832244;
    --link-active: lab(20% 80% -80%);
    --link-highlight: unset;
    --link-highlight-bg: var(--highlight-bg);
    /*#E6DDE6
     * #dce2e5
     *
     * promising
     * #b4d2ec*/

    --header-bg: hsl(0,0%,85%);
    /*#841163
     * #115e84*/
    --nav-link-color: #118411;
    --nav-link-bg-color: hsl(0,0%,75%);
    --nav-link-bg-color-hover:hsl(0,0%,70%);
    --content-border-color: #026;
    --codeblock-bg: rgb(226,224,222);
    --blockquote-bg: oklch(70% 0.012 296.97);
    /*--blockquote-accent-color: oklch(45% 0.1628 256.77);*/
    --blockquote-accent-color: oklch(74.18% 0.1719 66.77);
    --highlight-bg: yellow;
    --highlight-fg: #000;
    --nav-link-bg-color-active: #118411;
    --nav-link-color-active: white;

    scrollbar-color: red transparent;
}
}
}
@layer baseline-raised {
.nav-link {
    color: var(--nav-link-color);
    background-color: var(--nav-link-bg-color);
}

/*avoiding color issues of nesting anchor inside objects for header icon links*/
a.icon:has(.nav-link){
    color: rgba(0,0,0,0);
}

.nav-link:hover {
  background: var(--nav-link-bg-color-hover);
}

.nav-link:active {
    background: var(--nav-link-bg-color-active);
    color: var(--nav-link-color-active)
}
}
@layer baseline{

body {
    background: var(--bg-color);
    color: var(--normal-text);
}


a {
    color: var(--link-unclicked);
}

a:visited {
    color: var(--link-clicked);
}
a:active {
    color: var(--link-active)
}
#header {
    background: var(--header-bg);
}

main {
    border: 0.7rem solid var(--content-border-color);
}

blockquote {
    background: var(--blockquote-bg);
    
    &:not(:has(>inner-bq)) {
      border-left: solid var(--blockquote-accent-color);
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
    strong {
        color:red;
    }
}

pre:has( > code), pre.hljs {
    /*I don't wanna dig into highlight.js internals to make !important redundant*/
    background: var(--codeblock-bg) !important;
}
/*fancy user selection for funsies*/
::selection {
  background-color: var(--highlight-bg);
  color: var(--highlight-fg);
}
a::selection {
    color: var(--link-highlight);
    background: var(--link-highlight-bg);
}
strong::selection{
  color:unset;
}

/*iffy if this should be here but it doesn't mess with the layout so I'll allow it*/
:focus-visible {
  /* only viable way of changing colors for the svgs*/
  filter: invert(100%);
    /*would prefer light-dark but it no worky*/
  @media (prefers-color-scheme: light) {
    background: white;
    color: black!important;
  }
  @media (prefers-color-scheme: dark) {
    background: black;
    color: white!important;
  }
  /*yeeting annoying potential defaults*/
  outline: none;
  border-radius: 0px;
}

}

@media print {
@layer print{

:root {
    /*trying to avoid accidentally eating the entire printer's ink supply with bg color*/
    --bg-color: #FFF;
}

}
}