style.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /* General */
  2. body {
  3. margin: 0;
  4. line-height: 1.5em;
  5. color: #333333;
  6. font-family: helvetica, arial, sans-serif;
  7. }
  8. img {
  9. max-width: 100%;
  10. height: auto;
  11. }
  12. h1, h2, h3, h4, h5, h6 {
  13. margin-bottom: 0;
  14. line-height: 1.2em;
  15. margin-top: 1em;
  16. }
  17. a:link, a:visited {
  18. color: #0000e0;
  19. text-decoration: none
  20. }
  21. a:hover, a:active {
  22. color: #0000ff;
  23. text-decoration: underline
  24. }
  25. /* Single column layout */
  26. nav section, header section, main, footer section {
  27. max-width: 40em;
  28. margin-left: auto;
  29. margin-right: auto;
  30. padding: 0 0.5em;
  31. }
  32. /* Navigation panel */
  33. nav {
  34. background: #333333;
  35. border-bottom: thin solid #111111;
  36. line-height: 3em;
  37. }
  38. nav a {
  39. margin-right: 1em;
  40. }
  41. nav a:link, nav a:visited {
  42. color: #cccccc;
  43. }
  44. nav a:hover, nav a:active {
  45. color: #ffffff;
  46. text-decoration: none;
  47. }
  48. @media screen and (min-width: 600px) {
  49. nav .links {
  50. float: right;
  51. }
  52. }
  53. /* Footer */
  54. footer {
  55. background: #f0f0f0;
  56. border-top: thin solid #e0e0e0;
  57. margin-top: 2em;
  58. padding: 1em 0;
  59. box-shadow: 0 100vh 0 100vh #f0f0f0;
  60. text-align: center;
  61. }
  62. footer section p {
  63. font-size: 0.8em;
  64. }
  65. footer a {
  66. margin-right: 1em;
  67. }
  68. footer a:last-child {
  69. margin-right: 0;
  70. }
  71. /* Posts */
  72. article {
  73. margin-top: 1em;
  74. margin-bottom: 1em;
  75. }
  76. article h2 a:link, article h2 a:visited,
  77. article h1 a:link, article h1 a:visited,
  78. .more:link, .more:visited {
  79. color: #333333;
  80. }
  81. article h2 a:hover, article h2 a:active,
  82. article h1 a:hover, article h1 a:active,
  83. .more:hover, .more:active {
  84. color: #777777;
  85. }
  86. p.meta {
  87. margin-top: 0;
  88. font-size: 0.8em;
  89. color: #777777;
  90. font-style: italic;
  91. }
  92. p.summary {
  93. margin-top: 0.25em;
  94. margin-bottom: 0.25em;
  95. }
  96. div .more {
  97. margin-top: 0;
  98. font-weight: bold;
  99. }
  100. /* RSS */
  101. .rss {
  102. padding: 0.3em 0.35em;
  103. border-radius: 0.25em;
  104. font-size: 0.75em;
  105. font-weight: bold;
  106. }
  107. .rss:link, .rss:visited, .rss:hover, .rss:active {
  108. color: #ffffff;
  109. text-decoration: none;
  110. }
  111. .rss:link, .rss:visited {
  112. background: #ff6600;
  113. }
  114. .rss:hover, .rss:active {
  115. background: #ff8822;
  116. }