:bug: Code blocks don't render properly on light mode notes

[trag1c]

[Enderchief]

Just fixed in https://github.com/Pincer-org/Pincer/commit/c16edb2c6df9c105a931fd73bd583ff2d02dbdeb

[Enderchief]

Currently waiting for RTD to recognize before closing this

[Enderchief]

Fixed

[trag1c]

Doesn't seem to be fixed though?

[zunda-arrow]

Its fixed on my end. Make sure your browser isn't caching an older version of the docs.

[trag1c]

I have made sure it's not caching, I also have tried looking it up on incognito and on my phone + I asked my friend and my girlfriend to check and they were not able to see it properly as well so something's wrong :thinking:

[zunda-arrow]

Works for me on Firefox and Chromium. I'm using this link

[trag1c]

Also used this link (on Brave), friend used Firefox and girlfriend used Chrome I think

[Sigmanificient]

Firefox (v90) :heavy_check_mark: Chrome (v92) :heavy_check_mark: Opera (v77) :heavy_check_mark:

[trag1c]

What's the deal then :monocle_face:

[Enderchief]

Some debugging.

1. Make sure you are on this link with light mode. https://docs.pincer.dev/en/latest/interactions.html
2. Hard refresh
3. Inspect Element and find the file called custom.css
4. Scroll to the bottom of that file
5. Look for body[data-theme=light] .admonition.note .literal It will look like how it is below

.admonition.note {
 border-left-color:var(--blue-4);
 color:#fff
}
.admonition {
 background-color:var(--blue-6)
}
body[data-theme=light] .admonition.note .literal {
 color:initial
}
.sidebar-logo-container {
 animation:spinFade 1s cubic-bezier(.35,-.21,.04,1.52)
}
.sidebar-logo:hover {
 animation:Giggle 1s cubic-bezier(.35,-.21,.04,1.52) infinite
}

6. If it is missing, it is most probably a caching issue. If it is there then something is wrong.

[trag1c]

/* note styling */
.admonition.note {
    border-left-color: var(--blue-4);
    color: #FFFFFF;
}
.admonition {
    background-color: var(--blue-6);
}
body[data-theme="light"] .admonition.note .literal {
 color: initial;
}

.sidebar-logo-container {
    animation: spinFade 1s cubic-bezier(.35,-0.21,.04,1.52);
}

.sidebar-logo:hover {
    animation: Giggle 1s cubic-bezier(.35,-0.21,.04,1.52) infinite;
}

It's here I guess

[zunda-arrow]

Is this still broken ~~im hoping ignoring the problem made it go away~~

[trag1c]

Is this still broken ~im hoping ignoring the problem made it go away~

Yes

[Enderchief]

Just thinking out loud here about potential issues:

• not a server based caching (the "new" css exists as per trag1c's observation)
• not a local browser based caching (the "new" css exists as per trag1c's observation)
• not a specific browser (trag1c tried many)
• not a specific device (trag1c tried other people's)

potential issues:

• the browsers are not updated so do not support the css (unlikely)
• trag1c used the wrong link. instead of using the latest build it was an older on (stable build)
• the os affects it
• trag1c lives in a different country than the others who have tried
  • some css/js could not be loaded because of region restrictions
  • browsers could not be updated (i doubt this)
• a css file did load I got this error in the browser The resource from “https://docs.pincer.dev/en/latest/alabaster.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). interactions.html can others confirm if they get the same error or this link (https://docs.pincer.dev/en/latest/alabaster.css) works?
• ~~trag1c~~ /s

---

Debugging steps (improved for all)

ALL STEPS ARE IMPORTANT. DO THEM

1. Go to https://docs.pincer.dev/en/latest/interactions.html
2. Verify that the link is correct in your browser
3. On the top right of the page, press the button to switch to light mode until it turns into a sun.
4. Scroll down until you see a note with "If you need access to more information, you can pass in the ctx object." above it. (no italics)
5. There will be a note that looks like the image below. Make sure ctx and self are not white.
6. Open developer tools
7. Find the file that is named custom.css
8. Scroll to to bottom of the file and verify that it has the css I messaged above.
9. Go to the developer console and filter for warnings and errors.
10. Note the messages that are there (all matter).

Screenshot below of how it should look like on light mode

[trag1c]

#interactions.html:1
Refused to apply style from 'https://docs.pincer.dev/en/latest/alabaster.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

#https://www.googletagmanager.com/gtag/js?id=UA-17997319-1
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

#https://media.ethicalads.io/media/client/beta/ethicalads.min.js
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

#interactions.html:1
Refused to apply style from 'https://docs.pincer.dev/en/latest/alabaster.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

EDIT: The middle two are caused by my browser extension

[Arthurdw]

Closed due to depreciation, thank you for your effort ♥