made mobile work

Author: Felix Hennig

src/css/base.css

@@ -125,3 +125,12 @@ body ::-webkit-scrollbar-thumb {
  max-width: 1280px;
  margin: 0 auto;
 }
+
+.container2 {
+ display: flex;
+ margin: 0 0;
+}
+
+.space-between {
+ justify-content: space-between;
+}

src/css/header.css

@@ -283,7 +283,7 @@ body {
  transition: max-height 0.2s ease, padding 0.2s ease;
  }
 
- .navbar-sub .container {
+ .navbar-sub .container2 {
  flex-direction: column;
  }
 

src/partials/header-content.hbs

@@ -23,33 +23,37 @@
  </div>
  </nav>
  <nav id="navbar-sub" class="navbar-sub">
- <div class="container">
- {{#> navbar }}
- navbar.hbs partial not found - you're seeing failover content
- <a class="navbar-sub-item" href="#">Home</a>
- <div class="navbar-sub-item drop-down">
- Operators
- <div class="drop-down-content">
- <a class="drop-down-item" href="#">Operator 1</a>
- <a class="drop-down-item" href="#">Operator 2</a>
- </div>
- </div>
- {{/navbar}}
- {{#with @root.page.versions}}
- <div class="page-versions">
- <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
- <div class="version-menu">
- {{#each this}}
- <a class="version
- {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
- {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
- {{/each}}
+ <div class="container space-between">
+ <div class="container2">
+ {{#> navbar }}
+ navbar.hbs partial not found - you're seeing failover content
+ <a class="navbar-sub-item" href="#">Home</a>
+ <div class="navbar-sub-item drop-down">
+ Operators
+ <div class="drop-down-content">
+ <a class="drop-down-item" href="#">Operator 1</a>
+ <a class="drop-down-item" href="#">Operator 2</a>
+ </div>
+ </div>
+ {{/navbar}}
+ <a class="arrow" href="javascript:document.querySelector('.navbar-sub').classList.toggle('open')">
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
+ </a>
+ </div>
+ <div class="container2">
+ {{#with @root.page.versions}}
+ <div class="page-versions">
+ <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
+ <div class="version-menu">
+ {{#each this}}
+ <a class="version
+ {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
+ {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+ {{/each}}
+ </div>
  </div>
+ {{/with}}
  </div>
- {{/with}}
- <a class="arrow" href="javascript:document.querySelector('.navbar-sub').classList.toggle('open')">
- <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
- </a>
  </div>
  </nav>
  </header>