portrait almanac #167

server/styles/scss/_almanac.scss

@@ -4,10 +4,15 @@
 #almanac-html.weather-display {
 	background-image: url('../images/backgrounds/3.png');
 
-	// repeat the background if wide-enhanced
+	// change the backgrounds for enhanced modes
 	.wide.enhanced & {
 		background-image: url('../images/backgrounds/3-wide-enhanced.png');
 	}
+
+	// change background for portrait
+	.portrait.enhanced & {
+		background-image: url(../images/backgrounds/3-portrait.png);
+	}
 }
 
 .weather-display .main.almanac {
@@ -30,6 +35,10 @@
 			grid-template-columns: repeat(4, auto);
 		}
 
+		.portrait.enhanced & {
+			display: none;
+		}
+
 		.grid-item {
 			// Reset inherited styles that interfere with grid layout
 			width: auto;
@@ -65,6 +74,23 @@
 		}
 	}
 
+	.portrait.enhanced & {
+		font-size: 28pt;
+
+	}
+
+	.sun.sun-portrait {
+		display: none;
+
+		.portrait.enhanced & {
+			display: grid;
+		}
+
+		.grid-item {
+			margin: 8px 0px;
+		}
+	}
+
 	.moon {
 		position: relative;
 		padding: 7px 50px;
@@ -73,6 +99,8 @@
 		.title {
 			color: c.$column-header-text;
 			padding-left: 13px;
+
+
 		}
 
 		.days {
@@ -93,6 +121,14 @@
 				position: relative;
 				top: -10px;
 			}
+
+			&.wide-enhanced {
+				display: none;
+
+				.wide.enhanced & {
+					display: inline-block;
+				}
+			}
 		}
 	}