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

various tweaks to navigation menu

Browse Source
This commit is contained in:
Janis Hutz
2023-07-14 09:06:25 +02:00
parent d86a492b0a
commit 4d48b4f6ce
10 changed files with 63 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/footerstyle.css
View File

@@ -1,5 +1,5 @@
.Footer-box { .footer-box {
background-color: #38444d; background-color: rgb(18, 12, 59);
width: 100%; width: 100%;
margin-bottom: -1%; margin-bottom: -1%;
display: flex; display: flex;

4
src/css/mainstyle.css
View File

@@ -68,7 +68,7 @@ body {
transition: 0.3s; transition: 0.3s;
} }
.linkbutton { .button {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
@@ -78,7 +78,7 @@ body {
transition: 1s; transition: 1s;
} }
.linkbutton:hover { .button:hover {
background-color: darkblue; background-color: darkblue;
border-radius: 5px; border-radius: 5px;
transition: 0.3s; transition: 0.3s;

22
src/css/nav/logo.css Normal file
View File

@@ -0,0 +1,22 @@
.logo-container {
position: fixed;
height: 13vh;
width: 13vh;
top: 0;
left: 0;
border-bottom-right-radius: 100%;
background-color: rgb(21, 21, 73);
transition: all 2s ease-in-out;
z-index: 9;
}
#logo {
height: 70%;
width: 70%;
}
.nav-container:hover .logo-container {
width: 20vh;
height: 20vh;
transition: all 0.5s ease-in-out;
}

11
src/css/nav/menu.css
View File

@@ -23,6 +23,7 @@
} }
.menu-container { .menu-container {
display: none;
width: 80%; width: 80%;
height: 80%; height: 80%;
opacity: 0; opacity: 0;
@@ -30,6 +31,7 @@
} }
.menu-container.shown { .menu-container.shown {
display: block;
width: 80%; width: 80%;
height: 80%; height: 80%;
opacity: 1; opacity: 1;
@@ -44,8 +46,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.menu-category { .menu-category {
@@ -131,12 +133,17 @@
background-color: rgb(0, 125, 156); background-color: rgb(0, 125, 156);
} }
.bottom-note { .bottom-note-wrapper {
font-family: monospace; font-family: monospace;
position: fixed; position: fixed;
width: 100%; width: 100%;
bottom: 5%; bottom: 5%;
left: 0; left: 0;
display: none;
}
.bottom-note {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
src/css/nav/toggle.css
View File

@@ -7,6 +7,7 @@
position: fixed; position: fixed;
transition: all 2s ease-in-out; transition: all 2s ease-in-out;
cursor: pointer; cursor: pointer;
border-bottom-left-radius: 100%;
} }
.nav-toggle-container { .nav-toggle-container {
@@ -26,6 +27,7 @@
height: 20vh; height: 20vh;
width: 20vh; width: 20vh;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
border-bottom-left-radius: 100%;
} }
.nav-toggle-positioner { .nav-toggle-positioner {

4
src/footer.html
View File

@@ -6,11 +6,11 @@
<title>Footer - janishutz.com</title> <title>Footer - janishutz.com</title>
</head> </head>
<body> <body>
<div class="Footer-box"> <div class="footer-box">
<div class="footer-content-box"> <div class="footer-content-box">
<img src="/assets/Logo.png" class="footer-logo"> <img src="/assets/Logo.png" class="footer-logo">
<div class="footer-center-box"> <div class="footer-center-box">
<a href="/privacypolicy.html" class="linkbutton" id="ppbtn">Privacy Policy</a> <a href="/privacypolicy" class="button" id="ppbtn">Privacy Policy</a>
</div> </div>
</div> </div>
</div> </div>

12
src/index.html
View File

@@ -24,37 +24,37 @@
<div class="element"> <div class="element">
<h3>Custom Websites</h3> <h3>Custom Websites</h3>
<p>Get your new online presence as anything ranging from a simple static website like this one to a highly complex webapp like <a href="https://libreevent.janishutz.com" class="textlink" style="color: darkblue" target="_blank">libreǝvent</a> or the <a href="https://booking.languageschoolhossegor.com" class="textlink" style="color: darkblue" target="_blank">Language School Hossegor Booking system</a></p> <p>Get your new online presence as anything ranging from a simple static website like this one to a highly complex webapp like <a href="https://libreevent.janishutz.com" class="textlink" style="color: darkblue" target="_blank">libreǝvent</a> or the <a href="https://booking.languageschoolhossegor.com" class="textlink" style="color: darkblue" target="_blank">Language School Hossegor Booking system</a></p>
<a href="https://development.janishutz.com" class="linkbutton">Learn more</a> <a href="https://development.janishutz.com" class="button">Learn more</a>
</div> </div>
<div class="element"> <div class="element">
<h3>PC Building</h3> <h3>PC Building</h3>
<p>Are you looking for a new gaming or work PC that is perfectly fitted for your needs and has an upgrade path in the future and you live in Switzerland? Here you can get your new, fully customised PC!</p> <p>Are you looking for a new gaming or work PC that is perfectly fitted for your needs and has an upgrade path in the future and you live in Switzerland? Here you can get your new, fully customised PC!</p>
<a href="https://pcbuilding.janishutz.com" class="linkbutton">Learn more</a> <a href="https://pcbuilding.janishutz.com" class="button">Learn more</a>
</div> </div>
</div> </div>
<div class="sidebyside"> <div class="sidebyside">
<div class="element"> <div class="element">
<h3>iOS Apps</h3> <h3>iOS Apps</h3>
<p>My iOS apps mostly focus on things you use or do day-to-day. You can view and download my apps on the Apple AppStore</p> <p>My iOS apps mostly focus on things you use or do day-to-day. You can view and download my apps on the Apple AppStore</p>
<a href="https://apps.apple.com/us/developer/janis-hutz/id1636936538" class="linkbutton">AppStore</a> <a href="https://apps.apple.com/us/developer/janis-hutz/id1636936538" class="button">AppStore</a>
</div> </div>
<div class="element"> <div class="element">
<h3>Open Source Software</h3> <h3>Open Source Software</h3>
<p>As a huge Open Source fan, I also developed some software whose code you can freely use, if your project uses the GPL V3 License. I am also contributing to a JavaScript presentation framework called <a href="https://impress.js.org" class="textlink" style="color: darkblue">impress.js</a></p> <p>As a huge Open Source fan, I also developed some software whose code you can freely use, if your project uses the GPL V3 License. I am also contributing to a JavaScript presentation framework called <a href="https://impress.js.org" class="textlink" style="color: darkblue">impress.js</a></p>
<a href="https://github.com/simplePCBuilding" class="linkbutton">GitHub</a> <a href="https://github.com/simplePCBuilding" class="button">GitHub</a>
</div> </div>
</div> </div>
<div class="sidebyside"> <div class="sidebyside">
<div class="element"> <div class="element">
<h3>libreǝvent</h3> <h3>libreǝvent</h3>
<p>libreǝvent is THE free and open source event management solution with which you can save lots of time and money when managing your events!</p> <p>libreǝvent is THE free and open source event management solution with which you can save lots of time and money when managing your events!</p>
<a href="https://libreevent.janishutz.com" class="linkbutton">Learn more</a> <a href="https://libreevent.janishutz.com" class="button">Learn more</a>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
<h2 class="content-title">Check out my projects!</h2> <h2 class="content-title">Check out my projects!</h2>
<a class="linkbutton" href="/projects.html">Projects</a> <a class="button" href="/projects.html">Projects</a>
</div> </div>
</div> </div>
<div id="footer"></div> <div id="footer"></div>

12
src/menu.html
View File

@@ -8,9 +8,13 @@
<title>nav</title> <title>nav</title>
<link rel="stylesheet" href="/css/nav/toggle.css"> <link rel="stylesheet" href="/css/nav/toggle.css">
<link rel="stylesheet" href="/css/nav/menu.css"> <link rel="stylesheet" href="/css/nav/menu.css">
<link rel="stylesheet" href="/css/nav/logo.css">
</head> </head>
<body> <body>
<div class="nav-container"> <div class="nav-container">
<div class="logo-container">
<a href="/"><img src="/assets/Logo.png" alt="Website logo" id="logo"></a>
</div>
<div class="nav-toggle-container"> <div class="nav-toggle-container">
<div class="nav-toggle-positioner" onclick="menu()"> <div class="nav-toggle-positioner" onclick="menu()">
<div class="nav-toggle"> <div class="nav-toggle">
@@ -24,9 +28,11 @@
<div class="menu-container"> <div class="menu-container">
<h2><a href="/" style="text-decoration: none; color: white;">Home</a></h2> <h2><a href="/" style="text-decoration: none; color: white;">Home</a></h2>
<div class="menu-main"> <div class="menu-main">
<div class="bottom-note-wrapper">
<div class="bottom-note"> <div class="bottom-note">
<p>Welcome to janishutz.com</p> <p>Welcome to janishutz.com</p>
</div> </div>
</div>
<div class="menu-category" onclick="dropdown( 'projects-page' )" id="projects-page-parent"> <div class="menu-category" onclick="dropdown( 'projects-page' )" id="projects-page-parent">
<h3>Projects</h3> <h3>Projects</h3>
@@ -80,8 +86,12 @@
function menu () { function menu () {
$( '#menu' ).toggleClass( 'open' ); $( '#menu' ).toggleClass( 'open' );
$( '.nav-toggle' ).toggleClass( 'active' ); $( '.nav-toggle' ).toggleClass( 'active' );
$( '.menu-container' ).fadeToggle( 100 );
setTimeout( () => {
$( '.menu-container' ).toggleClass( 'shown' ); $( '.menu-container' ).toggleClass( 'shown' );
// $( '.menu-container' ).fadeToggle( 300 ); // $( '.main-menu' ).fadeToggle( 500 );
$( '.bottom-note-wrapper' ).fadeToggle( 500 );
}, 400 );
} }
</script> </script>
</body> </body>

4
src/privacypolicy/index.html
View File

@@ -11,7 +11,7 @@
<script defer src="/js/loader.js"></script> <script defer src="/js/loader.js"></script>
</head> </head>
<body> <body>
<div id="ContentToInclude"></div> <div id="nav"></div>
<div class="mainstyle"> <div class="mainstyle">
<div class="title-container"> <div class="title-container">
<h1 class="title">Privacy Policy</h1> <h1 class="title">Privacy Policy</h1>
@@ -24,6 +24,6 @@
<p>This website does not collect any data on your interaction with it as it stands today. This may change in the future, but all data collected will not allow me to uniquely identify you as an individual. You may have a look at the source code of the data-collection module, if I end up adding one on this website, if you wish. The rest of the server backend will remain closed-source due to security concerns.</p> <p>This website does not collect any data on your interaction with it as it stands today. This may change in the future, but all data collected will not allow me to uniquely identify you as an individual. You may have a look at the source code of the data-collection module, if I end up adding one on this website, if you wish. The rest of the server backend will remain closed-source due to security concerns.</p>
</div> </div>
</div> </div>
<div id="Footer"></div> <div id="footer"></div>
</body> </body>
</html> </html>

4
src/search/index.html
View File

@@ -58,8 +58,8 @@
<body> <body>
<div class="search-wrapper"> <div class="search-wrapper">
<h1 style="font-size: 400%;">Search</h1> <h1 style="font-size: 400%;">Search</h1>
<form action="https://duckduckgo.com/?q=" method="get"> <form action="https://duckduckgo.com/" method="get">
<input type="text" placeholder="Search..." class="search-box"> <input type="text" placeholder="Search..." name="q" class="search-box">
<input type="submit" value="Search" class="submit-button"> <input type="submit" value="Search" class="submit-button">
</form> </form>
</div> </div>