127 lines
3.1 KiB
Handlebars
127 lines
3.1 KiB
Handlebars
|
{{!< default}}
|
||
|
{{!-- The tag above means: insert everything in this file
|
||
|
into the {body} of the default.hbs template --}}
|
||
|
|
||
|
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
|
||
|
<header class="site-home-header">
|
||
|
{{> header-background background=@site.cover_image}}
|
||
|
{{!--Special header-image.hbs partial to generate the background image--}}
|
||
|
<div class="inner">
|
||
|
{{> "site-nav"}}
|
||
|
<div class="site-header-content">
|
||
|
<h1 class="site-title">
|
||
|
{{#if @site.logo}}
|
||
|
<img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
|
||
|
{{else}}
|
||
|
{{@site.title}}
|
||
|
{{/if}}
|
||
|
</h1>
|
||
|
<h2 class="site-description">{{@site.description}}</h2>
|
||
|
<div class="user-links">
|
||
|
<ul id="link-list">
|
||
|
{{!-- <li class="link">
|
||
|
<a href="#"><i class="fa fa-gitea"></i></a>
|
||
|
</li>
|
||
|
<li class="link">
|
||
|
<a href="#"><i class="fa fa-github"></i></a>
|
||
|
</li> --}}
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</header>
|
||
|
|
||
|
|
||
|
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||
|
{{#contentFor "scripts"}}
|
||
|
<script>
|
||
|
$(function () {
|
||
|
const linkList = document.getElementById('link-list');
|
||
|
if (landing_page_links) {
|
||
|
landing_page_links.forEach(link => {
|
||
|
const a = document.createElement('a');
|
||
|
a.href = link.href;
|
||
|
a.target = '_blank';
|
||
|
const icon = document.createElement('i');
|
||
|
icon.className = `fa fa-fw fa-${link.service}`;
|
||
|
a.appendChild(icon);
|
||
|
const li = document.createElement('li');
|
||
|
li.classList.add('link');
|
||
|
li.appendChild(a);
|
||
|
linkList.appendChild(li);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
});
|
||
|
</script>
|
||
|
{{/contentFor}}
|
||
|
|
||
|
<style>
|
||
|
div.outer {
|
||
|
height: calc(100vh - 109px);
|
||
|
}
|
||
|
|
||
|
.site-header-content {
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
right: 50%;
|
||
|
width: 100%;
|
||
|
transform: translate(50%, -50%);
|
||
|
}
|
||
|
|
||
|
.user-links {
|
||
|
margin-top: 25px;
|
||
|
}
|
||
|
|
||
|
.user-links ul {
|
||
|
list-style-type: none;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.link {
|
||
|
font-size: 3rem;
|
||
|
margin-left: 5px;
|
||
|
display: inline;
|
||
|
}
|
||
|
|
||
|
.user-links ul[:last-child] {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
|
||
|
.user-links a {
|
||
|
color: hsla(0, 0%, 100%, .75);
|
||
|
}
|
||
|
|
||
|
.site-logo {
|
||
|
max-height: 128px;
|
||
|
}
|
||
|
|
||
|
.user-links a:hover {
|
||
|
color: rgb(60, 178, 199);
|
||
|
}
|
||
|
|
||
|
.nav li a::before {
|
||
|
background: rgb(60, 178, 199);
|
||
|
}
|
||
|
|
||
|
.nav li a:hover::before {
|
||
|
animation: pulse 2s;
|
||
|
animation-iteration-count: infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes pulse {
|
||
|
0% {
|
||
|
opacity: .5;
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: .5;
|
||
|
}
|
||
|
}
|
||
|
</style>
|