47 lines
No EOL
2 KiB
CSS
47 lines
No EOL
2 KiB
CSS
{{- $id := .id }}
|
|
{{- $config := index site.Data.sections $id }}
|
|
|
|
{{- $height := cond (ne $config.height nil) $config.height 100 }}
|
|
{{- $shadow := $config.shadow | default false }}
|
|
{{- $shadowOpacity := $config.shadowOpacity | default 0.4 }}
|
|
{{- $centeredContainerWidth := sub 100 (cond (ne $config.padding nil) $config.padding 30) }}
|
|
{{- $fontColor := $config.fontColor | default "inherit" }}
|
|
{{- $containerLocation := $config.container.location | default "center" }}
|
|
{{- $containerMarginLeft := cond (ne $config.container.margins.left nil) $config.container.margins.left 0 }}
|
|
{{- $containerMarginRight := cond (ne $config.container.margins.right nil) $config.container.margins.right 0 }}
|
|
{{- $containerMarginTop := cond (ne $config.container.margins.top nil) $config.container.margins.top 50 }}
|
|
{{- $containerMarginBottom := cond (ne $config.container.margins.bottom nil) $config.container.margins.bottom 50 }}
|
|
{{- $containerMarginUnit := cond $config.container.margins.usePercentage "%" "px" }}
|
|
{{- $zIndex := cond (ne $config.zIndex nil) $config.zIndex "auto" -}}
|
|
|
|
#{{ $id }} {
|
|
color: {{ $fontColor }};
|
|
width: 100%;
|
|
min-height: {{ $height }}vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: {{ $containerLocation }};
|
|
position: relative;
|
|
background-size: cover;
|
|
box-shadow: {{ cond $shadow ((printf "0px 0px 64px 24px rgba(0, 0, 0, %f)" $shadowOpacity) | safeCSS) "none" }};
|
|
z-index: {{ $zIndex | safeCSS }};
|
|
}
|
|
|
|
#{{ $id }}-centered-container {
|
|
width: {{ $centeredContainerWidth }}%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 10;
|
|
margin-left: {{ $containerMarginLeft }}{{ $containerMarginUnit }};
|
|
margin-right: {{ $containerMarginRight }}{{ $containerMarginUnit }};
|
|
margin-top: {{ $containerMarginTop }}{{ $containerMarginUnit }};
|
|
margin-bottom: {{ $containerMarginBottom }}{{ $containerMarginUnit }};
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
#{{ $id }}-centered-container {
|
|
width: {{ add $centeredContainerWidth 20 }}%;
|
|
}
|
|
} |