Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-25 12:54:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add darkmode

Browse source 
Prettier titles
This commit is contained in:
Michał Gdula 2023-07-21 13:25:33 +01:00
parent b6077f88ed
commit 0ddc2a20b2
15 changed files with 187 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/js/navigation.js
View file

@ -1,12 +1,12 @@
const nav = document.querySelector('nav');
const button = document.querySelector('.nav-toggle');
let navRotate = 0;
let increment = 45;
function toggleNav() {
let nav = document.querySelector('nav');
let button = document.querySelector('.nav-toggle');
navRotate += increment;
button.style.transform = `rotate(${navRotate}deg)`;
button.querySelector('svg').style.transform = `rotate(${navRotate}deg)`;
if (nav.classList.contains('open')) {
document.querySelector('body').style.overflow = 'auto';

31
static/js/title.js Normal file
View file

@ -0,0 +1,31 @@
const title = document.querySelector('h1');
const titleHeight = title.offsetHeight;
let titleText = title.textContent;
let letterOffset = 0;
let timeOffset = 10;
title.textContent = '';
title.style.height = titleHeight + 'px';
title.style.opacity = "1";
titleText.split('').forEach((letter) => {
let span = document.createElement('span');
span.textContent = letter;
span.style.left = letterOffset + 'px';
span.style.transform = 'translateY(100%)';
title.append(span);
setTimeout(() => {
span.style.transform = '';
}, timeOffset);
letterOffset += span.offsetWidth;
timeOffset += 100;
});
setTimeout(() => {
title.textContent = '';
title.textContent = titleText;
}, timeOffset + 500);