easthighNerd/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: easthighNerd/Website:1b3abf5380abc4159a7df02f5f3cea10c0fd04f0
Branches Tags
easthighNerd/Website:main
...
compare: easthighNerd/Website:main
Branches Tags
easthighNerd/Website:main

3 Commits
1b3abf5380 ... main

Author SHA1 Message Date
easthighNerd 7f63b95163 Updated CSS file with new targeted divs, and turned spaced tabs into proper tabs 2026-05-22 22:30:57 -04:00
easthighNerd 7f495212e3 Updated website with new designs and content 2026-05-22 22:28:40 -04:00
easthighNerd 605f7ae2d5 Added 'Debian powered' badge 2026-05-22 22:27:30 -04:00
13 changed files with 1089 additions and 743 deletions
Expand all files Collapse all files
about/index.html
+77 -69
View File
@@ -1,72 +1,80 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
[ About | easthighNerd ] [ About | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
<p> <p>
About About
</p> </p>
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div> </div>
</div> <div class="navigation_bar">
<div class="window_content"> <p>
<style> <img src="/res/img/back.png" width="23px" height="23px" alt="Back button" style="filter: grayscale(1)">
.window_content { Back
background-image: url(/res/img/strawberries.jpg); </p>
background-size: 100%; </div>
} <div class="address_bar">
</style> <p>
<h1 id="hello-world">Hello, world!</h1> https://www.easthighnerd.net/
<span style="display: flex;"> </p>
<div class="portrait"> </div>
<p><img src="/res/img/portrait.png" width="160px" height="160px" alt="Portrait"></p> </div>
</div> </div>
<div> <div class="window_content">
<p> <style>
I’m Jean, and this is my website! .window_content {
</p> background-image: url(/res/img/strawberries.jpg);
<p> background-size: 100%;
Modeled after my ViewSonic E70 CRT monitor, this website }
operates in a similar way that a computer would, and it’s </style>
designed at least somewhat after the Windows XP operating <h1 id="hello-world">Hello, world!</h1>
system. <span style="display: flex;">
</p> <div class="portrait">
<p> <p><img src="/res/img/portrait.png" width="160px" height="160px" alt="Portrait"></p>
I’m a transfem somewhere in my twenties, and I enjoy anime, </div>
manga, video games, computers, and pretty much about <div>
anything nerdy! <p>
</p> I’m Jean, and this is my website!
</div> </p>
</span> <p>
<p> Modeled after my ViewSonic E70 CRT monitor, this website operates in a
I’m also a huge proponent of free and open source software, similar way that a computer would, and it’s designed at least somewhat
as well as encryption, privacy, and security. after the Windows XP operating system.
</p> </p>
<p> <p>
I hope you enjoy browsing about this weird little website of I’m a transfem somewhere in my twenties, and I enjoy anime, manga, video
mine! games, computers, and pretty much about anything nerdy!
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> </span>
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px"> <p>
<p> I’m also a huge proponent of free and open source software, as well as
https://www.easthighnerd.net/ encryption, privacy, and security.
</p> </p>
</div> <p>
</body> I hope you enjoy browsing about this weird little website of mine!
</p>
</div>
<div class="explorer_bar_bottom">
<p>
https://www.easthighnerd.net/
</p>
</div>
</body>
</html> </html>
blog/2019/05/nexus-7-2013-wifi-and-ubuntu-touch/index.html
+21 -11
View File
@@ -5,9 +5,9 @@
<title> <title>
[ Nexus 7 2013 (WiFi) and Ubuntu Touch | easthighNerd ] [ Nexus 7 2013 (WiFi) and Ubuntu Touch | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
@@ -17,14 +17,25 @@
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
</a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div> </div>
</div> </div>
<div class="window_content"> <div class="window_content">
@@ -103,7 +114,6 @@ overall!</p>
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
<p> <p>
https://www.easthighnerd.net/ https://www.easthighnerd.net/
</p> </p>
blog/2023/11/my-experience-with-apple/index.html
+21 -11
View File
@@ -5,9 +5,9 @@
<title> <title>
[ My Experience with Apple | easthighNerd ] [ My Experience with Apple | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
@@ -17,14 +17,25 @@
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
</a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div> </div>
</div> </div>
<div class="window_content"> <div class="window_content">
@@ -203,7 +214,6 @@ more privacy respecting way to use YouTube))</li>
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
<p> <p>
https://www.easthighnerd.net/ https://www.easthighnerd.net/
</p> </p>
blog/2023/11/secure-apple-id-against-iphone-theft/index.html
+21 -11
View File
@@ -5,9 +5,9 @@
<title> <title>
[ Secure Apple ID Against iPhone Theft | easthighNerd ] [ Secure Apple ID Against iPhone Theft | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
@@ -17,14 +17,25 @@
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
</a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div> </div>
</div> </div>
<div class="window_content"> <div class="window_content">
@@ -187,7 +198,6 @@ Stop iPhone Data Thefts Now!</a></li>
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
<p> <p>
https://www.easthighnerd.net/ https://www.easthighnerd.net/
</p> </p>
blog/2025/06/hello-again/index.html
+21 -11
View File
@@ -5,9 +5,9 @@
<title> <title>
[ Hello Again | easthighNerd ] [ Hello Again | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
@@ -17,14 +17,25 @@
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
</a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div> </div>
</div> </div>
<div class="window_content"> <div class="window_content">
@@ -97,7 +108,6 @@ incorrect spellings I might make along the way!</p>
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
<p> <p>
https://www.easthighnerd.net/ https://www.easthighnerd.net/
</p> </p>
blog/2025/06/static-site-generators/index.html
+21 -11
View File
@@ -5,9 +5,9 @@
<title> <title>
[ Static Site Generators | easthighNerd ] [ Static Site Generators | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
@@ -17,14 +17,25 @@
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
</a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div> </div>
</div> </div>
<div class="window_content"> <div class="window_content">
@@ -113,7 +124,6 @@ besides Linux can make use of it if they so wish</p>
</p> </p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
<p> <p>
https://www.easthighnerd.net/ https://www.easthighnerd.net/
</p> </p>
blog/2025/07/setup-gitea-on-debian/index.html
+154
View File
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
[ Setup Gitea on Debian | easthighNerd ]
</title>
<link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd">
</head>
<body class="window">
<div class="window_bar">
<p>
Setup Gitea on Debian
</p>
<a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a>
<div class="explorer_bar_top">
<div class="menu_bar">
<p>
File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p>
</div>
<div class="navigation_bar">
<p>
<a href="/blog/" class="back_button">
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
Back
</a>
</p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div>
</div>
<div class="window_content">
<h1 id="setup-gitea-on-debian">Setup Gitea on Debian</h1>
<p>I just recently setup a new Gitea server for myself, and I would like
to share with y’all on how to do the same</p>
<p>This was done on a fresh Debian 12 cheapo VPS on Linode, so this
guide will pretty much apply to any Debian (and likely Ubuntu) system
that is more-or-less a stock installation</p>
<p>I did this using
<a href="https://gitlab.com/packaging/gitea/" target="_blank">a
third-party repository for Gitea</a> that was
<a href="https://www.gitea.com/gitea/awesome-gitea/src/branch/main/README.md#user-content-packages/" target="blank">linked
from the official site</a>, as I don’t care for Docker personally, and
with a PostgreSQL database as opposed to something like SQLite, as
that’s the database I prefer to use when I have to use one (I’m not a
big database person either)</p>
<p>Caddy will be used for the webserver as well, as it handles automatic
TLS certificate acquisition, and is easy to setup</p>
<p>For clarity’s sake, any command that starts with a <code>#</code> has
to be run either as root or with <code>sudo</code>, and any command that
starts with <code>$</code> can be run as a normal user (neither
<code>#</code> nor <code>$</code> are part of the actual command
itself)</p>
<p>We’ll also assume <code>nano</code> will be used for editing files,
but you can use whatever text editor you prefer</p>
<p>We’re also going to assume you already have a domain name pointed at
the server you are doing this on (we’ll use <code>git.example.net</code>
as a placeholder)</p>
<h2 id="overview">Overview</h2>
<ol type="1">
<li><a href="#adding-a-repo-for-installing-gitea">Adding a repo for
installing Gitea</a></li>
<li><a href="#install-gitea-postgresql-and-caddy">Install Gitea,
PostgreSQL, and Caddy</a></li>
<li><a href="#configure-postgresql">Configure PostgreSQL</a></li>
<li><a href="#configure-caddy">Configure Caddy</a></li>
<li><a href="#setup-gitea">Setup Gitea</a></li>
</ol>
<h2 id="adding-a-repo-for-installing-gitea">Adding a Repo for Installing
Gitea</h2>
<p>First thing we’re gonna need to do, since we’re not using something
like Docker, or just using the standalone binary, is add the third-party
repo for Gitea</p>
<p>First up, we’ll download the GPG key for the repo</p>
<pre><code># curl -sL -o /etc/apt/trusted.gpg.d/morph027-gitea.asc https://packaging.gitlab.io/gitea/gpg.key</code></pre>
<p>Then, we’ll add the repo by creating/editing the <code>.source</code>
file that will contain the repo’s information in <code>deb822</code>
format</p>
<pre><code># nano /etc/apt/sources.list.d/morph027-gitea.sources</code></pre>
<pre><code>Types: deb
URIs: https://packaging.gitlab.io/gitea
Suites: gitea
Components: main
Signed-By: /etc/apt/trusted.gpg.d/morph027-gitea.asc
Enabled: yes</code></pre>
<p>Now we’ll update apt so it can refresh it’s list of known
packages</p>
<pre><code># apt update</code></pre>
<h2 id="install-gitea-postgresql-and-caddy">Install Gitea, PostgreSQL,
and Caddy</h2>
<p>Now for the easiest part, we’ll install Gitea, our PostgreSQL
database, and our Caddy webserver</p>
<pre><code># apt install gitea postgresql caddy</code></pre>
<h2 id="configure-postgresql">Configure PostgreSQL</h2>
<p>Now for configuring PostgreSQL</p>
<p>First we’re gonna edit PostgreSQL’s config file</p>
<pre><code># nano /etc/postgresql/15/main/postgresql.conf</code></pre>
<p>and go to line 96, and uncomment</p>
<pre><code>#password_encryption = scram-sha-256 # scram-sha-256 or md5</code></pre>
<p>Next, we’re gonna edit</p>
<pre><code># nano /etc/postgresql/15/main/pg_hba.conf</code></pre>
<p>and add at the bottom of the file</p>
<pre><code>local gitea gitea scram-sha-256</code></pre>
<p>Now, we’ll restart PostgreSQL</p>
<pre><code># sytemctl restart postgresql</code></pre>
<p>Now, to actually setup and configure the database</p>
<p>First, we’ll need to run <code>psql</code> as the
<code>postgres</code> user</p>
<pre><code>$ sudo -u postgres psql</code></pre>
<p>Now, we need to create the “role” (user) that PostgreSQL will use for
interfacing with the database, replacing <code>password</code> with the
password you want to assign it</p>
<pre><code>CREATE ROLE gitea WITH LOGIN PASSWORD &#39;password&#39;</code></pre>
<p>Next, the database</p>
<pre><code>CREATE DATABASE gitea WITH OWNER gitea TEMPLATE template0 ENCODING UTF8 LC_COLLATE &#39;en_US.UTF-8&#39; LC_CTYPE &#39;en_US.UTF-8&#39;;</code></pre>
<p>Now exit <code>psql</code></p>
<pre><code>exit</code></pre>
<h2 id="configure-caddy">Configure Caddy</h2>
<p>We’re gonna edit the main Caddyfile and configure it to simply
reverse proxy traffic to our new Gitea server</p>
<pre><code># nano /etc/caddy/Caddyfile</code></pre>
<p>Comment out/delete the contents of the file and put in</p>
<pre><code>git.example.net {
reverse_proxy localhost:3000
}</code></pre>
<p>And now we’ll restart Caddy</p>
<pre><code># systemctl restart caddy</code></pre>
<h2 id="setup-gitea">Setup Gitea</h2>
<hr>
<p>
<img src="/res/img/badges/by-sa.svg" class="cc_badge">
<br>
CC BY-SA 4.0
</p>
<p>
This work is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="external_link" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>
</p>
</div>
<div class="explorer_bar_bottom">
<p>
https://www.easthighnerd.net/
</p>
</div>
</body>
</html>
blog/index.html
+76 -69
View File
@@ -1,72 +1,79 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
[ Blog | easthighNerd ] [ Blog | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
<p> <p>
Blog Blog
</p> </p>
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div> </div>
</div> <div class="navigation_bar">
<div class="window_content"> <p>
<h1 id="welcome-to-my-blog">Welcome to… my blog!</h1> <img src="/res/img/back.png" width="23px" height="23px" alt="Back button" style="filter: grayscale(1)">
<p><a href="/blog/feed.rss" target="_blank"><img src="/res/img/rss.gif" title="RSS Feed" alt="RSS feed gif"></a></p> Back
<h2 id="recent-blog-posts">Recent blog posts</h2> </p>
<ol type="1"> </div>
<li>2025-06-21 - <a href="/blog/2025/06/hello-again/">Hello <div class="address_bar">
Again</a></li> <p>
<li>2025-06-21 - <a https://www.easthighnerd.net/
href="/blog/2025/06/static-site-generators/">Static Site </p>
Generators</a></li> </div>
<li>2023-11-01 - <a </div>
href="/blog/2023/11/secure-apple-id-against-iphone-theft/">Secure </div>
Apple ID Against iPhone Theft</a></li> <div class="window_content">
<li>2023-11-01 - <a <h1 id="welcome-to-my-blog">Welcome to… my blog!</h1>
href="/blog/2023/11/my-experience-with-apple/">My Experience <p><a href="/blog/feed.rss" target="_blank"><img src="/res/img/rss.gif" title="RSS Feed" alt="RSS feed gif"></a></p>
with Apple</a></li> <h2 id="recent-blog-posts">Recent blog posts</h2>
<li>2019-05-26 - <a <ol type="1">
href="/blog/2019/05/nexus-7-2013-wifi-and-ubuntu-touch/">Nexus <li>2025-06-21 - <a href="/blog/2025/06/hello-again/">Hello
7 2013 WiFi and Ubuntu Touch</a></li> Again</a></li>
</ol> <li>2025-06-21 - <a href="/blog/2025/06/static-site-generators/">Static
<h2 id="all-blog-posts">All blog posts</h2> Site Generators</a></li>
<ul> <li>2023-11-01 - <a
<li>2025-06-21 - <a href="/blog/2025/06/hello-again/">Hello href="/blog/2023/11/secure-apple-id-against-iphone-theft/">Secure Apple
Again</a></li> ID Against iPhone Theft</a></li>
<li>2025-06-21 - <a <li>2023-11-01 - <a href="/blog/2023/11/my-experience-with-apple/">My
href="/blog/2025/06/static-site-generators/">Static Site Experience with Apple</a></li>
Generators</a></li> <li>2019-05-26 - <a
<li>2023-11-01 - <a href="/blog/2019/05/nexus-7-2013-wifi-and-ubuntu-touch/">Nexus 7 2013
href="/blog/2023/11/secure-apple-id-against-iphone-theft/">Secure WiFi and Ubuntu Touch</a></li>
Apple ID Against iPhone Theft</a></li> </ol>
<li>2023-11-01 - <a <h2 id="all-blog-posts">All blog posts</h2>
href="/blog/2023/11/my-experience-with-apple/">My Experience <ul>
with Apple</a></li> <li>2025-06-21 - <a href="/blog/2025/06/hello-again/">Hello
<li>2019-05-26 - <a Again</a></li>
href="/blog/2019/05/nexus-7-2013-wifi-and-ubuntu-touch/">Nexus <li>2025-06-21 - <a href="/blog/2025/06/static-site-generators/">Static
7 2013 WiFi and Ubuntu Touch</a></li> Site Generators</a></li>
</ul> <li>2023-11-01 - <a
</div> href="/blog/2023/11/secure-apple-id-against-iphone-theft/">Secure Apple
<div class="explorer_bar_bottom"> ID Against iPhone Theft</a></li>
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px"> <li>2023-11-01 - <a href="/blog/2023/11/my-experience-with-apple/">My
<p> Experience with Apple</a></li>
https://www.easthighnerd.net/ <li>2019-05-26 - <a
</p> href="/blog/2019/05/nexus-7-2013-wifi-and-ubuntu-touch/">Nexus 7 2013
</div> WiFi and Ubuntu Touch</a></li>
</body> </ul>
</div>
<div class="explorer_bar_bottom">
<p>
https://www.easthighnerd.net/
</p>
</div>
</body>
</html> </html>
buttons/index.html
+107 -99
View File
@@ -1,103 +1,111 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
[ Buttons | easthighNerd ] [ Buttons | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
<p> <p>
Buttons Buttons
</p> </p>
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div> </div>
</div> <div class="navigation_bar">
<div class="window_content"> <p>
<!-- 88x31 --> <img src="/res/img/back.png" width="23px" height="23px" alt="Back button" style="filter: grayscale(1)">
<!--<a href="https:///" target="_blank"><img src="/res/img/badges/" alt="" width="88px" height="31px"></a>--> Back
<!-- 32x32 --> </p>
<!--<a href="https:///" target="_blank"><img src="/res/img/buttons/" alt="" width="32px" height="32px"></a>--> </div>
<div class="button_container" <div class="address_bar">
style="position: absolute; top: 0px; left: 4px;"> <p>
<h2 style="text-align: center;"> https://www.easthighnerd.net/
My Badges </p>
</h2> </div>
<div </div>
style="overflow: auto; height: 201px; margin-top: -8px;"> </div>
<div class="web_buttons"> <div class="window_content">
<!-- Badges --> <!-- 88x31 -->
<p><a href="/res/img/badges/large/web-badge-large.gif" target="_blank"><img src="/res/img/badges/web-badge.gif" alt="" width="88px" height="31px"></a> <!--<a href="https:///" target="_blank"><img src="/res/img/badges/" alt="" width="88px" height="31px"></a>-->
<a href="/res/img/badges/large/web-badge-2-large.gif" target="_blank"><img src="/res/img/badges/web-badge-2.gif" alt="" width="88px" height="31px"></a></p> <!-- 32x32 -->
</div> <!--<a href="https:///" target="_blank"><img src="/res/img/buttons/" alt="" width="32px" height="32px"></a>-->
</div> <div class="button_container"
</div> style="position: absolute; top: 0px; left: 4px;">
<div class="button_container" <h2 style="text-align: center;">
style="position: absolute; bottom: 4px; left: 4px;"> My Badges
<h2 style="text-align: center;"> </h2>
Other’s Badges <div style="overflow: auto; calc(100%-20px); margin-top: -8px;">
</h2> <div class="web_buttons">
<div <!-- Badges -->
style="overflow: auto; height: 201px; margin-top: -8px;"> <p><a href="/res/img/badges/large/web-badge-large.gif" target="_blank"><img src="/res/img/badges/web-badge.gif" alt="" width="88px" height="31px"></a>
<div class="web_buttons"> <a href="/res/img/badges/large/web-badge-2-large.gif" target="_blank"><img src="/res/img/badges/web-badge-2.gif" alt="" width="88px" height="31px"></a></p>
<p><a href="https://yesterweb.org/no-to-web3/" target="_blank"><img src="/res/img/badges/roly-saynotoweb3.gif" alt="Say no to Web3" width="88px" height="31px"></a> </div>
<a href="https://yesterweb.org/" target="_blank"><img src="/res/img/badges/yesterweb.png" alt="The Yesterweb" width="88px" height="31px"></a> </div>
<a href="https://www.homestuck.com/sweet-bro-and-hella-jeff" target="_blank"><img src="/res/img/badges/sbahj.jpg" alt="sweet bro and hella jeff" width="88px" height="31px"></a> </div>
<a href="https://ribo.zone/" target="_blank"><img src="/res/img/badges/ribozone.gif" alt="ribose" width="88px" height="31px"></a> <div class="button_container"
<a href="https://32bit.cafe/" target="_blank"><img src="/res/img/badges/32b-neon.gif" alt="32-Bit Cafe" width="88px" height="31px"></a> style="position: absolute; bottom: 4px; left: 4px;">
<a href="https://sapoweb.neocities.org/" target="_blank"><img src="/res/img/badges/sapo_banner.gif" alt="where cinders lie" width="88px" height="31px"></a></p> <h2 style="text-align: center;">
</div> Other’s Badges
<div class="web_buttons"> </h2>
<p><img src="/res/img/badges/brokenimg.png" alt="Broken image" width="88px" height="31px"> <div style="overflow: auto; calc(100%-20px); margin-top: -8px;">
<img src="/res/img/badges/cookie.png" alt="No cookies" width="88px" height="31px"> <div class="web_buttons">
<img src="/res/img/badges/i_dream_in_html.gif" alt="I dream in HTML" width="88px" height="31px"> <p><a href="https://yesterweb.org/no-to-web3/" target="_blank"><img src="/res/img/badges/roly-saynotoweb3.gif" alt="Say no to Web3" width="88px" height="31px"></a>
<img src="/res/img/badges/bestcomp.gif" alt="Best viewed with a computer" width="88px" height="31px"></p> <a href="https://yesterweb.org/" target="_blank"><img src="/res/img/badges/yesterweb.png" alt="The Yesterweb" width="88px" height="31px"></a>
</div> <a href="https://www.homestuck.com/sweet-bro-and-hella-jeff" target="_blank"><img src="/res/img/badges/sbahj.jpg" alt="sweet bro and hella jeff" width="88px" height="31px"></a>
</div> <a href="https://ribo.zone/" target="_blank"><img src="/res/img/badges/ribozone.gif" alt="ribose" width="88px" height="31px"></a>
</div> <a href="https://32bit.cafe/" target="_blank"><img src="/res/img/badges/32b-neon.gif" alt="32-Bit Cafe" width="88px" height="31px"></a>
<div class="button_container" <a href="https://sapoweb.neocities.org/" target="_blank"><img src="/res/img/badges/sapo_banner.gif" alt="where cinders lie" width="88px" height="31px"></a></p>
style="position: absolute; top: 0px; right: 4px;"> </div>
<h2 style="text-align: center;"> <div class="web_buttons">
My Buttons <p><img src="/res/img/badges/brokenimg.png" alt="Broken image" width="88px" height="31px">
</h2> <img src="/res/img/badges/cookie.png" alt="No cookies" width="88px" height="31px">
<div <img src="/res/img/badges/i_dream_in_html.gif" alt="I dream in HTML" width="88px" height="31px">
style="overflow: auto; height: 201px; margin-top: -8px;"> <img src="/res/img/badges/bestcomp.gif" alt="Best viewed with a computer" width="88px" height="31px">
<div class="web_buttons"> <img src="/res/img/badges/debian-powered.gif" alt="Debian powered" width="88px" height="31px"></p>
<!-- Buttons --> </div>
<p><a href="/res/img/buttons/large/web-button-2-large.gif" target="_blank"><img src="/res/img/buttons/web-button-2.gif" width="32px" height="32px"></a> </div>
<a href="/res/img/buttons/large/trans_flag-shine-large.gif" target="_blank"><img src="/res/img/buttons/trans_flag-shine.gif" width="32px" height="32px"></a></p> </div>
</div> <div class="button_container"
</div> style="position: absolute; top: 0px; right: 4px;">
</div> <h2 style="text-align: center;">
<div class="button_container" My Buttons
style="position: absolute; bottom: 4px; right: 4px;"> </h2>
<h2 style="text-align: center;"> <div style="overflow: auto; calc(100%-20px); margin-top: -8px;">
Other’s Buttons <div class="web_buttons">
</h2> <!-- Buttons -->
<div <p><a href="/res/img/buttons/large/web-button-2-large.gif" target="_blank"><img src="/res/img/buttons/web-button-2.gif" width="32px" height="32px"></a>
style="overflow: auto; height: 201px; margin-top: -8px;"> <a href="/res/img/buttons/large/trans_flag-shine-large.gif" target="_blank"><img src="/res/img/buttons/trans_flag-shine.gif" width="32px" height="32px"></a></p>
<div class="web_buttons"> </div>
</div>
</div>
<div class="button_container"
style="position: absolute; bottom: 4px; right: 4px;">
<h2 style="text-align: center;">
Other’s Buttons
</h2>
<div style="overflow: auto; calc(100%-20px); margin-top: -8px;">
<div class="web_buttons">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px"> <p>
<p> https://www.easthighnerd.net/
https://www.easthighnerd.net/ </p>
</p> </div>
</div> </body>
</body>
</html> </html>
links/index.html
+67 -60
View File
@@ -1,63 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
[ Links | easthighNerd ] [ Links | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
<p> <p>
Links Links
</p> </p>
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div> </div>
</div> <div class="navigation_bar">
<div class="window_content"> <p>
<h2 <img src="/res/img/back.png" width="23px" height="23px" alt="Back button" style="filter: grayscale(1)">
id="heres-some-other-places-on-the-interwebs-i-recommend-having-a-looksie-at">Here’s Back
some other places on the interwebs I recommend having a </p>
looksie at!</h2> </div>
<ul> <div class="address_bar">
<li><a href="https://32bit.cafe/" target="_blank">32-Bit <p>
Cafe</a></li> https://www.easthighnerd.net/
<li><a href="https://www.debian.org/" target="_blank">Debian</a></li> </p>
<li><a href="https://www.endof10.org/" target="_blank">End </div>
of 10</a></li> </div>
<li><a href="https://www.fedoraproject.org/" target="_blank">Fedora </div>
Project</a></li> <div class="window_content">
<li><a href="https://www.fsfe.org/" target="_blank">Free <h2
Software Foundation Europe</a></li> id="heres-some-other-places-on-the-interwebs-i-recommend-having-a-looksie-at">Here’s
<li><a href="https://www.gimp.org/" target="_blank">The GNU some other places on the interwebs I recommend having a looksie at!</h2>
Image Manipulation Program</a></li> <ul>
<li><a href="https://www.inkscape.org/" target="_blank">Inkscape</a></li> <li><a href="https://32bit.cafe/" target="_blank">32-Bit Cafe</a></li>
<li><a href="https://www.kate-editor.org/" target="_blank">Kate</a></li> <li><a href="https://www.debian.org/" target="_blank">Debian</a></li>
<li><a href="https://www.kde.org/" target="_blank">KDE</a></li> <li><a href="https://www.endof10.org/" target="_blank">End of
<li><a href="https://www.neocities.org/" target="_blank">Neocities</a></li> 10</a></li>
<li><a href="https://www.thenewoil.org/" target="_blank">The <li><a href="https://www.fsfe.org/" target="_blank">Free Software
New Oil</a></li> Foundation Europe</a></li>
<li><a href="https://www.nixos.org/" target="_blank">NixOS</a></li> <li><a href="https://www.gimp.org/" target="_blank">The GNU Image
<li><a href="https://www.techlore.tech/" target="_blank">Techlore</a></li> Manipulation Program</a></li>
<li><a href="https://www.vscodium.com/" target="_blank">VSCodium</a></li> <li><a href="https://www.inkscape.org/" target="_blank">Inkscape</a></li>
<li><a href="https://yesterweb.org/" target="_blank">Yesterweb</a></li> <li><a href="https://www.kate-editor.org/" target="_blank">Kate</a></li>
</ul> <li><a href="https://www.kde.org/" target="_blank">KDE</a></li>
</div> <li><a href="https://www.nekoweb.org/" target="_blank">Nekoweb</a></li>
<div class="explorer_bar_bottom"> <li><a href="https://www.neocities.org/" target="_blank">Neocities</a></li>
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px"> <li><a href="https://www.thenewoil.org/" target="_blank">The New
<p> Oil</a></li>
https://www.easthighnerd.net/ <li><a href="https://www.techlore.tech/" target="_blank">Techlore</a></li>
</p> <li><a href="https://www.vscodium.com/" target="_blank">VSCodium</a></li>
</div> <li><a href="https://yesterweb.org/" target="_blank">Yesterweb</a></li>
</body> </ul>
</div>
<div class="explorer_bar_bottom">
<p>
https://www.easthighnerd.net/
</p>
</div>
</body>
</html> </html>
pgp/index.html
+47 -37
View File
@@ -1,33 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> <title>
[ PGP | easthighNerd ] [ PGP | easthighNerd ]
</title> </title>
<link href="/res/css/default.css" rel="stylesheet"> <link href="/res/css/default.css" rel="stylesheet">
<link href="/res/img/favicon.gif" rel="icon" type="image/gif"> <link href="/res/img/favicon.gif" rel="icon" type="image/gif">
<link rel="me" href="https://raru.re/@easthighNerd"> <link rel="me" href="https://raru.re/@easthighNerd">
</head> </head>
<body class="window"> <body class="window">
<div class="window_bar"> <div class="window_bar">
<p> <p>
PGP PGP
</p> </p>
<a href="/home/" class="close_button"> <a href="/home/" class="close_button">
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button"> <img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
</a> </a>
<div class="explorer_bar_top"> <div class="explorer_bar_top">
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px"> <div class="menu_bar">
<p> <p>
https://www.easthighnerd.net/ File&emsp;Edit&emsp;View&emsp;Favorites&emsp;Tools&emsp;Help
</p> </p>
</div> </div>
</div> <div class="navigation_bar">
<div class="window_content"> <p>
<p><a href="/pgp/9DC7C667F77DFB0B.asc">9DC7 C667 F77D <img src="/res/img/back.png" width="23px" height="23px" alt="Back button" style="filter: grayscale(1)">
FB0B</a></p> Back
<pre><code>----BEGIN PGP PUBLIC KEY BLOCK----- </p>
</div>
<div class="address_bar">
<p>
https://www.easthighnerd.net/
</p>
</div>
</div>
</div>
<div class="window_content">
<p><a href="/pgp/9DC7C667F77DFB0B.asc">9DC7 C667 F77D FB0B</a></p>
<pre><code>----BEGIN PGP PUBLIC KEY BLOCK-----
mDMEZ+loTxYJKwYBBAHaRw8BAQdAf2j3KorUam08yNe8BGvQ1wIlkOp7QRP8Yl2Z mDMEZ+loTxYJKwYBBAHaRw8BAQdAf2j3KorUam08yNe8BGvQ1wIlkOp7QRP8Yl2Z
oqevf9y0HEplYW4gPGplYW5AZWFzdGhpZ2huZXJkLm5ldD6IkAQTFggAOBYhBNEr oqevf9y0HEplYW4gPGplYW5AZWFzdGhpZ2huZXJkLm5ldD6IkAQTFggAOBYhBNEr
@@ -40,13 +51,12 @@ ffsLXzgBAM7+tqsBlLe/A72LetDP3xUZIMyMK7/aUjRqZPKeK4WRAQCDTSQcypJC
JyZNKbhpqXuuUUCtkHFjaqNae2Mt8g+ACw== JyZNKbhpqXuuUUCtkHFjaqNae2Mt8g+ACw==
=PtEu =PtEu
-----END PGP PUBLIC KEY BLOCK-----</code></pre> -----END PGP PUBLIC KEY BLOCK-----</code></pre>
<p><img src='/res/img/openpgp4fpr.svg' alt='OPENPGP4FPR QR Code' loading='lazy' width='500pt' height='500pt'></p> <p><img src='/res/img/openpgp4fpr.svg' alt='OPENPGP4FPR QR Code' loading='lazy' width='500pt' height='500pt'></p>
</div> </div>
<div class="explorer_bar_bottom"> <div class="explorer_bar_bottom">
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px"> <p>
<p> https://www.easthighnerd.net/
https://www.easthighnerd.net/ </p>
</p> </div>
</div> </body>
</body>
</html> </html>
res/css/default.css
+456 -354
View File
@@ -1,455 +1,557 @@
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/* font-size: clamp(12px, 18px, 24px); */ /* font-size: clamp(12px, 18px, 24px); */
font-size: 18px; font-size: 18px;
} }
.monitor_body { .monitor_body {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #eceab9; background-color: #eceab9;
} }
.monitor { .monitor {
position: absolute; position: absolute;
/* background-image: url("/res/img/monitor.png"); */ /* background-image: url("/res/img/monitor.png"); */
/* width: 1280px; */ /* width: 1280px; */
/* height: 1024px; */ /* height: 1024px; */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-size: contain; background-size: contain;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.power_button { .power_button {
/* position: absolute; */ /* position: absolute; */
/* right: 208px; */ /* right: 208px; */
/* bottom: 0px; */ /* bottom: 0px; */
width: 80px; width: 80px;
height: 64px; height: 64px;
background-image: url("/res/img/power-button.png"); background-image: url("/res/img/power-button.png");
/* background-color: pink; */ /* background-color: pink; */
border-width: 16px; border-width: 16px;
border-color: #c8c699; border-color: #c8c699;
border-style: solid; border-style: solid;
} }
.power_button:hover { .power_button:hover {
background-image: url("/res/img/power-button-pressed.png"); background-image: url("/res/img/power-button-pressed.png");
width: 80px; width: 80px;
height: 64px; height: 64px;
} }
.desktop { .desktop {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-color: skyblue; background-color: skyblue;
background-image: url("/res/img/bliss-hd.jpg"); background-image: url("/res/img/bliss-hd.jpg");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.desktop_buttons { .desktop_buttons {
position: absolute; position: absolute;
width: calc(100% - 16px); width: calc(100% - 16px);
height: calc(100% - 38px); height: calc(100% - 38px);
top: 0px; top: 0px;
left: 0px; left: 0px;
padding: 8px; padding: 8px;
padding-top: 0px; padding-top: 0px;
/* background-color: pink; */ /* background-color: pink; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
column-gap: 16px; column-gap: 16px;
} }
.desktop_buttons a { .desktop_buttons a {
color: #e0f8cf; color: #e0f8cf;
text-shadow: 2px 2px #071821; text-shadow: 2px 2px #071821;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
.desktop_buttons img { .desktop_buttons img {
/* width: clamp(1em, 1.5em, 2em); */ /* width: clamp(1em, 1.5em, 2em); */
/* height: clamp(1em, 1.5em, 2em); */ /* height: clamp(1em, 1.5em, 2em); */
} }
.desktop_buttons a:hover { .desktop_buttons a:hover {
color: #65ff00; color: #65ff00;
} }
.window { .window {
position: absolute; position: absolute;
background-repeat: no-repeat; background-repeat: no-repeat;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 10px); height: calc(100% - 10px);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-color: #E0F8CF; background-color: #E0F8CF;
border-width: 4px; border-width: 4px;
/* border-top-width: 5px; */ /* border-top-width: 5px; */
border-bottom-width: 6px; border-bottom-width: 6px;
border-color: #255FDD; border-color: #255FDD;
border-top-color: #3675c2; border-top-color: #3675c2;
border-style: solid; border-style: solid;
} }
.window_bar { .window_bar {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 136px; height: 136px;
background-color: #255FDD; background-color: #255FDD;
/* background-color: pink; */ /* background-color: #efedde; */
margin: 0px; /* background-color: pink; */
padding: 0px; margin: 0px;
overflow: hidden; padding: 0px;
/* border-width: 0px; */ overflow: hidden;
/* border-bottom-width: 4px; */ /* border-width: 0px; */
/* border-color: #255FDD; */ /* border-bottom-width: 4px; */
/* border-style: solid; */ /* border-color: #255FDD; */
color: white; /* border-style: solid; */
text-shadow: 2px 2px 2px darkblue; /* #efedde */
color: white;
text-shadow: 2px 2px 2px darkblue;
} }
.window_bar p { .window_bar p {
position: absolute; position: absolute;
text-align: left; text-align: left;
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
top: 0px; top: 0px;
left: 0px; left: 0px;
margin-top: -2px; margin-top: -2px;
} }
.window_bar p::before { .window_bar p::before {
position: relative; position: relative;
content: ""; content: "";
background-image: url("/res/img/explorer.png"); background-image: url("/res/img/explorer.png");
background-size: 32px 32px; background-size: 32px 32px;
display: inline-block; display: inline-block;
width: 32px; width: 32px;
height: 32px; height: 32px;
top: 4px; top: 4px;
} }
.close_button { .close_button {
/* background-color: #639bff; */ /* background-color: #639bff; */
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 6px; top: 6px;
width: 32px; width: 32px;
height: 32px; height: 32px;
content: url(/res/img/close.png); content: url(/res/img/close.png);
} }
/*.close_button:hover { /*.close_button:hover {
background-color: #5FCDE4; background-color: #5FCDE4;
}*/ }*/
.back_button { .back_button {
/* background-color: #639bff; */ /* background-color: #639bff; */
position: absolute; position: absolute;
left: 9px; left: 9px;
top: 80px; top: 80px;
width: 23px; width: 23px;
height: 23px; height: 23px;
} }
/*.back_button:hover { /*.back_button:hover {
background-color: #5FCDE4; background-color: #5FCDE4;
}*/ }*/
.window_content { .window_content {
position: absolute; position: absolute;
top: calc(48px + 88px); top: calc(48px + 88px);
margin: 0px; margin: 0px;
padding: 8px; margin-top: 1px;
padding-top: 0px; padding: 8px;
width: calc(100% - 16px); padding-top: 0px;
height: calc(100% - (64px + 88px + 15px)); width: calc(100% - 16px);
overflow: auto; height: calc(100% - (64px + 88px + 15px));
background-color: #e0f8cf; overflow: auto;
color: #071821; background-color: #e0f8cf;
/* background-color: pink; */ color: #071821;
/* background-color: black; */ /* background-color: pink; */
/* color: #e0f8cf; */ /* background-color: black; */
/* background-color: #071821; */ /* color: #e0f8cf; */
text-shadow: 2px 2px 3px #e0f8cf; /* background-color: #071821; */
/* margin-bottom: 23px; */ text-shadow: 2px 2px 3px #e0f8cf;
/* margin-bottom: 23px; */
} }
.window_content a { .window_content a {
color: #86c06c; color: #86c06c;
text-shadow: 1px 1px 0px #071821; text-shadow: 1px 1px 0px #071821;
} }
.window_content a:hover { .window_content a:hover {
color: #65ff00; color: #65ff00;
} }
.web_buttons { .web_buttons {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin: 8px; margin: 8px;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 8px; row-gap: 8px;
flex-direction: row; flex-direction: row;
} }
/*.power_light { /*.power_light {
background-color: #00FF48; background-color: #00FF48;
width: 32px; width: 32px;
height: 32px; height: 32px;
position: absolute; position: absolute;
right: 320px; right: 320px;
bottom: 16px; bottom: 16px;
border-width: 16px; border-width: 16px;
border-color: #c8c699; border-color: #c8c699;
border-style: solid; border-style: solid;
margin: 16px; margin: 16px;
}*/ }*/
.left { .left {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
width: 484px; width: 484px;
height: 544px; height: 544px;
border-style: solid; border-style: solid;
border-size: 2px; border-width: 2px;
border-color: #071821; border-color: #071821;
padding: 4px; padding: 4px;
} }
.right { .right {
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
width: 484px; width: 484px;
height: 544px; height: 544px;
border-style: solid; border-style: solid;
border-size: 2px; border-width: 2px;
border-color: #071821; border-color: #071821;
padding: 4px; padding: 4px;
} }
.button_container { .button_container {
width: calc(50% - 20px); width: calc(50% - 20px);
height: calc(50% - 18px); height: calc(50% - 18px);
border-style: solid; border-style: solid;
border-size: 2px; border-width: 2px;
border-color: #071821; border-color: #071821;
padding: 4px; padding: 4px;
} }
.taskbar { .taskbar {
background-color: #255FDD; background-color: #255FDD;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 30px; height: 30px;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
/* border-style: solid; */ /* border-style: solid; */
/* border-width: 0px; */ /* border-width: 0px; */
/* border-top-width: 4px; */ /* border-top-width: 4px; */
/* border-color: #3675c2; */ /* border-color: #3675c2; */
background-image: url("/res/img/taskbar.jpg"); background-image: url("/res/img/taskbar.jpg");
background-size: 30px 30px; background-size: 30px 30px;
} }
.taskbar img { .taskbar img {
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
} }
.monitor_bar, .landing_screen_bar { .monitor_bar, .landing_screen_bar {
position: absolute; position: absolute;
bottom: 48px; bottom: 48px;
/* background-color: pink; */ /* background-color: pink; */
width: calc(1056px - 32px); width: calc(1056px - 32px);
height: calc(96px - 32px); height: calc(96px - 32px);
/* left: 50%; */ /* left: 50%; */
/* right: 50%; */ /* right: 50%; */
border-width: 16px; border-width: 16px;
border-color: #c8c699; border-color: #c8c699;
border-style: solid; border-style: solid;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }
.landing_screen_bar { .landing_screen_bar {
/* bottom: 0px; */ /* bottom: 0px; */
animation-name: fade-out; animation-name: fade-out;
animation-duration: 5s; animation-duration: 5s;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-delay: 2s; animation-delay: 2s;
} }
.monitor_bar img, .landing_screen_bar img { .monitor_bar img, .landing_screen_bar img {
border-width: 16px; border-width: 16px;
border-color: #c8c699; border-color: #c8c699;
border-style: solid; border-style: solid;
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
} }
.monitor_screen, .landing_screen, .landing_screen_wallpaper { .monitor_screen, .landing_screen, .landing_screen_wallpaper {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.monitor_screen img, .landing_screen img { .monitor_screen img, .landing_screen img {
position: absolute; position: absolute;
bottom: 192px; bottom: 192px;
/* left: 16px; */ /* left: 16px; */
/* right: 16px; */ /* right: 16px; */
background-color: black; background-color: black;
max-width: 97.5%; max-width: 97.5%;
max-height: 75%; max-height: 75%;
} }
.landing_screen_wallpaper img { .landing_screen_wallpaper img {
position: absolute; position: absolute;
bottom: calc(192px + 6.25%); bottom: calc(192px + 6.25%);
max-width: 80%; max-width: 80%;
max-height: 62.5%; max-height: 62.5%;
animation-name: fade-in-background, grow-wallpaper; animation-name: fade-in-background, grow-wallpaper;
animation-duration: 2s, 5s; animation-duration: 2s, 5s;
animation-iteration-count: 1, 1; animation-iteration-count: 1, 1;
animation-delay: 0s, 2s; animation-delay: 0s, 2s;
} }
.landing_screen img { .landing_screen img {
animation-name: fade-in; animation-name: fade-in;
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: 1; animation-iteration-count: 1;
background-color: skyblue; background-color: skyblue;
} }
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
background-color: white; background-color: white;
} }
100% { 100% {
background-color: skyblue; background-color: skyblue;
} }
} }
@keyframes fade-in-background { @keyframes fade-in-background {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 100; opacity: 100;
} }
} }
@keyframes grow-wallpaper { @keyframes grow-wallpaper {
20%, 100% { 20%, 100% {
bottom: unset; bottom: unset;
} }
80%, 100% { 80%, 100% {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
@keyframes fade-out { @keyframes fade-out {
0% { 0% {
opacity: 100; opacity: 100;
} }
10%, 100% { 10%, 100% {
opacity: 0; opacity: 0;
border-width: 0px; border-width: 0px;
} }
} }
.explorer_bar_top { .explorer_bar_top {
margin-top: 48px; margin-top: 48px;
background-color: #efedde;
/* background-color: #255FDD; */
width: 100%;
height: 86px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-color: #959387;
} }
.explorer_bar_top p, .explorer_bar_bottom p { .explorer_bar_top p, .explorer_bar_bottom p {
position: absolute; position: absolute;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
text-shadow: 0px 0px 0px black; text-shadow: 0px 0px 0px black;
color: black;
} }
.explorer_bar_top p { .address_bar {
top: calc(71px + 48px - 3px); position: absolute;
/* left: 72px; */ width: 100%;
left: 5.75%; top: calc(71px + 48px - 7px);
color: black; border-top-width: 1px;
border-top-style: solid;
border-top-color: #959387;
} }
.explorer_bar_top p::before { .address_bar p {
position: unset; /* position: absolute; */
content: unset; /* top: calc(71px + 48px - 3px); */
background-image: unset; /* left: 72px; */
background-size: unset; top: 3px;
display: unset; left: 5.75%;
width: unset; width: 85%;
height: unset; background-color: white;
top: unset; border-width: 1px;
border-style: solid;
border-bottom-color: #94adc5;
padding: 1px;
} }
.explorer_bar_bottom { .explorer_bar_top p::before {
position: absolute; position: unset;
margin: 0px; content: unset;
padding: 0px; background-image: unset;
bottom: 0px; background-size: unset;
left: 0px; display: unset;
width: 100%; width: unset;
height: 23px; height: unset;
/* background-color: limegreen; */ top: unset;
} }
.explorer_bar_bottom p { .address_bar p::before {
bottom: -8px; position: relative;
left: 22px; content: "";
color: black; background-image: url("/res/img/explorer.png");
background-size: 10px 12px;
display: inline-block;
width: 10px;
height: 12px;
/* top: 4px; */
} }
.portrait img { .menu_bar p {
border-style: solid; margin-top: 46px;
border-width: 2px; padding: 4px;
border-color: #071821; border-bottom-width: 1px;
border-radius: 12.5%; border-bottom-style: solid;
/* width: clamp(160px, 320px, 320px); */ border-color: #959387;
/* height: clamp(160px, 320px, 320px); */ width: 100%;
margin-right: 16px; }
.navigation_bar p {
position: absolute;
left: 30px;
top: 84px;
}
.navigation_bar img {
position: absolute;
left: -27px;
top: -4px;
}
.navigation_bar a {
position: unset;
left: unset;
top: unset;
text-decoration: none;
color: black;
}
.navigation_bar p::after {
position: absolute;
width: 23px;
height: 23px;
content: url(/res/img/back.png);
filter: grayscale(1);
right: -40px;
top: -4px;
rotate: y 180deg;
}
/*.navigation_bar p::before {
background-color: #639bff;
position: absolute;
left: -17px;
top: calc(80px - 4px);
width: 23px;
height: 23px;
content: url(/res/img/back.png);
}*/
.explorer_bar_bottom {
position: absolute;
margin: 0px;
padding: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 23px;
background-color: #efedde;
/* background-color: limegreen; */
border-top-width: 2px;
border-top-style: solid;
border-color: #959387;
}
.explorer_bar_bottom p {
bottom: -8px;
left: 22px;
}
.explorer_bar_bottom p::before {
position: relative;
content: "";
background-image: url("/res/img/explorer.png");
background-size: 14px 17px;
display: inline-block;
width: 14px;
height: 17px;
left: -20px;
top: 3px;
.portrait img {
border-style: solid;
border-width: 2px;
border-color: #071821;
border-radius: 12.5%;
/* width: clamp(160px, 320px, 320px); */
/* height: clamp(160px, 320px, 320px); */
margin-right: 16px;
} }
res/img/badges/debian-powered.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB