Add basic homepage layout
This commit is contained in:
parent
2fbb3b3c44
commit
a1aab90eb9
GPG key ID:
57AFB45680EDD477
9 changed files with 135 additions and 30 deletions
4
static/src/scss/_footer.scss
Normal file
4
static/src/scss/_footer.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
footer.footer {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
51
static/src/scss/_homepage.scss
Normal file
51
static/src/scss/_homepage.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$black: #000;
|
||||
$white: #fff;
|
||||
|
|
@ -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";
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@import "homepage";
|
||||
@import "footer";
|
||||
|
||||
html,
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -2,34 +2,42 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
{% block title_suffix %}
|
||||
{% wagtail_site as current_site %}
|
||||
{% if current_site and current_site.site_name %}:: {{ current_site.site_name }}{% endif %}
|
||||
{% endblock %}
|
||||
</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
{% block title_suffix %}
|
||||
{% wagtail_site as current_site %}
|
||||
{% if current_site and current_site.site_name %}:: {{ current_site.site_name }}{% endif %}
|
||||
{% endblock %}
|
||||
</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'contrib/fontawesome/css/all.min.css' %}">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'contrib/fontawesome/css/all.min.css' %}">
|
||||
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
{% wagtailuserbar %}
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
{% wagtailuserbar %}
|
||||
|
||||
{% include "navbar.html" %}
|
||||
{% include "navbar.html" %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
|
||||
<script async defer type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
|
||||
{% include "footer.html" %}
|
||||
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
<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>
|
||||
|
|
|
|||
12
templates/footer.html
Normal file
12
templates/footer.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<footer class="footer">
|
||||
<div class="has-text-centered">
|
||||
<p>
|
||||
© <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>
|
||||
18
website/home/migrations/0003_homepage_heading.py
Normal file
18
website/home/migrations/0003_homepage_heading.py
Normal file
|
|
@ -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),
|
||||
),
|
||||
]
|
||||
|
|
@ -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")]
|
||||
|
|
|
|||
|
|
@ -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> →
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block darkmode %}{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue