JeroenED
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

NEW FEATURE: travel back in time

This commit is contained in:
Jeroen De Meerleer 2021-08-06 09:51:41 +02:00
parent 541b62f296
commit f9cdcdc7c6
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
7 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/background-1990.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 291 KiB

16
assets/js/page.js
View File

@ -1,7 +1,10 @@
import Cookies from 'js-cookie';
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {
initOverflow();
initExternalLinks();
initNinetiesToggle();
}
});
@ -12,6 +15,19 @@ function initOverflow() {
}
}
function initNinetiesToggle() {
document.querySelector('.nineties-toggle').addEventListener('click', function() {
let body = document.querySelector('body');
if (body.classList.contains('nineties')) {
body.classList.remove('nineties');
Cookies.remove('nineties');
} else {
body.classList.add('nineties');
Cookies.set('nineties', true, { sameSite: 'strict' });
}
})
}
function initExternalLinks() {
document.querySelectorAll('a').forEach(elem => {
if(isExternalURL(elem.getAttribute('href'))) {

17
assets/scss/base.scss
View File

@ -15,6 +15,23 @@ body {
font-family: $font;
height: 100%;
margin: 0 10px;
&.nineties {
color: $black;
background-image: url("../images/background-1990.gif");
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
a{
color: $black;
}
}
.nineties-toggle {
position: absolute;
top: 0;
right: 0;
}
a {
color: $orange;
}

5
package-lock.json generated
View File

@ -3621,6 +3621,11 @@
}
}
},
"js-cookie": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.0.tgz",
"integrity": "sha512-oUbbplKuH07/XX2YD2+Q+GMiPpnVXaRz8npE7suhBH9QEkJe2W7mQ6rwuMXHue3fpfcftQwzgyvGzIHyfCSngQ=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

3
package.json
View File

@ -7,7 +7,8 @@
"lib": "lib"
},
"dependencies": {
"bootstrap": "^5.1.0"
"bootstrap": "^5.1.0",
"js-cookie": "^3.0.0"
},
"devDependencies": {
"@symfony/webpack-encore": "^1.5.0",

4
src/Controller/DefaultController.php
View File

@ -18,6 +18,8 @@ class DefaultController extends Controller
return $this->render('/page.html.twig', [
'header' => $page['header'],
'content' => $page['content'],
'title' => $page['title']], $page['status']);
'title' => $page['title'],
'nineties' => (isset($_COOKIE['nineties']))
], $page['status']);
}
}

3
templates/base.html.twig
View File

@ -11,7 +11,8 @@
</head>
<body>
<body{% if nineties %} class="nineties"{% endif %}>
<div class="nineties-toggle">{% if nineties %}My eyes hurt{% else %}Take me back in time{% endif %}</div>
<div class="container">
{% block content %}{% endblock %}
{% block extrahtml %}{% endblock %}