You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

194 lines
3.5 KiB

5 years ago
  1. html, body {
  2. height: 100%;
  3. }
  4. body {
  5. display: flex;
  6. flex-direction: column;
  7. }
  8. #wrapper {
  9. flex: 1 0 auto;
  10. }
  11. #footer {
  12. flex-shrink: 0;
  13. padding: 0.5em;
  14. }
  15. .text-align-right {
  16. text-align: right;
  17. }
  18. .pure-menu-item a img {
  19. padding: .1em .5em;
  20. max-height: 2.4em;
  21. min-width: 2.4em;
  22. max-width: 2.4em;
  23. }
  24. .menu-wrapper {
  25. background-color: #E7732F;
  26. margin-bottom: 2.5em;
  27. white-space: nowrap;
  28. position: relative;
  29. }
  30. .menu {
  31. display: inline-block;
  32. width: auto;
  33. vertical-align: middle;
  34. -webkit-font-smoothing: antialiased;
  35. }
  36. .menu .pure-menu-link,
  37. .menu .pure-menu-heading {
  38. color: black;
  39. }
  40. .menu .pure-menu-link:hover,
  41. .menu .pure-menu-heading:hover {
  42. background-color: transparent;
  43. }
  44. .menu-top {
  45. position: relative;
  46. padding-top: .5em;
  47. padding-bottom: .5em;
  48. }
  49. .menu-brand {
  50. display: block;
  51. text-align: center;
  52. position: relative;
  53. color: black;
  54. }
  55. .menu-toggle {
  56. width: 44px;
  57. height: 44px;
  58. display: block;
  59. position: absolute;
  60. top: 3px;
  61. right: 0;
  62. display: none;
  63. }
  64. .menu-toggle .bar {
  65. background-color: white;
  66. display: block;
  67. width: 20px;
  68. height: 2px;
  69. border-radius: 100px;
  70. position: absolute;
  71. top: 22px;
  72. right: 12px;
  73. -webkit-transition: all 0.5s;
  74. -moz-transition: all 0.5s;
  75. -ms-transition: all 0.5s;
  76. transition: all 0.5s;
  77. }
  78. .menu-toggle .bar:first-child {
  79. -webkit-transform: translateY(-6px);
  80. -moz-transform: translateY(-6px);
  81. -ms-transform: translateY(-6px);
  82. transform: translateY(-6px);
  83. }
  84. .menu-toggle.x .bar {
  85. -webkit-transform: rotate(45deg);
  86. -moz-transform: rotate(45deg);
  87. -ms-transform: rotate(45deg);
  88. transform: rotate(45deg);
  89. }
  90. .menu-toggle.x .bar:first-child {
  91. -webkit-transform: rotate(-45deg);
  92. -moz-transform: rotate(-45deg);
  93. -ms-transform: rotate(-45deg);
  94. transform: rotate(-45deg);
  95. }
  96. .menu-screen {
  97. background-color: #E7732F;
  98. -webkit-transition: all 0.5s;
  99. -moz-transition: all 0.5s;
  100. -ms-transition: all 0.5s;
  101. transition: all 0.5s;
  102. height: 3em;
  103. position: absolute;
  104. top: 0;
  105. z-index: -1;
  106. }
  107. .menu-tucked .menu-screen {
  108. -webkit-transform: translateY(-44px);
  109. -moz-transform: translateY(-44px);
  110. -ms-transform: translateY(-44px);
  111. transform: translateY(-44px);
  112. width: auto;
  113. }
  114. @media (min-width: 62em) {
  115. .menu-screen {
  116. margin-top: 2.9em;
  117. z-index: 1;
  118. right: 0em;
  119. }
  120. }
  121. @media (max-width: 62em) {
  122. .menu {
  123. display: block;
  124. }
  125. .menu-toggle {
  126. display: block;
  127. display: none\9;
  128. }
  129. .menu-bottom {
  130. position: absolute;
  131. width: 100%;
  132. border-top: 1px solid #E7732F;
  133. background-color: #808080\9;
  134. z-index: 100;
  135. }
  136. .menu-bottom .pure-menu-link {
  137. opacity: 1;
  138. -webkit-transform: translateX(0);
  139. -moz-transform: translateX(0);
  140. -ms-transform: translateX(0);
  141. transform: translateX(0);
  142. -webkit-transition: all 0.5s;
  143. -moz-transition: all 0.5s;
  144. -ms-transition: all 0.5s;
  145. transition: all 0.5s;
  146. }
  147. .menu-bottom.menu-tucked .pure-menu-link {
  148. -webkit-transform: translateX(-140px);
  149. -moz-transform: translateX(-140px);
  150. -ms-transform: translateX(-140px);
  151. transform: translateX(-140px);
  152. opacity: 0;
  153. opacity: 1\9;
  154. }
  155. .pure-menu-horizontal.menu-tucked {
  156. z-index: -1;
  157. top: 45px;
  158. position: absolute;
  159. overflow: hidden;
  160. }
  161. .menu-untucked {
  162. height: 3.1em;
  163. }
  164. .pure-menu-horizontal.pure-menu-scrollable.menu-untucked {
  165. overflow-x: auto;
  166. }
  167. }