1
0
Fork 0

Add header with background-color

This commit is contained in:
Knah Tsaeb 2024-09-12 12:04:15 +02:00
parent 633d03f6f0
commit c1373f1d3b
3 changed files with 69 additions and 0 deletions

35
css.css
View file

@ -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;
}
}

View file

@ -46,7 +46,41 @@
<li><a href="#article">Article/card</a></li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li>Design</li>
</ul>
</nav>
</header>
<header class="header container">
<hgroup class="flex">
<img src="logo.png" width="40px">
<h1>Pico</h1>
<p>A pure HTML example, without dependencies.</p>
</hgroup>
<nav aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li>Design</li>
</ul>
</nav>
<p>
Lorem ipsum dolor sit amet consectetur <a href=""> adipisicing elit</a>. Odit dolore dolorum vitae
necessitatibus, facere
reprehenderit ipsa vero quaerat, obcaecati nihil consequatur animi. Perferendis fuga possimus ducimus, iure
ipsa nisi quidem?
</p>
</header>
<!-- ./ Header -->
<!-- Main -->

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB