PicoCSS Dashboard

The one

by ethanpil

HTML

<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.1/pico.min.css"/>
<link rel="stylesheet" href="https://cdn.gisthostfor.me/ethanpil-SD1HSwfcsp-pico-theme-tweaks.css"/>

<header class="container-fluid">
  <nav>
    <ul>
      <li>
        <strong>
          <iconify-icon inline icon="svg-spinners:blocks-wave"></iconify-icon>
          PicoCSS Dashboard
        </strong>
      </li>
    </ul>
    <ul class="hide-md">
      <li>
<input
  type="search"
  name="search"
  placeholder="Search"
  aria-label="Search"
/>   
      </li>
    </ul>

    <ul>
      <li>
        <a href="#" class="secondary">
          <iconify-icon inline icon="material-symbols:help"></iconify-icon>
        </a>
      </li>

      <li>
        <a href="#" class="secondary">
          <iconify-icon inline icon="f7:bell-fill"></iconify-icon>
        </a>
      </li>

      <li>
        <details class="dropdown">
          <summary>
            <iconify-icon
              inline
              icon="ic:baseline-account-circle"
            ></iconify-icon>
          </summary>
          <ul dir="rtl">
            <li dir="ltr">
              <a href="#">
                <iconify-icon
                  inline
                  icon="iconamoon:profile-fill"
                ></iconify-icon>
                Profile
              </a>
            </li>
            <li dir="ltr">
              <a href="#">
                <iconify-icon inline icon="solar:logout-2-bold"></iconify-icon>
                Logout
              </a>
            </li>
          </ul>
        </details>
      </li>
    </ul>
  </nav>
</header>
<header class="container-fluid">
  <nav>
    <ul>
      <li>
        <a href="#">
          <iconify-icon inline icon="mdi:home"></iconify-icon> Dashboard
        </a>
      </li>
      <li>
   ...

CSS

html, body {
  height: 100vh;
}
body > header ~ header {
  background-color: #eee;
  background-color: var(--pico-card-sectioning-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

body > header ~ header nav li {
  padding-top: 0;
  padding-bottom: 0;
}

body > footer {
  font-size: 0.7em;
  background-color: #eee;
  padding-top: 0;
  padding-bottom: 0;
}

header a:hover {
  text-decoration: none;
  background: var(--pico-text-selection-color);
}

article header {
  font-weight: bold;
}

/* Prevent icons from wrapping in nav */
nav ul li a {
  white-space: nowrap;
  text-transform: uppercase;
  color: rgb(1,114,173);
  margin-right: .25em;
  font-size: .8rem;
}

iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

#dashboard-charts article {
  text-align: center;
}