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.

преди 4 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. //
  2. // The basic two column layout
  3. //
  4. .page-wrap {
  5. @include mq(md) {
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. display: flex;
  10. width: 100%;
  11. height: 100%;
  12. overflow-x: hidden;
  13. overflow-y: hidden;
  14. }
  15. }
  16. .side-bar {
  17. z-index: 100;
  18. display: flex;
  19. flex-wrap: wrap;
  20. background-color: $sidebar-color;
  21. @include mq(md) {
  22. flex-wrap: nowrap;
  23. position: absolute;
  24. width: $nav-width-md;
  25. height: 100%;
  26. flex-direction: column;
  27. border-right: $border $border-color;
  28. align-items: flex-end;
  29. }
  30. @include mq(lg) {
  31. width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
  32. min-width: $nav-width;
  33. }
  34. }
  35. .main-content-wrap {
  36. @include mq(md) {
  37. position: absolute;
  38. top: 0;
  39. left: 0;
  40. width: 100%;
  41. height: 100%;
  42. -webkit-overflow-scrolling: touch;
  43. overflow-x: hidden;
  44. overflow-y: scroll;
  45. }
  46. }
  47. .main-content {
  48. @include mq(md) {
  49. position: relative;
  50. max-width: $content-width;
  51. margin-left: $nav-width-md;
  52. }
  53. @include mq(lg) {
  54. margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
  55. }
  56. }
  57. .js-main-content:focus {
  58. outline: none;
  59. }
  60. .page {
  61. @include container;
  62. padding-top: $gutter-spacing-sm;
  63. padding-bottom: $gutter-spacing-sm;
  64. @include mq(md) {
  65. padding-top: $gutter-spacing;
  66. padding-bottom: $gutter-spacing;
  67. }
  68. }
  69. .page-header {
  70. @include container;
  71. display: none;
  72. padding-top: $gutter-spacing-sm;
  73. padding-bottom: $gutter-spacing-sm;
  74. background-color: $sidebar-color;
  75. @include mq(md) {
  76. display: flex;
  77. justify-content: flex-end;
  78. height: $header-height;
  79. background-color: $body-background-color;
  80. border-bottom: $border $border-color;
  81. }
  82. &.nav-open {
  83. display: block;
  84. @include mq(md) {
  85. display: flex;
  86. }
  87. }
  88. }
  89. .navigation,
  90. .site-header,
  91. .site-footer {
  92. width: 100%;
  93. @include mq(lg) {
  94. width: $nav-width;
  95. }
  96. }
  97. .navigation {
  98. @include container;
  99. @include mq(md) {
  100. padding-top: $sp-8;
  101. padding-bottom: $gutter-spacing-sm;
  102. overflow-y: auto;
  103. flex: 1 1 auto;
  104. }
  105. }
  106. .site-header {
  107. display: flex;
  108. min-height: $header-height;
  109. align-items: center;
  110. @include mq(md) {
  111. z-index: 101;
  112. height: $header-height;
  113. max-height: $header-height;
  114. border-bottom: $border $border-color;
  115. }
  116. }
  117. .site-title {
  118. @include container;
  119. flex-grow: 1;
  120. display: flex;
  121. height: 100%;
  122. align-items: center;
  123. padding-top: $sp-3;
  124. padding-bottom: $sp-3;
  125. color: $body-heading-color;
  126. @include fs-6;
  127. @include mq(md) {
  128. padding-top: $sp-2;
  129. padding-bottom: $sp-2;
  130. }
  131. }
  132. @if variable-exists(logo) {
  133. .site-logo {
  134. width: 100%;
  135. height: 100%;
  136. background-image: url($logo);
  137. background-repeat: no-repeat;
  138. background-position: left center;
  139. background-size: contain;
  140. }
  141. }
  142. .menu-button {
  143. appearance: none;
  144. display: flex;
  145. height: 100%;
  146. padding: $gutter-spacing-sm;
  147. align-items: center;
  148. color: $link-color;
  149. text-transform: uppercase;
  150. background: transparent;
  151. border: 0;
  152. @include mq(md) {
  153. display: none;
  154. }
  155. }
  156. // stylelint-disable selector-max-type
  157. body {
  158. position: relative;
  159. padding-bottom: $sp-10;
  160. @include mq(md) {
  161. position: static;
  162. padding-bottom: 0;
  163. }
  164. }
  165. // stylelint-enable selector-max-type
  166. .site-footer {
  167. @include container;
  168. position: absolute;
  169. bottom: 0;
  170. left: 0;
  171. padding-top: $sp-4;
  172. padding-bottom: $sp-4;
  173. @include mq(md) {
  174. position: static;
  175. justify-self: end;
  176. }
  177. }