blog.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. * Globals
  3. */
  4. body {
  5. font-family: Georgia, "Times New Roman", Times, serif;
  6. color: #555;
  7. }
  8. h1, .h1,
  9. h2, .h2,
  10. h3, .h3,
  11. h4, .h4,
  12. h5, .h5,
  13. h6, .h6 {
  14. margin-top: 0;
  15. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  16. font-weight: normal;
  17. color: #333;
  18. }
  19. /*
  20. * Override Bootstrap's default container.
  21. */
  22. @media (min-width: 1200px) {
  23. .container {
  24. width: 970px;
  25. }
  26. }
  27. /*
  28. * Masthead for nav
  29. */
  30. .blog-masthead {
  31. background-color: #428bca;
  32. -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  33. box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  34. }
  35. /* Nav links */
  36. .blog-nav-item {
  37. position: relative;
  38. display: inline-block;
  39. padding: 10px;
  40. font-weight: 500;
  41. color: #cdddeb;
  42. }
  43. .blog-nav-item:hover,
  44. .blog-nav-item:focus {
  45. color: #fff;
  46. text-decoration: none;
  47. }
  48. /* Active state gets a caret at the bottom */
  49. .blog-nav .active {
  50. color: #fff;
  51. }
  52. .blog-nav .active:after {
  53. position: absolute;
  54. bottom: 0;
  55. left: 50%;
  56. width: 0;
  57. height: 0;
  58. margin-left: -5px;
  59. vertical-align: middle;
  60. content: " ";
  61. border-right: 5px solid transparent;
  62. border-bottom: 5px solid;
  63. border-left: 5px solid transparent;
  64. }
  65. /*
  66. * Blog name and description
  67. */
  68. .blog-header {
  69. padding-top: 20px;
  70. padding-bottom: 20px;
  71. }
  72. .blog-title {
  73. margin-top: 30px;
  74. margin-bottom: 0;
  75. font-size: 60px;
  76. font-weight: normal;
  77. }
  78. .blog-description {
  79. font-size: 20px;
  80. color: #999;
  81. }
  82. /*
  83. * Main column and sidebar layout
  84. */
  85. .blog-main {
  86. font-size: 18px;
  87. line-height: 1.5;
  88. }
  89. /* Sidebar modules for boxing content */
  90. .sidebar-module {
  91. padding: 15px;
  92. margin: 0 -15px 15px;
  93. }
  94. .sidebar-module-inset {
  95. padding: 15px;
  96. background-color: #f5f5f5;
  97. border-radius: 4px;
  98. }
  99. .sidebar-module-inset p:last-child,
  100. .sidebar-module-inset ul:last-child,
  101. .sidebar-module-inset ol:last-child {
  102. margin-bottom: 0;
  103. }
  104. /* Pagination */
  105. .pager {
  106. margin-bottom: 60px;
  107. text-align: left;
  108. }
  109. .pager > li > a {
  110. width: 140px;
  111. padding: 10px 20px;
  112. text-align: center;
  113. border-radius: 30px;
  114. }
  115. /*
  116. * Blog posts
  117. */
  118. .blog-post {
  119. margin-bottom: 60px;
  120. }
  121. .blog-post-title {
  122. margin-bottom: 5px;
  123. font-size: 40px;
  124. }
  125. .blog-post-meta {
  126. margin-bottom: 20px;
  127. color: #999;
  128. }
  129. /*
  130. * Footer
  131. */
  132. .blog-footer {
  133. padding: 40px 0;
  134. color: #999;
  135. text-align: center;
  136. background-color: #f9f9f9;
  137. border-top: 1px solid #e5e5e5;
  138. }
  139. .blog-footer p:last-child {
  140. margin-bottom: 0;
  141. }