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

optimise remaining things for mobile

Browse Source
This commit is contained in:
Janis Hutz
2023-07-15 16:37:15 +02:00
parent b76398ba23
commit c861eca9c0
10 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/about/index.html
View File

@@ -15,7 +15,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<img src="/assets/Logo.png" alt="page Logo" class="project-logo"> <img src="/assets/Logo.png" alt="page Logo" class="project-logo">
<h1 class="content-title">About janishutz.com</h1> <h1 class="content-title">About janis&shy;hutz.com</h1>
<p style="text-align: center; margin-bottom: 5%;">This is my personal website on which my projects are being shown off. It features various subdomains that fulfill different purposes, of which two are selling services. Learn more about me below.</p> <p style="text-align: center; margin-bottom: 5%;">This is my personal website on which my projects are being shown off. It features various subdomains that fulfill different purposes, of which two are selling services. Learn more about me below.</p>
<hr class="pullquote-lines"> <hr class="pullquote-lines">
<h3 class="content-title-small">Technology is a remarkably interesting topic, that many people take for granted.</h3> <h3 class="content-title-small">Technology is a remarkably interesting topic, that many people take for granted.</h3>

28
src/css/footerstyle.css
View File

@@ -1,24 +1,40 @@
.footer-box { .footer-box {
background-color: rgb(18, 12, 59); background-color: rgb(18, 12, 59);
width: 100%; width: 100%;
height: 50vh;
margin-bottom: -1%; margin-bottom: -1%;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
} align-items: center;
.footer-content-box {
width: 80%;
padding: 2%;
} }
.footer-center-box { .footer-center-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 70%;
} }
.footer-logo { .footer-logo {
width: 10%; height: 50%;
margin-bottom: 5%;
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width: 999px) {
.footer-box {
height: 30vh;
margin-bottom: -1%;
flex-direction: row;
justify-content: center;
}
.footer-logo {
width: 10%;
display: inline-block;
position: relative;
vertical-align: middle;
}
}

24
src/css/mainstyle.css
View File

@@ -62,28 +62,6 @@ body {
color: gray; color: gray;
} }
/*
Page title
*/
.title-container {
background-image: url( '/assets/title.png' );
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title-wrapper {
padding: 5%;
border-radius: 20px;
background-color: rgba( 0, 0, 0, 0.7 );
}
.title { .title {
text-align: center; text-align: center;
font-size: 3rem; font-size: 3rem;
@@ -156,6 +134,7 @@ body {
} }
.project-logo { .project-logo {
margin-top: 12vh;
width: 80vw; width: 80vw;
height: auto; height: auto;
border-radius: 20px; border-radius: 20px;
@@ -187,6 +166,7 @@ body {
} }
.project-logo { .project-logo {
margin-top: 0;
width: auto; width: auto;
height: 40vh; height: 40vh;
} }

6
src/css/pages/formstyle.css
View File

@@ -1,5 +1,11 @@
.form { .form {
width: 100%;
}
@media only screen and (min-width: 999px) {
.form {
width: 75%; width: 75%;
}
} }
.input { .input {

2
src/footer.html
View File

@@ -7,11 +7,9 @@
</head> </head>
<body> <body>
<div class="footer-box"> <div class="footer-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" class="button" id="ppbtn">Privacy Policy</a> <a href="/privacypolicy" class="button" id="ppbtn">Privacy Policy</a>
</div> </div>
</div> </div>
</div>
</body> </body>

2
src/index.html
View File

@@ -17,7 +17,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<img src="/assets/Logo.png" alt="page Logo" class="project-logo"> <img src="/assets/Logo.png" alt="page Logo" class="project-logo">
<h1 class="title">Welcome to janishutz.com!</h1> <h1 class="title">Welcome to janis&shy;hutz.com!</h1>
<p style="text-align: center; margin-bottom: 5%;">This is the hub for all my projects which get bigger and more numerous by the day! Join in by downloading and using one or multiple of them or by ordering your own website!</p> <p style="text-align: center; margin-bottom: 5%;">This is the hub for all my projects which get bigger and more numerous by the day! Join in by downloading and using one or multiple of them or by ordering your own website!</p>
<h2 class="content-title">My work</h2> <h2 class="content-title">My work</h2>
<div class="sidebyside"> <div class="sidebyside">

2
src/projects/impress/index.html
View File

@@ -15,7 +15,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<img src="/assets/impress.jpg" alt="libreevent Logo" class="project-logo"> <img src="/assets/impress.jpg" alt="libreevent Logo" class="project-logo">
<h2 class="content-title">impress.js</h2> <h2 class="content-title">impress&shy;.js</h2>
<p style="text-align: center; margin-bottom: 5%;">impress.js is not in fact my own project, but rather a project I contribute code to and for which I have created a new project website.</p> <p style="text-align: center; margin-bottom: 5%;">impress.js is not in fact my own project, but rather a project I contribute code to and for which I have created a new project website.</p>
<hr class="pullquote-lines"> <hr class="pullquote-lines">
<h3 class="content-title-small">Slide based presentations are quite boring, why not try something new and better?</h3> <h3 class="content-title-small">Slide based presentations are quite boring, why not try something new and better?</h3>

2
src/projects/musicplayer/index.html
View File

@@ -17,7 +17,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<img src="https://raw.githubusercontent.com/simplePCBuilding/MusicPlayerV2/master/assets/logo.png" alt="MusicPlayer Logo" class="project-logo"> <img src="https://raw.githubusercontent.com/simplePCBuilding/MusicPlayerV2/master/assets/logo.png" alt="MusicPlayer Logo" class="project-logo">
<h1 class="content-title">MusicPlayer</h1> <h1 class="content-title">Music&shy;Player</h1>
<p style="text-align: center; margin-bottom: 5%;">An electron-based music player to which a basically infinite amount of client displays can connect to to display the current playing song, the upcoming songs and details on all of them.</p> <p style="text-align: center; margin-bottom: 5%;">An electron-based music player to which a basically infinite amount of client displays can connect to to display the current playing song, the upcoming songs and details on all of them.</p>
<h3>NOTE: This software has not been completed yet!</h3> <h3>NOTE: This software has not been completed yet!</h3>
<div class="sidebyside"> <div class="sidebyside">

2
src/projects/storagemanager/index.html
View File

@@ -16,7 +16,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<img src="/assets/storagemanager.jpg" alt="StorageManager Logo" class="project-logo" style="border-radius: 20px;"> <img src="/assets/storagemanager.jpg" alt="StorageManager Logo" class="project-logo" style="border-radius: 20px;">
<h1 class="content-title">StorageManager</h1> <h1 class="content-title">Storage&shy;Manager</h1>
<p style="text-align: center; margin-bottom: 5%;">Managing storage can be a challenging task, especially, when the volume of items stored gets big. If products in that storage can go bad, you are very likely to produce quite a bit of waste. StorageManager is an iOS app that can send you notifications such that you do not forget about products that are about to expire.</p> <p style="text-align: center; margin-bottom: 5%;">Managing storage can be a challenging task, especially, when the volume of items stored gets big. If products in that storage can go bad, you are very likely to produce quite a bit of waste. StorageManager is an iOS app that can send you notifications such that you do not forget about products that are about to expire.</p>
<div class="sidebyside"> <div class="sidebyside">
<div class="element"> <div class="element">

2
src/support/index.html
View File

@@ -19,7 +19,7 @@
<p style="text-align: center; margin-bottom: 5%;">Did you run into a problem with any of my software? Here's the right place to get the issue solved. This page features an automated support system to guide you into the right direction. If this doesn't help, the system will forward your query directly to me and you will have the opportunity to add some comments to it as well.</p> <p style="text-align: center; margin-bottom: 5%;">Did you run into a problem with any of my software? Here's the right place to get the issue solved. This page features an automated support system to guide you into the right direction. If this doesn't help, the system will forward your query directly to me and you will have the opportunity to add some comments to it as well.</p>
<hr class="pullquote-lines"> <hr class="pullquote-lines">
<h3 class="content-title">Welcome to the janishutz.com support!</h3> <h3 class="content-title">Welcome to the janis&shy;hutz.com support!</h3>
<hr class="pullquote-lines"> <hr class="pullquote-lines">
<p>First off all, I want to apologise for any inconvenience that arose due to a problem with any of my software.</p> <p>First off all, I want to apologise for any inconvenience that arose due to a problem with any of my software.</p>
<p>Please choose the app you have problems with below:</p> <p>Please choose the app you have problems with below:</p>