Improve legibility of textual content

2 files changed, 84 insertions, 27 deletions

diff --git a/app/scss/custom.scss b/app/scss/custom.scss
index 419edb0..5aaf146 100644
--- a/app/scss/custom.scss
+++ b/app/scss/custom.scss
@@ -3,12 +3,54 @@
 @import "packagegrid.scss";
 @import "comments.scss";
 
+h1 {
+	font-size: 2em;
+	font-weight: bold;
+	margin: 0 0 0.5em;
+	letter-spacing: .05em
+}
+
+h2 {
+	font-size: 1.8em;
+	font-weight: bold;
+	color: white;
+	margin: 1.5em 0 1em;
+	letter-spacing: .05em;
+	padding: 0 0 0.5em 0;
+	border-bottom: 1px solid #444;
+}
+
+h3 {
+	font-size: 1.3em;
+	font-weight: bold;
+	color: white;
+	margin: 1.5em 0 1em;
+	letter-spacing: .05em
+}
+
+p, .content li {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased !important;
+	-moz-font-smoothing: antialiased !important;
+	text-rendering: optimizelegibility !important;
+	letter-spacing: .03em;
+	line-height: 1.6em;
+}
+
+pre code {
+	display: block;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background: rgba(255, 255, 255, 0.03);
+	padding: 0.75rem 1.25rem;
+	border-radius: 0.25rem;
+}
+
 .dropdown-menu {
 	margin-top: 0;
 }
 
 .dropdown:hover .dropdown-menu {
-   display: block;
+	display: block;
 }
 
 .nav-link > img {
@@ -57,8 +99,15 @@
 	text-decoration: none;
 }
 
-.card .table {
-	margin-bottom: 0;
+.card {
+	.card-header {
+		margin: 0;
+		font-size: 100%;
+		font-weight: normal;
+	}
+	.table {
+		margin-bottom: 0;
+	}
 }
 
 .btn-download {
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index 0c29a26..e5f684b 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -38,35 +38,43 @@ li.d-flex {
 	bottom: 0;
 	left: 0;
 	padding: 1em;
-}
 
-.packagegridinfo h3 {
-	color: white;
-	font-size: 120%;
-	font-weight: bold;
-}
+	h3 {
+		color: white;
+		font-size: 120%;
+		font-weight: bold;
+		margin: 0;
+		padding: 0;
+	}
 
-.packagegridinfo small {
-	color: #ddd;
-	font-size: 75%;
-	font-weight: bold;
-}
+	small {
+		color: #ddd;
+		font-size: 75%;
+		font-weight: bold;
+	}
 
-.packagegridinfo p {
-	display: none;
-	color: #ddd;
-	font-weight: normal;
+	p {
+		display: none;
+		color: #ddd;
+		font-weight: normal;
+	}
 }
 
-.packagetile a:hover .packagegridinfo {
-	top: 0;
-}
+.packagetile a:hover  {
+	.packagegridinfo {
+		top: 0;
+	}
 
-.packagetile a:hover p {
-	display: block;
-}
+	h3 {
+		margin-bottom: 0.5em;
+	}
+
+	p {
+		display: block;
+	}
 
-.packagetile a:hover .packagegridscrub {
-	top: 0;
-	background: rgba(0,0,0,0.8);
+	.packagegridscrub {
+		top: 0;
+		background: rgba(0,0,0,0.8);
+	}
 }