alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

🐛 fix(home-banner): allow missing image & correct spacing (#123)

Browse Source 
Also removes the necessity for $BASE_URL in specifying home banner images.
This commit is contained in:
Óscar 2023-08-29 15:38:51 +02:00 committed by GitHub
parent 7d8ed20c24
commit 9c3e5d3990
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -101,7 +101,7 @@ section_path = "blog/_index.md"
```
[extra]
header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }
header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
```
The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…".

2
content/_index.ca.md
View File

@ -5,7 +5,7 @@ sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hola! Soc tabi~", img = "$BASE_URL/img/main.webp" }
header = {title = "Hola! Soc tabi~", img = "img/main.webp" }
section_path = "blog/_index.ca.md"
max_posts = 4
+++

2
content/_index.es.md
View File

@ -5,7 +5,7 @@ sort_by = "date"
template = "section.html"
[extra]
header = {title = "¡Hola! Soy tabi~", img = "$BASE_URL/img/main.webp" }
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp" }
section_path = "blog/_index.es.md"
max_posts = 4
+++

2
content/_index.md
View File

@ -5,7 +5,7 @@ sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }
header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
section_path = "blog/_index.md"
max_posts = 4
+++

130
sass/parts/_home-banner.scss
View File

@ -1,79 +1,75 @@
#banner-container-home {
display: flex;
width: 100%;
margin: 0.2rem auto;
align-items: center;
justify-content: center;
}
.image-container-home {
position: relative;
width: 22%;
overflow: hidden;
text-align: center;
}
#home-banner-text {
width: 78%;
margin-bottom: 30px;
font-size: 1.875rem;
line-height: 3rem;
color: var(--primary-color);
}
.home-banner-header {
margin-bottom: 1rem;
font-size: 2.8rem;
font-weight: 550;
}
#banner-home-subtitle {
width: 95%;
padding-right: 5%;
font-weight: 250;
line-height: 1.75rem;
color: var(--text-color);
}
#banner-home-subtitle p {
font-size: 1rem;
}
#banner-home-subtitle a {
font-weight: 400;
}
.banner-home-img {
aspect-ratio: 1 / 1;
max-width: 15rem;
max-height: 15rem;
align-items: center;
margin: 0.2rem auto;
width: 100%;
height: auto;
border: none;
}
@media only screen and (max-width: 600px) {
#banner-container-home {
@media only screen and (max-width: 600px) {
display: block;
margin: 0em auto;
margin-bottom: 2rem;
}
.home-banner-header {
font-size: 2.2rem;
margin-bottom: 0;
}
.banner-home-img {
max-width: 12rem;
max-height: 12rem;
}
.image-container-home {
width: 95%;
}
#home-banner-text {
width: 95%;
margin-bottom: 1.5rem;
color: var(--primary-color);
font-size: 1.875rem;
line-height: 3rem;
#home-banner-header {
margin-bottom: 1rem;
font-weight: 550;
font-size: 2.8rem;
@media only screen and (max-width: 600px) {
margin-bottom: 0;
font-size: 2.2rem;
}
}
#banner-home-subtitle {
color: var(--text-color);
font-weight: 250;
line-height: 1.75rem;
p {
font-size: 1rem;
}
a {
font-weight: 400;
}
}
@media only screen and (max-width: 600px) {
width: 100%;
}
}
#image-container-home {
position: relative;
padding-left: 2rem;
min-width: 11rem;
min-height: 11rem;
overflow: hidden;
text-align: center;
#banner-home-img {
border: none;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 15rem;
height: auto;
max-height: 15rem;
@media only screen and (max-width: 600px) {
max-width: 12rem;
max-height: 12rem;
}
}
@media only screen and (max-width: 600px) {
padding-left: 0;
}
}
}

18
templates/macros/page_desc.html
View File

@ -2,14 +2,24 @@
<div id="banner-container-home">
<div id="home-banner-text">
<div class="home-banner-header">{{ desc.title }}</div>
<div id="home-banner-header">{{ desc.title }}</div>
<section id="banner-home-subtitle">
{{ page.content | safe }}
</section>
</div>
<div class="image-container-home">
<img alt="the owner" class="banner-home-img" src={{ desc.img | replace(from="$BASE_URL", to=config.base_url) | safe}} />
</div>
{%- if desc.img -%}
{# Check if the image contains "$BASE_URL". This feature will be removed in the future #} {# in favour of using the proper image path. It will be a breaking change. #}
{%- if desc.img is containing("$BASE_URL") -%}
{%- set image_path = desc.img | replace(from="$BASE_URL", to=config.base_url) | safe -%}
{# When the feature is removed, uncomment below to throw a descriptive error #}
{# {{ throw(message="ERROR: The image path for the header should not contain '$BASE_URL'. Please remove it and use the proper image path.") }} #}
{%- else -%}
{%- set image_path = get_url(path=desc.img, trailing_slash=false) | safe -%}
{%- endif -%}
<div id="image-container-home">
<img alt="the owner" id="banner-home-img" src="{{ image_path }}" />
</div>
{%- endif -%}
</div>
{% endmacro %}