allow also to control the fitting of the image

- cover remains the default, but with breakpoints one gains flexibility an can add rules for different devices
This commit is contained in:
Cyrill Raccaud 2024-10-12 14:30:44 +02:00 committed by GitHub
parent d11d1d2014
commit c0ba0dd298
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 4 deletions

View File

@ -34,8 +34,8 @@ site_logo = ""
description = "The last theme you'll ever need. Maybe." description = "The last theme you'll ever need. Maybe."
# choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-" # choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
background_color_class = "bg-black" background_color_class = "bg-black"
# choose an alignment style for the featured image from "bg-top|bg-center|bg-bottom", or add any other class space-separated to customize further # choose an fitting and alignment style for the featured image using tachyons classes such as "cover|contain" for fitting and "bg-top|bg-center|bg-bottom" for alignment, or add any other class space-separated to customize further
featured_image_class = "bg-top" featured_image_class = "cover bg-top"
recent_posts_number = 3 recent_posts_number = 3
[[params.ananke_socials]] [[params.ananke_socials]]

View File

@ -1,7 +1,7 @@
{{ $featured_image := partial "func/GetFeaturedImage.html" . }} {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
{{ if $featured_image }} {{ if $featured_image }}
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
<header class="cover {{ .Params.featured_image_class | .Site.Params.featured_image_class | default "bg-top" }}" style="background-image: url('{{ $featured_image }}');"> <header class="{{ .Params.featured_image_class | .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
<div class="bg-black-60"> <div class="bg-black-60">
{{ partial "site-navigation.html" . }} {{ partial "site-navigation.html" . }}
<div class="tc-l pv6 ph3 ph4-ns"> <div class="tc-l pv6 ph3 ph4-ns">

View File

@ -1,7 +1,7 @@
{{ $featured_image := partial "func/GetFeaturedImage.html" . }} {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
{{ if $featured_image }} {{ if $featured_image }}
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
<header class="cover {{ .Site.Params.featured_image_class | default "bg-top" }}" style="background-image: url('{{ $featured_image }}');"> <header class="{{ .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
<div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}"> <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
{{ partial "site-navigation.html" .}} {{ partial "site-navigation.html" .}}
<div class="tc-l pv4 pv6-l ph3 ph4-ns"> <div class="tc-l pv4 pv6-l ph3 ph4-ns">