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.

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