main.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. /*
  2. * Copyright (C) 2007 Enrique Ramírez <http://enrique-ramirez.com>
  3. * Copyright (C) 2007 Smashing Media GmbH <http://www.smashingmagazine.com>
  4. * Copyright (C) 2017 Koz Ross <koz.ross@retro-freedom.nz>
  5. *
  6. * This program is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * This program is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  18. */
  19. /* Imports */
  20. @import url("pygment.css");
  21. /***** Global *****/
  22. /* Body */
  23. body {
  24. background: #F5F4EF;
  25. color: #000305;
  26. font-size: 87.5%; /* Base font size: 14px */
  27. font-family: sans-serif;
  28. line-height: 1.429;
  29. margin: 0;
  30. padding: 0;
  31. text-align: left;
  32. }
  33. /* Headings */
  34. h1 {font-size: 2em }
  35. h2 {font-size: 1.571em} /* 22px */
  36. h3 {font-size: 1.429em} /* 20px */
  37. h4 {font-size: 1.286em} /* 18px */
  38. h5 {font-size: 1.143em} /* 16px */
  39. h6 {font-size: 1em} /* 14px */
  40. h1, h2, h3, h4, h5, h6 {
  41. font-weight: 400;
  42. line-height: 1.1;
  43. margin-bottom: .8em;
  44. font-family: arial, serif;
  45. }
  46. h3, h4, h5, h6 { margin-top: .8em; }
  47. hr { border: 2px solid #EEEEEE; }
  48. /* Anchors */
  49. a {outline: 0;}
  50. a img {border: 0px; text-decoration: none;}
  51. a:link, a:visited {
  52. color: #C74350;
  53. padding: 0 1px;
  54. text-decoration: underline;
  55. }
  56. a:hover, a:active {
  57. background-color: #C74350;
  58. color: #fff;
  59. text-decoration: none;
  60. text-shadow: 1px 1px 1px #333;
  61. }
  62. h1 a:hover {
  63. background-color: inherit
  64. }
  65. /* Paragraphs */
  66. div.line-block,
  67. p { margin-top: 1em;
  68. margin-bottom: 1em;}
  69. strong, b {font-weight: bold;}
  70. em, i {font-style: italic;}
  71. /* Lists */
  72. ul {
  73. list-style: outside disc;
  74. margin: 0em 0 0 1.5em;
  75. }
  76. ol {
  77. list-style: outside decimal;
  78. margin: 0em 0 0 1.5em;
  79. }
  80. li { margin-top: 0.5em;
  81. margin-bottom: 1em; }
  82. .post-info {
  83. float:right;
  84. margin:10px;
  85. padding:5px;
  86. }
  87. .post-info p{
  88. margin-top: 1px;
  89. margin-bottom: 1px;
  90. }
  91. .readmore { float: right }
  92. dl {margin: 0 0 1.5em 0;}
  93. dt {font-weight: bold;}
  94. dd {margin-left: 1.5em;}
  95. pre{background-color: rgb(238, 238, 238); padding: 10px; margin: 10px; overflow: auto;}
  96. /* Quotes */
  97. blockquote {
  98. margin: 20px;
  99. font-style: italic;
  100. }
  101. cite {}
  102. q {}
  103. div.note {
  104. float: right;
  105. margin: 5px;
  106. font-size: 85%;
  107. max-width: 300px;
  108. }
  109. /* Tables */
  110. table {margin: .5em auto 1.5em auto; width: 98%;}
  111. /* Thead */
  112. thead th {padding: .5em .4em; text-align: left;}
  113. thead td {}
  114. /* Tbody */
  115. tbody td {padding: .5em .4em;}
  116. tbody th {}
  117. tbody .alt td {}
  118. tbody .alt th {}
  119. /* Tfoot */
  120. tfoot th {}
  121. tfoot td {}
  122. /* HTML5 tags */
  123. header, section, footer,
  124. aside, nav, article, figure {
  125. display: block;
  126. }
  127. /***** Layout *****/
  128. .body {clear: both; margin: 0 auto; width: 800px;}
  129. img.right, figure.right {float: right; margin: 0 0 2em 2em;}
  130. img.left, figure.left {float: left; margin: 0 2em 2em 0;}
  131. /*
  132. Header
  133. *****************/
  134. #banner {
  135. margin: 0 auto;
  136. padding: 2.5em 0 0 0;
  137. }
  138. /* Banner */
  139. #banner h1 {font-size: 3.571em; line-height: 0;}
  140. #banner h1 a:link, #banner h1 a:visited {
  141. color: #000305;
  142. display: block;
  143. font-weight: bold;
  144. margin: 0 0 .6em .2em;
  145. text-decoration: none;
  146. }
  147. #banner h1 a:hover, #banner h1 a:active {
  148. background: none;
  149. color: #C74350;
  150. text-shadow: none;
  151. }
  152. #banner h1 strong {font-size: 0.36em; font-weight: normal;}
  153. /* Main Nav */
  154. #banner nav {
  155. background: #000305;
  156. font-size: 1.143em;
  157. height: 40px;
  158. line-height: 30px;
  159. margin: 0 auto 2em auto;
  160. padding: 0;
  161. text-align: center;
  162. width: 800px;
  163. border-radius: 5px;
  164. -moz-border-radius: 5px;
  165. -webkit-border-radius: 5px;
  166. }
  167. #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
  168. #banner nav li {float: left; display: inline; margin: 0;}
  169. #banner nav a:link, #banner nav a:visited {
  170. color: #fff;
  171. display: inline-block;
  172. height: 30px;
  173. padding: 5px 1.5em;
  174. text-decoration: none;
  175. }
  176. #banner nav a:hover, #banner nav a:active,
  177. #banner nav .active a:link, #banner nav .active a:visited {
  178. background: #C74451;
  179. color: #fff;
  180. text-shadow: none !important;
  181. }
  182. #banner nav li:first-child a {
  183. border-top-left-radius: 5px;
  184. -moz-border-radius-topleft: 5px;
  185. -webkit-border-top-left-radius: 5px;
  186. border-bottom-left-radius: 5px;
  187. -moz-border-radius-bottomleft: 5px;
  188. -webkit-border-bottom-left-radius: 5px;
  189. }
  190. /*
  191. Featured
  192. *****************/
  193. #featured {
  194. background: #fff;
  195. margin-bottom: 2em;
  196. overflow: hidden;
  197. padding: 20px;
  198. width: 760px;
  199. border-radius: 10px;
  200. -moz-border-radius: 10px;
  201. -webkit-border-radius: 10px;
  202. }
  203. figure {
  204. border: 2px solid #eee;
  205. float: right;
  206. margin: 0.786em 2em 0 5em;
  207. width: 248px;
  208. }
  209. figure img {display: block; float: right;}
  210. h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
  211. h3 {font-size: 1.429em; margin-bottom: .5em;}
  212. h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
  213. h3 a:hover, #featured h3 a:active {color: #fff;}
  214. /*
  215. Body
  216. *****************/
  217. #content {
  218. background: #fff;
  219. margin-bottom: 2em;
  220. overflow: hidden;
  221. padding: 20px 20px;
  222. width: 760px;
  223. border-radius: 10px;
  224. -moz-border-radius: 10px;
  225. -webkit-border-radius: 10px;
  226. }
  227. /*
  228. About
  229. *****************/
  230. #about {
  231. background: #fff;
  232. font-style: normal;
  233. margin-bottom: 2em;
  234. overflow: hidden;
  235. padding: 20px;
  236. text-align: left;
  237. width: 760px;
  238. text-align: center;
  239. border-radius: 10px;
  240. -moz-border-radius: 10px;
  241. -webkit-border-radius: 10px;
  242. }
  243. #about .primary {float: left; width: 165px;}
  244. #about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
  245. #about .photo {float: left; margin: 5px 20px;}
  246. #about .url:link, #about .url:visited {text-decoration: none;}
  247. #about .bio {float: right; width: 500px;}
  248. /*
  249. Footer
  250. *****************/
  251. #contentinfo {padding-bottom: 2em; text-align: right;}
  252. /***** Sections *****/
  253. /* Blog */
  254. .hentry {
  255. display: block;
  256. clear: both;
  257. border-bottom: 1px solid #eee;
  258. padding: 1.5em 0;
  259. }
  260. li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
  261. #content > .hentry {padding: 1em 0;}
  262. .hentry img{display : none ;}
  263. .entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
  264. .entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
  265. .entry-title a:visited {background-color: #fff;}
  266. .hentry .post-info * {font-style: normal;}
  267. /* Content */
  268. .hentry footer {margin-bottom: 2em;}
  269. .hentry footer address {display: inline;}
  270. #posts-list footer address {display: block;}
  271. /* Blog Index */
  272. #posts-list {list-style: none; margin: 0;}
  273. #posts-list .hentry {padding-left: 10px; position: relative;}
  274. #posts-list footer {
  275. left: 10px;
  276. position: relative;
  277. float: left;
  278. top: 0.5em;
  279. width: 190px;
  280. }
  281. code { font-size: 10pt; } /* 9pt by default, just doesn't look right */
  282. h2 code { font-size: inherit; font-size: 18pt; }
  283. /* fix post images */
  284. article img {
  285. max-width: 100%; /* squeeze images to fit */
  286. display: block; /* let automatic margins work */
  287. margin: auto; /* center the image */
  288. }