src/css/toolbar.css

   1 .toolbar {
   2   color: var(--toolbar-font-color);
   3   align-items: center;
   4   background-color: var(--toolbar-background);
   5   box-shadow: 0 1px 0 var(--toolbar-border-color);
   6   display: flex;
   7   font-size: calc(15 / var(--rem-base) * 1rem);
   8   height: var(--toolbar-height);
   9   justify-content: flex-start;
  10   position: sticky;
  11   top: var(--navbar-height);
  12   z-index: var(--z-index-toolbar);
  13 }
  14
  15 .toolbar a {
  16   color: inherit;
  17 }
  18
  19 .nav-toggle {
  20   background: url(../img/menu.svg) no-repeat 50% 47.5%;
  21   background-size: 49%;
  22   border: none;
  23   outline: none;
  24   line-height: inherit;
  25   height: 2.5rem;
  26   padding: 0;
  27   width: 2.5rem;
  28   margin-right: -0.25rem;
  29 }
  30
  31 @media screen and (min-width: 1024px) {
  32   .nav-toggle {
  33     display: none;
  34   }
  35 }
  36
  37 .nav-toggle.is-active {
  38   background-image: url(../img/back.svg);
  39   background-size: 41.5%;
  40 }
  41
  42 .home-link {
  43   display: block;
  44   background: url(../img/home-o.svg) no-repeat center;
  45   height: calc(var(--toolbar-height) / 2);
  46   width: calc(var(--toolbar-height) / 2);
  47   margin: calc(var(--toolbar-height) / 4);
  48 }
  49
  50 .home-link:hover,
  51 .home-link.is-current {
  52   background-image: url(../img/home.svg);
  53 }
  54
  55 .edit-this-page {
  56   display: none;
  57   padding-right: 0.5rem;
  58 }
  59
  60 @media screen and (min-width: 1024px) {
  61   .edit-this-page {
  62     display: block;
  63   }
  64 }
  65
  66 .toolbar .edit-this-page a {
  67   color: var(--toolbar-muted-color);
  68 }