theme.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. /* because standards */
  2. @viewport {
  3. width: device-width;
  4. }
  5. @-ms-viewport {
  6. width: device-width;
  7. }
  8. body {
  9. font-family: "Museo Sans", "museo-sans", sans-serif;
  10. font-size: 100%;
  11. color: #534741;
  12. line-height: 1.25;
  13. background: #F2EDE6;
  14. margin: 0;
  15. }
  16. /*
  17. @media (max-width: 600px) {
  18. body {
  19. font-size: 100%;
  20. }
  21. }
  22. */
  23. /* force android webkit to use relative header size */
  24. body h1 {
  25. font-family: "Museo", "museo", sans-serif;
  26. font-weight: 500;
  27. }
  28. p {
  29. hyphens: auto;
  30. -moz-hyphens: auto;
  31. word-wrap: break-word;
  32. }
  33. hr {
  34. border-color: #D3D3D3;
  35. }
  36. a {
  37. color: #6495ED;
  38. text-decoration: none;
  39. }
  40. code, pre {
  41. font-family: Monaco, Menlo, Consolas, monospace;
  42. font-size: 90%;
  43. hyphens: none;
  44. -moz-hyphens: none;
  45. }
  46. code {
  47. background: #FFFFE0;
  48. padding: 0px 0.2em;
  49. border-radius: 0.25em;
  50. }
  51. .highlight code {
  52. background: none;
  53. }
  54. .highlight, .code {
  55. padding: 0em 0.5em;
  56. border-radius: 0.25em;
  57. }
  58. .highlight pre {
  59. padding: 0.25em 0.5em;
  60. overflow-x: auto;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. }
  65. td {
  66. padding: 0px 0.5em;
  67. }
  68. thead tr {
  69. font-weight: bold;
  70. border-bottom: solid 1px #808080;
  71. }
  72. .clearfix:after {
  73. content: " ";
  74. display: block;
  75. height: 0;
  76. clear: both;
  77. }
  78. #header {
  79. background: #F0E5D8;
  80. text-align: center;
  81. padding: 20px 0;
  82. }
  83. /* TODO: Fix this shit. */
  84. #header h1 {
  85. font-size: 1.75em;
  86. margin: 0.125em auto 0 auto;
  87. text-transform: lowercase;
  88. font-weight: 300;
  89. }
  90. #header img {
  91. width: 128px;
  92. height: 128px;
  93. border: 2px solid #534741;
  94. border-radius: 50%;
  95. }
  96. #header a {
  97. font-family: "Museo";
  98. color: #534741;
  99. display: inline-block;
  100. border-bottom: 1px solid transparent;
  101. transition: all 0.4s;
  102. }
  103. #header a:hover {
  104. text-decoration: none;
  105. border-bottom: 1px solid black;
  106. }
  107. #menu ul {
  108. padding: 0px;
  109. margin: 6px 0 0 0px;
  110. }
  111. #menu li {
  112. list-style: none;
  113. margin: 0.5em 0.2em;
  114. display: inline;
  115. text-transform: lowercase;
  116. font-weight: 300;
  117. }
  118. #menu .twitter {
  119. font-size: 1.25em;
  120. font-weight: 100;
  121. }
  122. #container {
  123. max-width: 840px;
  124. margin: 0 auto;
  125. }
  126. #content {
  127. padding: 0 12px;
  128. }
  129. footer {
  130. text-align: center;
  131. }
  132. article {
  133. margin-top: 2em;
  134. font-weight: 300;
  135. font-size: 1.2em;
  136. line-height: 1.8;
  137. }
  138. article img {
  139. max-width: 100%;
  140. }
  141. article .entry-title {
  142. font-size: 1.9em;
  143. line-height: 1.4;
  144. }
  145. article .entry-title a {
  146. color: #534741;
  147. border-bottom: 0px solid transparent;
  148. -webkit-transition: all 0.2s;
  149. -moz-transition: all 0.2s;
  150. -ms-transition: all 0.2s;
  151. transition: all 0.2s;
  152. padding-bottom: 12px;
  153. }
  154. article .entry-title a:hover {
  155. border-bottom: 2px solid #534741;
  156. padding-bottom: 0;
  157. }
  158. article .entry-title .dateline {
  159. float: right;
  160. font-size: 50%;
  161. font-weight: normal;
  162. line-height: 3;
  163. }
  164. article .entry-title .dateline {
  165. opacity: 0.75;
  166. }
  167. .pager {
  168. list-style: none;
  169. text-align: center;
  170. padding: 0px;
  171. font-size: 1.5em;
  172. }
  173. .pager li > a {
  174. display: inline-block;
  175. color: #534741;
  176. }
  177. .pager .previous a {
  178. float: left;
  179. }
  180. .pager .next a {
  181. float: right;
  182. }
  183. @media (max-width: 767px) {
  184. header {
  185. font-size: 85%;
  186. }
  187. header img {
  188. width: 100px;
  189. height: 100px;
  190. border: 2px solid #534741;
  191. border-radius: 50%;
  192. }
  193. header > h1 {
  194. display: block;
  195. float: none;
  196. line-height: 1.1;
  197. }
  198. #content {
  199. -webkit-text-size-adjust: none;
  200. font-size: 80%;
  201. }
  202. .entry-title {
  203. line-height: 1;
  204. }
  205. article {
  206. line-height: 1.5;
  207. font-weight: 300;
  208. }
  209. article .entry-title .dateline {
  210. float: none;
  211. line-height: 1;
  212. display: block;
  213. font-size: 70%;
  214. margin-top: 6px;
  215. }
  216. article .entry-title {
  217. font-size: 1.4em;
  218. }
  219. }
  220. header {
  221. -webkit-perspective: 800;
  222. -moz-perspective: 800;
  223. -ms-perspective: 800;
  224. perspective: 800;
  225. }
  226. #thomas {
  227. position: relative;
  228. display: inline-block;
  229. -webkit-transform-style: preserve-3d;
  230. -moz-transform-style: preserve-3d;
  231. -ms-transform-style: preserve-3d;
  232. transform-style: preserve-3d;
  233. -webkit-transition: all 0.4s;
  234. -moz-transition: all 0.4s;
  235. -ms-transition: all 0.4s;
  236. transition: all 0.4s;
  237. }
  238. #thomas.whoa {
  239. -webkit-transform: rotateY(180deg);
  240. -moz-transform: rotateY(180deg);
  241. -ms-transform: rotateY(180deg);
  242. transform: rotateY(180deg);
  243. }
  244. #thomas img:nth-child(2) {
  245. position: relative;
  246. -webkit-backface-visibility: hidden;
  247. backface-visibility: hidden;
  248. }
  249. #thomas img:nth-child(1) {
  250. position: absolute;
  251. top: 0;
  252. left: 0;
  253. -webkit-transform: rotateY(180deg) translateZ(0.1px);
  254. -moz-transform: rotateY(180deg) translateZ(0.1px);
  255. -ms-transform: rotateY(180deg) translateZ(0.1px);
  256. transform: rotateY(180deg) translateZ(0.1px);
  257. -webkit-backface-visibility: hidden;
  258. backface-visibility: hidden;
  259. }
  260. .sr-only {
  261. position: absolute;
  262. width: 1px;
  263. height: 1px;
  264. padding: 0;
  265. margin: -1px;
  266. overflow: hidden;
  267. clip: rect(0, 0, 0, 0);
  268. border: 0;
  269. }
  270. .sr-only-focusable:active,
  271. .sr-only-focusable:focus {
  272. position: static;
  273. width: auto;
  274. height: auto;
  275. margin: 0;
  276. overflow: visible;
  277. clip: auto;
  278. }
  279. h1 {
  280. font-size: 36px;
  281. }
  282. h1 small {
  283. font-size: 16px;
  284. display: block;
  285. margin-top: 8px;
  286. }
  287. #isso-thread {
  288. font-size: 80%;
  289. }