openalt_ro/themes/openalt/layout/layout.ejs

144 lines
5.7 KiB
Text

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<%= config.description %>">
<meta name="author" content="<%= config.author %>">
<meta name="title" content="<%= config.title %> - <%= config.subtitle %>">
<meta name="theme-color" content="<%= theme.primary_color %>">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="<%= config.title %>">
<meta property="og:description" content="<%= config.description %>">
<meta property="og:image" content="<%= url_for(theme.banner) %>">
<meta property="og:type" content="website">
<meta property="og:url" content="<%= config.url %>">
<link rel="icon" href="<%= url_for(theme.favicon) %>">
<script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<title><%= config.title %></title>
<link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
<style>
a:hover {
color: <%= theme.primary_color %>;
}
</style>
</head>
<body>
<div class="body">
<header class="topbar">
<nav>
<!-- Avatar -->
<a href="/" class="topbar-avatar">
<div class="topbar-header">
<img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
</div>
</a>
<span class="menu">
<!-- Topbar Menu -->
<% theme.topbar_menu.forEach(function(menu) { %>
<% if (menu.enable) { %>
<a href="<%= menu.url %>">
<%= menu.name %>
</a>
<% } %>
<% }); %>
</span>
<span class="social">
<% theme.social.forEach(function(social) { %>
<% if (social.enable) { %>
<span class="social-icon">
<% if (social.relme) { %>
<a rel="me" href="<%= social.url %>" target="_blank">
<% } else { %>
<a href="<%= social.url %>" target="_blank">
<% } %>
<% if (theme.fontawesome) { %>
<i class="<%= social.icon %>"></i>
<% } else { %>
<img src='<%= url_for(theme.avatar) %>'></img>
<% } %>
</a>
</span>
<% } %>
<% }); %>
</span>
</nav>
</header>
<main>
<!-- BODY -->
<div class="content">
<%- body %>
</div>
</main>
<!-- Newsletter side tab -->
<div class="newsletter-tab" id="newsletterTab">
<div class="newsletter-tab-label" id="newsletterLabel">Newsletter</div>
<div class="newsletter-tab-panel">
<p class="newsletter-tab-heading">Get notified about future events</p>
<form action="https://listmonk.hackman.club/subscription/form" method="post" class="newsletter-tab-form">
<input type="hidden" name="l" value="720a8345-78db-420c-ad80-0cfa2be62d9e">
<input type="text" name="name" placeholder="Your name" class="newsletter-input">
<input type="email" name="email" placeholder="your@email.com" required class="newsletter-input">
<button type="submit" class="newsletter-btn">Subscribe</button>
</form>
</div>
</div>
<script>
(function() {
var tab = document.getElementById('newsletterTab');
var label = document.getElementById('newsletterLabel');
var focused = false;
tab.addEventListener('mouseenter', function() { tab.classList.add('is-open'); });
tab.addEventListener('mouseleave', function() { if (!focused) tab.classList.remove('is-open'); });
tab.querySelectorAll('input').forEach(function(el) {
el.addEventListener('focus', function() { focused = true; });
el.addEventListener('blur', function() { focused = false; });
});
label.addEventListener('click', function() {
focused = false;
tab.classList.remove('is-open');
});
document.addEventListener('click', function(e) {
if (!tab.contains(e.target)) {
focused = false;
tab.classList.remove('is-open');
}
});
})();
</script>
<!-- Footer -->
<footer>
<div class="footer smoll">
<% if (theme.hexo) { %>
<div class="hexo footer">
Powered by Hexo, theme <a href="https://openalt.ro" target="_blank">OpenAlt</a><br>
</div>
<% } %>
<% if (theme.copyright) { %>
<div class="copy footer">
&copy; <%= theme.copy_year %> <%= config.author %>
</div>
<% } %>
</div>
</footer>
</div>
</body>
</html>