Laurent/personal-website-old
Archived
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: reworked the layout system

Browse source
This commit is contained in:
Laureηt 2021-10-08 19:14:30 +02:00
parent 5604d287c8
commit ce073b0f1a
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
8 changed files with 75 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/_includes/chaffle.njk Normal file
View file

@ -0,0 +1,25 @@
<script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>

4
src/_includes/footer.njk Normal file
View file

@ -0,0 +1,4 @@
<footer role="contentinfo">
&copy; {% year %}
{{ username }}
</footer>

7
src/_includes/head.njk Normal file
View file

@ -0,0 +1,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>

4
src/_includes/header.njk Normal file
View file

@ -0,0 +1,4 @@
<header role="banner">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink">_</i>
</header>

45
src/_includes/layout.njk
View file

@ -13,50 +13,19 @@ username: Laureηt
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
{% block head %}{% endblock head %}
</head>
<body>
<header role="banner">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink">_</i>
</header>
{% include "header.njk" %}
{% block precontent %}{% endblock precontent %}
<main role="main">
{{ content | safe }}
</main>
<footer role="contentinfo">
&copy; {% year %}
{{ username }}
</footer>
<script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>
{% block postcontent %}{% endblock postcontent %}
{% include "footer.njk" %}
{% include "chaffle.njk" %}
{% block foot %}{% endblock foot %}
</body>
</html>

68
src/_includes/layout_eportfolio.njk
View file

@ -1,77 +1,27 @@
---
username: Laureηt
layout: layout.njk
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">
{% block head %}
<link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}">
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
</head>
{% endblock head %}
<body>
<header role="banner">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink" style="display:inline;">_</i>
</header>
<nav role="navigation">
<div class="11ty-nav">
{% block precontent %}
<nav class="11ty-nav" role="navigation">
<div>
{% for entry in collections.all | eleventyNavigation %}
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
{% endfor %}
</div>
<hr>
</nav>
{% endblock precontent %}
<main role="main">
{{ content | safe }}
</main>
{% block postcontent %}
<nav id="btn-back" role="navigation">
<i>&laquo;</i>
<a href="{{ '/' | url }}">Go back</a>
</nav>
<footer role="contentinfo">
&copy; {% year %}
{{ username }}
</footer>
<script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>
</body>
</html>
{% endblock postcontent %}

7
src/scss/resume.scss
View file

@ -1,6 +1,11 @@
body {
font-size: 20px;
max-width: 60em;
width: 80rem;
}
h1,
h2 {
height: auto;
}
.row {

1
src/scss/style.scss
View file

@ -28,6 +28,7 @@ body {
a {
color: $foreground-text;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: #283593;
&:hover {