complete website rework beginning
This commit is contained in:
0
js/specialanimations.js → build.js
Executable file → Normal file
0
js/specialanimations.js → build.js
Executable file → Normal file
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
65
src/css/nav/menu.css
Normal file
65
src/css/nav/menu.css
Normal file
@@ -0,0 +1,65 @@
|
||||
#menu {
|
||||
color: white;
|
||||
transform: scale( 0 );
|
||||
transform-origin: top right;
|
||||
transition: all 1s;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: default;
|
||||
background-color: rgb(18, 12, 59);
|
||||
}
|
||||
|
||||
#menu.open {
|
||||
transform: scale( 1 );
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.menu-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu-category {
|
||||
padding: 2vw;
|
||||
transition: all 1s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
/* TODO: Make multiple steps for this
|
||||
TODO: Optimise for mobile devices (scale vertically) */
|
||||
|
||||
.menu-category:hover {
|
||||
padding-right: 15vw;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
transition: all 0.5s;
|
||||
transform: scaleY( 0 );
|
||||
position: absolute;
|
||||
transform-origin: top;
|
||||
transition-delay: 0s;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-category:hover .category-list {
|
||||
transform: scaleY( 1 );
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
87
src/css/nav/toggle.css
Normal file
87
src/css/nav/toggle.css
Normal file
@@ -0,0 +1,87 @@
|
||||
.nav-container {
|
||||
height: 13vh;
|
||||
width: 13vh;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
transition: all 2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle-container {
|
||||
background-color: rgb(21, 21, 73);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
border-bottom-left-radius: 100%;
|
||||
}
|
||||
|
||||
.nav-container:hover {
|
||||
height: 20vh;
|
||||
width: 20vh;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-toggle-positioner {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
text-decoration: none;
|
||||
color: rgb(168, 212, 253);
|
||||
font-size: 5vh;
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 27px;
|
||||
z-index: 11;
|
||||
transition: 0.8s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
|
||||
|
||||
.line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: rgb(49, 142, 230);
|
||||
}
|
||||
|
||||
#line1 {
|
||||
transform-origin: 0% 0%;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
#line2 {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#line3 {
|
||||
transform-origin: 0% 100%;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-toggle.active #line1 {
|
||||
transform: rotate( 45deg );
|
||||
}
|
||||
|
||||
.nav-toggle.active #line2 {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.nav-toggle.active #line3 {
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
0
js/jquery.js → src/js/jquery.js
vendored
0
js/jquery.js → src/js/jquery.js
vendored
0
src/js/specialanimations.js
Executable file
0
src/js/specialanimations.js
Executable file
75
src/menu.html
Normal file
75
src/menu.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=7">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>nav</title>
|
||||
<link rel="stylesheet" href="/css/nav/toggle.css">
|
||||
<link rel="stylesheet" href="/css/nav/menu.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<div class="nav-toggle-container">
|
||||
<div class="nav-toggle-positioner">
|
||||
<div class="nav-toggle active" onclick="menu()">
|
||||
<span class="line" id="line1"></span>
|
||||
<span class="line" id="line2"></span>
|
||||
<span class="line" id="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu" class="open">
|
||||
<div class="menu-container">
|
||||
<h2>Menu</h2>
|
||||
<div class="menu-main">
|
||||
<div class="menu-category">
|
||||
<h3>Projects</h3>
|
||||
<div class="category-list">
|
||||
<a href="/projects/storagemanager" class="category-item">StorageManager</a>
|
||||
<a href="/projects/smuL" class="category-item">SimpleMediaUpscalerLite</a>
|
||||
<a href="/projects/libreevent" class="category-item">libreǝvent</a>
|
||||
<a href="/projects/qrscanner" class="category-item">QR & Barcode Insight</a>
|
||||
<a href="/projects/musicplayer" class="category-item">MusicPlayer</a>
|
||||
<a href="/projects/biogascontrollerapp" class="category-item">BiogasControllerApp</a>
|
||||
<a href="/projects/impress" class="category-item">impress.js</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-category">
|
||||
<h3>About</h3>
|
||||
<div class="category-list">
|
||||
<a href="/privacypolicy" class="category-item">Privacy Policy</a>
|
||||
<a href="/about" class="category-item">About janishutz.com</a>
|
||||
<a href="/about/aboutme" class="category-item">About me</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-category">
|
||||
<h3>Services</h3>
|
||||
<div class="category-list">
|
||||
<a href="/services" class="category-item">Overview</a>
|
||||
<a href="/services/websites" class="category-item">Custom Websites</a>
|
||||
<a href="/services/pcbuilding" class="category-item">PC Building</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-category">
|
||||
<h3>Support</h3>
|
||||
<div class="category-list">
|
||||
<a href="/support" class="category-item">Support hub</a>
|
||||
<a href="/support/faq" class="category-item">FAQ</a>
|
||||
<a href="/support/contact" class="category-item">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function menu () {
|
||||
$( '.menu-container' ).fadeToggle( 1000 );
|
||||
$( '#menu' ).toggleClass( 'open' );
|
||||
$( '.nav-toggle' ).toggleClass( 'active' );
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
src/projects/impress/index.html
Normal file
0
src/projects/impress/index.html
Normal file
Reference in New Issue
Block a user