feat(core): ✨ clean up print styles

resources/skins.citizen.styles/common/print.less

@@ -1,103 +1,40 @@
 // Hide elements that are not needed in print
 .mw-header,
+.citizen-toc,
 #siteNotice,
 .mw-indicators,
 .page-actions,
 .section-toggle,
 .mw-editsection,
-.catlinks,
+.mw-body-footer,
+#mw-data-after-content,
+#footer-desc,
 #footer-places,
-#footer-bottom {
+.citizen-footer__bottom {
 	display: none;
 }
 
 a {
+	border-bottom: 1px solid #aaa;
 	color: #000;
 }
 
 .firstHeading {
-	margin: 0;
-}
-
-#siteSub {
-	color: @color-base30;
-}
-
-.mw-body-header {
-	margin-bottom: var( --space-md );
-}
-
-.printfooter {
-	font-size: 14px;
-}
-
-.mw-footer {
-	color: @color-base30;
-	font-size: 14px;
-}
-
-#footer-content {
-	padding-top: 10px;
-	border-top: 1px solid;
-	margin-top: 20px;
-}
-
-#footer-info {
-	ul {
-		padding: 0;
-		list-style: none;
-	}
-}
-
-// Table of contents
-.toc {
-	display: table;
-	padding: 10px;
-	border: 1px solid;
 	margin-top: var( --space-md );
-	font-size: 14px;
-
-	&title {
-		padding-bottom: 10px;
-		border-bottom: 1px solid;
-	}
+	margin-bottom: 0;
 }
 
-#mw-toc-heading {
-	margin: 0;
-	font-size: 1rem;
+.citizen-body,
+.mw-body-content {
+	line-height: var( --line-height-xs );
 }
 
-.thumb {
-	margin-top: var( --space-md );
-	margin-bottom: var( --space-md );
-}
-
-// Float styles
-div.tleft,
-div.floatleft,
-table.floatleft {
-	margin-right: 1.4rem;
-	clear: left;
-	float: left;
-}
-
-div.tright,
-div.floatright,
-table.floatright {
-	margin-left: 1.4rem;
-	clear: right;
-	float: right;
+.printfooter {
+	border-top: 1px solid #aaa;
+	clear: both;
+	font-size: 13px;
 }
 
-// Gallery
-.skin-citizen {
-	ul.mw-gallery-packed {
-		&-hover,
-		&-overlay {
-			div.thumb:after {
-				display: none;
-			}
-		}
-	}
+.citizen-footer {
+	margin-top: var( --space-lg );
 }

resources/skins.citizen.styles/skin.less

@@ -2,13 +2,22 @@
 
 @import '../variables.less';
 @import '../mixins.less';
+
+// Common styles
+@import 'fonts.less';
+@import 'common/cssvariables.less';
 @import 'common/typography.less';
+@import 'skinning/elements.less';
+// FIXME: It is not great to load both Parsoid and Parsoid legacy media styles
+// Maybe there is a way to detect it without introducing a new RL module?
+@import 'skinning/content.media-common.less';
+@import 'skinning/content.thumbnails-common.less';
+@import 'skinning/i18n-all-lists-margins.less';
+@import 'skinning/interface-subtitle.less';
 
 @media screen {
 	@import 'layout.less';
-	@import 'fonts.less';
 	@import 'common/theme.less';
-	@import 'common/cssvariables.less';
 	@import 'common/common.less';
 	@import 'common/content.less';
 	@import 'common/scrollbar.less';
@@ -40,18 +49,12 @@
 	@import 'skinning/content.links.less';
 	@import 'skinning/content.externallinks.less';
 	@import 'skinning/content.tables.less';
-	// FIXME: This should not be under screen, fix this when we work on print styles
-	@import 'skinning/content.media-common.less';
+
 	@import 'skinning/content.media-screen.less';
-	// FIXME: This should not be under screen, fix this when we work on print styles
-	@import 'skinning/content.thumbnails-common.less';
 	@import 'skinning/content.thumbnails-screen.less';
-	@import 'skinning/elements.less';
-	@import 'skinning/i18n-all-lists-margins.less';
 	@import 'skinning/interface-edit-section-links.less';
 	@import 'skinning/interface-message-box.less';
 	@import 'skinning/interface-site-notice.less';
-	@import 'skinning/interface-subtitle.less';
 	@import 'skinning/interface.category.less';
 }