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

some more progress on design

Browse Source
This commit is contained in:
Janis Hutz
2024-08-28 09:10:19 +02:00
parent bd9094231e
commit 63a97f9a4b
7 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
site/src/404.html
View File

@@ -3,31 +3,16 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>janishutz.com - Solving your software needs with passion</title>
<title>404 - Page not found | janishutz.com</title>
<link rel="stylesheet" href="/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav></nav>
<!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
<div class="slider" style="width: 100vw; height: 80vh;">
<div class="slider-container">
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/math-summaries-desktop.jpg' );">
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/libreevent-desktop.jpg' );">
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/donate-desktop.jpg' );">
</div>
</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>
<div class="content">
<h1>404</h1>
<p>The page you are looking for was not found!</p>
</div>

6
site/src/css/footer.css
View File

@@ -1,3 +1,9 @@
footer {
border-top: solid black 1px;
background-color: rgb(226, 226, 226);
width: 100vw;
}
footer .logo {
height: 40vh;
}

10
site/src/css/nav.css
View File

@@ -8,10 +8,15 @@ nav {
height: 20vh;
}
.nav-menu .logo {
.nav-menu .logo-wrapper {
display: none;
height: 90%;
border-radius: 20px;
overflow: hidden;
}
.nav-menu .logo {
height: 100%;
}
nav a {
@@ -136,7 +141,7 @@ nav a {
@media only screen and (min-width: 900px) {
.nav-menu .logo {
.nav-menu .logo-wrapper {
display: unset;
}
@@ -147,6 +152,7 @@ nav a {
.nav-menu {
padding: 0;
height: 20vh;
width: 100vw;
justify-content: center;
align-items: center;
flex-direction: row;

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

@@ -26,4 +26,16 @@ body {
.content {
width: 80%;
}
.no-scroll {
overflow: hidden;
}
.button {
padding: 20px;
background-color: rgb(21, 43, 92);
color: white;
text-decoration: none;
border-radius: 10px;
}

11
site/src/index.html
View File

@@ -7,9 +7,9 @@
<!-- SEO -->
<title>janishutz.com - Solving your software needs with passion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
@@ -19,7 +19,7 @@
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav></nav>
@@ -48,6 +48,9 @@
<div class="content">
<h1>My work</h1>
<div class="side-by-side">
</div>
</div>

9
site/src/nav.html
View File

@@ -35,7 +35,9 @@
</div>
</div>
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/about">
@@ -66,7 +68,6 @@
const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
let isAllowedToScroll = true;
function openMenu( action ) {
if ( action === 'toggle' ) {
@@ -76,11 +77,11 @@
openMenu( 'open' );
}
} else if ( action === 'close' ) {
isAllowedToScroll = true;
menu.classList.remove( 'active' );
toggle.classList.remove( 'active' );
document.body.classList.remove( 'no-scroll' );
} else if ( action === 'open' ) {
isAllowedToScroll = false;
document.body.classList.add( 'no-scroll' );
toggle.classList.add( 'active' );
menu.classList.add( 'active' );
}