Improve styling of homepage
This commit is contained in:
parent
339ffde323
commit
8a9772bc21
2 changed files with 15 additions and 5 deletions
|
@ -15,13 +15,22 @@ body.page-home-homepage {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3rem;
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-wrapper {
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.latest {
|
.latest {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
background-color: transparentize($black, 0.2);
|
background-color: transparentize($black, 0.2);
|
||||||
|
border-radius: $input-radius;
|
||||||
|
max-width: 75%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
strong,
|
strong,
|
||||||
|
@ -31,8 +40,8 @@ body.page-home-homepage {
|
||||||
}
|
}
|
||||||
|
|
||||||
input#search-input {
|
input#search-input {
|
||||||
|
width: 85%;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
max-width: 25% !important;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: transparentize($black, 0.2) !important;
|
background-color: transparentize($black, 0.2) !important;
|
||||||
color: $white !important;
|
color: $white !important;
|
||||||
|
|
|
@ -4,9 +4,10 @@
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<main {% if page.image %}style="background-image: url({% image_url page.image 'width-1200' %})"{% endif %}>
|
<main {% if page.image %}style="background-image: url({% image_url page.image 'width-1200' %})"{% endif %}>
|
||||||
<h1>{{ page.heading }}</h1>
|
<div class="heading-wrapper">
|
||||||
|
<h1>{{ page.heading }}</h1>
|
||||||
<input id="search-input" class="input" type="text" placeholder="Search">
|
<input id="search-input" class="input" type="text" placeholder="Search">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="box latest">
|
<div class="box latest">
|
||||||
<strong>Latest Post</strong>: <a href="#">{% lorem 6 w random %}</a> →
|
<strong>Latest Post</strong>: <a href="#">{% lorem 6 w random %}</a> →
|
||||||
|
|
Loading…
Reference in a new issue