update home page layout, remove author image
This commit is contained in:
mtvnnb
parent
f329b3f2cb
commit
3425745912
2 changed files with 203 additions and 1 deletions
|
|
@ -29,7 +29,7 @@
|
|||
{{- partial "navigators/navbar.html" . -}}
|
||||
|
||||
<!--- ADD HOME SECTION ---------------->
|
||||
{{- partial "sections/home.html" . -}}
|
||||
{{- partial "sections/home_coexistspace.html" . -}}
|
||||
|
||||
<!--- ADD OPTIONAL SECTIONS ----------->
|
||||
{{ $sections:= site.Data.sections }}
|
||||
|
|
|
|||
202
layouts/partials/sections/home_coexistspace.html
Normal file
202
layouts/partials/sections/home_coexistspace.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
{{ $author:= site.Data.author }}
|
||||
{{ if (index site.Data site.Language.Lang).author }}
|
||||
{{ $author = (index site.Data site.Language.Lang).author }}
|
||||
{{ end }}
|
||||
|
||||
{{ $name:="Jane Doe" }}
|
||||
{{ if $author.nickname }}
|
||||
{{ $name = $author.nickname }}
|
||||
{{ else if $author.name }}
|
||||
{{ $name = $author.name }}
|
||||
{{ end }}
|
||||
|
||||
{{ $sections:= site.Data.sections }}
|
||||
{{ if (index site.Data site.Language.Lang).sections }}
|
||||
{{ $sections = (index site.Data site.Language.Lang).sections }}
|
||||
{{ end }}
|
||||
|
||||
{{ $backgroundImage:= "/images/default-background.jpg" }}
|
||||
{{ if site.Params.background }}
|
||||
{{ $backgroundImage = site.Params.background }}
|
||||
{{ end }}
|
||||
|
||||
{{ $darkBackgroundImage:= $backgroundImage }}
|
||||
{{ if site.Params.darkBackground }}
|
||||
{{ $darkBackgroundImage = site.Params.darkBackground }}
|
||||
{{ end }}
|
||||
|
||||
{{ $authorImage:= "/images/default-avatar.png" }}
|
||||
{{ if $author.image }}
|
||||
{{ $authorImage = $author.image }}
|
||||
{{ end }}
|
||||
{{ $authorImage := resources.Get $authorImage }}
|
||||
|
||||
{{/* apply image processing. don't use "Fit" in svg or gif because its not supported */}}
|
||||
{{ if and $authorImage (and (ne $authorImage.MediaType.SubType "svg") ( ne $authorImage.MediaType.SubType "gif")) }}
|
||||
{{ $authorImage = $authorImage.Fit "148x148" }}
|
||||
{{ end }}
|
||||
{{/* get file that matches the filename as specified as src="" in shortcode */}}
|
||||
{{ $src := resources.Get $backgroundImage }}
|
||||
|
||||
{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
|
||||
|
||||
{{ $tinyw := default "500x" }}
|
||||
{{ $smallw := default "800x" }}
|
||||
{{ $mediumw := default "1200x" }}
|
||||
{{ $largew := default "1500x" }}
|
||||
|
||||
{{/* resize the src image to the given sizes */}}
|
||||
|
||||
{{ $tiny := $src.Resize $tinyw }}
|
||||
{{ $small := $src.Resize $smallw }}
|
||||
{{ $medium := $src.Resize $mediumw }}
|
||||
{{ $large := $src.Resize $largew }}
|
||||
|
||||
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
|
||||
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
|
||||
|
||||
{{ if lt $src.Width "500" }}
|
||||
{{ $tiny := $src}}
|
||||
{{ $small := $src}}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "800" }}
|
||||
{{ $small := $src}}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1200" }}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1500" }}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{/* get file that matches the filename as specified as src="" in shortcode */}}
|
||||
{{ $darkSrc := resources.Get $darkBackgroundImage }}
|
||||
|
||||
{{/* resize the src image to the given sizes */}}
|
||||
|
||||
{{ $darkTiny := $darkSrc.Resize $tinyw }}
|
||||
{{ $darkSmall := $darkSrc.Resize $smallw }}
|
||||
{{ $darkMedium := $darkSrc.Resize $mediumw }}
|
||||
{{ $darkLarge := $darkSrc.Resize $largew }}
|
||||
|
||||
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
|
||||
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
|
||||
|
||||
{{ if lt $darkSrc.Width "500" }}
|
||||
{{ $darkTiny := $src}}
|
||||
{{ $darkSmall := $src}}
|
||||
{{ $darkMedium := $src}}
|
||||
{{ $darkLarge := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "800" }}
|
||||
{{ $darkSmall := $src}}
|
||||
{{ $darkMedium := $src}}
|
||||
{{ $darkLarge := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1200" }}
|
||||
{{ $darkMedium := $src}}
|
||||
{{ $darkLarge := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1500" }}
|
||||
{{ $darkLarge := $src}}
|
||||
{{ end }}
|
||||
|
||||
<div class="container-fluid home" id="home">
|
||||
<style>
|
||||
/* 0 to 299 */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $tiny.RelPermalink }}');
|
||||
}
|
||||
/* 300 to X */
|
||||
@media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $small.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $medium.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $large.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1501px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $src.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
/* 0 to 299 */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $darkTiny.RelPermalink }}');
|
||||
}
|
||||
/* 300 to X */
|
||||
@media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $darkSmall.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $darkMedium.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $darkLarge.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1501px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ $darkSrc.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<span class="on-the-fly-behavior"></span>
|
||||
<div
|
||||
id="homePageBackgroundImageDivStyled"
|
||||
class="background container-fluid"
|
||||
></div>
|
||||
<div class="container content text-center">
|
||||
<h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
|
||||
{{ if $author.subtitle }}
|
||||
<h2 class="greeting-subtitle">{{ $author.subtitle }}</h2>
|
||||
{{ end }}
|
||||
<div class="typing-carousel">
|
||||
<span id="ityped" class="ityped"></span>
|
||||
<span class="ityped-cursor"></span>
|
||||
</div>
|
||||
<ul id="typing-carousel-data">
|
||||
{{ if $author.summary }}
|
||||
{{ range $author.summary }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end}}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if $sections }}
|
||||
{{ range first 1 (where (sort $sections "section.weight") ".section.enable" true) }}
|
||||
{{ $sectionID := replace (lower .section.name) " " "-" }}
|
||||
{{ if .section.id }}
|
||||
{{ $sectionID = .section.id }}
|
||||
{{ end }}
|
||||
<a href="#{{ $sectionID }}" class="arrow-center" aria-label="{{ i18n "read" }} {{ i18n "more" }} - {{ $name }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue