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';
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {
initOverflow();
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() {
document.querySelectorAll('a').forEach(elem => {

View File

@ -7,83 +7,54 @@ $orange: #d6972a;
$font: 'Fira Code', monospace;
html {
height: 100%;
position: relative;
min-height: 100%;
}
body {
background-color: $black;
background-image: url("../images/background.png");
color: $orange;
font-family: $font;
height: 100%;
&.nineties {
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%}
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: 'Mukta', sans-serif;
}
@-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;
.footer {
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;
height: 100%;
bottom: 0;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
header {
text-align: center;
nav {
background-color: $black;
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
justify-content: end;
list-style: none;
padding: 0;
margin: 0;
li {
width: 150px;
text-align: right;
}
}
}
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-family: 'Fira Code';
src: url('../fonts/FiraCode-Regular.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff');
font-weight: normal;
font-family: 'Mukta';
src: url('../fonts/mukta-extrabold-webfont.woff2') format('woff2'),
url('../fonts/mukta-extrabold-webfont.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('../fonts/FiraCode-Medium.woff2') format('woff2'),
url('../fonts/FiraCode-Medium.woff') format('woff');
font-family: 'Mukta';
src: url('../fonts/mukta-bold-webfont.woff2') format('woff2'),
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-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Bold.woff2') format('woff2'),
url('../fonts/ComicNeue-Bold.woff') format('woff');
font-weight: bold;
font-family: 'Mukta';
src: url('../fonts/mukta-regular-webfont.woff2') format('woff2'),
url('../fonts/mukta-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-BoldItalic.woff2') format('woff2'),
url('../fonts/ComicNeue-BoldItalic.woff') format('woff');
font-weight: bold;
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-family: 'Mukta';
src: url('../fonts/mukta-light-webfont.woff2') format('woff2'),
url('../fonts/mukta-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Italic.woff2') format('woff2'),
url('../fonts/ComicNeue-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
font-family: 'Mukta';
src: url('../fonts/mukta-extralight-webfont.woff2') format('woff2'),
url('../fonts/mukta-extralight-webfont.woff') format('woff');
font-weight: 200;
font-style: normal;
}

View File

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

View File

@ -11,6 +11,7 @@ class Page
public function getPage(KernelInterface $kernel, string $page)
{
$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);
if(file_exists($kernel->getCacheDir() . '/pages/' . $page . '.md')) {
$return['title'] = $titles[$page] ?? '';

View File

@ -23,12 +23,14 @@
</head>
<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">
<body>
{% block content %}{% endblock %}
{% block extrahtml %}{% endblock %}
<footer class="footer">
<div class="container">
<span class="text-muted">Design inspired by Dall-E 2</span>
</div>
</footer>
</body>
</html>

View File

@ -1,8 +1,21 @@
{% extends "base.html.twig" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<header>{{ header | markdown | raw }}</header>
<main>{{ content | markdown | raw }}</main>
<nav>
<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 %}
{% block styles %}