tA's crappy blog
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
1.8KB

  1. html {
  2. font-size: 62.5%;
  3. }
  4. body {
  5. font-size: 1.6rem;
  6. color: #000;
  7. }
  8. blockquote {
  9. padding: 0 1em;
  10. color: #444444;
  11. border-left: 0.25em solid #dfe2e5;
  12. }
  13. header {
  14. border-bottom: 0.2rem solid #000;
  15. }
  16. nav {
  17. text-align: right;
  18. }
  19. nav a {
  20. font-size: 1.8rem;
  21. font-weight: bold;
  22. color: black;
  23. text-decoration: none;
  24. text-transform: uppercase;
  25. }
  26. footer {
  27. margin-top: 3rem;
  28. padding: 1.2rem 0;
  29. border-top: 0.2rem solid #000;
  30. font-size: 1.2rem;
  31. color: #555;
  32. }
  33. h1 {
  34. font-size: 2.4rem;
  35. }
  36. h2 {
  37. font-size: 2rem;
  38. }
  39. article .header {
  40. font-size: 1.4rem;
  41. font-style: italic;
  42. color: #555;
  43. }
  44. .logo a {
  45. font-weight: bold;
  46. font-size: 3.4rem;
  47. color: #000;
  48. text-decoration: none;
  49. }
  50. @media (max-width: 319px) {
  51. body {
  52. width: 90%;
  53. margin: 0;
  54. padding: 0 5%;
  55. }
  56. header {
  57. margin: 4.2rem 0;
  58. }
  59. nav {
  60. margin: 0 auto 3rem;
  61. text-align: center;
  62. }
  63. footer {
  64. text-align: center;
  65. }
  66. .logo {
  67. text-align: center;
  68. margin: 1rem auto 3rem;
  69. }
  70. .logo a {
  71. }
  72. nav a {
  73. display: block;
  74. line-height: 1.6;
  75. }
  76. }
  77. @media (min-width: 320px) {
  78. body {
  79. width: 90%;
  80. margin: 0;
  81. padding: 0 5%;
  82. }
  83. header {
  84. margin: 4.2rem 0;
  85. }
  86. nav {
  87. margin: 0 auto 3rem;
  88. text-align: center;
  89. }
  90. footer {
  91. text-align: center;
  92. }
  93. .logo {
  94. text-align: center;
  95. margin: 1rem auto 3rem;
  96. }
  97. .logo a {
  98. }
  99. nav a {
  100. display: inline;
  101. margin: 0 0.6rem;
  102. }
  103. }
  104. @media (min-width: 640px) {
  105. body {
  106. width: 60rem;
  107. margin: 0 auto;
  108. padding: 0;
  109. }
  110. header {
  111. margin: 0 0 3rem;
  112. padding: 1.2rem 0;
  113. }
  114. nav {
  115. margin: 0 auto 3rem;
  116. text-align: center;
  117. }
  118. footer {
  119. text-align: center;
  120. }
  121. .logo {
  122. text-align: center;
  123. margin: 1rem auto 3rem;
  124. }
  125. .logo a {
  126. }
  127. nav a {
  128. display: inline;
  129. margin: 0 0.6rem;
  130. }
  131. }