page: txp5

Core SASS

form: txp5_scss

_header.scss modified 10 days ago

GitHub: _header.scss

    
      @use "../2-atoms/beam";

.txp-nav-toggle {
  // redundant
  display: none;
}

.txp-skip-link {
  position: absolute;
  display: block;
  transform: translateY(-100vh);
}

.txp-header,
.txp-nav {
  @extend %beam !optional;
  gap: var(--base-unit--ss) var(--base-unit);
}

.txp-header a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.data-dropdown {
  display: contents;
  list-style: none;

  .selected>a {
    font-weight: var(--font-heavy);
  }
}

.dropdown {
  position: relative;

  &>a:hover {
    text-decoration: none;
  }

  ul {
    list-style: none;
    position: absolute;
    display: none;
    padding: var(--base-unit--s) var(--base-unit);
    margin-left: var(--base-unit--neg);
    width: max-content;
    background: var(--clr-bg);
  }

  &:hover ul,
  &:focus-within ul {
    display: block;
    z-index: 1;
  }
}

.txp-view-site {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.txp-view-site-name {
  a:after {
    content: '\e907';
    font-family: 'core-line';
  }
}

Source html

 
        
          <header class="txp-header">
  <h1><a href="?event=article"><span>Textpattern</span></a></h1>

  <button class="txp-nav-toggle collapsed" type="button" data-toggle="collapse" data-target="#txp-nav" aria-expanded="false" aria-controls="txp-nav"><span class="txp-accessibility">Navigation</span></button>
  <nav class="txp-nav" id="txp-nav" aria-label="Navigation">
    <ul class="data-dropdown">
      <li class="dropdown selected">
        <a class="dropdown-toggle" id="txp-nav-drop1" role="button" aria-controls="txp-nav-drop1-menu" data-toggle="dropdown" href="#">Content</a>
        <ul class="dropdown-menu" id="txp-nav-drop1-menu" role="menu" aria-labelledby="txp-nav-drop1">
          <li class="selected" role="presentation"><a role="menuitem" aria-current="page" tabindex="-1" href="/prototypes/page-article?c=five">Write</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/page-list?c=five">Articles</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/image-list?c=five">Images</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/file-list?c=five">Files</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/link-list?c=five">Links</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/category-list?c=five">Categories</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/comments-list?c=five">Comments</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" id="txp-nav-drop2" role="button" aria-controls="txp-nav-drop2-menu" data-toggle="dropdown" href="#">Presentation</a>
        <ul class="dropdown-menu" id="txp-nav-drop2-menu" role="menu" aria-labelledby="txp-nav-drop2">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=skin">Themes</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=section">Sections</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=page">Pages</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=form">Forms</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=css">Styles</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" id="txp-nav-drop3" role="button" aria-controls="txp-nav-drop3-menu" data-toggle="dropdown" href="#">Admin</a>
        <ul class="dropdown-menu" id="txp-nav-drop3-menu" role="menu" aria-labelledby="txp-nav-drop3">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=diag">Diagnostics</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=prefs">Preferences</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=lang">Languages</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=admin">Users</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=plugin">Plugins</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="?event=lore">Visitor logs</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" id="txp-nav-drop4" role="button" aria-controls="txp-nav-drop4-menu" data-toggle="dropdown" href="#">Extensions</a>
        <ul class="dropdown-menu" id="txp-nav-drop4-menu" role="menu" aria-labelledby="txp-nav-drop4">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">etc cache</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/prototypes/adi_matrix_admin?c=five">adi matrix</a></li>
        </ul>
      </li>

    </ul>
  </nav>

  <p class="txp-view-site"><span class="txp-view-site-name"><a rel="noopener" target="_blank" title="View site" aria-label="View site" href="https://dev.all-sorts.biz/">Slowenische Kunst Maximalism Bauhaus </a></span></p>

  <!-- <p class="txp-lightswitch"><a id="lightswitch" title="Toggle light/dark mode" aria-label="Toggle light/dark mode" href="#"><span class="ui-icon ui-icon-lightbulb">Toggle light/dark mode</span></a></p> -->

  <p class="txp-logout"><a onclick="return verify('Are you sure?')" href="#">Log out</a></p>
</header>