From 9c3e5d3990137b5ea33d4498634aa4d83fa408ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Tue, 29 Aug 2023 15:38:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(home-banner):=20allow=20miss?= =?UTF-8?q?ing=20image=20&=20correct=20spacing=20(#123)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Also removes the necessity for $BASE_URL in specifying home banner images. --- README.md | 2 +- content/_index.ca.md | 2 +- content/_index.es.md | 2 +- content/_index.md | 2 +- sass/parts/_home-banner.scss | 118 +++++++++++++++----------------- templates/macros/page_desc.html | 18 +++-- 6 files changed, 75 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index aa16fa384..61e7a92dd 100644 --- a/README.md +++ b/README.md @@ -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…". diff --git a/content/_index.ca.md b/content/_index.ca.md index 9548331e2..8a8debd59 100644 --- a/content/_index.ca.md +++ b/content/_index.ca.md @@ -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 +++ diff --git a/content/_index.es.md b/content/_index.es.md index cd15e68c2..8301a8c7d 100644 --- a/content/_index.es.md +++ b/content/_index.es.md @@ -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 +++ diff --git a/content/_index.md b/content/_index.md index 270ddd31c..f69840998 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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 +++ diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss index 622b5e115..494063ba4 100644 --- a/sass/parts/_home-banner.scss +++ b/sass/parts/_home-banner.scss @@ -1,79 +1,75 @@ #banner-container-home { display: flex; - width: 100%; - margin: 0.2rem auto; - align-items: center; justify-content: center; -} + align-items: center; + margin: 0.2rem auto; + width: 100%; -.image-container-home { - position: relative; - width: 22%; - overflow: hidden; - text-align: center; -} + @media only screen and (max-width: 600px) { + display: block; + margin-bottom: 2rem; + } -#home-banner-text { - width: 78%; - margin-bottom: 30px; - font-size: 1.875rem; - line-height: 3rem; - color: var(--primary-color); -} + #home-banner-text { + margin-bottom: 1.5rem; + color: var(--primary-color); + font-size: 1.875rem; + line-height: 3rem; -.home-banner-header { - margin-bottom: 1rem; - font-size: 2.8rem; - font-weight: 550; -} + #home-banner-header { + margin-bottom: 1rem; + font-weight: 550; + font-size: 2.8rem; -#banner-home-subtitle { - width: 95%; - padding-right: 5%; - font-weight: 250; - line-height: 1.75rem; - color: var(--text-color); -} + @media only screen and (max-width: 600px) { + margin-bottom: 0; + font-size: 2.2rem; + } + } -#banner-home-subtitle p { - font-size: 1rem; -} + #banner-home-subtitle { + color: var(--text-color); + font-weight: 250; + line-height: 1.75rem; -#banner-home-subtitle a { - font-weight: 400; -} + p { + font-size: 1rem; + } -.banner-home-img { - aspect-ratio: 1 / 1; - max-width: 15rem; - max-height: 15rem; - width: 100%; - height: auto; - border: none; -} + a { + font-weight: 400; + } + } -@media only screen and (max-width: 600px) { - #banner-container-home { - display: block; - margin: 0em auto; - margin-bottom: 2rem; + @media only screen and (max-width: 600px) { + width: 100%; + } } - .home-banner-header { - font-size: 2.2rem; - margin-bottom: 0; - } + #image-container-home { + position: relative; + padding-left: 2rem; + min-width: 11rem; + min-height: 11rem; + overflow: hidden; + text-align: center; - .banner-home-img { - max-width: 12rem; - max-height: 12rem; - } + #banner-home-img { + border: none; + aspect-ratio: 1 / 1; + width: 100%; + max-width: 15rem; + height: auto; + max-height: 15rem; - .image-container-home { - width: 95%; - } + @media only screen and (max-width: 600px) { + max-width: 12rem; + max-height: 12rem; + } + } - #home-banner-text { - width: 95%; + @media only screen and (max-width: 600px) { + padding-left: 0; + } } } diff --git a/templates/macros/page_desc.html b/templates/macros/page_desc.html index 2449145a8..0b59b0f9b 100644 --- a/templates/macros/page_desc.html +++ b/templates/macros/page_desc.html @@ -2,14 +2,24 @@ {% endmacro %}