Add basic homepage layout

static/src/scss/_footer.scss

@@ -0,0 +1,4 @@
+footer.footer {
+  margin-top: auto;
+  padding: 1rem;
+}

static/src/scss/_homepage.scss

@@ -0,0 +1,51 @@
+body.page-home-homepage {
+  display: flex;
+  flex-direction: column;
+
+  main {
+    // TODO: Image background
+    background-color: orange;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: $white;
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  .latest {
+    padding: 0.25rem 0.5rem;
+    margin-top: 2rem;
+    background-color: transparentize($black, 0.2);
+
+    &,
+    strong,
+    a {
+      color: $white !important;
+    }
+  }
+
+  input#search-input {
+    margin-top: 15px;
+    max-width: 25% !important;
+    text-align: center;
+    background-color: transparentize($black, 0.2) !important;
+    color: $white !important;
+
+    &::placeholder {
+      color: rgba(214, 210, 205, 0.8) !important;
+    }
+
+    &:focus {
+      border-color: initial !important;
+    }
+  }
+
+  #to-top {
+    display: none;
+  }
+}

static/src/scss/_variables.scss

@@ -0,0 +1,2 @@
+$black: #000;
+$white: #fff;

static/src/scss/base.scss

@@ -5,13 +5,12 @@
 @import "bulma/sass/helpers/_all";
 @import "bulma/sass/grid/_all";
 @import "bulma/sass/components/navbar";
+@import "bulma/sass/form/shared";
+@import "bulma/sass/form/input-textarea";
 
 @import "navbar";
-
+@import "homepage";
-body {
+@import "footer";
-  display: flex;
-  flex-direction: column;
-}
 
 html,
 body {

templates/base.html

@@ -25,11 +25,19 @@
 
     {% include "navbar.html" %}
 
+    <main>
       {% block content %}{% endblock %}
+    </main>
+
+    {% include "footer.html" %}
 
     <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
+
+    {% block darkmode %}
       <script async defer type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
+    {% endblock %}
 
     {% block extra_js %}{% endblock %}
+
   </body>
 </html>

templates/footer.html

@@ -0,0 +1,12 @@
+<footer class="footer">
+  <div class="has-text-centered">
+    <p>
+      &copy; <a href="/">TheOrangeOne</a> {% now "Y" %}
+    </p>
+  </div>
+  <div class="has-text-centered is-size-7" id="to-top">
+    <p>
+      <a href="">To top <em>in style</em></a>
+    </p>
+  </div>
+</footer>

website/home/migrations/0003_homepage_heading.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.0.5 on 2022-06-12 20:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("home", "0002_create_homepage"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="homepage",
+            name="heading",
+            field=models.CharField(blank=True, max_length=128),
+        ),
+    ]

website/home/models.py

@@ -1,5 +1,10 @@
+from django.db import models
+from wagtail.admin.panels import FieldPanel
+
 from website.common.models import BasePage
 
 
 class HomePage(BasePage):
-    pass
+    heading = models.CharField(max_length=128, blank=True)
+
+    content_panels = BasePage.content_panels + [FieldPanel("heading")]

website/home/templates/home/home_page.html

@@ -1,7 +1,13 @@
 {% extends "wagtail_base.html" %}
 
 {% block content %}
+<h1>{{ page.heading }}</h1>
 
-Content
+<input id="search-input" class="input" type="text" placeholder="Search">
 
+<div class="box latest">
+  <strong>Latest Post</strong>: <a href="#">Do thing good, and other thing better</a> &rarr;
+</div>
 {% endblock content %}
+
+{% block darkmode %}{% endblock %}