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.

193 lines
3.5 KiB

  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. width: 100%;
  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.95em;
  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. }