From c1373f1d3b35d7623374ae1f68371321a1a1757e Mon Sep 17 00:00:00 2001 From: Knah-Tsaeb Date: Thu, 12 Sep 2024 12:04:15 +0200 Subject: [PATCH] Add header with background-color --- css.css | 35 +++++++++++++++++++++++++++++++++++ index.html | 34 ++++++++++++++++++++++++++++++++++ logo.png | Bin 0 -> 6463 bytes 3 files changed, 69 insertions(+) create mode 100644 logo.png diff --git a/css.css b/css.css index bb8b97d..ce94f79 100644 --- a/css.css +++ b/css.css @@ -1,4 +1,6 @@ :root { + color-scheme: light dark; + --primary: #cc2027; --primary-darken: #8E161B; --primary-lighten: #D64C52; @@ -33,10 +35,22 @@ --background-color-darken: light-dark(#B2AFAF, #100E0E); --background-color-lighten: light-dark(#FFFBFB, #454343); + --header-background-color: light-dark(#171414, #fffbfb); + --header-background-color-darken: light-dark(#100E0E, #B2AFAF); + --header-background-color-lighten: light-dark(#454343, #FFFBFB); + + --header-text-color: light-dark(#fffbfb, #171414); + --header-text-color-secondary: #ffffffb3; + --header-text-color-disable: light-dark(#ffffff80, #454343); + --text-color: light-dark(#171414, #fffbfb); --text-color-secondary: #ffffffb3; --text-color-disable: light-dark(#454343, #ffffff80); + --text-color-inverse: light-dark(#fffbfb, #171414); + --text-color-secondary-inverse: #ffffffb3; + --text-color-disable-inverse: light-dark(#ffffff80, #454343); + --h1-color: var(--primary); --h2-color: #c33d35; --h3-color: #b94f44; @@ -604,4 +618,25 @@ [role=link].info:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { --pico-color: var(--pico-info-hover); --pico-underline: var(--pico-info-hover-underline) +} + +.header, +.header>* { + background-color: var(--header-background-color) !important; + color: var(--header-text-color) !important; +} + +.header nav[aria-label="breadcrumb"] ul li:not(:last-child)::after, +.header hgroup> :not(:first-child):last-child { + color: var(--header-text-color-disable); +} + +.flex { + display: flex; + gap: 1em; + padding: 1em; + + img { + height: fit-content; + } } \ No newline at end of file diff --git a/index.html b/index.html index e572bab..4c648e5 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,41 @@
  • Article/card
    • + + + + +
    +
    + +

    Pico

    +

    A pure HTML example, without dependencies.

    +
    + + + +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolore dolorum vitae + necessitatibus, facere + reprehenderit ipsa vero quaerat, obcaecati nihil consequatur animi. Perferendis fuga possimus ducimus, iure + ipsa nisi quidem? +

    + +
    + diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..2944c97304f5922cef2e0c8116b6c8b9ec855e12 GIT binary patch literal 6463 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 literal 0 HcmV?d00001