dotfiles

  1@import "variables";
  2
  3@mixin menu {
  4  background: var(--background);
  5  border: 2px solid;
  6  border-radius: $corner-radius;
  7  list-style: none;
  8  margin: 0;
  9  padding: 10px;
 10  z-index: 99;
 11}
 12
 13.header {
 14  display: flex;
 15  flex-direction: column;
 16  position: relative;
 17
 18  &-inner {
 19    align-items: center;
 20    display: flex;
 21    justify-content: space-between;
 22  }
 23
 24  &-logo {
 25    display: flex;
 26    flex: 1;
 27
 28    &:after {
 29      background: linear-gradient(
 30        90deg,
 31        var(--accent) 0% 12%,
 32        transparent 12% 50%,
 33        var(--accent-secondary) 50% 62%,
 34        transparent 62%
 35      );
 36
 37      background-position: left center;
 38      background-repeat: repeat-x;
 39      background-size: 40px 100%;
 40      content: "";
 41      display: block;
 42      margin: 0px 0px 0px 10px;
 43      width: 100%;
 44
 45      @media (max-width: $phone-max-width) {
 46        margin: 0px 15px 0px 10px;
 47      }
 48    }
 49
 50    a {
 51      flex: 0 0 auto;
 52      max-width: 100%;
 53      text-decoration: none;
 54
 55      &:focus {
 56        outline: dotted 2px var(--color);
 57      }
 58    }
 59  }
 60
 61  a {
 62    font-weight: bold;
 63  }
 64
 65  .menu {
 66    &-desktop {
 67      margin-top: 10px;
 68
 69      @media (max-width: $phone-max-width) {
 70        display: none;
 71      }
 72    }
 73
 74    &-mobile {
 75      @media (min-width: ($phone-max-width + 1px)) {
 76        display: none;
 77      }
 78
 79      @media (max-width: $phone-max-width) {
 80        @include menu;
 81        position: absolute;
 82        padding-top: 15px;
 83        right: 0;
 84        top: 50px;
 85      }
 86    }
 87
 88    &-inner {
 89      display: flex;
 90      flex-wrap: wrap;
 91      list-style: none;
 92      margin: 0;
 93      padding: 0;
 94
 95      &-desktop {
 96        @media (max-width: $phone-max-width) {
 97          display: none;
 98        }
 99      }
100
101      &-mobile {
102        display: none;
103
104        @media (max-width: $phone-max-width) {
105          display: block;
106        }
107      }
108
109      li {
110        &.active {
111          color: var(--accent-alpha-70);
112        }
113
114        &:not(:last-of-type) {
115          margin-right: 20px;
116          flex: 0 0 auto;
117        }
118      }
119
120      @media (max-width: $phone-max-width) {
121        align-items: flex-start;
122        flex-direction: column;
123        padding: 0;
124
125        li {
126          padding: 5px;
127          margin: 0;
128        }
129      }
130
131      &-list {
132        list-style: none;
133        margin: 0;
134        padding: 0;
135        position: relative;
136
137        &:not(:only-child) {
138          margin-left: 20px;
139        }
140
141        &-more {
142          @include menu;
143          left: 0;
144          top: 35px;
145
146          &-trigger {
147            background: none;
148            border: none;
149            font: inherit;
150            color: var(--accent-secondary);
151            cursor: pointer;
152            margin: 0;
153            user-select: none;
154          }
155
156          li {
157            margin: 0;
158            padding: 5px;
159            white-space: nowrap;
160          }
161        }
162      }
163    }
164
165    &-trigger {
166      background: none;
167      font: inherit;
168      cursor: pointer;
169      display: none;
170
171      @media (max-width: $phone-max-width) {
172        display: inherit;
173      }
174
175      &:focus {
176        outline: dotted 2px var(--color);
177      }
178
179      &-button {
180        border: 2px solid;
181        border-radius: $corner-radius;
182        color: var(--accent-secondary);
183        height: 100%;
184        padding: 6px 8px;
185        position: relative;
186        user-select: none;
187      }
188    }
189  }
190}