casper-with-landing-page/landing-page.hbs

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 - 105.5px);
}
.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>