{
 "blyg": "0.4",
 "id": "4s1vksgp2e6h2mdf48wqtskp6q",
 "kind": "thread",
 "origin": "https://notionparallax.co.uk/",
 "page": "https://notionparallax.co.uk/2011/interview-css",
 "author": {
  "name": "Ben Doherty",
  "url": "https://notionparallax.co.uk/"
 },
 "created": "2011-08-17T22:34:17Z",
 "updated": "2011-08-17T22:34:17Z",
 "version": 1,
 "content_md": "# Interview CSS\n\n\n<p>If you were looking for some wise words about Brazilian electro then I'm terribly sorry :(</p>\n<p><a href=\"http://www.notionparallax.co.uk/wordpress/wp-content/uploads/2011/08/cssUL.jpg\"><img class=\"alignright size-full wp-image-757\" title=\"This is a grab, but you can see it for real after the jump\" src=\"https://notionparallax.co.uk/assets/cssUL.jpg\" alt=\"\" width=\"265\" height=\"146\" /></a>I'm typing up some interviews at the moment, and while I was doing my dip thesis (a long time ago) I read an <a href=\"http://www.alistapart.com/articles/taminglists/\">a list apart</a> article about lists and styling lists. At the same time I was using a javascript library to do the verification on my forms written by <a href=\"http://tetlaw.id.au/\">Andrew Tetlaw</a>. By a stroke of such enormous coincidence that I was really very surprised by it, Andrew is now the web guy for BVN. </p>\n<p>We talked through some stuff today and thought that you could make a CSS selector that would do the normal interview typesetting without too much effort.</p>\n<ul class=\"interview\">\n<li>Can we do this with CSS?</li>\n<li>yes, it's easy</li>\n<li>I'm too stupid, show me how</li>\n<li>here you go:</li>\n</ul>\n<pre>/*style applied to the whole interview*/\nul.interview{\n  list-style: none;\n  margin-bottom: 0.8em;\n  list-style-position: outside;\n}\n/*interviewer bullet*/\nul.interview li:nth-child(odd)::before {\n  content: 'BD ';\n  color: rgb(0, 200, 0);\n}\n/*interviewer text*/\nul.interview li:nth-child(odd) {  \n  color: rgb(0, 100, 0);\n}\n/*interviewee bullet*/\nul.interview li:nth-child(even)::before {\n  content: 'JA ';\n  color: rgb(200, 0, 0);\n}\n/*interviewee text*/\nul.interview li:nth-child(even) {\n  color: rgb(100, 0, 0);\n}\n/*each line in the interview*/\nul.interview li{\n  margin-bottom: 0.8em;\n}</pre>\n<p>There's a load more tidying up that you could do with hanging indents and stuff, but that's the basics of it.<br />\nHere's something that Andrew wrote about <a href=\"http://reference.sitepoint.com/css/pseudoclass-nthchild\">nth child CSS selectors</a> [Actually he says he was _just_ the technical editor]</p>\n<p>The really flare thing to do would be to have first and second lines showing the full name, and then 3<sup>rd</sup> onwards showing initials.</p>\n<p>P.S. The CSS in this post is made possible by using the <a href=\"http://wordpress.org/extend/plugins/scripts-n-styles/\">scripts n styles</a> plugin for wordpress.</p>\n",
 "content_html": "<h1>Interview CSS</h1>\n<p>If you were looking for some wise words about Brazilian electro then I’m terribly sorry :(</p>\n<p><a href=\"http://www.notionparallax.co.uk/wordpress/wp-content/uploads/2011/08/cssUL.jpg\"><img class=\"alignright size-full wp-image-757\" title=\"This is a grab, but you can see it for real after the jump\" src=\"https://notionparallax.co.uk/assets/cssUL.jpg\" alt=\"\" width=\"265\" height=\"146\" /></a>I’m typing up some interviews at the moment, and while I was doing my dip thesis (a long time ago) I read an <a href=\"http://www.alistapart.com/articles/taminglists/\">a list apart</a> article about lists and styling lists. At the same time I was using a javascript library to do the verification on my forms written by <a href=\"http://tetlaw.id.au/\">Andrew Tetlaw</a>. By a stroke of such enormous coincidence that I was really very surprised by it, Andrew is now the web guy for BVN. </p>\n<p>We talked through some stuff today and thought that you could make a CSS selector that would do the normal interview typesetting without too much effort.</p>\n<ul class=\"interview\">\n<li>Can we do this with CSS?</li>\n<li>yes, it's easy</li>\n<li>I'm too stupid, show me how</li>\n<li>here you go:</li>\n</ul>\n<pre>/*style applied to the whole interview*/\nul.interview{\n  list-style: none;\n  margin-bottom: 0.8em;\n  list-style-position: outside;\n}\n/*interviewer bullet*/\nul.interview li:nth-child(odd)::before {\n  content: 'BD ';\n  color: rgb(0, 200, 0);\n}\n/*interviewer text*/\nul.interview li:nth-child(odd) {  \n  color: rgb(0, 100, 0);\n}\n/*interviewee bullet*/\nul.interview li:nth-child(even)::before {\n  content: 'JA ';\n  color: rgb(200, 0, 0);\n}\n/*interviewee text*/\nul.interview li:nth-child(even) {\n  color: rgb(100, 0, 0);\n}\n/*each line in the interview*/\nul.interview li{\n  margin-bottom: 0.8em;\n}</pre>\n<p>There’s a load more tidying up that you could do with hanging indents and stuff, but that’s the basics of it.<br />\nHere’s something that Andrew wrote about <a href=\"http://reference.sitepoint.com/css/pseudoclass-nthchild\">nth child CSS selectors</a> [Actually he says he was <em>just</em> the technical editor]</p>\n<p>The really flare thing to do would be to have first and second lines showing the full name, and then 3<sup>rd</sup> onwards showing initials.</p>\n<p>P.S. The CSS in this post is made possible by using the <a href=\"http://wordpress.org/extend/plugins/scripts-n-styles/\">scripts n styles</a> plugin for wordpress.</p>\n",
 "content_hash": "sha256:5ade210e82eef40b07025c5a7fe045bd7ab19d85f99ad596b67b48471d3193b8",
 "media": [],
 "changelog": [
  {
   "version": 1,
   "at": "2011-08-17T22:34:17Z",
   "note": null
  }
 ],
 "transclusions": []
}