More styling changes to resolve layout issues with PDF and HTML

templates/novo/css/pdf.less

@@ -1,5 +1,6 @@
 body.pdf {
 	color: black;
+	font-size: 20px;
 
 	a {
 		text-decoration: none;
@@ -7,7 +8,7 @@ body.pdf {
 	}
 
 	.container {
-		width: 1080px;
+		width: 1140px;
 		margin: 0 auto;
 		padding: 0;
 		background: none;
@@ -16,8 +17,24 @@ body.pdf {
 	}
 
 	.resume {
-		position:relative;
+		position: relative;
-		padding: 20px 0;
+		padding: 10px 12px;
+	}
+
+	.sidebar {
+		order: 1;
+		width: 30%;
+	}
+
+	.content {
+		width: 70%;
+	}
+
+	.main,
+	#header,
+	#summary,
+	#footer {
+		padding: 0;
 	}
 
 	h1 {
@@ -35,10 +52,43 @@ body.pdf {
 	}
 
 	h3 {
+		// font-size: 2em;
 		font-style: normal;
 
 		+ p {
 
 		}
 	}
+
+	h4 {
+		font-size: 1.5em;
+	}
+
+	#contact {
+		a {
+			color: black;
+			font-size: 1.2em;
+		}
+	}
+
+	#experience {
+		~ dl,
+		~ p,
+		~ ul {
+			page-break-before: avoid;
+		}
+
+		~ p,
+		~ ul {
+			font-size: 1em;
+		}
+
+		~ dl {
+			font-size: 1.1em;
+
+			dd {
+				font-size: 1.25em;
+			}
+		}
+	}
 }

templates/novo/css/resume.less

@@ -39,17 +39,15 @@ h1, h2, h3, h4, ul dl dt {
 	}
 }
 
-.summary {
-}
-
 .main {
+	display: flex;
 	margin-top: 1em;
 }
 
-.header,
-.summary,
 .main,
-.footer {
+#header,
+#summary,
+#footer {
 	padding: 0 2em;
 }
 
@@ -64,36 +62,6 @@ a[href$='.pdf'] {
 	right: 25px;
 }
 
-blockquote {
-	align-items: center;
-	border: 2px solid var(--color-gray-60);
-	border-left: 0;
-	border-right: 0;
-	clear: both;
-	display: flex;
-	font-size: 0.75em;
-	justify-content: center;
-	margin: 0;
-	padding: 0;
-	line-height: 1.4em;
-	text-align: center;
-
-	p {
-		align-items: center;
-		display: flex;
-		flex-flow: wrap;
-		justify-content: center;
-		width: 100%;
-	}
-
-	a {
-		color: var(--color-gray-50);
-		display: inline;
-		flex: 0 0 auto;
-		margin: 0 1em;
-	}
-}
-
 hr {
 	display: block;
 	position: relative;
@@ -115,7 +83,7 @@ ul {
 }
 
 h1 {
-	color: rgba(120, 120, 240, .8);
+	color: var(--color-primary);
 	margin: 0;
 	padding: 0;
 	font-size: 3em;
@@ -198,8 +166,6 @@ ol li {
 	padding: 0;
 	border-top: 1px solid #CCCCCC;
 	width: 100%;
-	/*float: left;*/
-	/*list-style: none;*/
 	line-height: 1.5em;
 	font-size: 1em;
 }
@@ -215,7 +181,6 @@ dl {
 	dt {
 		margin: 0;
 		padding: 0;
-		/*font-size: 1.4em;*/
 	}
 	dd {
 		padding: 0;
@@ -232,7 +197,57 @@ dl {
 	}
 }
 
-#experience {
+#contact {
+	blockquote {
+		align-items: center;
+		border: 2px solid var(--color-gray-60);
+		border-left: 0;
+		border-right: 0;
+		clear: both;
+		display: flex;
+		font-size: 0.75em;
+		justify-content: center;
+		margin: 0;
+		padding: 0;
+		line-height: 1.4em;
+		text-align: center;
+
+		p {
+			align-items: center;
+			display: flex;
+			flex-flow: wrap;
+			justify-content: center;
+			width: 100%;
+		}
+
+		a {
+			color: var(--color-gray-50);
+			display: inline;
+			flex: 1 0 50%;
+			// margin: 0 1em;
+		}
+	}
+}
+
+#skills {
+	~ ul {
+		display: flex;
+		flex-flow: wrap;
+		justify-content: space-between;
+		list-style: none;
+		padding: 0;
+
+		li {
+			background-color: var(--color-gray-10);
+			border-radius: 0.5em;
+			margin-bottom: 0.25em;
+			padding: 0.5em;
+		}
+	}
+}
+
+#experience,
+#education {
 	~ dl {
 		dt {
 			margin-top: 0.5em;
@@ -247,7 +262,7 @@ dl {
 			}
 
 			em {
-				color: var(--color-gray-30);
+				color: var(--color-gray-40);
 				font-size: 0.75em;
 			}
 		}
@@ -256,12 +271,12 @@ dl {
 	~ p {
 		font-size: 0.9em;
 		margin-top: 0;
-		width: 85%;
+		width: 90%;
 	}
 
 	~ ul {
 		font-size: 0.9em;
-		width: 85%;
+		width: 90%;
 	}
 
 	~ ol li {
@@ -271,16 +286,6 @@ dl {
 }
 
 #footer {
-	display: none;
-
-	+ p {
-		width: 100%;
-		font-size: 0.8em;
-		text-align: center;
-	}
-}
-
-.footer {
 	border-top: 1px solid var(--color-gray-40);
 	font-size: 0.75em;
 	text-align: center;

templates/novo/css/screen.less

@@ -7,6 +7,9 @@
 */
 
 @media screen and (min-width: 15em) {
+	.sidebar {
+		order: 0;
+	}
 }
 
 
@@ -49,6 +52,14 @@
   Zoomed in above 912 px
 */
 @media screen and (min-width: 57em) {
+	.sidebar {
+		order: 1;
+		width: 40%;
+	}
+
+	.content {
+		width: 100%;
+	}
 }
 
 /*