update sidebar (elixirschool#1725)

* update sidebar, elixirschool#1579 - Place menu features towards the top - Tighten up spacing where excessive * Update sidebar, elixirschool#1579 - remove duplicate variables file - move `.stack-info` class to `_sidebar.scss` - use `code`'s font for `.stack-info` and reducing font-size - cuttin margin in half for all children of `#sidebar .inner` * update sidebard, move dark toggle under hamburger icon, elixirschool#1579
waxave · Mar 4, 2019 · ef99816 · ef99816
1 parent e9a8cd5
commit ef99816
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 15 deletions.
diff --git a/_assets/stylesheets/layout/_sidebar.scss b/_assets/stylesheets/layout/_sidebar.scss
@@ -31,7 +31,8 @@
  }
 
  #sidebar {
- $pad: 2em / 0.9;
+ $sidebar-pad: 1.5em / 0.9;
+ $xlarge-sidebar-pad: 1em / 0.9;
 
  @include vendor('flex-grow', '0');
  @include vendor('flex-shrink', '0');
@@ -49,13 +50,13 @@
  }
 
  > .inner {
- @include padding($pad, $pad, (0, 0, $pad, 0));
+ @include padding($sidebar-pad, $sidebar-pad, (0, 0, $sidebar-pad, 0));
  position: relative;
  width: _size(sidebar-width);
 
  > * {
- margin: 0 0 (_size(element-margin)) 0;
- padding: 0 0 (_size(element-margin)) 0;
+ margin: 0 0 (_size(element-margin)/2) 0;
+ padding: 0 0 (_size(element-margin)/2) 0;
 
  > :last-child {
  margin-bottom: 0;
@@ -71,9 +72,31 @@
  > .alt {
  background-color: darken(_palette(bg-alt), 2);
  border-bottom: 0;
- margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
- padding: $pad;
- width: calc(100% + #{$pad * 2});
+ margin: ($sidebar-pad * -1) 0 ($sidebar-pad) ($sidebar-pad * -1);
+ padding: $sidebar-pad;
+ width: calc(100% + #{$sidebar-pad * 2});
+ }
+
+ .major {
+ margin-bottom: $sidebar-pad;
+ > :last-child {
+ margin: 0 0 0 0;
+ }
+ }
+
+ .stack-info {
+ display: flex;
+ margin-bottom: $sidebar-pad;
+
+ &.otp-version {
+ font-size: 12px;
+ font-family: _font(family-fixed);
+ font-weight: bold;
+ }
+
+ @include breakpoint(xlarge) {
+ margin-bottom: $xlarge-sidebar-pad;
+ }
  }
  }
 
@@ -112,19 +135,33 @@
  margin-left: (_size(sidebar-width) * -1);
  }
 
- @include breakpoint(xlarge) {
- $pad: 1.5em / 0.9;
+ .toggle-theme-wrapper {
+ position: absolute;
+ top: 6em;
+ left: _size(sidebar-width);
+ .icon {
+ display: block;
+ width: 6em;
+ text-align: center;
+ &:before {
+ display: block;
+ width: 100%;
+ font-size: 2rem;
+ }
+ }
+ }
 
+ @include breakpoint(xlarge) {
  width: _size(sidebar-width-alt);
 
  > .inner {
- @include padding($pad, $pad, (0, 0, $pad, 0));
+ @include padding($xlarge-sidebar-pad, $xlarge-sidebar-pad, (0, 0, $xlarge-sidebar-pad, 0));
  width: _size(sidebar-width-alt);
 
  > .alt {
- margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
- padding: $pad;
- width: calc(100% + #{$pad * 2});
+ margin: ($xlarge-sidebar-pad * -1) 0 ($xlarge-sidebar-pad) ($xlarge-sidebar-pad * -1);
+ padding: $xlarge-sidebar-pad;
+ width: calc(100% + #{$xlarge-sidebar-pad * 2});
  }
  }
 
@@ -140,6 +177,17 @@
  }
  }
 
+ .toggle-theme-wrapper {
+ top: 6em;
+ left: _size(sidebar-width-alt);
+ .icon {
+ width: 5em;
+ &:before {
+ font-size: 1.5rem;
+ }
+ }
+ }
+
  &.inactive {
  margin-left: (_size(sidebar-width-alt) * -1);
  }
@@ -183,6 +231,16 @@
  margin-left: (-0.875em / 2);
  }
  }
+
+ .toggle-theme-wrapper {
+ .icon {
+ width: 6em;
+ &:before {
+ font-size: 1.5rem;
+ margin-left: (-0.875em / 2);
+ }
+ }
+ }
 
  body.is-loading & {
  display: none;
@@ -213,5 +271,18 @@
  width: 5em;
  }
  }
+
+ .toggle-theme-wrapper {
+ width: 4.25em;
+ top: 1.3em;
+ left: _size(sidebar-width) + 3em;
+ .icon {
+ width: 6em;
+ &:before {
+ font-size: 1.5rem;
+ margin-left: (-0.875em / 2);
+ }
+ }
+ }
  }
  }
diff --git a/_includes/_sidebar.html b/_includes/_sidebar.html
@@ -1,12 +1,13 @@
 <!-- Sidebar -->
  <div id="sidebar">
+ <p class="toggle-theme-wrapper"><a rel="noopener" href="#toggle-theme" class="toggle-theme icon fas fa-circle-o" alt="Toggle Theme"></a></p>
+
  <div class="inner">
  {% include section-sidebar-langs.html %}
  {% include section-sidebar-menu.html %}
  <!-- Footer -->
  <footer id="footer">
  <p class="copyright">&copy; {{ site.time | date: '%Y' }} <a href="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/doomspork">Sean Callan</a> All rights reserved.</p>
- <p style="text-align: center;"><a rel="noopener" href="#toggle-theme" class="toggle-theme icon fas fa-circle-o"><span class="label">Toggle theme</span> <span class="copyright" style="font-weight: 600;">lights out</span></a>
  </footer>
  </div>
  </div>
diff --git a/_includes/section-sidebar-menu.html b/_includes/section-sidebar-menu.html
@@ -1,11 +1,11 @@
 
 <!-- Menu -->
 <nav id="menu">
+ <span class="stack-info otp-version">Elixir {{site.elixir.version}} - Erlang/OTP {{site.erlang.OTP}} [erts-{{site.erlang.erts}}]</span>
  <header class="major">
  <h2>Menu</h2>
  <p>{{ locale.project.description }}</p>
  </header>
- <span>Elixir {{site.elixir.version}} - Erlang/OTP {{site.erlang.OTP}} [erts-{{site.erlang.erts}}]</span>
  <ul>
  <li>
  <a href="/{% if page.lang %}{{ page.lang }}/{% endif %}" class="{% unless locale.disable_transform %} up {%endunless%}{% if page.layout == "home" %}active{% endif %}">{{ site.data['locales'][language]['sections']['home'] }}</a>