_layout.styl 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. .header {
  2. margin: 0 auto;
  3. position: relative;
  4. width: $content-desktop;
  5. +desktop-large() {
  6. width: $content-desktop-large;
  7. }
  8. +desktop-largest() {
  9. width: $content-desktop-largest;
  10. }
  11. +tablet-mobile() {
  12. width: auto;
  13. }
  14. }
  15. .header-inner {
  16. background: var(--content-bg-color);
  17. border-radius: $border-radius-inner;
  18. box-shadow: $box-shadow-inner;
  19. overflow: hidden;
  20. padding: 0;
  21. position: absolute;
  22. top: 0;
  23. width: $sidebar-desktop;
  24. +desktop-large() {
  25. width: $sidebar-desktop;
  26. }
  27. +tablet-mobile() {
  28. border-radius: initial;
  29. position: relative;
  30. width: auto;
  31. }
  32. }
  33. .main-inner {
  34. align-items: flex-start;
  35. display: flex;
  36. justify-content: space-between;
  37. if (hexo-config('sidebar.position') != 'right') {
  38. flex-direction: row-reverse;
  39. }
  40. +tablet-mobile() {
  41. width: auto;
  42. }
  43. }
  44. .content-wrap {
  45. background: var(--content-bg-color);
  46. border-radius: $border-radius-inner;
  47. box-shadow: $box-shadow-inner;
  48. box-sizing: border-box;
  49. padding: $content-desktop-padding;
  50. width: $content-wrap;
  51. +tablet-mobile() {
  52. border-radius: initial;
  53. padding: 20px;
  54. width: 100%;
  55. }
  56. }
  57. if (hexo-config('sidebar.position') == 'right') {
  58. .header-inner {
  59. right: 0;
  60. }
  61. .book-mark-link {
  62. left: $b2t-position-right;
  63. }
  64. .footer-inner {
  65. padding-right: 260px;
  66. }
  67. } else {
  68. .footer-inner {
  69. padding-left: 260px;
  70. }
  71. .back-to-top {
  72. left: auto;
  73. right: $b2t-position-right;
  74. +tablet-mobile() {
  75. right: $b2t-position-right-mobile;
  76. }
  77. }
  78. }
  79. .footer-inner {
  80. +tablet-mobile() {
  81. padding-left: 0;
  82. padding-right: 0;
  83. width: auto;
  84. }
  85. }