summaryrefslogtreecommitdiff
path: root/css/main.scss
blob: 787cae09d82f4d22bf069922655441b3479f8d0d (plain)
  1. /* @group General styles */
  2. /*
  3. Harmonise v1.3
  4. Resets styles then adds basic typographical styling.
  5. Use as a starting point upon which to build more CSS.
  6. By Clearleft.com
  7. */
  8. $base-font-size: 11.2px;
  9. $base-line-height: (1.2 * $base-font-size);
  10. $base-font-family: "helvetica neue", arial, helvetica, sans-serif;
  11. /* size headings using classic scale of 16, 18, 24, 36, relative to 14px (original base font size) */
  12. $rel-12-font-size: 12/14 * $base-font-size;
  13. $rel-16-font-size: 16/14 * $base-font-size;
  14. $rel-18-font-size: 18/14 * $base-font-size;
  15. $rel-24-font-size: 24/14 * $base-font-size;
  16. $rel-36-font-size: 36/14 * $base-font-size;
  17. $h1-font-size: $rel-36-font-size;
  18. $h2-font-size: $rel-16-font-size;
  19. $h3-font-size: $rel-16-font-size;
  20. $h4-font-size: $base-font-size;
  21. $h5-font-size: $base-font-size;
  22. $h6-font-size: $base-font-size;
  23. $front-leadin-font-size: $rel-18-font-size;
  24. $caption-font-size: $rel-16-font-size;
  25. $meta-font-size: $rel-12-font-size;
  26. $ligature-font-size: 1.3 * $base-font-size;
  27. $compact-font-size: 0.7 * $base-font-size;
  28. /* @group Reset */
  29. @import "normalize";
  30. @include normalize();
  31. /* @group Font families */
  32. pre, code, kbd, tt, samp, tt {
  33. font-family: "andale mono", monospace;
  34. }
  35. /* @end */
  36. /* @group Font sizes & margins */
  37. p, ul, ol, dl, address, table, pre, form, fieldset {
  38. @include normalize-font-size($base-font-size);
  39. margin-bottom: 0.5em;
  40. }
  41. /* @end */
  42. /* @group Headings */
  43. h1 {
  44. line-height:1em /* 36px */;
  45. margin-top:0.1667em /* 6px */;
  46. margin-bottom:0.5833em /* 21px */;
  47. }
  48. h1 span {
  49. @include normalize-font-size($front-leadin-font-size, $h1-font-size);
  50. line-height: 1;
  51. color: #999;
  52. display: block;
  53. margin-bottom: 0.3em;
  54. }
  55. h2, h3 {
  56. margin-top:0;
  57. padding-bottom: 0.5em;
  58. margin-bottom:0.5em /* 8px */;
  59. text-align: center;
  60. border-bottom: 1px solid #999;
  61. }
  62. h4 {
  63. margin-top:1em /* 21px */;
  64. margin-bottom: 0.5em;
  65. }
  66. h5, h6 {
  67. margin-bottom: 0.5em;
  68. }
  69. /* @end */
  70. /* @group Lists */
  71. ul {
  72. list-style-type: disc;
  73. margin-left: 1.5em; /* 21px */
  74. }
  75. ol {
  76. list-style-type: decimal;
  77. margin-left: 1.5em; /* 21px */
  78. }
  79. dt {
  80. font-weight: bold;
  81. margin-top: 1.5em; /* 21px */
  82. }
  83. ul ul, ol ol, ol ul, ul ol {
  84. margin-bottom: 0;
  85. }
  86. /* @end */
  87. /* @group Tables */
  88. table {
  89. border-bottom: 1px solid #C7C7C7;
  90. }
  91. caption {
  92. @include normalize-font-size($caption-font-size);
  93. font-weight: bold;
  94. padding-bottom: 0.4375em; /* 7px */
  95. }
  96. thead th {
  97. border-bottom: 3px solid #C7C7C7;
  98. padding-top: 0;
  99. padding-bottom: 0.5em; /* 7px */
  100. }
  101. tbody {
  102. border-top: 3px solid #C7C7C7; /* not rendered in IE6/7 */
  103. }
  104. tbody tr th, tbody tr td {
  105. border-top: 1px solid #C7C7C7;
  106. }
  107. th, td {
  108. text-align: left;
  109. padding: 0.286em 0.5em 0.214em 0.5em; /* 4px 7px 3px 7px */
  110. }
  111. /* @end */
  112. /* @group Blockquotes */
  113. blockquote {
  114. font-style: italic;
  115. margin:0 0 0 0; /* 21px */
  116. color: #999;
  117. }
  118. p+p+blockquote {
  119. margin-top: 1.5em /* 21px */;
  120. }
  121. blockquote cite,
  122. blockquote em {
  123. font-style: normal;
  124. }
  125. /* @end */
  126. /* @group Other styling */
  127. address {
  128. font-style: normal;
  129. }
  130. ins {
  131. text-decoration: underline;
  132. color: #27AD16;
  133. }
  134. del {
  135. text-decoration: line-through;
  136. color: #B60D10;
  137. }
  138. pre {
  139. @include normalize-font-size($compact-font-size);
  140. white-space: pre;
  141. width: 100%;
  142. overflow: hidden;
  143. border-top: 3px double #C7C7C7;
  144. border-bottom: 3px double #C7C7C7;
  145. padding: 0.5em 0;
  146. }
  147. hr {
  148. border: none;
  149. background-color: black;
  150. height: 1px;
  151. }
  152. /* @end */
  153. /* @end */
  154. /* @group Helper styles */
  155. /* @group Forms */
  156. /* @group Containers */
  157. form .container {
  158. margin-bottom: 1.5em; /* 21px */
  159. }
  160. /* @group Fieldsets */
  161. fieldset {
  162. border: 1px solid #ccc;
  163. padding: 0 1.5em 1em 1.5em; /* 0 21px 14px 21px */
  164. }
  165. legend {
  166. font-weight: bold;
  167. }
  168. form fieldset .container {
  169. margin-top: 1em; /* 14px */
  170. margin-bottom:0;
  171. position: relative;
  172. }
  173. /* @end */
  174. /* @end */
  175. /* @group Labels */
  176. label {
  177. font-weight: bold;
  178. cursor: pointer;
  179. }
  180. .meta-label {
  181. font-weight: bold;
  182. margin-bottom: 0;
  183. }
  184. .multi-container label,
  185. .radio-container label,
  186. .checkbox-container label {
  187. font-weight: normal;
  188. }
  189. .radio-container label,
  190. .checkbox-container label {
  191. display: block;
  192. }
  193. .compact label {
  194. display: inline;
  195. }
  196. /* @end */
  197. /* @group Meta */
  198. form .help {
  199. @include normalize-font-size($meta-font-size);
  200. display: block;
  201. color: #777;
  202. font-style: normal;
  203. }
  204. /* @end */
  205. /* @group Form controls */
  206. input, textarea, select, button {
  207. @include normalize-font-size($base-font-size);
  208. font-family: inherit;
  209. line-height: inherit;
  210. }
  211. select {
  212. background-color: #fff; /* fixes bug in Opera which inherits bgcolor from container */
  213. }
  214. textarea,
  215. input[type='text'],
  216. input[type='password'],
  217. select {
  218. border-width: 1px;
  219. border-style: solid;
  220. border-top-color: #999;
  221. border-left-color: #999;
  222. border-bottom-color: #ccc;
  223. border-right-color: #ccc;
  224. padding: 0 1px 1px 1px;
  225. }
  226. textarea:focus,
  227. input[type='text']:focus,
  228. input[type='password']:focus,
  229. select:focus {
  230. border-color: #888;
  231. outline: 2px solid #ffffaa;
  232. }
  233. input.short {
  234. width: 4em;
  235. }
  236. input.medium, textarea.medium {
  237. width: 12em;
  238. }
  239. input.long, textarea.long {
  240. width: 30em;
  241. }
  242. textarea {
  243. width: 99%;
  244. display: block;
  245. }
  246. button {
  247. overflow: visible;
  248. cursor: pointer;
  249. }
  250. .button-container input {
  251. font-weight: bold;
  252. }
  253. .button-container input.cancel {
  254. font-weight: normal;
  255. }
  256. button.link {
  257. border: 0;
  258. padding: 0;
  259. background-color: #fff;
  260. font-weight: normal;
  261. cursor: pointer;
  262. width: auto;
  263. overflow: visible;
  264. }
  265. /* accessibility feature, resize check and radio inputs */
  266. .radio-container input,
  267. .checkbox-container input {
  268. width: 1em;
  269. height: 1em;
  270. }
  271. /* @end */
  272. /* @end */
  273. .amp {
  274. @include normalize-font-size($ligature-font-size);
  275. font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style";
  276. font-style: italic;
  277. line-height: 0.7;
  278. margin: 0 0.2em 0 0.1em;
  279. }
  280. /* @end */
  281. /* @group Page structure */
  282. #book {
  283. margin: 10px;
  284. overflow: hidden;
  285. }
  286. .page {
  287. width: 241px;
  288. height: 370px;
  289. overflow: hidden;
  290. outline: 1px solid #C7C7C7;
  291. float: left;
  292. margin: 10px;
  293. position: relative;
  294. }
  295. .inner {
  296. margin: 15px;
  297. }
  298. .footer {
  299. position: absolute;
  300. bottom: 15px;
  301. left: 15px;
  302. width: 211px;
  303. }
  304. /* @end */
  305. /* @group Page Components */
  306. /* @group Page Types */
  307. /* class on page */
  308. .lines {
  309. background-image: url(../img/lines.gif);
  310. background-repeat: repeat-y;
  311. background-position: 15px 1em;
  312. }
  313. .squares {
  314. }
  315. .isometric {
  316. }
  317. /* @end */
  318. /* @group Page Elements */
  319. /* @group Todo list */
  320. .todo {
  321. padding-left: 0;
  322. margin-left: 0;
  323. }
  324. .todo li {
  325. border-bottom: 1px solid #C7C7C7;
  326. background-image: url(../img/check.gif);
  327. background-repeat: no-repeat;
  328. background-position: 0 0.3em;
  329. list-style-type: none;
  330. margin: 0.35em 0 0 0;
  331. padding: 0 0 0.35em 15px;
  332. }
  333. /* @end */
  334. .micro p,
  335. .micro h3,
  336. .micro h4,
  337. .micro h5,
  338. .micro h6,
  339. h3.micro,
  340. h4.micro,
  341. h5.micro,
  342. h6.micro,
  343. p.micro,
  344. span.micro {
  345. @include normalize-font-size($compact-font-size);
  346. line-height: 1.5em;
  347. display: block;
  348. }
  349. /* @end */
  350. /* @end */
  351. /* @group Overrides */
  352. /* @end */