major overhaul: changed styling, added content, removed donate page, updated quick fixes
This commit is contained in:
parent
ea1508be79
commit
47c053ea5f
GPG Key ID:
DB5485828E95A447
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>About - Johannes Olzem</title>
|
<title>About - Johannes Olzem</title>
|
||||||
@ -17,11 +17,10 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="#">About Me</a>
|
<a href="#">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<!-- <img src="/img/me.png" style="float:right;margin:1rem;border-radius:1rem;max-height: 245px;"> -->
|
|
||||||
<h2>About Me</h2>
|
<h2>About Me</h2>
|
||||||
|
<!--<img src="/img/me.png" style="float:left;margin:1rem;border-radius:1rem;height:256px;">-->
|
||||||
<p style="margin-bottom: 2rem;">
|
<p style="margin-bottom: 2rem;">
|
||||||
Hey there!<br />
|
Hey there!<br />
|
||||||
My name is Johannes, and I'm a computer enthusiast born and raised in Germany.
|
My name is Johannes, and I'm a computer enthusiast born and raised in Germany.
|
||||||
@ -41,19 +40,20 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li>Linux</li>
|
<li>Linux</li>
|
||||||
<li>Git</li>
|
<li>Git</li>
|
||||||
|
<li>SQL</li>
|
||||||
<li>LaTeX</li>
|
<li>LaTeX</li>
|
||||||
<li>Docker</li>
|
<li>Docker</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<p>If you are interested in a research paper I wrote for a mandatory school project about Linux you can find it <a href='/facharbeit.pdf'>here</a>. My grade for this project was a 13 out of 15 possible grade points.</p>
|
||||||
<h2>About this website</h2>
|
<h2>About this website</h2>
|
||||||
<p>
|
<p>
|
||||||
This website has no ads or trackers and does not use cookies.<br>
|
This website has no ads or trackers and does not use cookies.<br>
|
||||||
It is also <a href="/LICENSE.txt">free and open source under the GNU General Public License v3</a>.<br>
|
It is also free and open source under the <a href="/LICENSE.txt">GNU General Public License v3</a>.<br>
|
||||||
<a href="https://github.com/jolzem/jolzem.github.io/" class="inline">View Source Code</a><br>
|
<a href="https://github.com/jolzem/jolzem.github.io/">View Source Code</a><br>
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>How to create a Rust server on Linux - Blog - Johannes Olzem</title>
|
<title>How to create a Rust server on Linux - Blog - Johannes Olzem</title>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h1>How to create a Rust server on Linux</h1>
|
<h1>How to create a Rust server on Linux</h1>
|
||||||
@ -62,7 +61,7 @@
|
|||||||
<p>
|
<p>
|
||||||
Enable the contrib and non-free repositories by changing your <code>/etc/apt/sources.list</code> to resemble the following:
|
Enable the contrib and non-free repositories by changing your <code>/etc/apt/sources.list</code> to resemble the following:
|
||||||
</p>
|
</p>
|
||||||
<p class="code" style="text-align:left;">
|
<p class="code no-dollar" style="text-align:left;">
|
||||||
deb http://deb.debian.org/debian bullseye main contrib non-free<br />
|
deb http://deb.debian.org/debian bullseye main contrib non-free<br />
|
||||||
deb-src http://deb.debian.org/debian bullseye main contrib non-free<br />
|
deb-src http://deb.debian.org/debian bullseye main contrib non-free<br />
|
||||||
<br />
|
<br />
|
||||||
@ -92,14 +91,14 @@
|
|||||||
After a short update period, a prompt like <code>Steam></code> should appear.<br />
|
After a short update period, a prompt like <code>Steam></code> should appear.<br />
|
||||||
To login anonymously type:
|
To login anonymously type:
|
||||||
</p>
|
</p>
|
||||||
<p class="code">
|
<p class="code no-dollar">
|
||||||
login anonymous
|
login anonymous
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
Now install the Rust Dedicated Server application.
|
Now install the Rust Dedicated Server application.
|
||||||
</p>
|
</p>
|
||||||
<p class="code">
|
<p class="code no-dollar">
|
||||||
app_update 258550
|
app_update 258550
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
@ -108,7 +107,7 @@
|
|||||||
<br />
|
<br />
|
||||||
Afterwards you can quit the SteamCMD shell.
|
Afterwards you can quit the SteamCMD shell.
|
||||||
</p>
|
</p>
|
||||||
<p class="code">
|
<p class="code no-dollar">
|
||||||
quit
|
quit
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
@ -263,7 +262,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Blog - Johannes Olzem</title>
|
<title>Blog - Johannes Olzem</title>
|
||||||
@ -17,17 +17,17 @@
|
|||||||
<a href="#">Blog</a>
|
<a href="#">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h2>Blog</h2>
|
<h2>Blog</h2>
|
||||||
<div class="blog-entries">
|
<div class="blog-entries">
|
||||||
<a href="quick-fixes/">Quick Fixes</a>
|
<a href="quick-fixes/">Quick Fixes</a>
|
||||||
<a href="the-current-state-of-software-is-utterly-ridiculous/">The current state of software is utterly ridiculous</a>
|
<a href="the-current-state-of-software-is-utterly-ridiculous/">The current state of software is utterly ridiculous</a>
|
||||||
|
<a href="how-to-create-a-rust-server-on-linux/">How to create a Rust server on Linux</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Quick Fixes - Blog - Johannes Olzem</title>
|
<title>Quick Fixes - Blog - Johannes Olzem</title>
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<link rel="icon" href="/favico.ico">
|
<link rel="icon" href="/favico.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root">
|
<div id="root" class="quick-fixes">
|
||||||
<header>
|
<header>
|
||||||
<a href="/">Johannes Olzem's Webspace</a>
|
<a href="/">Johannes Olzem's Webspace</a>
|
||||||
</header>
|
</header>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h2>Quick Fixes</h2>
|
<h2>Quick Fixes</h2>
|
||||||
@ -25,59 +24,41 @@
|
|||||||
This is a page with small problems, to which I have found easy solutions,
|
This is a page with small problems, to which I have found easy solutions,
|
||||||
so as to not litter the blog page.
|
so as to not litter the blog page.
|
||||||
</p><br>
|
</p><br>
|
||||||
<ul style="text-align: left;">
|
<table class='quick-fixes-table'>
|
||||||
<li>
|
<tr>
|
||||||
<u>Problem:</u>
|
<th>Problem</th>
|
||||||
Nextcloud File not supported Error (<code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code>).<br>
|
<th>Solution</th>
|
||||||
<u>Solution:</u>
|
<th>Explanation</th>
|
||||||
Upload over IP and port rather than over nginx.<br>
|
</tr>
|
||||||
<u>Explanation:</u>
|
<tr>
|
||||||
<a href="https://www.rfc-editor.org/rfc/rfc2616#section-10.4.14" target="_blank">
|
<td>Nextcloud File not supported Error (<code style='line-break: anywhere'>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code>).</td>
|
||||||
Nginx 413 Error - Request entity too large
|
<td>Upload over IP and port rather than over nginx proxy.</td>
|
||||||
</a><br>
|
<td>The request payload (the data you are trying to upload) is too large for nginx.</td>
|
||||||
</li>
|
</tr>
|
||||||
<br>
|
<tr>
|
||||||
<li>
|
<td><code>Connected without internet</code> on Android after setting PiHole as DNS Server.<br></td>
|
||||||
<u>Problem:</u>
|
<td>Make sure you forward both <b>TCP</b> and <b>UDP</b> of Port 53 from your Docker container.</td>
|
||||||
<code>Connected without internet</code> on Android after setting PiHole as DNS Server.<br>
|
<td></td>
|
||||||
<u>Solution:</u>
|
</tr>
|
||||||
Make sure you forward both <b>TCP</b> and <b>UDP</b> of Port 53 from your Docker Container.<br>
|
<tr>
|
||||||
</li>
|
<td>ThinkPad R61 (or any older ThinkPad model, I believe) repeated beep at startup.</td>
|
||||||
<br>
|
<td>Check keyboard connector / swap out keyboard.</td>
|
||||||
<li>
|
<td>No keyboard detected on bootup.</td>
|
||||||
<u>Problem:</u>
|
</tr>
|
||||||
ThinkPad R61 (or any older ThinkPad model, I believe) repeated beep at startup.<br>
|
<tr>
|
||||||
<u>Solution:</u>
|
<td>Pacman install fails with 404 (<code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code>).</td>
|
||||||
Check keyboard connector / swap out keyboard.<br>
|
<td>
|
||||||
<u>Explanation:</u>
|
|
||||||
No keyboard detected on bootup.
|
|
||||||
</li>
|
|
||||||
<br>
|
|
||||||
<li>
|
|
||||||
<u>Problem:</u>
|
|
||||||
Pacman install fails with 404 (<code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code>).<br>
|
|
||||||
<u>Solution:</u>
|
|
||||||
Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated at <a href="https://archlinux.org/mirrorlist/">https://archlinux.org/mirrorlist/</a>.<br>
|
Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated at <a href="https://archlinux.org/mirrorlist/">https://archlinux.org/mirrorlist/</a>.<br>
|
||||||
Then run <code>sudo pacman -Syyu</code> to update with the new mirrorlist. Make sure to use 2 y's, to force the new changes.<br>
|
Then run <code>sudo pacman -Syyu</code> to update with the new mirrorlist. Make sure to use 2 y's, to force the new changes.
|
||||||
<u>Explanation:</u>
|
</td>
|
||||||
Your mirrorlist is outdated, possibly due to the recent <a href="https://archlinux.org/news/git-migration-completed/">pacman git migration</a>.<br>
|
<td>Your mirrorlist is outdated, possibly due to the recent <a href="https://archlinux.org/news/git-migration-completed/">pacman git migration</a>.</td>
|
||||||
</li>
|
</tr>
|
||||||
<!--<li>
|
</table>
|
||||||
<u>Problem:</u>
|
|
||||||
(<code></code>).<br>
|
|
||||||
<u>Solution:</u>
|
|
||||||
<br>
|
|
||||||
<u>Explanation:</u>
|
|
||||||
<a href="" target="_blank">
|
|
||||||
|
|
||||||
</a><br>
|
|
||||||
</li>
|
|
||||||
<br>-->
|
|
||||||
</ul>
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>The current state of software is utterly ridiculous - Blog - Johannes Olzem</title>
|
<title>The current state of software is utterly ridiculous - Blog - Johannes Olzem</title>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h1>The current state of software is utterly ridiculous</h1>
|
<h1>The current state of software is utterly ridiculous</h1>
|
||||||
@ -56,11 +55,11 @@
|
|||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
<b>TLDR</b> I am frustrated that software, especially the Windows operating system, has moved from being a tool used to interface with a computer to something that has to look pretty and could probably be used by a three-year-old.
|
<b>TLDR:</b> I am frustrated that software, especially the Windows operating system, has moved from being a tool used to interface with a computer to something that has to look pretty and could probably be used by a three-year-old.
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Contact - Johannes Olzem</title>
|
<title>Contact - Johannes Olzem</title>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="#">Contact</a>
|
<a href="#">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h2>Contact</h2>
|
<h2>Contact</h2>
|
||||||
@ -27,7 +26,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
BIN
css/DMMono-Italic.woff2
Normal file
BIN
css/DMMono-Italic.woff2
Normal file
Binary file not shown.
BIN
css/DMMono-Medium.woff2
Normal file
BIN
css/DMMono-Medium.woff2
Normal file
Binary file not shown.
BIN
css/DMMono-Regular.woff2
Normal file
BIN
css/DMMono-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
136
css/style.css
136
css/style.css
@ -1,21 +1,30 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Inter";
|
font-family: "DM Mono";
|
||||||
src: url("Inter-Regular.woff2");
|
src: url("DMMono-Regular.woff2");
|
||||||
font-weight: 400;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Inter";
|
font-family: "DM Mono";
|
||||||
src: url("Inter-Bold.woff2");
|
src: url("DMMono-Medium.woff2");
|
||||||
font-weight: 800;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "DM Mono";
|
||||||
|
src: url("DMMono-Italic.woff2");
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--txt: #e2dfdb;
|
--txt: #c0ccdb;
|
||||||
--body-bg: #222426;
|
--body-bg: #17191c;
|
||||||
--accent: #9a9184;
|
--accent: #e4d294;
|
||||||
--border: #3f4447;
|
--border: #76818e;
|
||||||
--font-body: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
--border-light: #a0a8b1;
|
||||||
|
--green: #5da892;
|
||||||
|
--font-body: "DM Mono", "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -33,14 +42,32 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
padding: 1.5rem 0 2.5rem 0;
|
margin: 1.5rem 0 2.5rem 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Add typewriter animation when text fits without line break */
|
||||||
|
@media screen and (min-width: 570px) {
|
||||||
|
header {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-right: .05em solid var(--accent);
|
||||||
|
padding-right: 10px;
|
||||||
|
animation: typing 1s steps(80), blink-cursor 2s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
nav,
|
nav,
|
||||||
footer {
|
footer {
|
||||||
margin-bottom: 1.7rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
@ -52,11 +79,12 @@ nav a {
|
|||||||
box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
|
box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover {
|
nav a:hover {
|
||||||
color: var(--txt);
|
color: var(--txt);
|
||||||
border: 1px solid #51585c;
|
border: 1px solid var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -80,6 +108,30 @@ main ul {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 900px) {
|
||||||
|
.quick-fixes {
|
||||||
|
max-width: 75% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 899px) {
|
||||||
|
.quick-fixes {
|
||||||
|
max-width: 90% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-fixes-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-fixes-table th,
|
||||||
|
.quick-fixes-table td {
|
||||||
|
border: thin solid var(--border);
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.author {
|
.author {
|
||||||
float: left;
|
float: left;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
@ -91,9 +143,30 @@ main ul {
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline {
|
.code {
|
||||||
text-decoration: underline;
|
font-family: monospace;
|
||||||
color: #06c;
|
padding: .2rem .3rem;
|
||||||
|
border-radius: .3rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
margin: .3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code::before {
|
||||||
|
content: '$ ';
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-dollar::before {
|
||||||
|
content: '' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cowsay {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
max-width: fit-content;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@ -104,7 +177,7 @@ p {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--txt);
|
color: var(--txt);
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
transition: 300ms;
|
transition: 300ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,6 +186,15 @@ a:active {
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: .2rem .3rem;
|
padding: .2rem .3rem;
|
||||||
border-radius: .3rem;
|
border-radius: .3rem;
|
||||||
@ -120,3 +202,21 @@ code {
|
|||||||
margin: .3rem;
|
margin: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
from {
|
||||||
|
max-width: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-cursor {
|
||||||
|
from,
|
||||||
|
to {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -21,11 +21,9 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h2>Donate</h2>
|
<h2>Donate</h2>
|
||||||
<p>There is basically no point in giving me money, but you can still do so by donating <b>Monero</b>, my cryptocurrency of choice</p>
|
<p>This is only here so I can copy my Monero adress when I need it and don't want to/cannot access my wallet. Don't give me money.</p>
|
||||||
<br>
|
<br>
|
||||||
<p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
|
<p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
|
||||||
<br>
|
|
||||||
<img style="max-width: 200px;" src="/img/monero.png">
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
||||||
|
|||||||
BIN
img/landchad.gif
BIN
img/landchad.gif
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
img/monero.png
BIN
img/monero.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
BIN
img/tux.gif
BIN
img/tux.gif
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
BIN
img/vim.gif
BIN
img/vim.gif
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
18
index.html
18
index.html
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Johannes Olzem</title>
|
<title>Johannes Olzem</title>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About Me</a>
|
<a href="/about/">About Me</a>
|
||||||
<a href="/contact/">Contact</a>
|
<a href="/contact/">Contact</a>
|
||||||
<a href="/donate/">Donate</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h2>Welcome to my Webspace!</h2>
|
<h2>Welcome to my Webspace!</h2>
|
||||||
@ -36,13 +35,20 @@
|
|||||||
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
|
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
|
<p class='cowsay'>
|
||||||
|
_____________________________
|
||||||
|
< Have fun on this website! >
|
||||||
|
-----------------------------
|
||||||
|
\ ^__^
|
||||||
|
\ (oo)\_______
|
||||||
|
(__)\ )\/\
|
||||||
|
||----w |
|
||||||
|
|| ||
|
||||||
|
</p>
|
||||||
<br>
|
<br>
|
||||||
<a href="https://landchad.net" target="_blank"><img src="/img/landchad.gif" alt="landchad"></a>
|
|
||||||
<a href="https://www.vim.org" target="_blank"><img src="/img/vim.gif" alt="vim"></a>
|
|
||||||
<a href="https://kernel.org" target="_blank"><img src="/img/tux.gif" alt="tux"></a>
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
|
<h6><a href><script>document.write(window.location.href);</script></a></h6>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Binary file not shown.
@ -1,63 +0,0 @@
|
|||||||
<!--My Contact inforamtion. Used for the footer.-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Contact</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h2> Contact me</h2>
|
|
||||||
<p> Johannes Olzem
|
|
||||||
<br>
|
|
||||||
Heerstr. 1
|
|
||||||
<br>
|
|
||||||
53359 Rheinbach </p>
|
|
||||||
<a href="mailto:olzemjo@sjg-rheinbach.de" title="Mail Adress">olzemjo@sjg-rheinbach.de</a>
|
|
||||||
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
@ -1,127 +0,0 @@
|
|||||||
body {
|
|
||||||
font-size: 80%;
|
|
||||||
font-family: 'Share Tech Mono', Monospace, Courier;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #202020;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrap {
|
|
||||||
width: 760px;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation {
|
|
||||||
float: right;
|
|
||||||
width: 55px;
|
|
||||||
height: 803px;
|
|
||||||
border-bottom: 1px solid #999;
|
|
||||||
border-top: 1px solid #999;
|
|
||||||
font-size: 25px;
|
|
||||||
text-align: right;
|
|
||||||
font-family: 'Share Tech Mono', Monospace, Courier;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation ul li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
|
||||||
float: left;
|
|
||||||
width: 760px;
|
|
||||||
height: 90px;
|
|
||||||
background-image: header.png;
|
|
||||||
text-align: middle;
|
|
||||||
border-top: 1px solid #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
float: left;
|
|
||||||
height: 400px;
|
|
||||||
width: 559px;
|
|
||||||
border-right: 1px solid #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ul li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ol {
|
|
||||||
color: teal;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ul li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar {
|
|
||||||
float: left;
|
|
||||||
height: 350px;
|
|
||||||
width: 100px;
|
|
||||||
top: 0;
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: light-gray;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*the . before the word means i am defining a class and not an ID. When using an ID a # is used*/
|
|
||||||
.price {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Verdana, Geneva, sans-serif;
|
|
||||||
color: teal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.specs ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotted {
|
|
||||||
border: 5px dotted #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*This defines the Table*/
|
|
||||||
table, th, td {
|
|
||||||
border: 2px solid teal;
|
|
||||||
border-collapse: collapse;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h3, h4, h5, h6 {
|
|
||||||
margin: 20px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*I wanted heading1 to be teal so i seperated it from h2-h6*/
|
|
||||||
h1 {
|
|
||||||
color: teal;
|
|
||||||
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 20px 25px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*This defines the hyperlinks*/
|
|
||||||
a {
|
|
||||||
color: teal;
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<!--This is used for more detailed information-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Details</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Details</h1>
|
|
||||||
<h2>Sizes</h2>
|
|
||||||
<p>There are several sizes of keyboard, defined by the number of keys.</p>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h3>40%</h3>
|
|
||||||
<p>A 40% Keyboard only has Keys for lettering, such as letters and a shift and backspace
|
|
||||||
as well as a backspace and a Tab.</p>
|
|
||||||
<img src="images/fourty.jpg" alt="a fourty percent keyboard"
|
|
||||||
style="width:139px;height:45px;" align="center">
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h3>60%</h3>
|
|
||||||
<p>Probably the most common size in the custom keyboard Industry.
|
|
||||||
Has the same keys as a 40% as well as numbers and certain others.</p>
|
|
||||||
<img src="images/sixty.jpg" alt="a sixty percent keyboard"
|
|
||||||
style="width:132px;height:51px;">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h3>65%</h3>
|
|
||||||
<p>My favourite size, because of the extra arrow keys. It also has three additional keys.
|
|
||||||
These are most commonly Delete, Page Up and Page Down.</p>
|
|
||||||
<img src="images/keyboard.jpg" alt="a sixty percent keyboard"
|
|
||||||
style="width:131px;height:44px;">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h3>75%/TKL</h3>
|
|
||||||
<p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p>
|
|
||||||
<img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard"
|
|
||||||
style="width:150px;height:58px;">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h3>95%/100%/full size</h3>
|
|
||||||
<p>Has the keys of the keyboard you are probably using, if you have a mainstream Keyboard.</p>
|
|
||||||
<img src="images/hundred.jpg" alt="a full size keyboard" style="width:128px;height:44px;">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h2>Lube</h2>
|
|
||||||
<p>Lube is used to significantly silent switches. I've included some typing sounds under here.</p>
|
|
||||||
<h4>Unlubed Cherry MX Red switches</h4>
|
|
||||||
<!--Here is the audio tag as seen in index.html-->
|
|
||||||
<audio controls>
|
|
||||||
<source src="sounds/redunlubed.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
<h4>Lubed Cherry MX Red switches</h4>
|
|
||||||
<audio controls>
|
|
||||||
<source src="sounds/redlubed.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
<h4>Overlubed Gateron Black Ink Switches</h4>
|
|
||||||
<audio controls>
|
|
||||||
<source src="sounds/overlubed.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
<!--This is a download page with different software, which is downlaodable-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Downloads</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Downloads</h1>
|
|
||||||
<!--I used the download tag to indicate, that the file that is being linked to, is supposed to be downloaded-->
|
|
||||||
<a href="https://github.com/the-via/releases/releases/download/v1.3.1/via-1.3.1-win.exe" download>
|
|
||||||
<h3>VIA</h3>
|
|
||||||
</a>
|
|
||||||
<p> VIA is a software, you can use to program a Keyboard.
|
|
||||||
<br>
|
|
||||||
Before you build, you normally test the PCB, which you can do with this Software too.
|
|
||||||
<br>
|
|
||||||
It is also used to change the RGB lightning on the switches or the PCB.
|
|
||||||
</p>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<a href="https://www.autohotkey.com/download/ahk-install.exe" download>
|
|
||||||
<h3>AutoHotkey</h3>
|
|
||||||
</a>
|
|
||||||
<p>AutoHotkey is a software, which is used to program macros to either to special macro keys,
|
|
||||||
or your normal Keys. It is normally used for Macro keyboards, which you can find
|
|
||||||
<a href="https://kbdfans.com/collections/20/products/kbdfans-kbdpad-pcb-v2" target="_blank">here</a>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 734 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
@ -1,116 +0,0 @@
|
|||||||
<!--This is my index Page. I listed some interesting information about custom keyboards here.
|
|
||||||
This is actually my second website made for this course, the first one being about my favorite anime.
|
|
||||||
I wasn't happy with the results, so i made this one. It is inspired by n-o-d-e.net.
|
|
||||||
This was written in englsih because when I write code I am in English mode, because the words
|
|
||||||
in the code are in english(background, title etc.)-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Custom Keyboards</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: #000000 url(images/background.jpg) no-repeat fixed center center;
|
|
||||||
}
|
|
||||||
<!--The Background image-->
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Custom Keyboards</h1>
|
|
||||||
<p>The hobby of building a custom keyboard is massively gaining popularity at the moment.
|
|
||||||
<br>
|
|
||||||
To Build a Custom Keyboard you need 5 parts.
|
|
||||||
</p>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<h3>Case</h3>
|
|
||||||
<p>The Case is basically just the Housing of the Keyboard.
|
|
||||||
All the Parts get screwed into it, so that they get held in place.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>PCB</h3>
|
|
||||||
<p>The PCB is basically just the Motherboard of the Keyboard.
|
|
||||||
You can either solder or just place the switches in,
|
|
||||||
depending of which type of PCB you have.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Switches</h3>
|
|
||||||
<p>The switches are the actuators of the typing. They send a signal through
|
|
||||||
the PCB, which sends it over the Cable to the PC.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Plate</h3>
|
|
||||||
<p>The Plate is inbetween the Switches and the PCB. The Stabilisers,
|
|
||||||
which stabilize the longer keycaps are also mounted on the Plate.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Keycaps</h3>
|
|
||||||
<p>The Keycaps are placed on the switches, so you can actually type.
|
|
||||||
They come in different colors and sizes.
|
|
||||||
There are also Printed Keycaps and blank ones.</p>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<img class="dotted" src="images/keyboard.jpg">
|
|
||||||
<h3>Here you can see a Keyboard Timelapse Build</h3>
|
|
||||||
<!--Here I embedded a Youtube Video with the code Youtube gave me. It also has Privacy Mode enabled, because i know IT people care about their privacy.-->
|
|
||||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8yvk7KDMx8A"
|
|
||||||
frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowfullscreen></iframe>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<!--This is my favorite song. I used the autoplay tag to play it when you open the page-->
|
|
||||||
<audio controls autoplay>
|
|
||||||
<source src="sounds/welcome.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
<h5>Background image</h5>
|
|
||||||
<p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
<!--This is the Store page for tghe Product shown in shop.html-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>EPBT Samurai 75% Keycap set</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<!--The text would'nt align next to the picture, so i put it in the paragraph tag-->
|
|
||||||
<p style="float: left;"><img src=images/epbt/main.jpg style="width:275px;height:275px;" border="3px"></p>
|
|
||||||
<h2>EPBT Samurai 75% Keycap set</h2>
|
|
||||||
<p class="price">99,80€</p>
|
|
||||||
<p>This is one of my favourite Keycap sets</p>
|
|
||||||
<button>
|
|
||||||
Buy here
|
|
||||||
<a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank">
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h3>Specs</h3>
|
|
||||||
<!--A Table(Tabelle)-->
|
|
||||||
<table style="width:65%">
|
|
||||||
<tr>
|
|
||||||
<td>Reverse Dyesub</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>PBT Material</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Made in china</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>with chinese letters</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>includes iso Enter</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<!--this is a gallery of images-->
|
|
||||||
<h3>Product Images</h3>
|
|
||||||
<img src="images/epbt/main2.jpg" style="width:200px;height:200px;" align="left">
|
|
||||||
<img src="images/epbt/side.jpg" style="width:200px;height:200px;" align="left">
|
|
||||||
<img src="images/epbt/close.jpg" style="width:200px;height:200px;" align="left">
|
|
||||||
<img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left">
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<!--A notice about copyright. Also used for the footer.-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Legal Notice</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h2>Legal Notice</h2>
|
|
||||||
<p>Some of the Content on this site is Copyrighted.
|
|
||||||
If you have a complaint about Copyright infringement,
|
|
||||||
please send an email to <a href="mailto:olzemjo@sjg-rheinbach.com">olzemjo@sjg-rheinbach.de</a>.
|
|
||||||
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
|
|
||||||
<br>
|
|
||||||
Also Contact this e-mail, if you are a content owner and
|
|
||||||
you would like to contribute your content to this Website.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
<!--The Privacy Policy of this Website. Inspired by the Privacy Policy of Crunchyroll.-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Privacy Policy</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h2> Privacy Policy</h2>
|
|
||||||
<h3>Data Collection</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>I will neither collect, nor sell your data.</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Deletion of personal Data</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>If you would like to request the deletion of your personal
|
|
||||||
data, send an e-mail to <a href="mailto:olzemjo@sjg-rheinbach.de">olzemjo@sjg-rheinbach.de</a> </p>
|
|
||||||
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3> Cookies</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>Cookies are not used on this Website, because I am too lazy
|
|
||||||
to put a popup on this.</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Links to other Sites</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>If you click on a banner or a Hyperlink, which leads to an external site,
|
|
||||||
this Privacy Policy is not in force anymore. If you would like to
|
|
||||||
know about the Privacy Policy of the external site, please read it there.</p>
|
|
||||||
</li>
|
|
||||||
<ul>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<!--This is a shop. I made this because I wanted to implement a store page(keycaps.html)-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Shop</title>
|
|
||||||
<link rel=stylesheet href=css/style.css>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
|
|
||||||
<div id="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<img src=images/header.png alt="header">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="navigation">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="details.html">
|
|
||||||
<p class="nav">
|
|
||||||
details
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="shop.html">
|
|
||||||
<p class="nav">
|
|
||||||
shop
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="downloads.html">
|
|
||||||
<p class="nav">
|
|
||||||
downloads
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Shop</h1>
|
|
||||||
<a href="keycaps.html">
|
|
||||||
<img src=images/epbt/main.jpg style="width:90px;height:90px;">
|
|
||||||
<h4>EPBT Samurai 65% Keycap set
|
|
||||||
<br>
|
|
||||||
99,90€</h4>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="sidebar">
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<a href="contact.html" title="Contact">Contact</a>
|
|
||||||
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
|
|
||||||
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,29 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>Index for ~/schule/info | Johannes Olzem</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="wrap">
|
|
||||||
<h1>Index for ~ / schule / info /</h1>
|
|
||||||
<ul style="list-style: inside '\1F4C1'";>
|
|
||||||
<li>
|
|
||||||
<a href="../../" style="margin-left:5px;">
|
|
||||||
../../
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="html/projekt/" style="margin-left:5px;">
|
|
||||||
html/projekt/
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="python/roulette/" style="margin-left:5px;">
|
|
||||||
python/roulette/
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>Index for ~/pages/schule/info/python/roulette/ | Johannes Olzem</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="shortcut icon" href="/img/favico.png">
|
|
||||||
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="wrap">
|
|
||||||
<h1>Index for ~ / pages / schule / info / python / roulette /</h1>
|
|
||||||
<ul style="list-style: inside '\1F4C1'";>
|
|
||||||
<li>
|
|
||||||
<a href="../../" style="margin-left:5px;">
|
|
||||||
../../
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li style="list-style: inside '\1F4C4';">
|
|
||||||
<a href="werte.png" style="margin-left:5px;">
|
|
||||||
werte.png
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 446 KiB |
Loading…
x
Reference in New Issue
Block a user