Implemented new design

This commit is contained in:
Jeroen De Meerleer 2023-03-21 15:36:26 +01:00
parent 45b72e0a3d
commit 434159b285
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
34 changed files with 112 additions and 146 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,43 +1,11 @@
import Cookies from 'js-cookie';
import '/assets/scss/page.scss'; import '/assets/scss/page.scss';
document.addEventListener("readystatechange", event => { document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') { if(event.target.readyState === 'complete') {
initOverflow();
initExternalLinks(); initExternalLinks();
initNinetiesToggle();
} }
}); });
function initOverflow() {
let body = document.querySelector('body');
let nineties = document.querySelector('.nineties-toggle');
let container = document.querySelector('.container');
container.style.height = (body.scrollHeight > window.outerHeight) ? 'auto' : body.scrollHeight - nineties.scrollHeight + 'px';
}
function initNinetiesToggle() {
let nineties = document.querySelector('.nineties-toggle');
let container = document.querySelector('.container');
nineties.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' });
}
})
if(
nineties.getBoundingClientRect().left < container.getBoundingClientRect().right &&
nineties.getBoundingClientRect().bottom > container.getBoundingClientRect().top
) {
nineties.style.position = 'initial';
nineties.style.textAlign = 'right';
}
}
function initExternalLinks() { function initExternalLinks() {
document.querySelectorAll('a').forEach(elem => { document.querySelectorAll('a').forEach(elem => {

View File

@ -7,83 +7,54 @@ $orange: #d6972a;
$font: 'Fira Code', monospace; $font: 'Fira Code', monospace;
html { html {
height: 100%; position: relative;
min-height: 100%;
} }
body { body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: 'Mukta', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
nav {
background-color: $black; background-color: $black;
background-image: url("../images/background.png");
color: $orange;
font-family: $font;
height: 100%;
&.nineties { ul {
color: $black;
-webkit-animation: background 2s linear infinite;
-moz-animation: background 2s linear infinite;
animation: background 2s linear infinite;
background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet, red, orange, yellow, green, aqua, blue, violet, red);
background-size: 200% 100%;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
@-webkit-keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
a {
color: $black;
}
.nineties-toggle {
background: none;
color: $black;
}
}
.nineties-toggle {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
}
a {
color: $orange;
}
.container {
display: flex; display: flex;
height: 100%; justify-content: end;
width: 100%; list-style: none;
justify-content: center; padding: 0;
align-items: center; margin: 0;
flex-direction: column;
padding: 10px;
}
header { li {
text-align: center; width: 150px;
text-align: right;
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
list-style: none;
padding: 0;
} }
} }
} }
header {
background-color: $black;
color: $orange;
}
main {
h1 {
background-color: $orange;
padding: 5px;
}
h2 {
background-color: $orange;
padding: 2px;
}
}
a {
color: $orange;
}

View File

@ -1,54 +1,64 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 21, 2023 */
@font-face { @font-face {
font-family: 'Fira Code'; font-family: 'Mukta';
src: url('../fonts/FiraCode-Regular.woff2') format('woff2'), src: url('../fonts/mukta-extrabold-webfont.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff'); url('../fonts/mukta-extrabold-webfont.woff') format('woff');
font-weight: normal; font-weight: 800;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Code'; font-family: 'Mukta';
src: url('../fonts/FiraCode-Medium.woff2') format('woff2'), src: url('../fonts/mukta-bold-webfont.woff2') format('woff2'),
url('../fonts/FiraCode-Medium.woff') format('woff'); url('../fonts/mukta-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Mukta';
src: url('../fonts/mukta-semibold-webfont.woff2') format('woff2'),
url('../fonts/mukta-semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Mukta';
src: url('../fonts/mukta-medium-webfont.woff2') format('woff2'),
url('../fonts/mukta-medium-webfont.woff') format('woff');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Comic Neue'; font-family: 'Mukta';
src: url('../fonts/ComicNeue-Bold.woff2') format('woff2'), src: url('../fonts/mukta-regular-webfont.woff2') format('woff2'),
url('../fonts/ComicNeue-Bold.woff') format('woff'); url('../fonts/mukta-regular-webfont.woff') format('woff');
font-weight: bold; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Comic Neue'; font-family: 'Mukta';
src: url('../fonts/ComicNeue-BoldItalic.woff2') format('woff2'), src: url('../fonts/mukta-light-webfont.woff2') format('woff2'),
url('../fonts/ComicNeue-BoldItalic.woff') format('woff'); url('../fonts/mukta-light-webfont.woff') format('woff');
font-weight: bold; font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Regular.woff2') format('woff2'),
url('../fonts/ComicNeue-Regular.woff') format('woff');
font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Comic Neue'; font-family: 'Mukta';
src: url('../fonts/ComicNeue-Italic.woff2') format('woff2'), src: url('../fonts/mukta-extralight-webfont.woff2') format('woff2'),
url('../fonts/ComicNeue-Italic.woff') format('woff'); url('../fonts/mukta-extralight-webfont.woff') format('woff');
font-weight: normal; font-weight: 200;
font-style: italic; font-style: normal;
font-display: swap;
}
}

View File

@ -15,6 +15,7 @@ class DefaultController extends AbstractController
$return = $page->getPage($kernel, $slug); $return = $page->getPage($kernel, $slug);
$response = new Response('', (int)$return['status']); $response = new Response('', (int)$return['status']);
return $this->render('/page.html.twig', [ return $this->render('/page.html.twig', [
'nav' => $return['nav'],
'header' => $return['header'], 'header' => $return['header'],
'content' => $return['content'], 'content' => $return['content'],
'title' => $return['title'], 'title' => $return['title'],

View File

@ -11,6 +11,7 @@ class Page
public function getPage(KernelInterface $kernel, string $page) public function getPage(KernelInterface $kernel, string $page)
{ {
$return['header'] = file_get_contents($kernel->getCacheDir() . '/pages/_main.md'); $return['header'] = file_get_contents($kernel->getCacheDir() . '/pages/_main.md');
$return['nav'] = file_get_contents($kernel->getCacheDir() . '/pages/_nav.md');
$titles = json_decode(file_get_contents($kernel->getCacheDir() . '/pages/titles.json'), true); $titles = json_decode(file_get_contents($kernel->getCacheDir() . '/pages/titles.json'), true);
if(file_exists($kernel->getCacheDir() . '/pages/' . $page . '.md')) { if(file_exists($kernel->getCacheDir() . '/pages/' . $page . '.md')) {
$return['title'] = $titles[$page] ?? ''; $return['title'] = $titles[$page] ?? '';

View File

@ -23,12 +23,14 @@
</head> </head>
<body{% if nineties %} class="nineties"{% endif %}> <body>
<div class="nineties-toggle">{% if nineties %}My eyes hurt{% else %}Take me back in time{% endif %}</div> {% block content %}{% endblock %}
<div class="container"> {% block extrahtml %}{% endblock %}
{% block content %}{% endblock %} <footer class="footer">
{% block extrahtml %}{% endblock %} <div class="container">
</div> <span class="text-muted">Design inspired by Dall-E 2</span>
</div>
</footer>
</body> </body>
</html> </html>

View File

@ -1,8 +1,21 @@
{% extends "base.html.twig" %} {% extends "base.html.twig" %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}
{% block content %} {% block content %}
<header>{{ header | markdown | raw }}</header> <nav>
<main>{{ content | markdown | raw }}</main> <div class="container py-3">
{{ nav | markdown | raw }}
</div>
</nav>
<header>
<div class="container py-4">
{{ header | markdown | raw }}
</div>
</header>
<main>
<div class="container py-4">
{{ content | markdown | raw }}
</div>
</main>
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}