103 lines
No EOL
4.9 KiB
HTML
103 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Yan Lin{% endblock %}</title>
|
|
<link rel="icon" href="/logo.webp" type="image/x-icon">
|
|
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/index.css">
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
|
|
<body>
|
|
<main class="container">
|
|
{% if is_home_page %}
|
|
<header class="border-bottom lh-1 pt-3 pb-0 border-secondary">
|
|
{% else %}
|
|
<header class="border-bottom lh-1 py-3 border-secondary">
|
|
{% endif %}
|
|
<div class="row flex-nowrap justify-content-between align-items-center">
|
|
<div class="col-2">
|
|
{% block header_left %}
|
|
{% if is_home_page %}
|
|
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="mailto:s@yanlincs.com">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
|
|
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/>
|
|
</svg>
|
|
</a>
|
|
{% else %}
|
|
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="/">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
|
|
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
|
|
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
{% endblock %}
|
|
</div>
|
|
<div class="col-8 text-center">
|
|
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">{% block header_title %}Yan Lin's Homepage{% endblock %}</div>
|
|
</div>
|
|
<div class="col-2 d-flex justify-content-end">
|
|
{% block header_right %}
|
|
{% if is_home_page %}
|
|
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="https://github.com/Logan-Lin" target="_blank">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
{% block navigation %}{% endblock %}
|
|
</header>
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p class="text-center text-secondary footer-text">
|
|
Designed and implemented by Yan Lin.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Show or hide the back-to-top button
|
|
window.addEventListener('scroll', function() {
|
|
var backToTopButton = document.getElementById('back-to-top');
|
|
if (window.scrollY > 100) {
|
|
backToTopButton.classList.remove('d-none');
|
|
backToTopButton.classList.add('d-flex');
|
|
} else {
|
|
backToTopButton.classList.add('d-none');
|
|
backToTopButton.classList.remove('d-flex');
|
|
}
|
|
});
|
|
|
|
// Scroll to top when the button is clicked
|
|
document.getElementById('back-to-top').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
window.location.href = '#';
|
|
return false;
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
</body>
|
|
|
|
</html> |