Make PI styling more responsive

styles/PortableInfobox.less

@@ -11,57 +11,62 @@
 	background: var(--pi-background);
 	clear: right;
 	float: right;
+	font-size: .85em;
 	margin: 0 0 var(--pi-margin) var(--pi-margin);
 	width: var(--pi-width);
+	
+	.pi-border-color {
+		border-color: var(--pi-border-color);
+	}
+	.pi-secondary-background {
+		background-color: var(--pi-secondary-background);
+	}
+	.pi-secondary-font {
+		margin: 0;
+		padding: 0;
+	}
+	.pi-item-spacing {
+		padding: var(--pi-item-spacing);
+	}
+	
+	.pi-title {
+		border: 0;
+		margin: 0;
+		font-family: inherit;
+		font-size: 1.75em;
+		line-height: 1.5;
+	}
 	.pi-header {
 		border: 0;
 		margin: 0;
 		font-family: inherit;
+		font-size: 1.2em;
+		font-weight: bold;
+		line-height: 1.3;
 	}
-	.pi-title {
+	.pi-image {
-		border: 0;
 		margin: 0;
-		font-size: 18px;
+		max-width: 100%;
-		line-height: 28px;
+		text-align: center;
 	}
 	.pi-data-label {
-		padding-top: 0;
+		font-size: inherit;
+		line-height: inherit;
 	}
 	.pi-data-value {
-		>* {
+		>:not(ul), li {
 			margin: 0;
 		}
-		li {
+		ol {
-			margin: 0;
-			line-height: 19px;
-		}
-		ol, ul {
 			list-style-position: inside;
 		}
 	}
 	>.pi-item:last-child {
 		border-bottom: 0;
 	}
-	.pi-secondary-font {
-		font-size: 12px;
-		font-weight: bold;
-		line-height: 18px;
-		margin-top: 0;
-	}
-	.pi-item-spacing {
-		padding: var(--pi-item-spacing);
-	}
 }
 .pi {
-	&-secondary-background {
-		background-color: var(--pi-secondary-background);
-	}
-	&-border-color {
-		border-color: var(--pi-border-color);
-	}
 	&-image {
-		text-align: center;
-		margin: 0;
 		&-thumbnail{
 			max-width: var(--pi-width);
 			height: auto;
@@ -105,9 +110,8 @@
 		-ms-hyphens: auto;
 		hyphens: auto;
 		color: #808080;
-		font-size: 12px;
+		font-size: 1em;
 		font-style: italic;
-		text-align: left;
 		word-wrap: break-word;
 	}
 	&-data {
@@ -139,19 +143,17 @@
 			word-wrap: break-word;
 		}
 		&-value {
+			-ms-flex: 1;
+			-webkit-flex: 1;
+			-moz-flex: 1;
+			flex: 1;
 			-webkit-hyphens: auto;
 			-moz-hyphens: auto;
 			-ms-hyphens: auto;
 			hyphens: auto;
-			font-size: 12px;
-			line-height: 18px;
 			padding-left: 0;
 			word-break: break-word;
 			&:not(:first-child) {
-				-ms-flex-preferred-size: 180px;
-				-webkit-flex-basis: 180px;
-				-moz-flex-basis: 180px;
-				flex-basis: 180px;
 				padding-left: 10px;
 			}
 		}
@@ -171,6 +173,9 @@
 		.pi-header {
 			text-align: left;
 		}
+		thead + tbody .pi-data-value {
+			padding-top: 0;
+		}
 		.pi-horizontal-group-item {
 			vertical-align: top;
 			&:not(:first-child) {
@@ -184,11 +189,7 @@
 	}
 	&-smart {
 		&-data {
-			&-label:not(:first-child) {
+			&-label:not(:first-child),
-				border-color: var(--pi-border-color);
-				border-left-style: solid;
-				border-left-width: 1px;
-			}
 			&-value:not(:first-child) {
 				border-color: var(--pi-border-color);
 				border-left-style: solid;
@@ -204,11 +205,14 @@
 			&:last-child {
 				border-bottom: 0;
 			}
-			&-body {
-				display: flex;
-			}
 			&-head {
 				display: flex;
+				& + .pi-smart-group-body .pi-data-value {
+					padding-top: 0;
+				}
+			}
+			&-body {
+				display: flex;
 			}
 			.pi-smart-data-label {
 				padding-bottom: 0;
@@ -225,54 +229,94 @@
 		.pi-data {
 			display: block;
 		}
-		.pi-data-value {
+		.pi-data-value:not(:only-child) {
 			padding-left: 10px;
 		}
 	}
-	&-collapse {
+	
-		.pi-header {
+}
-			&:first-child {
+@media screen and (min-width: 720px) {
-				padding-right: 25px;
+	.pi-collapse .pi-header:first-child {
-				position: relative;
+		padding-right: 25px;
-				&::after {
+		position: relative;
-					border-color: currentColor;
+		&::after {
-					border-style: solid;
+			border-color: currentColor;
-					border-width: 2px 2px 0 0;
+			border-style: solid;
-					content: '';
+			border-width: 2px 2px 0 0;
-					display: block;
+			content: '';
-					height: 5px;
+			display: block;
-					right: 10px;
+			height: 5px;
-					position: absolute;
+			right: 10px;
-					top: 50%;
+			position: absolute;
-					width: 5px;
+			top: 50%;
-					-webkit-transform: rotate(-45deg);
+			width: 5px;
-					transform: rotate(-45deg);
+			-webkit-transform: rotate(-45deg);
-					margin-top: -3px;
+			transform: rotate(-45deg);
-				}
+			margin-top: -3px;
-			}
 		}
-		&-closed {
+	}
-			.pi-header:first-child::after {
+	.pi-collapse-closed {
-				transform: rotate(135deg);
+		.pi-header:first-child::after {
-				-webkit-transform: rotate(135deg);
+			transform: rotate(135deg);
-				-moz-transform: rotate(135deg);
+			-webkit-transform: rotate(135deg);
-				-ms-transform: rotate(135deg);
+			-moz-transform: rotate(135deg);
-				margin-top: -5px;
+			-ms-transform: rotate(135deg);
-			}
+			margin-top: -5px;
-			> :nth-child(n+2) {
+		}
+		> :nth-child(n+2) {
+			display: none;
+		}
+		.pi-horizontal-group {
+			thead {
 				display: none;
 			}
-			.pi-horizontal-group {
+			tbody {
-				thead {
+				display: none;
-					display: none;
-				}
-				tbody {
-					display: none;
-				}
 			}
 		}
 	}
 }
+
+@media screen and (max-width: 720px) {
+	.portable-infobox {
+		float: none;
+		width: initial;
+		font-size: initial;
+		margin: 0;
+		
+		.skin-minerva & {
+			margin: 0 -16px;
+		}
+		
+		.pi-title {
+			text-align: center;
+		}
+	}
+}
+
+.skin-minerva {
+	.pi-caption {
+		margin: var(--pi-item-spacing);
+	}
+	
+	.pi-horizontal-group {
+		display: table;
+		margin: 0;
+		width: 100% !important;
+
+		.pi-header {
+			display: table-caption;
+		}
+	}
+
+	.pi-navigation {
+		box-sizing: border-box;
+		width: 100%;
+		float: none;
+	}
+}
+
+/* PI errors */
 p.pi-error-info {
 	background-color:  #f33;
 	color: #fff;