_layout.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. html {
  2. box-sizing: border-box;
  3. }
  4. *,
  5. *:before,
  6. *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  7. box-sizing: inherit;
  8. }
  9. body {
  10. background: $color__background-body; /* Fallback for when there is no custom background color defined. */
  11. color: $color__text-screen;
  12. }
  13. @import "content-sidebar";
  14. // @import "sidebar-content";
  15. /*--------------------------------------------------------------
  16. ## Posts
  17. --------------------------------------------------------------*/
  18. @import "posts";
  19. /*--------------------------------------------------------------
  20. ## Pages
  21. --------------------------------------------------------------*/
  22. @import "pages";
  23. /*--------------------------------------------------------------
  24. ## Site Header
  25. --------------------------------------------------------------*/
  26. .site-header {
  27. position: relative;
  28. }
  29. .custom-header {
  30. background-color: $color__text-main;
  31. position: relative;
  32. z-index: -1;
  33. width: 100%;
  34. min-height: 46px;
  35. }
  36. .custom-header.in-panel {
  37. background-color: transparent;
  38. }
  39. .no-custom-header .custom-header {
  40. display: none;
  41. }
  42. .header-wrapper {
  43. width: 100%;
  44. padding: .8em 5%;
  45. }
  46. .site-branding {
  47. clear: none;
  48. }
  49. .site-description-wrapper {
  50. margin: 0 auto 1.6em;
  51. width: 90%;
  52. }
  53. .site-logo,
  54. .custom-logo {
  55. display: block;
  56. margin: 0 auto 1.6em;
  57. }
  58. .site-description {
  59. color: $color__link;
  60. margin: 0;
  61. text-align: center;
  62. font-family: $font__main;
  63. font-style: italic;
  64. font-weight: normal;
  65. @include font-size(1.125);
  66. padding-bottom: .8em;
  67. border-bottom: 1px solid $color__border-button;
  68. a {
  69. color: $color__link;
  70. text-decoration: none;
  71. &:hover {
  72. color: $color__link;
  73. }
  74. }
  75. }
  76. .site-title {
  77. font-family: $font__headings;
  78. font-style: normal;
  79. font-weight: bold;
  80. @include font-size(.825);
  81. text-transform: uppercase;
  82. letter-spacing: 1px;
  83. margin: 0;
  84. position: absolute;
  85. left: 1.6em;
  86. top: 1.6em;
  87. a {
  88. color: $color__border-button;
  89. text-decoration: none;
  90. }
  91. }
  92. /* No custom header */
  93. .no-custom-header .header-wrapper {
  94. background-color: $color__text-main;
  95. padding-bottom: 0;
  96. margin-bottom: 1.6em;
  97. }
  98. .no-custom-header .site-branding {
  99. float: left;
  100. padding-top: .4em;
  101. }
  102. .no-custom-header .site-title {
  103. position: relative;
  104. top: auto;
  105. left: auto;
  106. }
  107. /*--------------------------------------------------------------
  108. ## Site Footer
  109. --------------------------------------------------------------*/
  110. .site-footer {
  111. color: $color__link;
  112. @include font-size(.825);
  113. margin: 0 auto;
  114. a,
  115. a:visited {
  116. text-decoration: none;
  117. &:hover {
  118. color: rgba($color__link,0.5);
  119. }
  120. }
  121. .sep {
  122. color: $color__text-screen;
  123. font-family: Arial, Helvetica, sans-serif;
  124. margin: 0;
  125. clear: both;
  126. display: block;
  127. visibility: hidden;
  128. height: 0;
  129. width: 100%;
  130. }
  131. }
  132. .site-info {
  133. padding: 1.6em;
  134. font-family: $font__headings;
  135. font-weight: bold;
  136. text-align: center;
  137. text-transform: uppercase;
  138. letter-spacing: 1px;
  139. }
  140. /*--------------------------------------------------------------
  141. ## Social Links
  142. --------------------------------------------------------------*/
  143. .jetpack-social-navigation {
  144. background-color: lighten($color__text-main,3);
  145. clear: both;
  146. display: block;
  147. margin: 0;
  148. padding: 2em 1.6em;
  149. text-align: center;
  150. width: 100%;
  151. ul {
  152. margin-bottom: 0 !important;
  153. }
  154. li {
  155. margin: .2em 0 !important;
  156. }
  157. a,
  158. a:visited {
  159. font-size: 24px;
  160. margin: 0.4em 0.1em;
  161. color: lighten($color__text-main,3);
  162. &:before {
  163. background-color: rgba($color__border-button, 0.3);
  164. border-radius: 100%;
  165. width: 40px !important;
  166. height: 40px !important;
  167. line-height: 40px !important;
  168. transition: 0.3s;
  169. }
  170. &:hover:before {
  171. background-color: rgba($color__border-button, 1);
  172. color: $color__text-main;
  173. }
  174. }
  175. }