[suggestion] remove the background image

Open
#76 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
html
Domain
frontend, web-dev

Research direction

Start by inspecting the lapce.dev site source for the inline background using assets/img/pattern-light-big.svg and assets/img/pattern-light1.svg. Remove the background image while preserving the page’s content and verify that dark-mode extensions can display the site without needing the workaround described in the issue.

Written by the indexing model from the issue text.

Description

While trying to remove this horrible background image from the site with stylus to make the site work with my dark mode extension, i was unable to remove it even when setting background-image: none !important.
I'm not sure what is going on, but it seems to me that having this background image inline in the html, makes it reaally hard to override.
I eventually found this to work:

@-moz-document domain("lapce.dev") {
    [style="background-image: url('assets/img/pattern-light-big.svg'); background-position: center;"],
    [style="background-image: url('assets/img/pattern-light1.svg'); background-position: center;"] {
        filter: invert(1);
    }
    [style="background-image: url('assets/img/pattern-light-big.svg'); background-position: center;"] *,
    [style="background-image: url('assets/img/pattern-light1.svg'); background-position: center;"] * {
        filter: invert(1);
    }
}

So i basically invert the element and then invert all child elements again, so only the element containing the background image is inverted.

I would suggest removing the background image, as it adds very little value to how the page looks, and makes it way harder for dark mode extensions to correctly dark mode the site.

Dominant language
HTML
Stars
14
Forks
27
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from lapce/lapce.github.io

All issues in lapce/lapce.github.io

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.