blog.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  33. }
  34. /* Nav links */
  35. .blog-nav-item {
  36. position: relative;
  37. display: inline-block;
  38. padding: 10px;
  39. font-weight: 500;
  40. color: #cdddeb;
  41. }
  42. .blog-nav-item:hover,
  43. .blog-nav-item:focus {
  44. color: #fff;
  45. text-decoration: none;
  46. }
  47. /* Active state gets a caret at the bottom */
  48. .blog-nav .active {
  49. color: #fff;
  50. }
  51. .blog-nav .active:after {
  52. position: absolute;
  53. bottom: 0;
  54. left: 50%;
  55. width: 0;
  56. height: 0;
  57. margin-left: -5px;
  58. vertical-align: middle;
  59. content: " ";
  60. border-right: 5px solid transparent;
  61. border-bottom: 5px solid;
  62. border-left: 5px solid transparent;
  63. }
  64. /*
  65. * Blog name and description
  66. */
  67. .blog-header {
  68. padding-top: 20px;
  69. padding-bottom: 20px;
  70. }
  71. .blog-title {
  72. margin-top: 30px;
  73. margin-bottom: 0;
  74. font-size: 60px;
  75. font-weight: normal;
  76. }
  77. .blog-description {
  78. font-size: 20px;
  79. color: #999;
  80. }
  81. /*
  82. * Main column and sidebar layout
  83. */
  84. .blog-main {
  85. font-size: 18px;
  86. line-height: 1.5;
  87. }
  88. /* Sidebar modules for boxing content */
  89. .sidebar-module {
  90. padding: 15px;
  91. margin: 0 -15px 15px;
  92. }
  93. .sidebar-module-inset {
  94. padding: 15px;
  95. background-color: #f5f5f5;
  96. border-radius: 4px;
  97. }
  98. .sidebar-module-inset p:last-child,
  99. .sidebar-module-inset ul:last-child,
  100. .sidebar-module-inset ol:last-child {
  101. margin-bottom: 0;
  102. }
  103. /* Pagination */
  104. .pager {
  105. margin-bottom: 60px;
  106. text-align: left;
  107. }
  108. .pager > li > a {
  109. width: 140px;
  110. padding: 10px 20px;
  111. text-align: center;
  112. border-radius: 30px;
  113. }
  114. /*
  115. * Blog posts
  116. */
  117. .blog-post {
  118. margin-bottom: 60px;
  119. }
  120. .blog-post-title {
  121. margin-bottom: 5px;
  122. font-size: 40px;
  123. }
  124. .blog-post-meta {
  125. margin-bottom: 20px;
  126. color: #999;
  127. }
  128. /*
  129. * Footer
  130. */
  131. .blog-footer {
  132. padding: 40px 0;
  133. color: #999;
  134. text-align: center;
  135. background-color: #f9f9f9;
  136. border-top: 1px solid #e5e5e5;
  137. }