Address more feedback on new welcome page

CHANGELOG.txt

@@ -7,6 +7,7 @@ Changelog
  * Added support for Python 3.7 (Matt Westcott)
  * Added `max_count` option on page models to limit the number of pages of a particular type that can be created (Dan Braghis)
  * Document and image choosers now show the document / image's collection (Alejandro Garza, Janneke Janssen)
+ * Added new "Welcome to your Wagtail site" Starter Page when using wagtail start command (Timothy Allen, Scott Cranfill)
  * Fix: Query objects returned from `PageQuerySet.type_q` can now be merged with `|` (Brady Moe)
  * Fix: Add `rel="noopener noreferrer"` to target blank links (Anselm Bradford)
  * Fix: Additional fields on custom document models now show on the multiple document upload view (Robert Rollins, Sergey Fedoseev)

CONTRIBUTORS.rst

@@ -327,6 +327,7 @@ Contributors
 * Stas Rudakou
 * Abdulaziz Alfuhigi
 * Dzianis Sheka
+* Scott Cranfill
 
 Translators
 ===========

docs/releases/2.4.rst

@@ -10,6 +10,14 @@ Wagtail 2.4 release notes
 What's new
 ==========
 
+New "Welcome to your Wagtail site" Starter Page
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+When using the ``wagtail start`` command to make a new site, users will now be greeted with a proper starter page. Thanks to Timothy Allen and Scott Cranfill for pulling this off!
+
+   .. figure:: ../_static/images/tutorial/tutorial_1.png
+      :alt: Wagtail welcome message
+
 
 Other features
 ~~~~~~~~~~~~~~

wagtail/project_template/home/static/css/welcome_page.css

@@ -0,0 +1,172 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    max-width: 960px;
+    min-height: 100vh;
+    margin: 0 auto;
+    padding: 0 15px;
+    color: #231f20;
+    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
+    line-height: 1.25;
+}
+
+a {
+    background-color: transparent;
+    color: #308282;
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #ea1b10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul {
+    padding: 0;
+    margin: 0;
+    font-weight: 400;
+}
+
+main {
+    display: block; /* For IE11 support */
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.logo {
+    width: 150px;
+    margin-right: 20px;
+}
+
+.logo a {
+    display: block;
+}
+
+.figure-logo {
+    max-width: 150px;
+    max-height: 55.1px;
+}
+
+.release-notes {
+    font-size: 14px;
+}
+
+.main {
+    padding: 40px 0;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.figure-space {
+    max-width: 265px;
+}
+
+.main-text {
+    max-width: 400px;
+    margin: 5px auto;
+}
+
+.main-text h1 {
+    font-size: 22px;
+}
+
+.main-text p {
+    margin: 15px auto 0;
+}
+
+.footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-top: 1px solid #e6e6e6;
+    padding: 10px;
+}
+
+.option {
+    display: block;
+    padding: 10px 10px 10px 34px;
+    position: relative;
+    text-decoration: none;
+}
+
+.option svg {
+    width: 24px;
+    height: 24px;
+    fill: gray;
+    border: 1px solid #d9d9d9;
+    padding: 5px;
+    border-radius: 100%;
+    top: 10px;
+    left: 0;
+    position: absolute;
+}
+
+.option h4 {
+    font-size: 19px;
+    text-decoration: underline;
+}
+
+.option p {
+    padding-top: 3px;
+    color: #231f20;
+    font-size: 15px;
+    font-weight: 300;
+}
+
+@media (max-width: 996px) {
+    body {
+        max-width: 780px;
+    }
+}
+
+@media (max-width: 767px) {
+    .option {
+        flex: 0 0 50%;
+    }
+}
+
+@media (max-width: 599px) {
+    .main {
+        padding: 20px 0;
+    }
+
+    .figure-space {
+        max-width: 200px;
+    }
+
+    .footer {
+        display: block;
+        width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 360px) {
+    .header-link {
+        max-width: 100px;
+    }
+}

wagtail/project_template/home/templates/home/home_page.html

@@ -1,11 +1,20 @@
 {% templatetag openblock %} extends "base.html" {% templatetag closeblock %}
+{% templatetag openblock %} load static {% templatetag closeblock %}
 
 {% templatetag openblock %} block body_class {% templatetag closeblock %}template-homepage{% templatetag openblock %} endblock {% templatetag closeblock %}
 
+{% templatetag openblock %} block extra_css {% templatetag closeblock %}
+
+{% templatetag openblock %} comment {% templatetag closeblock %}
+Delete the line below if you're just getting started and want to remove the welcome screen!
+{% templatetag openblock %} endcomment {% templatetag closeblock %}
+<link rel="stylesheet" href="{% templatetag openblock %} static 'css/welcome_page.css' {% templatetag closeblock %}">
+{% templatetag openblock %} endblock extra_css {% templatetag closeblock %}
+
 {% templatetag openblock %} block content {% templatetag closeblock %}
 
 {% templatetag openblock %} comment {% templatetag closeblock %}
-Delete the "include" line below if you're just getting started and want to remove the welcome screen!
+Delete the line below if you're just getting started and want to remove the welcome screen!
 {% templatetag openblock %} endcomment {% templatetag closeblock %}
 {% templatetag openblock %} include 'home/welcome_page.html' {% templatetag closeblock %}