_main.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. #main {
  2. background: $main-bg;
  3. margin: 0 0 $content-margin + $content-padding 0;
  4. }
  5. #body {
  6. img, .video-container {
  7. margin: 3rem auto;
  8. display: block;
  9. text-align: center;
  10. &.border {
  11. border: 2px solid #e6e6e6 !important;
  12. padding: 2px;
  13. }
  14. &.shadow {
  15. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  16. }
  17. }
  18. @extend .default-animation;
  19. position: relative;
  20. margin-left: $sidebar-width;
  21. min-height: 100%;
  22. .bordered {
  23. border: 1px solid #ccc;
  24. }
  25. .padding {
  26. @extend .default-animation;
  27. padding: 3rem ($body-margin + 2rem);
  28. @include breakpoint(desktop-only) {
  29. position: static;
  30. padding: 15px ($body-margin - 1rem);
  31. }
  32. @include breakpoint(mobile-only) {
  33. padding: 5px 1rem;
  34. }
  35. }
  36. h1 + hr {
  37. margin-top: -1.7rem;
  38. margin-bottom: 3rem;
  39. }
  40. #navigation {
  41. @include breakpoint(desktop-only) {
  42. position: static;
  43. margin-right: 0 !important;
  44. width: 100%;
  45. display: table;
  46. }
  47. }
  48. .nav {
  49. @extend .default-animation;
  50. position: fixed;
  51. top: 0;
  52. bottom: 0;
  53. width: $body-margin;
  54. font-size: 50px;
  55. height: 100%;
  56. cursor: pointer;
  57. display: table;
  58. text-align: center;
  59. > i {
  60. display: table-cell;
  61. vertical-align: middle;
  62. text-align: center;
  63. }
  64. @include breakpoint(desktop-only) {
  65. display: table-cell;
  66. position: static;
  67. top: auto;
  68. width: 50%;
  69. text-align: center;
  70. height: 100px;
  71. line-height: 100px;
  72. padding-top: 0;
  73. > i {
  74. display: inline-block;
  75. }
  76. }
  77. &:hover {
  78. background: $navbar-bg;
  79. }
  80. &.nav-pref {
  81. left: 0;
  82. }
  83. &.nav-next {
  84. right: 0;
  85. }
  86. }
  87. }
  88. #body-inner {
  89. margin-bottom: 5rem;
  90. }
  91. // Chapter title
  92. #chapter {
  93. display: flex;
  94. align-items: center;
  95. justify-content: center;
  96. height: 100%;
  97. padding: 2rem 0;
  98. #body-inner {
  99. padding-bottom: 3rem;
  100. max-width: 80%;
  101. }
  102. h3 {
  103. font-family: $font-family-default;
  104. font-weight: $font-weight-regular;
  105. text-align: center;
  106. }
  107. h1 {
  108. font-size: 5rem;
  109. border-bottom: 4px solid $rule-color;
  110. }
  111. p {
  112. text-align: center;
  113. font-size: 1.2rem;
  114. }
  115. }
  116. #footer {
  117. padding: 3rem 1rem;
  118. color: darken($sidebar-link, 10%);
  119. font-size: 13px;
  120. p {
  121. margin: 0;
  122. }
  123. }