style.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. @charset "UTF-8";
  2. /* 共通樣式 */
  3. :root {
  4. --main-color: cadetblue;
  5. }
  6. * {
  7. letter-spacing: 1px;
  8. font-weight: 300;
  9. font-family: "Noto Sans TC", sans-serif !important;
  10. }
  11. .navbar {
  12. background-color: var(--main-color) !important;
  13. }
  14. .navbar .navbar-collapse {
  15. flex-grow: 0;
  16. }
  17. p,
  18. li {
  19. line-height: 32px;
  20. }
  21. ul {
  22. list-style: none;
  23. }
  24. img {
  25. width: 100%;
  26. height: auto;
  27. }
  28. html,
  29. body {
  30. height: 100%;
  31. margin: 0;
  32. }
  33. body {
  34. display: flex;
  35. flex-direction: column;
  36. }
  37. .btn:focus,
  38. .form-control:focus {
  39. border-color: var(--main-color) !important;
  40. box-shadow: none !important;
  41. outline: 0 none !important;
  42. }
  43. .badge {
  44. font-weight: 400 !important;
  45. }
  46. .blog-post-tags .badge {
  47. background-color: var(--main-color);
  48. }
  49. .blog-post-tags .badge:hover {
  50. color: var(--main-color);
  51. background-color: #fff;
  52. border: 1px solid var(--main-color);
  53. }
  54. .blog-post-title {
  55. text-align: center;
  56. margin-bottom: 30px;
  57. }
  58. .blog-post-title a {
  59. font-weight: 500;
  60. }
  61. .blog-post.content h4 {
  62. font-size: 16px;
  63. font-weight: 300;
  64. line-height: 32px;
  65. }
  66. .blog-post.content h4 a {
  67. padding: 5px 8px;
  68. margin-right: 3px;
  69. border: 1px solid #000;
  70. border-radius: 5px;
  71. font-size: 14px;
  72. }
  73. .blog-post.content h4 a:hover {
  74. color: #fff !important;
  75. }
  76. .blog-post.content .back-link {
  77. color: #000;
  78. display: block;
  79. text-align: center;
  80. text-decoration: none;
  81. transition: all 0.3s;
  82. }
  83. .blog-post.content .back-link:hover {
  84. opacity: 0.7;
  85. }
  86. /* Sidebar */
  87. .search-btn {
  88. border: 1px solid var(--main-color) !important;
  89. }
  90. .search-btn svg {
  91. color: var(--main-color);
  92. }
  93. .search-btn:hover {
  94. background-color: var(--main-color) !important;
  95. }
  96. .search-btn:hover svg {
  97. color: #fff;
  98. }
  99. .tags {
  100. margin: 0 5px 5px 0;
  101. padding: 7px 10px !important;
  102. font-size: 14px !important;
  103. font-weight: 400 !important;
  104. color: var(--main-color) !important;
  105. border: 1px solid var(--main-color) !important;
  106. }
  107. .tags:hover {
  108. color: #fff !important;
  109. background-color: var(--main-color);
  110. }
  111. .content-list a {
  112. color: #000;
  113. text-decoration: none;
  114. transition: all 0.3s;
  115. }
  116. .content-list a:hover {
  117. color: var(--main-color);
  118. }
  119. .content-list h2 {
  120. font-size: 20px;
  121. }
  122. .content-list section h4 {
  123. font-size: 14px;
  124. font-weight: 300;
  125. }
  126. .content-list section h4:first-child {
  127. white-space: nowrap;
  128. }
  129. .content-list section h4:last-child {
  130. width: 80%;
  131. }
  132. .list-unstyled a {
  133. font-weight: 400;
  134. text-decoration: none;
  135. color: var(--main-color);
  136. transition: all 0.3s;
  137. }
  138. .list-unstyled a:hover {
  139. opacity: 0.7;
  140. }
  141. .pagination {
  142. justify-content: center;
  143. }
  144. .pagination .page-link {
  145. color: var(--main-color);
  146. }
  147. .pagination .page-item.active .page-link {
  148. z-index: 3;
  149. color: #fff;
  150. background-color: var(--main-color);
  151. border-color: var(--main-color);
  152. }/*# sourceMappingURL=style.css.map */