janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

design, libreevent page partially done

Browse Source
This commit is contained in:
Janis Hutz
2024-09-03 08:48:31 +02:00
parent 242ec159a2
commit 28276a984f
5 changed files with 158 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/scroll/scroll.css
View File

@@ -12,8 +12,53 @@
right: 5%; right: 5%;
z-index: 7; z-index: 7;
width: 90%; width: 90%;
bottom: -200px;
}
#scroll-indicator.show-scroll {
animation: pop-in 0.5s;
bottom: 5%; bottom: 5%;
display: none; }
#scroll-indicator.hide-scroll {
animation: pop-out 0.5s;
bottom: -200px;
}
@keyframes pop-in {
0% {
bottom: -200px;
}
70% {
bottom: 6.5%;
}
80% {
bottom: 6%;
}
100% {
bottom: 5%;
}
}
@keyframes pop-out {
0% {
bottom: 5%;
}
25% {
bottom: 6.5%
}
35% {
bottom: 6%;
}
100% {
bottom: -200px;
}
} }
.content { .content {

14
components/scroll/scroll.js
View File

@@ -1,5 +1,4 @@
window.scrollHint = ( maxScroll ) => { window.scrollHint = ( maxScroll ) => {
$( () => {
let isShowing = false; let isShowing = false;
const el = document.getElementById( 'scroll-indicator' ); const el = document.getElementById( 'scroll-indicator' );
if ( !el ) { if ( !el ) {
@@ -21,7 +20,8 @@ window.scrollHint = ( maxScroll ) => {
} else { } else {
window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } ); window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
} }
$( '#scroll-indicator' ).fadeOut( 300 ); el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
try { try {
clearTimeout( scrollCorrectionTimeout ); clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {}; } catch ( _err ) {};
@@ -46,7 +46,8 @@ window.scrollHint = ( maxScroll ) => {
} catch ( _err ) {}; } catch ( _err ) {};
if ( isShowing ) { if ( isShowing ) {
isShowing = false; isShowing = false;
$( '#scroll-indicator' ).fadeOut( 300 ); el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
} }
}; };
@@ -63,10 +64,12 @@ window.scrollHint = ( maxScroll ) => {
const showHint = () => { const showHint = () => {
if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) { if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
$( '#scroll-indicator' ).fadeIn( 300 ); el.classList.remove( 'hide-scroll' );
el.classList.add( 'show-scroll' );
isShowing = true; isShowing = true;
} else { } else {
$( '#scroll-indicator' ).fadeOut( 300 ); el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
isShowing = false; isShowing = false;
} }
} }
@@ -78,5 +81,4 @@ window.scrollHint = ( maxScroll ) => {
} }
scrollCorrection(); scrollCorrection();
} );
} }

11
site/src/404.html
View File

@@ -6,6 +6,16 @@
<title>404 - Page not found | janishutz.com</title> <title>404 - Page not found | janishutz.com</title>
<link rel="stylesheet" href="/css/slider.css"> <link rel="stylesheet" href="/css/slider.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<style>
.content {
height: 80vh;
}
.content h1 {
font-size: 8rem;
margin: 0;
}
</style>
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
@@ -13,6 +23,7 @@
<div class="content"> <div class="content">
<h1>404</h1> <h1>404</h1>
<p>The page you are looking for was not found!</p> <p>The page you are looking for was not found!</p>
<a href="/" class="button">Home</a>
</div> </div>

15
site/src/css/style.css
View File

@@ -26,6 +26,10 @@ body {
.content { .content {
width: 80%; width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} }
.no-scroll { .no-scroll {
@@ -38,4 +42,15 @@ body {
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 10px;
transition: all 0.5s;
}
.button:hover {
border-radius: 5px;
background-color: rgb(2, 10, 27);
}
.project-logo {
width: 40%;
border-radius: 30px;
} }

15
site/src/projects/libreevent/index.html
View File

@@ -38,12 +38,12 @@
</div> </div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );"> <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h1>Create Events with Ease</h1> <h1>Create Events with Ease</h1>
<p>Using the libreevent's powerful admin panel</p> <p>Using the libreǝvent's powerful admin panel</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a> <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
</div> </div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );"> <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
<h1>Create seat plans</h1> <h1>Create seat plans</h1>
<p>libreevent's seat plan editor is designed to make this as easy as possible</p> <p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a> <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
</div> </div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );"> <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
@@ -59,13 +59,22 @@
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );"> <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
<h1>Open Source Project</h1> <h1>Open Source Project</h1>
<p>Free Software, developed by Janis Hutz & the community</p> <p>Free Software, developed by Janis Hutz & the community</p>
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreevent</a> <a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
</div> </div>
</div> </div>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div> <div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div> <div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
</div> </div>
<div class="content">
<!-- TODO: Size logo better -->
<img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo">
<h1>libreǝvent</h1>
<p>Free & Open Source Event Management & Ticketing Solution</p>
</div>
<div id="yt-embed"></div> <div id="yt-embed"></div>