Improve legibility of textual content

app/flatpages/help/top_packages.md

@@ -10,7 +10,7 @@ whereas a non-free package will only gain 0.1 score.
 A package currently only gains score through downloads.
 In the future, a package will also gain score through reviews.
 
-## Seed using a legacy heuristic
+## Seeded using a legacy heuristic
 
 The scoring system was seeded (ie: the scores were initially set to) 20% of an
 arbitrary legacy heuristic that was previously used to rank packages.

app/flatpages/policy_and_guidance.md

@@ -76,7 +76,7 @@ to change the name of the package, or your package won't be accepted.
 
 We reserve the right to issue exceptions for this where we feel necessary.
 
-### 3.2 Mod Forks and Reimplementations
+### 3.2. Mod Forks and Reimplementations
 
 An exception to the above is that mods are allowed to have the same name as a
 mod if its a fork of that mod (or a close reimplementation). In real terms, it
@@ -88,7 +88,7 @@ reimplementation of the mod that owns the name.
 
 ## 4. Licenses
 
-### 4.1 Allowed Licenses
+### 4.1. Allowed Licenses
 
 Please ensure that you correctly credit any resources (code, assets, or otherwise)
 that you have used in your package.
@@ -106,7 +106,7 @@ get around to adding it.
 Please note that the definitions of "free" and "non-free" is the same as that
 of the [Free Software Foundation](https://www.gnu.org/philosophy/free-sw.en.html).
 
-### 4.2 Recommended Licenses
+### 4.2. Recommended Licenses
 
 It is highly recommended that you use a free and open source software license.
 FOSS licenses result in a sharing community and will increase the number of potential users your package has.

app/scss/custom.scss

@@ -3,6 +3,48 @@
 @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;
 }
@@ -57,9 +99,16 @@
 	text-decoration: none;
 }
 
-.card .table {
+.card {
+	.card-header {
+		margin: 0;
+		font-size: 100%;
+		font-weight: normal;
+	}
+	.table {
 		margin-bottom: 0;
 	}
+}
 
 .btn-download {
 	color: #fff;

app/scss/packagegrid.scss

@@ -38,35 +38,43 @@ li.d-flex {
 	bottom: 0;
 	left: 0;
 	padding: 1em;
-}
 
-.packagegridinfo h3 {
+	h3 {
 		color: white;
 		font-size: 120%;
 		font-weight: bold;
+		margin: 0;
+		padding: 0;
 	}
 
-.packagegridinfo small {
+	small {
 		color: #ddd;
 		font-size: 75%;
 		font-weight: bold;
 	}
 
-.packagegridinfo p {
+	p {
 		display: none;
 		color: #ddd;
 		font-weight: normal;
 	}
+}
 
-.packagetile a:hover .packagegridinfo {
+.packagetile a:hover  {
+	.packagegridinfo {
 		top: 0;
 	}
 
-.packagetile a:hover p {
+	h3 {
+		margin-bottom: 0.5em;
+	}
+
+	p {
 		display: block;
 	}
 
-.packagetile a:hover .packagegridscrub {
+	.packagegridscrub {
 		top: 0;
 		background: rgba(0,0,0,0.8);
 	}
+}

app/templates/base.html

@@ -7,7 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=10">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=11">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">

app/templates/flatpage.html

@@ -4,8 +4,10 @@
 {{ page['title'] }}
 {% endblock %}
 
-{% block content %}
+{% block container %}
+	<main class="container mt-4 content">
 		{% if not page["no_h1"] %}<h1>{{ page['title'] }}</h1>{% endif %}
 
 		{{ page.html | safe }}
+	</main>
 {% endblock %}