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="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
{% block head %}{% endblock head %}
</head> </head>
<body> <body>
{% include "header.njk" %}
<header role="banner"> {% block precontent %}{% endblock precontent %}
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink">_</i>
</header>
<main role="main"> <main role="main">
{{ content | safe }} {{ content | safe }}
</main> </main>
{% block postcontent %}{% endblock postcontent %}
<footer role="contentinfo"> {% include "footer.njk" %}
&copy; {% year %} {% include "chaffle.njk" %}
{{ username }} {% block foot %}{% endblock foot %}
</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> </body>
</html> </html>

92
src/_includes/layout_eportfolio.njk
View file

@ -1,77 +1,27 @@
--- ---
username: Laureηt layout: layout.njk
--- ---
<!DOCTYPE html> {% block head %}
<html lang="en"> <link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}">
{% endblock head %}
<head> {% block precontent %}
<meta charset="UTF-8"> <nav class="11ty-nav" role="navigation">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <div>
<title>{{ username }}</title> {% for entry in collections.all | eleventyNavigation %}
<link rel="stylesheet" href="{{ '/css/style.css' | url }}"> <a href="{{ entry.url | url }}">{{ entry.title }}</a>
<link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}"> {% endfor %}
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}"> </div>
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}"> <hr>
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> </nav>
</head> {% endblock precontent %}
<body> {{ content | safe }}
<header role="banner"> {% block postcontent %}
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span> <nav id="btn-back" role="navigation">
<i class="blink" style="display:inline;">_</i> <i>&laquo;</i>
</header> <a href="{{ '/' | url }}">Go back</a>
</nav>
<nav role="navigation"> {% endblock postcontent %}
<div class="11ty-nav">
{% for entry in collections.all | eleventyNavigation %}
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
{% endfor %}
</div>
<hr>
</nav>
<main role="main">
{{ content | safe }}
</main>
<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>

7
src/scss/resume.scss
View file

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

1
src/scss/style.scss
View file

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