repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Improve styling of homepage

Browse source
This commit is contained in:
Jake Howard 2022-06-15 14:23:06 +01:00
parent 339ffde323
commit 8a9772bc21
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/src/scss/_homepage.scss
View file

@ -15,13 +15,22 @@ body.page-home-homepage {
}
h1 {
font-size: 3rem;
font-size: 5rem;
}
.heading-wrapper {
text-align: center;
}
.latest {
padding: 0.25rem 0.5rem;
margin-top: 2rem;
background-color: transparentize($black, 0.2);
border-radius: $input-radius;
max-width: 75%;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&,
strong,
@ -31,8 +40,8 @@ body.page-home-homepage {
}
input#search-input {
width: 85%;
margin-top: 15px;
max-width: 25% !important;
text-align: center;
background-color: transparentize($black, 0.2) !important;
color: $white !important;

7
website/home/templates/home/home_page.html
View file

@ -4,9 +4,10 @@
{% block main %}
<main {% if page.image %}style="background-image: url({% image_url page.image 'width-1200' %})"{% endif %}>
<h1>{{ page.heading }}</h1>
<input id="search-input" class="input" type="text" placeholder="Search">
<div class="heading-wrapper">
<h1>{{ page.heading }}</h1>
<input id="search-input" class="input" type="text" placeholder="Search">
</div>
<div class="box latest">
<strong>Latest Post</strong>: <a href="#">{% lorem 6 w random %}</a> &rarr;