jolzem/olzem.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redo website styling

Browse Source
This commit is contained in:
Johannes Olzem
2025-11-09 20:06:24 +01:00
parent 202b607fa5
commit 4633c08da8
36 changed files with 639 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
+19 -13
View File
@@ -1,31 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Johannes Olzem</title> <title>404 Not found - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem"s personal website"> <meta name="description" content="Johannes Olzem's personal website">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>404 Not found</h1>
<blockquote>Less is more</blockquote>
<h2>404 Not Found</h2>
<p> <p>
The resource you requested was not found on this server. Click The page you want to reach was not found on this server.<br>
<a href="/">here</a> to return home. Click <a href="/">here</a> to return home.
</p> </p>
</main> </main>
<footer> <footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
about/index.html
+45 -25
View File
@@ -8,21 +8,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>About me</h1>
<blockquote>Less is more</blockquote>
<h2>About me</h2>
<p> <p>
Hey there! Hey there!<br>
My name is Johannes, and I'm a computer enthusiast born and raised in My name is Johannes, and I'm a computer enthusiast born and raised in
Germany. Recently, I graduated from school, majoring in IT and English, Germany. Recently, I graduated from school, majoring in IT and English,
and I am now training to become an IT specialist. I am passionate about and I am now training to become an IT specialist. I am passionate about
@@ -34,10 +41,14 @@
from computers I enjoy making my own pourover coffee, I am a big fan of from computers I enjoy making my own pourover coffee, I am a big fan of
technical fashion and I like cars. technical fashion and I like cars.
</p> </p>
<h2>My Skills</h2> <h1>
<p>I have at least basic knowledge in the following technologies:</p> My Skills
</h1>
<p>
I have at least basic knowledge in the following technologies:
</p>
<div style="float:left" class="skills"> <div style="float:left" class="skills">
<h3>Languages</h3> <h2>Languages</h2>
<ul> <ul>
<li>HTML &amp; CSS</li> <li>HTML &amp; CSS</li>
<li>Java</li> <li>Java</li>
@@ -46,7 +57,7 @@
</ul> </ul>
</div> </div>
<div style="float:right" class="skills"> <div style="float:right" class="skills">
<h3>Other technologies</h3> <h2>Other technologies</h2>
<ul> <ul>
<li>Linux</li> <li>Linux</li>
<li>Git</li> <li>Git</li>
@@ -55,26 +66,35 @@
<li>Docker</li> <li>Docker</li>
</ul> </ul>
</div> </div>
<br> <h1>About this website</h1>
<h2>About this website</h2>
<p> <p>
While I might not have been using the internet much or at all during the While I might not have been using the internet much or at all during the
web 1.0 times (which this site is heavily modeled after) I do believe that web 1.0 times (which this site was originally modeled after) I do believe
modern websites are unnecessarly bloated in many ways. They contain ads and that modern websites are unnecessarly bloated in many ways. They contain
trackers (that's just how capitalism works, I can't really complain about ads and trackers (that's just how capitalism works, I can't really
that) but also so much useless JavaScript. I agree that it is very useful complain about that) but also so much useless JavaScript. I agree that it
in certain areas but sometimes it is just not needed. Like in the case of a is very useful in certain areas but sometimes it is just not needed. Like
news site, or a recipe site, which in my opinion could just be served in the case of a news site, or a recipe site, which in my opinion could
statically without much (or any) JavaScript. Because of this, I created just be served statically without much (or any) JavaScript. Because of
this website, to make a small contribution to the debloated minimal web. this, I created this website, to make a small contribution to the
Just pure HTML and CSS with some (useful) quality of life JavaScript. debloated minimal web. Just pure HTML and CSS with some (useful) quality
No ads, trackers, or cookies. of life JavaScript. No ads, trackers, or cookies.
<br> <br>
It is also free and Open Source under the GNU General Public License V3, It is also free and Open Source under the GNU General Public License V3,
which you can find <a href="/LICENSE.txt">here.</a> which you can find <a href="/LICENSE.txt">here.</a>
<br> <br>
<a href="https://git.olzem.org/jolzem/olzem.org">Source code</a> <a href="https://git.olzem.org/jolzem/olzem.org">Source code</a>
</p> </p>
<h1>What happened to this site?</h1>
<p>
I have recently taken an interest in a lot of different elements of
design. While I was previously already quite interested in interior
design, my recent deep dive into the design rabbit hole led me to learn
about a lot of different design languages, different designers, and
aspects of design like product design or, more importantly, graphic
design. After seeing a few different images online, I felt inspired and
decided to redesign my own website.
</p>
</main> </main>
<footer> <footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
android-chrome-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

android-chrome-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

blog/how-to-create-a-rust-server-on-linux/index.html
+49 -39
View File
@@ -8,33 +8,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
<main class="blog-entry"> </ul>
<h1>Johannes Olzem</h1> </nav>
<blockquote>Less is more</blockquote> <main>
<h2>How to create a Rust server on Linux</h2> <h1>How to create a Rust server on Linux</h1>
<div class="author">Johannes Olzem</div> <div class="author">Johannes Olzem</div>
<div class="date">May 23, 2023</div> <div class="date">May 23, 2023</div>
<h2>Table of Contents</h2> <h2>Table of Contents</h2>
<ul> <ul>
<li><a href="#Requirements">Requirements</a></li> <li><a href="#Requirements">Requirements</a></li>
<li><a href="#SteamCMD">SteamCMD</a><br /></li> <li><a href="#SteamCMD">SteamCMD</a><br></li>
<li><a href="#Installing">Installing</a><br /></li> <li><a href="#Installing">Installing</a><br></li>
<li><a href="#Running">Running</a></li> <li><a href="#Running">Running</a></li>
</ul> </ul>
<h2 id="Requirements">Requirements</h2> <h2 id="Requirements">Requirements</h2>
<ul> <ul>
<li>Debian Linux</li> <li>Debian Linux</li>
<li>&#62;5GB of RAM</li> <li>&gt;5GB of RAM</li>
<li>&#62;4.5GB of free disc space</li> <li>&gt;4.5GB of free disc space</li>
</ul> </ul>
<h2 id="SteamCMD">SteamCMD</h2> <h2 id="SteamCMD">SteamCMD</h2>
<h3>Configuring the envoirenment</h3> <h3>Configuring the envoirenment</h3>
@@ -47,9 +54,9 @@
<p class="code cmd"> <p class="code cmd">
sudo passwd steam sudo passwd steam
</p> </p>
<br /> <br>
<p> <p>
When prompted, enter a new password for the "steam" user. <br /> When prompted, enter a new password for the "steam" user. <br>
Then switch to the "steam" user and go to its home folder. Then switch to the "steam" user and go to its home folder.
</p> </p>
<p class="code cmd"> <p class="code cmd">
@@ -58,19 +65,19 @@
<p class="code cmd"> <p class="code cmd">
cd cd
</p> </p>
<br /> <br>
<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 no-dollar" style="text-align:left;"> <p class="code" 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>
deb http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br /> deb http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br>
deb-src http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br /> deb-src http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br>
<br /> <br>
deb http://deb.debian.org/debian bullseye-updates main contrib non-free<br /> deb http://deb.debian.org/debian bullseye-updates main contrib non-free<br>
deb-src http://deb.debian.org/debian bullseye-updates main contrib non-free<br /> deb-src http://deb.debian.org/debian bullseye-updates main contrib non-free<br>
</p> </p>
<h3>Installing SteamCMD</h3> <h3>Installing SteamCMD</h3>
<p> <p>
@@ -79,7 +86,7 @@
<p class="code cmd"> <p class="code cmd">
sudo apt install steamcmd sudo apt install steamcmd
</p> </p>
<br /> <br>
<h2 id="Installing">Installing</h2> <h2 id="Installing">Installing</h2>
<p> <p>
Run SteamCMD Run SteamCMD
@@ -87,15 +94,15 @@
<p class="code cmd"> <p class="code cmd">
steamcmd steamcmd
</p> </p>
<br /> <br>
<p> <p>
After a short update period, a prompt like <code>Steam&#62;</code> should appear.<br /> After a short update period, a prompt like <code>Steam&gt;</code> should appear.<br>
To login anonymously type: To login anonymously type:
</p> </p>
<p class="code"> <p class="code">
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>
@@ -103,15 +110,15 @@
app_update 258550 app_update 258550
</p> </p>
<p> <p>
This will install and verify the Rust server.<br /> This will install and verify the Rust server.<br>
On my ~100 Mbit/s connection this took around 15-20 Minutes. <br /> On my ~100 Mbit/s connection this took around 15-20 Minutes. <br>
<br /> <br>
Afterwards you can quit the SteamCMD shell. Afterwards you can quit the SteamCMD shell.
</p> </p>
<p class="code"> <p class="code">
quit quit
</p> </p>
<br /> <br>
<h2 id="Running">Running</h2> <h2 id="Running">Running</h2>
<p> <p>
First navigate to the Rust server directory. First navigate to the Rust server directory.
@@ -119,18 +126,18 @@
<p class="code cmd"> <p class="code cmd">
cd ~/Steam/steamapps/common/rust_dedicated cd ~/Steam/steamapps/common/rust_dedicated
</p> </p>
<br /> <br>
<p> <p>
Finally, start up the Rust server by running: Finally, start up the Rust server by running:
</p> </p>
<p class="code cmd"> <p class="code cmd">
./RustDedicated -batchmode ./RustDedicated -batchmode
</p> </p>
<br /> <br>
<p> <p>
There are several arguments you can pass to the server to change its behaviour. There are several arguments you can pass to the server to change its behaviour.
</p> </p>
<br /> <br>
<table> <table>
<tbody><tr> <tbody><tr>
<th>Parameter <th>Parameter
@@ -235,17 +242,19 @@
</td> </td>
<td><code>gamelog.txt</code> <td><code>gamelog.txt</code>
</td> </td>
<td>If you"re using a script, you"d better put the current date as a filename, otherwise, it"ll be erased on every start. <td>If you're using a script, you'd better put the current date as a
filename, otherwise, it'll be erased on every start.
</td></tr> </td></tr>
<tr> <tr>
<td><code>-silent-crashes</code> <td><code>-silent-crashes</code>
</td> </td>
<td><code> - </code> <td><code> - </code>
</td> </td>
<td>Won"t display a crash dialog and will restart automatically if server is installed as service. <td>Won't display a crash dialog and will restart automatically if server
is installed as service.
</td></tr></tbody> </td></tr></tbody>
</table> </table>
<br /> <br>
<h2>Sources</h2> <h2>Sources</h2>
<ul> <ul>
<li> <li>
@@ -262,6 +271,7 @@
</li> </li>
</ul> </ul>
</main> </main>
</main>
<footer> <footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br> <br>
blog/index.html
+19 -9
View File
@@ -8,26 +8,36 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Blog</h1>
<blockquote>Less is more</blockquote> <p>
<h2>Blog</h2> Anything I write will go here:
</p>
<ul> <ul>
<li> <li>
<a href="/blog/quick-fixes/">Quick fixes</a> <a href="/blog/quick-fixes/">Quick fixes</a>
</li> </li>
<li> <li>
<a href="/blog/how-to-create-a-rust-server-on-linux/"> <a href="/blog/how-to-create-a-rust-server-on-linux/">
How to create a Rust server on linux. 23.05.23: How to create a Rust server on linux.
</a> </a>
</li> </li>
</ul> </ul>
blog/quick-fixes/android-pihole-no-internet/index.html
+17 -12
View File
@@ -8,24 +8,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote> <h2>Connected without internet on Android after setting PiHole as DNS server.</h2>
<h2>
Connected without internet on Android after setting PiHole as DNS server.
</h2>
<p> <p>
Make sure you forward both TCP and UDP of port 53 from your Docker Make sure you forward both TCP and UDP of port 53 from your Docker container.
container.
</p> </p>
</main> </main>
<footer> <footer>
blog/quick-fixes/homeassistant-proxy/index.html
+39 -23
View File
@@ -8,39 +8,55 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote>
<h2>HomeAssistant not connecting over reverse proxy</h2> <h2>HomeAssistant not connecting over reverse proxy</h2>
<p> <p>
Make sure you have enabled <em>Websockets Supports</em> or similar Make sure you have enabled <em>Websockets Support</em> or similar
functionality in your reverse proxy client.<br><br> functionality in your reverse proxy client.
If you are getting a <em>400 Bad Request</em> error, find the </p>
HomeAssistant log file and look for the following error message:<br> <p>
<code>A request from a reverse proxy was received from 12.34.56.78, but If you are getting a <code>400 Bad Request</code> error, find the
your HTTP integration is not set-up for reverse proxies</code><br><br> HomeAssistant log file and look for the following error message:
In your <code>configuration.yaml</code> file, add the following lines:<br> </p>
<pre> <p class="code">
http:<br> A request from a reverse proxy was received from 12.34.56.78, but your
use_x_forwarded_for: true<br> HTTP integration is not set-up for reverse proxies
trusted_proxies:<br> </p>
- 12.34.56.78 # The IP address from the error message <p>
</pre> In your <code>configuration.yaml</code> file, add the following lines:
</p>
<p class="code">
http:<br>
&emsp;use_x_forwarded_for: true<br>
&emsp;trusted_proxies:<br>
&emsp;&emsp;- 12.34.56.78 # The IP address from the error message
</p>
<h2>Explanation</h2>
<p>
HomeAssistant uses websockets to communicate with the browser.
</p> </p>
<h3>Explanation</h3>
<p> <p>
HomeAssistant uses websockets to communicate with the browser.<br><br>
If you are using a reverse proxy, the IP address of the incoming If you are using a reverse proxy, the IP address of the incoming
connection is not trusted and gets rejected by HomeAssistant.<br> connection is not trusted and gets rejected by HomeAssistant.
</p> </p>
</main> </main>
<footer> <footer>
blog/quick-fixes/index.html
+31 -29
View File
@@ -1,59 +1,61 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick fixes - Johannes Olzem</title> <title>Quick fixes - Johannes Olzem</title>
<meta name='description' content='Johannes Olzem's personal website'> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body class='body'> <body>
<header> <nav>
<a href='/'> <a href="/" class="header-logo">
<img src='/img/logo.png'> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<a href='/about/'>About</a> <span class="header-text">Johannes Olzem</span>
<a href='/blog/'>Blog</a> <ul>
<a href='/contact/'>Contact</a> <li>
</header> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a>
</li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fixes</h1>
<blockquote>Less is more</blockquote>
<h2>Quick fixes</h2>
<p> <p>
This is a page with small problems, to which I have found easy This is a page with small problems, to which I have found easy solutions,
solutions, so as to not litter the blog page. so as to not litter the blog page.
</p> </p>
<ul> <ul>
<li> <li>
<a href='/blog/quick-fixes/android-pihole-no-internet/'> <a href="/blog/quick-fixes/android-pihole-no-internet/">
Connected without internet on Android after setting PiHole as DNS Connected without internet on Android after setting PiHole as DNS
server server
</a> </a>
</li> </li>
<li> <li>
<a href='/blog/quick-fixes/homeassistant-proxy/'> <a href="/blog/quick-fixes/homeassistant-proxy/">
HomeAssistant not connecting over reverse proxy HomeAssistant not connecting over reverse proxy
</a> </a>
</li> </li>
<li> <li>
<a href='/blog/quick-fixes/nextcloud-file-not-supported/'> <a href="/blog/quick-fixes/nextcloud-file-not-supported/">
Nextcloud file not supported error Nextcloud file not supported error
</a> </a>
</li> </li>
<li> <li>
<a href='/blog/quick-fixes/pacman-404/'> <a href="/blog/quick-fixes/proton-audio-stuttering/">
Pacman install fails with 404
</a>
</li>
<li>
<a href='/blog/quick-fixes/proton-audio-stuttering/'>
Proton / Wine audio stuttering when using qpaeq equalizer Proton / Wine audio stuttering when using qpaeq equalizer
</a> </a>
</li> </li>
<li> <li>
<a href='/blog/quick-fixes/thinkpad-r61-beep/'> <a href="/blog/quick-fixes/thinkpad-r61-beep/">
Thinkpad R61 repeated beep on startup Thinkpad R61 repeated beep on startup
</a> </a>
</li> </li>
blog/quick-fixes/nextcloud-file-not-supported/index.html
+21 -13
View File
@@ -8,27 +8,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote>
<h2>Nextcloud file not supported error</h2> <h2>Nextcloud file not supported error</h2>
<h3> <p class="code">
<code>
exif_read_data(): File not supported at exif_read_data(): File not supported at
/var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59 /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59
</code> </p>
</h3> <p>
<p>Upload over IP and port rather than over nginx proxy.</p> Upload over IP and port rather than over nginx proxy.
<h3>Explanation</h3> </p>
<h2>Explanation</h2>
<p> <p>
The request payload (the data your are trying to upload) is too large for The request payload (the data your are trying to upload) is too large for
nginx. nginx.
blog/quick-fixes/pacman-404/index.html
-50
View File
@@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quick fix - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's personal website">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body class="body">
<header>
<a href="/">
<img src="/img/logo.png">
</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</header>
<main>
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>Pacman install fails with 404</h2>
<h3><code>error: failed retrieving file 'X' from Y : The requested URL
returned error: 404</code></h3>
<p>
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 the package database
with the new mirrorlist. Make sure to use 2 y's, to force the new changes.
</p>
<h3>Explanation</h3>
<p>
Your mirrorlist is outdated, possibly due to the recent
<a href='https://archlinux.org/news/git-migration-completed/'>
pacman git migration
</a>.
</p>
</main>
<footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer>
</body>
blog/quick-fixes/proton-audio-stuttering/index.html
+18 -8
View File
@@ -8,20 +8,30 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote>
<h2>Proton / Wine audio stuttering when using qpaeq equalizer</h2> <h2>Proton / Wine audio stuttering when using qpaeq equalizer</h2>
<p>Switch to normal audio device.</p> <p>
Switch to normal audio device.
</p>
</main> </main>
<footer> <footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
blog/quick-fixes/template.html
+21 -12
View File
@@ -8,24 +8,33 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote> <h2>::Title::</h2>
<h2>Title</h2>
<h3>Problem</h3>
<p>Fix</p>
<h3>Explanation</h3>
<p> <p>
Explanation ::Solution
</p>
<h2>Explanation</h2>
<p>
::Explanation
</p> </p>
</main> </main>
<footer> <footer>
blog/quick-fixes/thinkpad-r61-beep/index.html
+22 -10
View File
@@ -8,22 +8,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Quick fix</h1>
<blockquote>Less is more</blockquote>
<h2>Thinkpad R61 repeated beep on startup</h2> <h2>Thinkpad R61 repeated beep on startup</h2>
<h3>(or any older ThinkPad model, I believe)</h3> <p>
<p>Check keyboard connector / swap out keyboard.</p> (or any older ThinkPad model, I believe)
<h3>Explanation</h3> </p>
<p>
Check keyboard connector / swap out keyboard.
</p>
<h2>Explanation</h2>
<p> <p>
No keyboard detected on bootup. No keyboard detected on bootup.
</p> </p>
blog/template.html
-36
View File
@@ -1,36 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ Title }} - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's personal website">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body class="body">
<header>
<a href="/">
<img src="/img/logo.png">
</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</header>
<main class="blog-entry">
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>Title</h2>
<div class="author">Johannes Olzem</div>
<div class="date"></div>
<p>
</p>
</main>
<footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer>
</body>
contact/index.html
+28 -12
View File
@@ -2,29 +2,45 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Contact - Johannes Olzem</title> <title>Contact - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem"s personal website"> <meta name="description" content="Johannes Olzem's personal website">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body class="body"> <body>
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <h1>Contact</h1>
<blockquote>Less is more</blockquote>
<h2>Contact</h2>
<p> <p>
Email me: <a href="mailto:johannes@olzem.org">johannes@olzem.org</a> If you want to get in touch with me you can do so via e-mail at:
<br> <a href="mailto:johannes@olzem.org">johannes@olzem.org</a>
Find me on <a href="https://github.com/jolzem">Github</a> </p>
<p>
Additionally we can also connect via
<a href="https://github.com/jolzem">GitHub</a>.
</p>
<p>
Also feel free to visit my other site
<a href="https://keebparts.eu/">keepbarts.eu</a> where I listed a few
keyboard part stores within the EU to safely shop without worrying about
customs or import taxes.
</p> </p>
</main> </main>
<footer> <footer>
css/fonts/DM_Mono/DMMono-Regular.ttf
BIN
View File
Binary file not shown.
css/fonts/DM_Sans/DMSans-Italic.ttf
BIN
View File
Binary file not shown.
css/fonts/DM_Sans/DMSans-Regular.ttf
BIN
View File
Binary file not shown.
css/style.css
+217 -86
View File
@@ -1,95 +1,239 @@
@font-face {
font-family: "DM Sans";
src: url("/css/fonts/DM_Sans/DMSans-Regular.ttf");
}
@font-face {
font-family: "DM Sans";
src: url("/css/fonts/DM_Sans/DMSans-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: "DM Mono";
src: url("/css/fonts/DM_Mono/DMMono-Regular.ttf");
}
:root { :root {
--bg: #152528; --black: #14110F;
--dark-bg: #0f1c1e; --white: #D5DCF9;
--txt: #e6eaea;
--header-txt: #e85c51; --green-bg: #AABD8C;
--sec-header-txt: #ff8349; --beige-bg: #E9E3B4;
--link-txt: #5a93aa; --orange-bg: #F39B6D;
--gray-bg: #788896;
--beige-fg: #654236;
}
::selection {
background-color: var(--orange-bg);
color: var(--black);
} }
body { body {
background: var(--bg); background-color: var(--beige-bg);
color: var(--txt); font-family: "DM Sans", "Helvetica", "Arial", sans-serif;
font-family: 'Consolas', 'Courier', monospace; margin: 0 auto;
font-size: 130% font-size: 130%;
} }
header { nav {
min-height: 52pt; padding: 2rem;
width: calc(100% - 4rem);
height: 5rem;
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 95vw; justify-content: space-between;
background: var(--gray-bg);
}
.landing nav {
position: fixed;
background: none;
}
nav li {
display: inline;
white-space: nowrap;
margin: 0 .5rem;
padding: .5rem;
}
@media (max-width: 465px) {
nav li {
padding: .5rem;
display: block;
}
}
.header-text {
display: inline-block;
opacity: 0;
white-space: nowrap;
font-size: 1.75rem;
margin: 0 1.75rem;
overflow: hidden;
transition: opacity calc(.8s * 1.5);
}
.header-logo:hover + .header-text {
opacity: 1;
}
/* Don't display header text to avoid nav collapsing */
@media (max-width: 740px) {
.header-text {
display: none;
}
}
nav a {
text-decoration-color: rgba(0,0,0,0);
color: var(--black);
transition: .4s;
user-select: none;
}
nav a:hover {
text-decoration: underline;
text-decoration-color: var(--black);
}
.landing nav .header-text {
display: none;
}
body:not(.landing) main {
min-height: calc(100vh - 11rem);
max-width: 60vw;
margin: 0 auto; margin: 0 auto;
} }
header a { .landing-grid {
display: inline-block; display: grid;
padding: 4pt 12pt; width: 100%;
min-height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
} }
header img {
height: 24pt; .tl {
background: var(--beige-bg);
} }
blockquote { .tr {
background: var(--green-bg);
display: flex;
align-items: flex-end;
font-size: 3rem;
user-select: none;
}
.bl {
background: var(--orange-bg);
padding: .5rem;
font-size: 1.5rem;
display: flex;
justify-content: flex-end;
user-select: none;
}
.br {
background: var(--gray-bg);
display: flex;
align-items: flex-end;
}
@keyframes floatChev {
0% { transform: translate(-23px, -5px); }
50% { transform: translate(-23px, 5px); }
100% { transform: translate(-23px, -5px); }
}
.br span {
font-size: 46px;
animation: floatChev 3s ease-in-out infinite;
user-select: none;
}
.landing-lower {
width: 100%;
min-height: 56vh;
display: grid;
grid-template-columns: 1fr 1fr;
}
.ll {
background: var(--green-bg);
text-align: justify;
padding: 0 2rem;
}
@media (min-width: 790px) {
.ll {
padding-left: 20vw;
}
}
.ll h2 {
text-align: right;
}
.landing h2 {
font-size: 3rem;
font-weight: 400;
font-style: italic; font-style: italic;
padding-bottom: 24pt; margin: 0;
} }
main { .lr {
max-width: min(800px, 80vw); background: var(--beige-bg);
margin: 0 auto; padding-left: 2rem;
padding-bottom: 24pt; padding-right: 10vw;
}
.cowsay-wrapper {
min-width: 100%;
display: flex;
justify-content: center;
}
.cowsay {
font-family: monospace;
text-align: left;
white-space: pre;
max-width: fit-content;
display: inline-block;
}
.cards {
display: flex;
justify-content: space-evenly;
margin-bottom:48pt;
}
.portrait {
max-width: min(220px, 60vw);
} }
.skills { .skills {
float: left !important; width: 50%;
width: 100%; height: 17rem;
margin-bottom: 24pt;
} }
/* float right when on desktop */
@media (min-width: 500px) {
.portrait { @media (max-width: 580px) {
float: right; .landing-grid {
height: 300px; display: block;
margin-left: 2rem; width: 100%;
height: 100vh;
}
.landing {
min-height: calc(100vh/4);
}
.br {
justify-content: center;
}
.br span {
transform: translate(0, -2rem) !important;
}
.landing-lower {
display: block;
}
.ll {
padding: 0 1rem;
} }
.skills { .skills {
width: 50%; width: 100%;
height: 14rem;
} }
} }
.blog-entry p {
margin: 0;
}
.author { .author {
float: left; float: left;
max-width: 400px; max-width: 400px;
@@ -103,41 +247,28 @@ main {
} }
.code { .code {
background: var(--dark-bg); background: var(--green-bg);
font-family: "DM Mono", monospace;
padding: 1rem; padding: 1rem;
border-radius: 1rem; border-radius: 1rem;
} }
code {
font-family: "DM Mono", monospace;
font-size: 90%;
}
.cmd::before { .cmd::before {
content: '$ '; content: '$ ';
} }
footer { footer {
width: 100%; width: 100%;
height: 4rem;
text-align: center; text-align: center;
} background: var(--green-bg);
h1 {
color: var(--header-txt);
}
h2, h3, h4, h5, h6 {
color: var(--sec-header-txt);
}
p {
margin: 16pt;
display: block;
text-align: justify;
line-height: 1.25;
} }
a { a {
color: var(--link-txt); color: var(--beige-fg);
text-decoration-color: rgba(0,0,0,0);
transition: text-decoration .3s;
}
a:hover, a:active {
text-decoration-color: var(--link-txt);
} }
empty.html
-32
View File
@@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title> - Johannes Olzem</title>
<meta name='description' content='Johannes Olzem's personal website'>
<meta charset='utf-8'>
<link rel='stylesheet' href='/css/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='icon' href='/favico.ico'>
</head>
<body class='body'>
<header>
<a href='/'>
<img src='/img/logo.png'>
</a>
<a href='/about/'>About</a>
<a href='/blog/'>Blog</a>
<a href='/contact/'>Contact</a>
</header>
<main>
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2></h2>
</main>
<footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer>
</body>
favico.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 15 KiB

favicon-16x16.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 B

favicon-32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

img/bestvieweddesktop.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

img/header-logo.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1006 B

img/internetprivacy.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

img/linux_powered.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

img/logo-trans.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

img/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 20 KiB

img/nocookie.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 581 B

img/smile.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 760 B

img/vim.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

index.html
+46 -41
View File
@@ -2,65 +2,70 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Johannes Olzem</title> <title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem"s personal website"> <meta name="description" content="Johannes Olzem's personal website">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head> </head>
<body class="body"> <body class="landing">
<header> <nav>
<a href="/"> <a href="/" class="header-logo">
<img src="/img/logo.png"> <img src="/img/header-logo.webp" alt="logo">
</a> </a>
<span class="header-text">Johannes Olzem</span>
<ul>
<li>
<a href="/about/">About</a> <a href="/about/">About</a>
</li>
<li>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
</li>
<li>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
</header> </li>
</ul>
</nav>
<main> <main>
<h1>Johannes Olzem</h1> <div class="landing-grid">
<blockquote>Less is more</blockquote> <div class="landing tl"></div>
<h2>Welcome to my webspace</h2> <div class="landing tr">Johannes Olzem</div>
<div class="landing bl">less is more</div>
<div class="landing br"><span>&#8964;</span></div>
</div>
<div class="landing-lower">
<div class="landing ll">
<h2>Welcome</h2>
<p> <p>
Welcome to my Webspace!
I'm Johannes, a computer enthusiast from Germany. On this website I I'm Johannes, a computer enthusiast from Germany. On this website I
maintain my <a href="blog">blog</a> about various topics and you can maintain my
learn more about me <a href="/about/">here.</a> If you want to get in <a href="/blog/">blog</a> about various topics and you can learn more
touch with me, you can do that <a href="/contact/">here</a>. about me
<a href="/about">here.</a> If you want to get in touch with me, feel
free to do that
<a href="/contact/">here.</a>
</p> </p>
</div>
<div class="landing lr">
<h2>Why run this website?</h2> <h2>Why run this website?</h2>
<p> <p>
The internet used to be a place of personal expression, not just The internet used to be a place of personal expression, not just
corporate dominance. I believe in keeping that spirit alive. corporate dominance. I believe in keeping that spirit alive.<br>
<br> This site is a small step towards a more independent web. It also
This site is a small step towards a more independent web. allows me to share my experiences, how I do things, and other stuff
It also allows me to share my experiences, how I do things, and other that I want to put out into the world.<br>
stuff that I want to put out into the world. Please feel free to explore every crevasse of this site! Don't know
<br> where to start? Try the
Please feel free to explore every crevasse of this site! Don't know where <a href="/about/">about</a> page, to learn more about who I am.
to start? Try the <a href="/about/">about</a> page, to learn more about
who I am.
</p>
<br>
<div class="cowsay-wrapper">
<p class="cowsay">
_____________________________
&#60; Have fun on this website! &#62;
-----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</p> </p>
</div> </div>
<br>
<div class="cards">
<img src="/img/linux_powered.gif" alt="Linux powered">
<img src="/img/vim.gif" alt="vim">
<img src="/img/nocookie.gif" alt="No Cookies">
<img src="/img/bestvieweddesktop.gif" alt="Best viewed with desktop">
<img src="/img/internetprivacy.gif" alt="Internet privacy now!">
<img src="/img/smile.gif" alt="Have a smile">
</div> </div>
</main> </main>
<footer> <footer>
site.webmanifest
+1
View File
@@ -0,0 +1 @@
{"name":"Johannes Olzem's personal website","short_name":"Johannes Olzem","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#AABD8C","background_color":"#AABD8C","display":"standalone"}