Fix and tweaks to theatre mode

* Only show width/height if available (would be None otherwise)
* If image width/height is not available, allow zooming
* Fix styling and cleanup
* Remove footer (reported by Vulp35 on Twitter, thanks!)

src/styles/theatre.sass

@@ -1,21 +1,53 @@
-@import base
-@import _comments
+// Bootstrap variables and utilities.
+@import "../../node_modules/bootstrap/scss/functions"
+@import "../../node_modules/bootstrap/scss/variables"
+@import "../../node_modules/bootstrap/scss/mixins"
+
+// Pillar variables and utilities.
+@import "config"
+@import "utils"
+
+// Bootstrap components.
+@import "../../node_modules/bootstrap/scss/root"
+@import "../../node_modules/bootstrap/scss/reboot"
+
+@import "../../node_modules/bootstrap/scss/type"
+
+@import "../../node_modules/bootstrap/scss/code"
+@import "../../node_modules/bootstrap/scss/grid"
+@import "../../node_modules/bootstrap/scss/dropdown"
+
+@import "../../node_modules/bootstrap/scss/nav"
+@import "../../node_modules/bootstrap/scss/navbar"
+
+@import "../../node_modules/bootstrap/scss/tooltip"
+
+@import "../../node_modules/bootstrap/scss/utilities"
+
+
+// Pillar components.
+@import "apps_base"
+
+@import "components/navbar"
+@import "components/dropdown"
+@import "components/footer"
+@import "components/shortcode"
+
+@import "components/flyout"
+@import "components/buttons"
+@import "components/popover"
+@import "components/tooltip"
+@import "components/checkbox"
+@import "components/overlay"
+@import "components/card"
+
+@import "comments"
+@import "notifications"
 
-$color-theatre-background: #222
-$color-theatre-background-light: lighten($color-theatre-background, 5%)
-$color-theatre-background-dark: darken($color-theatre-background, 5%)
 
 $theatre-width: 350px
 
 body.theatre
-	background-color: $color-theatre-background
-	nav.navbar
-		+media-lg
-			background-color: $color-background-nav
-			background-image: none
-		a.navbar-item.info
-			font-size: 1.4em
-
 	.page-content
 		position: absolute
 		top: 0
@@ -32,15 +64,7 @@ body.theatre
 
 
 #theatre-container
-	display: flex
-	position: relative
-	height: 100%
-	overflow: hidden
-
 	#theatre-media
-		display: flex
-		align-items: center
-		justify-content: center
 		height: 100%
 		width: 100%
 		padding: 25px
@@ -53,7 +77,6 @@ body.theatre
 
 		img
 			display: block
-			border: thin solid $color-theatre-background-light
 			box-shadow: 1px 1px 10px rgba(black, .2)
 			max-width: 100%
 			max-height: 100%
@@ -135,42 +158,16 @@ body.theatre
 					display: block
 
 	#theatre-info
+		min-width: $theatre-width
+		overflow-y: auto
+		position: absolute
+		right: -$theatre-width
+		top: 0
+		transition: right 200ms ease-in-out
 		visibility: hidden
 		width: $theatre-width
-		min-width: $theatre-width
-		height: 100%
-		position: relative
-		top: 0
-		right: -$theatre-width
-		background-color: white
-		border-left: 2px solid $color-background-nav
-		transition: right 200ms ease-in-out
-		position: absolute
-		overflow-y: auto
-
-		.theatre-info-header
-			border-bottom: thin solid $color-background
-			padding-bottom: 10px
-
-			.theatre-info-title
-				padding: 20px 10px 5px 20px
-				font:
-					size: 1.2em
-					weight: 500
-			.theatre-info-user,
-			.theatre-info-date
-				display: inline-block
-				padding: 0 0 0 20px
-				font-size: .9em
-				color: $color-text-dark-secondary
-
 
 		ul.theatre-info-details
-			padding: 10px 20px 0 20px
-			margin: 0
-			list-style: none
-			color: $color-text-dark-primary
-
 			li
 				display: flex
 				padding: 2px 0