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.

216 lines
2.5KB

  1. nav a {
  2. font-size: 1.8rem;
  3. font-weight: bold;
  4. text-decoration: none;
  5. text-transform: uppercase;
  6. }
  7. a:after {
  8. content: " ▻";
  9. }
  10. a {
  11. text-decoration: none;
  12. }
  13. a:link {
  14. color: #7FDBFF;
  15. }
  16. a:visited {
  17. #color: #B10DC9;
  18. color: #F012BE;
  19. }
  20. .navbar a {
  21. color: #7FDBFF;
  22. }
  23. .navbar a:after {
  24. content: "";
  25. }
  26. html {
  27. font-family: sans-serif;
  28. font-size: 62.5%;
  29. color: #FFFFFF;
  30. background-color: #222222;
  31. }
  32. body {
  33. font-size: 1.6rem;
  34. color: #FFFFFF;
  35. }
  36. blockquote {
  37. padding: 0 1em;
  38. color: #2ECC40;
  39. border-left: 0.25em solid #dfe2e5;
  40. }
  41. header {
  42. border-bottom: 0.2rem solid #F012BE;
  43. }
  44. nav {
  45. text-align: right;
  46. color: #7FDBFF;
  47. }
  48. footer {
  49. margin-top: 3rem;
  50. padding: 1.2rem 0;
  51. border-top: 0.2rem solid #F012BE;
  52. font-size: 1.2rem;
  53. color: #AAAAAA;
  54. }
  55. code {
  56. font-family: monospace;
  57. color: #01FF70;
  58. }
  59. pre {
  60. padding: 0 1em;
  61. border-left: 0.25em solid #3D9970;
  62. }
  63. strong {
  64. color: #FF4136;
  65. }
  66. em {
  67. color: #FFDC00;
  68. }
  69. strong>em {
  70. color: #FF851B;
  71. }
  72. h1 {
  73. color: #7FDBFF;
  74. font-size: 2.4rem;
  75. }
  76. h2 {
  77. color: #7FDBFF;
  78. font-size: 2rem;
  79. }
  80. h3 {
  81. color: #7FDBFF;
  82. font-size: 1em;
  83. }
  84. h3:before {
  85. content: "◎ ";
  86. }
  87. h2:before {
  88. content: "◉ ";
  89. }
  90. h1:before {
  91. content: "◈ ";
  92. }
  93. article .header {
  94. font-size: 1.4rem;
  95. font-style: italic;
  96. color: #AAAAAA;
  97. }
  98. .logo a {
  99. font-weight: bold;
  100. font-size: 3.4rem;
  101. text-decoration: none;
  102. color: #7FDBFF;
  103. }
  104. .logo a:before {
  105. content: "◈ ";
  106. }
  107. .logo a:after {
  108. content: " ◈";
  109. }
  110. @media (max-width: 319px) {
  111. body {
  112. width: 90%;
  113. margin: 0;
  114. padding: 0 5%;
  115. }
  116. header {
  117. margin: 4.2rem 0;
  118. }
  119. nav {
  120. margin: 0 auto 3rem;
  121. text-align: center;
  122. }
  123. footer {
  124. text-align: center;
  125. }
  126. .logo {
  127. text-align: center;
  128. margin: 1rem auto 3rem;
  129. }
  130. nav a {
  131. display: block;
  132. line-height: 1.6;
  133. }
  134. }
  135. @media (min-width: 320px) {
  136. body {
  137. width: 90%;
  138. margin: 0;
  139. padding: 0 5%;
  140. }
  141. header {
  142. margin: 4.2rem 0;
  143. }
  144. nav {
  145. margin: 0 auto 3rem;
  146. text-align: center;
  147. }
  148. footer {
  149. text-align: center;
  150. }
  151. .logo {
  152. text-align: center;
  153. margin: 1rem auto 3rem;
  154. }
  155. nav a {
  156. display: inline;
  157. margin: 0 0.6rem;
  158. }
  159. }
  160. @media (min-width: 640px) {
  161. body {
  162. width: 60rem;
  163. margin: 0 auto;
  164. padding: 0;
  165. }
  166. header {
  167. margin: 0 0 3rem;
  168. padding: 1.2rem 0;
  169. }
  170. nav {
  171. margin: 0 auto 3rem;
  172. text-align: center;
  173. }
  174. footer {
  175. text-align: center;
  176. }
  177. .logo {
  178. text-align: center;
  179. margin: 1rem auto 3rem;
  180. }
  181. nav a {
  182. display: inline;
  183. margin: 0 0.6rem;
  184. }
  185. }