1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
{{if and (.Site.Params.cover) (.IsHome)}}
{{if or (eq (substr .Site.Params.cover 0 7) "http://") (eq (substr .Site.Params.cover 0 8) "https://")}}
<header id="header" class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover}})">
{{ else }}
<header id="header" class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover | absURL}})">
{{ end }}
<div class="max-w-7xl mx-auto p-6 flex flex-col items-center w-full relative">
<div class="block lg:hidden text-white self-end mx-2">
{{ partial "nav-menu-buttons.html" . }}
</div>
<div id="nav-menu" class="absolute right-8 top-16 lg:py-6 lg:my-4 lg:right-0 lg:top-0 hidden lg:block self-end text-white rounded-md bg-black shadow lg:bg-transparent lg:shadow-none">
<nav class="p-2 lg:p-0">
{{ partial "nav-links.html" . }}
</nav>
</div>
<div class="flex-grow w-full flex flex-col justify-center items-center">
{{if .Site.Params.avatar}}
{{if or (eq (substr .Site.Params.avatar 0 7) "http://") (eq (substr .Site.Params.avatar 0 8) "https://")}}
<img alt="{{ .Site.Title }}" class="w-24 h-24 lg:w-32 lg:h-32 rounded-full mb-3" src="{{.Site.Params.avatar}}">
{{ else }}
<img alt="{{ .Site.Title }}" class="w-24 h-24 lg:w-32 lg:h-32 rounded-full mb-3" src="{{.Site.Params.avatar | absURL}}">
{{ end }}
{{ end }}
<a href="{{ .Site.Home.Permalink }}" class="tracking-tighter text-4xl font-semibold flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
{{ .Site.Title }}
</a>
<nav class="text-white">
{{ partial "nav-social-links.html" . }}
</nav>
</div>
</div>
</header>
{{else}}
<header id="header" class="w-full m-0 fixed z-10 transition-all duration-300 ease-in-out border-t-4 border-gray-300 py-4 backdrop-filter-blur">
<div id="header-container" class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative justify-between">
<a href="{{ .Site.Home.Permalink }}" class="tracking-tighter leading-10 text-3xl font-semibold text-gray-600 flex flex-shrink-0">
{{ .Site.Title }}
</a>
<div class="block lg:hidden mx-2">
{{ partial "nav-menu-buttons.html" . }}
</div>
<div class="absolute right-8 top-16 lg:relative lg:right-0 lg:top-0 flex flex-col lg:flex-row items-center rounded-md bg-white shadow lg:bg-transparent lg:shadow-none">
<nav id="nav-social-links" class="p-4 lg:p-0 text-gray-600 hidden lg:block lg:order-last w-full lg:w-auto lg:ml-3">
{{ partial "nav-social-links.html" . }}
</nav>
<nav id="nav-menu" class="p-4 lg:p-0 hidden lg:block w-full lg:w-auto text-gray-600">
{{ partial "nav-links.html" . }}
</nav>
</div>
</div>
</header>
{{end}}
|
