Added 'metadata' class to metadata lists & styled for desktop & mobile rendering. Issue #6

Author: morgant

css/advanced.css

@@ -4,6 +4,32 @@ body {
 	margin-right: auto;
     padding: 1em;
 }
+.metadata {
+	margin-top: 2em; /* 24px @ 16px */
+	margin-bottom: 2em;
+	padding-left: 0;
+	list-style: none;
+	font-size: 0.75em; /* 12px @ 16px */
+}
+.metadata li {
+	display: block;
+	float: left;
+	padding-left: 0;
+	padding-right: 1em;
+	line-height: 2em; /* 24px @ 16px */
+}
+.metadata li:after {
+	content: "|";
+	/*color: #000;*/
+	padding-left: 1em;
+}
+.metadata li:last-child {
+	float: none;
+	padding-right: 0;
+}
+.metadata li:last-child:after {
+	content: "";
+}
 
 /* Mobile Portrait CSS */
 /* @media all and (max-device-width: 320px) and (orientation:portrait) */
@@ -14,6 +40,14 @@ body {
 		margin-left: 0;
 		margin-right: 0;
 	}
+	.metadata li {
+		display: list-item;
+		float: none;
+	}
+	.metadata li:after {
+		content: "";
+		padding-left: 0;
+	}
 }
 
 /* Mobile Landscape CSS */
@@ -28,4 +62,12 @@ body {
 		margin-left: 0;
 		margin-right: 0;
 	}
+	.metadata li {
+		display: list-item;
+		float: none;
+	}
+	.metadata li:after {
+		content: "";
+		padding-left: 0;
+	}
 }

css/basic.css

@@ -28,6 +28,10 @@ p, dt, dd, ul {
 dd {
 	border-bottom: 1px solid #DDD;
 	margin-left: 1.5em;
+	margin-right: 1.5em;
+}
+dd > p {
+	padding: 0;
 }
 dd:last-child {
 	border-bottom: none;
@@ -57,4 +61,7 @@ h2 {
 	margin-bottom: 1em;
 	padding-left: 1em;
 	padding-right: 1em;
+}
+.metadata li {
+	color: #999;
 }