summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPinapelz <yukais@pinapelz.com>2026-04-29 01:16:20 -0700
committerPinapelz <yukais@pinapelz.com>2026-04-29 01:16:20 -0700
commit4b47e2d6e87ffed62c91809a44ccc5946241de1d (patch)
tree24e613f2b67ffe2407b434b0099537834adfffa7
parent8065c42b7fa0b4bc3433e592de70b6c3caa9cee1 (diff)
update nekoweb site
Diffstat
-rw-r--r--pinapelz.moe/about.html272
-rw-r--r--pinapelz.moe/encoded-take-no1.html31
-rw-r--r--pinapelz.moe/encoded-take-no2.html31
-rw-r--r--pinapelz.moe/index.html15
-rw-r--r--pinapelz.moe/styles/carbon.css755
5 files changed, 995 insertions, 109 deletions
diff --git a/pinapelz.moe/about.html b/pinapelz.moe/about.html
index 7a78ccb..88c2652 100644
--- a/pinapelz.moe/about.html
+++ b/pinapelz.moe/about.html
@@ -10,8 +10,14 @@
<script src="scripts/index.js"></script>
<style>
@keyframes blink {
- 0%, 50% { opacity: 1; }
- 51%, 100% { opacity: 0; }
+ 0%,
+ 50% {
+ opacity: 1;
+ }
+ 51%,
+ 100% {
+ opacity: 0;
+ }
}
.blink {
@@ -19,17 +25,30 @@
}
.retro-shadow {
- text-shadow: 2px 2px 0px #ff69b4, 4px 4px 0px #ffb6c1;
+ text-shadow:
+ 2px 2px 0px #ff69b4,
+ 4px 4px 0px #ffb6c1;
}
.y2k-border {
border: 2px ridge #ff1493;
padding: 10px;
- background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,182,193,0.3) 100%);
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 182, 193, 0.3) 100%
+ );
}
.content h3 {
- background: linear-gradient(90deg, #ffb6c1, #ff69b4, #ff1493, #ff69b4, #ffb6c1);
+ background: linear-gradient(
+ 90deg,
+ #ffb6c1,
+ #ff69b4,
+ #ff1493,
+ #ff69b4,
+ #ffb6c1
+ );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -51,7 +70,7 @@
}
.sparkle {
- background-image: url('https://www.animatedimages.org/data/media/52/animated-star-image-0116.gif');
+ background-image: url("https://www.animatedimages.org/data/media/52/animated-star-image-0116.gif");
background-repeat: no-repeat;
background-position: right center;
background-size: 20px 20px;
@@ -61,37 +80,48 @@
</head>
<body>
<div class="top-navbar">
- <nav aria-label="Main navigation">
- <ul>
- <li><a href="/">home</a></li>
- <li><a href="/about.html" aria-current="page">webmaster</a></li>
- <li><a href="/projects.html">projects</a></li>
- </ul>
- </nav>
+ <nav aria-label="Main navigation">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li>
+ <a href="/about.html" aria-current="page">webmaster</a>
+ </li>
+ <li><a href="/projects.html">projects</a></li>
+ </ul>
+ </nav>
</div>
<div class="container">
- <div class="header" style="margin-top: 20px;">
+ <div class="header" style="margin-top: 20px">
<marquee behavior="alternate" direction="left" scrollamount="6">
<span class="retro-shadow">About Me</span>
</marquee>
</div>
<div class="sidebar">
-
<div class="contacts-section y2k-border">
<img
src="assets/pfp.webp"
class="border-img crazy-image"
width="250px"
alt="Profile Picture"
- style="border: 3px ridge #ff1493; box-shadow: 5px 5px 15px rgba(255,20,147,0.5);"
+ style="
+ border: 3px ridge #ff1493;
+ box-shadow: 5px 5px 15px rgba(255, 20, 147, 0.5);
+ "
/>
<h3>📧 Contact Me 📧</h3>
- <p><small>idk maybe you need to reach me for some reason</small></p>
+ <p>
+ <small
+ >idk maybe you need to reach me for some
+ reason</small
+ >
+ </p>
<ul>
<li>
<span class="blink">►</span> Email:
- <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a>
+ <a href="mailto:pinapelz@moekyun.me"
+ >pinapelz@moekyun.me</a
+ >
</li>
<li>
<span class="blink">►</span> X:
@@ -99,122 +129,160 @@
</li>
<li>
<span class="blink">►</span> Fedi:
- <a href="https://sakurajima.social/@pinapelz">@pinapelz@sakurajima.social</a>
- </li>
- <li>
- <span class="blink">►</span> Bluesky:
- <a href="https://bsky.app/profile/pinapelz.moe">@pinapelz.moe</a>
+ <a href="https://sakurajima.social/@pinapelz"
+ >@pinapelz@sakurajima.social</a
+ >
</li>
<li>
- <span class="blink">►</span> Discord: @pinapelz
+ <span class="blink">►</span> Matrix:
+ @pinapelz:chat.moekyun.me
</li>
-
-
+ <li><span class="blink">►</span> Discord: @pinapelz</li>
</ul>
</div>
-
</div>
<div class="content">
<div class="general-section center">
- <div class="y2k-border" style="margin-bottom: 20px;">
+ <div class="y2k-border" style="margin-bottom: 20px">
<h3>⚡ info ⚡</h3>
- <ul style="list-style-type: none; text-align: left;">
- <li>🎓 Student at UC Irvine studying Software Engineering</li>
- <li>🐧 Daily drives Arch Linux</li>
- <li>💻 Mainly on Hyprland and KDE Plasma</li>
- <li>📺 Watches anime and reads manga</li>
- <li>🧠 Accumulates brainrot from watching Twitch streams and VTubers</li>
+ <ul style="list-style-type: none; text-align: left">
+ <li>🐧 daily drives linux (endeavour os)</li>
+ <li>💻 mainly uses hyprland and cosmic</li>
+ <li>📺 anime/manga, rhythm game, mmorpg enjoyer</li>
+ <li>🧠 im tryna unrot my brain rn</li>
+
</ul>
- <section id="discord-status" class="discord-status">
- <img
- src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
- alt="Discord Avatar"
- />
- <div class="status-container">
- <h2><span class="status-text"></span></h2>
- </div>
- <script>
- fetchDiscordStatus("246787839570739211");
- </script>
- </section>
+ <p> I post a lot of random stuff <br/> on my "microblog" at: <a href="https://micro.pinapelz.moe/">https://micro.pinapelz.moe</a></p>
</div>
- <div class="y2k-border" style="margin-bottom: 20px;">
+ <div class="y2k-border" style="margin-bottom: 20px">
<h3>🎮 games 🎮</h3>
<ul style="list-style-type: none">
- <li><b style="color: #ff1493;">MMOs</b> - FFXIV, PSO2, OS
-RS</li>
- <li><b style="color: #ff1493;">(J)RPGs</b> - Persona, Xenoblade</li>
- <li><b style="color: #ff1493;">Visual Novel/Adventure</b> - Danganronpa, AI The Somnium, 999</li>
+ <li>
+ <b style="color: #ff1493">MMOs</b> - FFXIV, PSO2
+ </li>
+ <li>
+ <b style="color: #ff1493">(J)RPGs</b> - Persona,
+ Xenoblade
+ </li>
+ <li>
+ <b style="color: #ff1493"
+ >Visual Novel/Adventure</b
+ >
+ - Danganronpa, AI The Somnium, 999
+ </li>
</ul>
<p><i>basically stuff that is heavy on the story</i></p>
+ <p>
+ right now i'm trying to make progress on my backlog
+ </p>
</div>
- <div style="display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;">
- <div class="y2k-border" style="flex: 1; min-width: 200px;">
+ <div
+ style="
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+ justify-content: center;
+ "
+ >
+ <div
+ class="y2k-border"
+ style="flex: 1; min-width: 200px"
+ >
<h3>📚 anime/manga</h3>
- <p>I pretty much only watch/
-read slice of life... yuru camp, k-on, nichijou that sorta thing</p>
+ <p>
+ I pretty much only watch/ read slice of life...
+ yuru camp, k-on, nichijou that sorta thing
+ </p>
</div>
- <div class="y2k-border" style="flex: 1; min-width: 200px;">
+ <div
+ class="y2k-border"
+ style="flex: 1; min-width: 200px"
+ >
<h3>🎭 vtubers</h3>
- <p>mostly watch erina makina (pc), rosemi lovelock (niji), and pavolia reine (holo)</p>
+ <p>
+ <s>mostly watch erina makina (pc), rosemi lovelock (now miki), and pavolia reine (holo)</s>
+ <br/>(I still hang around sometimes but certainly don't watch as much anymore)
+ </p>
</div>
- <div class="y2k-border" style="flex: 1; min-width: 200px;">
- <h3>⚙️ stack</h3>
- <p>whatever seems fun (but usually next js + tailwind + flask)</p>
+ <div
+ class="y2k-border"
+ style="flex: 1; min-width: 200px"
+ >
+ <h3>⚙️ tech stack</h3>
+ <p>
+ whatever seems fun (but usually next js +
+ tailwind + flask if I just want to build something super fast)
+ </p>
+ </div>
+ <div
+ class="y2k-border"
+ style="flex: 1; min-width: 200px"
+ >
+ <h3>KPOP</h3>
+ <p>
+ i recently got into kpop. I listen to YENA, NMIXX, IVE, LE SSERAFIM the most
+ </p>
</div>
</div>
- <div style="margin: 30px 0;">
- <marquee behavior="scroll" direction="left" scrollamount="4">
- Not much else to say... if you want some random technical rambling go to
- <a href="https://blog.pinapelz.com" style="color: #ff1493; font-weight: bold;">my blog</a>
- </marquee>
- </div>
- <div class="center">
- <a href="https://imisserinya.phase-tracker.com">
- <div class="center y2k-border">
- <img
- src="https://files.pinapelz.com/1077804029737975879.webp"
- width="200px"
- class="crazy-image"
- />
- <div class="fullscreen-text rainbow-text">
- i miss erinya uuuuuuuuu!!!
- </div>
- </div>
- </a>
+ <div style="margin: 30px 0">
+
+ <marquee
+ behavior="scroll"
+ direction="left"
+ scrollamount="4"
+ >
+ Not much else to say... if you want some random
+ technical rambling go to
+ <a
+ href="https://blog.pinapelz.com"
+ style="color: #ff1493; font-weight: bold"
+ >my blog</a
+ >
+ </marquee>
</div>
</div>
</div>
- <div class="footer">
- <p style="text-align: center;">
- <a href="https://pinapelz.moe">pinapelz.moe</a> /
- <a href="https://pinapelz.com">pinapelz.com</a> /
- <a href="https://arcade.pinapelz.com">arcade.moekyun.me</a> /
- <a href="https://phase-tracker.com">phase-tracker.com</a> /
- <a href="https://patchwork.moekyun.me">patchwork.moekyun.me</a> /
- <a href="https://blog.pinapelz.com">blog.pinapelz.com</a> /
- <a href="https://mojibaka.pinapelz.com">mojibaka.pinapelz.com</a> /
- <a href="https://moekyun.me">moekyun.me</a> /
- <a href="https://vtuber-captcha.moekyun.me">vtuber-captcha.moekyun.me</a>
- </p>
- <center style="margin-top: 20px;">
- <a href="https://nekoweb.org/">
- <img src="https://nekoweb.org/assets/buttons/button7.gif" />
- </a>
- <a href="https://linux.org/">
-
- <img src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg" />
- </a>
- <br>
- </center>
- </div>
+ <div class="footer">
+ <p style="text-align: center">
+ <a href="https://pinapelz.moe">pinapelz.moe</a> /
+ <a href="https://pinapelz.com">pinapelz.com</a> /
+ <a href="https://arcade.pinapelz.com">arcade.moekyun.me</a>
+ /
+ <a href="https://phase-tracker.com">phase-tracker.com</a> /
+ <a href="https://patchwork.moekyun.me"
+ >patchwork.moekyun.me</a
+ >
+ /
+ <a href="https://blog.pinapelz.com">blog.pinapelz.com</a> /
+ <a href="https://mojibaka.pinapelz.com"
+ >mojibaka.pinapelz.com</a
+ >
+ / <a href="https://moekyun.me">moekyun.me</a> /
+ <a href="https://vtuber-captcha.moekyun.me"
+ >vtuber-captcha.moekyun.me</a
+ >
+ </p>
+ <center style="margin-top: 20px">
+ <a href="https://nekoweb.org/">
+ <img
+ src="https://nekoweb.org/assets/buttons/button7.gif"
+ />
+ </a>
+ <a href="https://linux.org/">
+ <img
+ src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg"
+ />
+ </a>
+ <br />
+ </center>
</div>
+ </div>
</body>
</html>
diff --git a/pinapelz.moe/encoded-take-no1.html b/pinapelz.moe/encoded-take-no1.html
new file mode 100644
index 0000000..6358152
--- /dev/null
+++ b/pinapelz.moe/encoded-take-no1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>encoded take no 1</title>
+ <link rel="stylesheet" href="styles/carbon.css">
+ <link href="https://unpkg.com/prism-themes@1.6.0/themes/prism-atom-dark.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="lock-screen">
+ <div id="lock-box">
+ <div class="lock-icon">&#128274;</div>
+ <h2>Protected Content</h2>
+ <p>Enter the passphrase to unlock this post.</p>
+ <input id="enc-input" type="password" placeholder="Enter passphrase..."/>
+ </div>
+</div>
+<div id="encrypted-content" data-enc="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"></div>
+<script>
+(function(){
+function b64ToArr(b64){var bin=atob(b64);var len=bin.length;var arr=new Uint8Array(len);for(var i=0;i<len;i++)arr[i]=bin.charCodeAt(i);return arr;}
+async function tryDecrypt(pass){try{var c=document.getElementById('encrypted-content');if(!c)return;var data=b64ToArr(c.dataset.enc);var salt=data.slice(0,16);var iv=data.slice(16,28);var tag=data.slice(data.length-16);var ct=data.slice(28,data.length-16);var ek=new TextEncoder().encode(pass);var km=await crypto.subtle.importKey('raw',ek,{name:'PBKDF2'},false,['deriveKey']);var key=await crypto.subtle.deriveKey({name:'PBKDF2',salt:salt,iterations:100000,hash:'SHA-256'},km,{name:'AES-GCM',length:256},false,['decrypt']);var full=new Uint8Array(ct.length+tag.length);full.set(ct,0);full.set(tag,ct.length);var plain=await crypto.subtle.decrypt({name:'AES-GCM',iv:iv},key,full);var decoded=new TextDecoder().decode(plain);var ls=document.getElementById('lock-screen');if(ls)ls.remove();c.outerHTML=decoded;if(window.Prism)Prism.highlightAll();}catch(e){}}
+document.addEventListener('DOMContentLoaded',function(){var inp=document.getElementById('enc-input');if(inp)inp.addEventListener('input',function(e){tryDecrypt(e.target.value);});});
+})();
+</script>
+
+ <script src="https://unpkg.com/prismjs@1.30.0/prism.js"></script>
+ <script src="https://unpkg.com/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
+ </body>
+ </html>
diff --git a/pinapelz.moe/encoded-take-no2.html b/pinapelz.moe/encoded-take-no2.html
new file mode 100644
index 0000000..3eb30ea
--- /dev/null
+++ b/pinapelz.moe/encoded-take-no2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>encoded take no 2</title>
+ <link rel="stylesheet" href="styles/carbon.css">
+ <link href="https://unpkg.com/prism-themes@1.6.0/themes/prism-atom-dark.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="lock-screen">
+ <div id="lock-box">
+ <div class="lock-icon">&#128274;</div>
+ <h2>Protected Content</h2>
+ <p>Enter the passphrase to unlock this post.</p>
+ <input id="enc-input" type="password" placeholder="Enter passphrase..."/>
+ </div>
+</div>
+<div id="encrypted-content" data-enc="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"></div>
+<script>
+(function(){
+function b64ToArr(b64){var bin=atob(b64);var len=bin.length;var arr=new Uint8Array(len);for(var i=0;i<len;i++)arr[i]=bin.charCodeAt(i);return arr;}
+async function tryDecrypt(pass){try{var c=document.getElementById('encrypted-content');if(!c)return;var data=b64ToArr(c.dataset.enc);var salt=data.slice(0,16);var iv=data.slice(16,28);var tag=data.slice(data.length-16);var ct=data.slice(28,data.length-16);var ek=new TextEncoder().encode(pass);var km=await crypto.subtle.importKey('raw',ek,{name:'PBKDF2'},false,['deriveKey']);var key=await crypto.subtle.deriveKey({name:'PBKDF2',salt:salt,iterations:100000,hash:'SHA-256'},km,{name:'AES-GCM',length:256},false,['decrypt']);var full=new Uint8Array(ct.length+tag.length);full.set(ct,0);full.set(tag,ct.length);var plain=await crypto.subtle.decrypt({name:'AES-GCM',iv:iv},key,full);var decoded=new TextDecoder().decode(plain);var ls=document.getElementById('lock-screen');if(ls)ls.remove();c.outerHTML=decoded;if(window.Prism)Prism.highlightAll();}catch(e){}}
+document.addEventListener('DOMContentLoaded',function(){var inp=document.getElementById('enc-input');if(inp)inp.addEventListener('input',function(e){tryDecrypt(e.target.value);});});
+})();
+</script>
+
+ <script src="https://unpkg.com/prismjs@1.30.0/prism.js"></script>
+ <script src="https://unpkg.com/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
+ </body>
+ </html>
diff --git a/pinapelz.moe/index.html b/pinapelz.moe/index.html
index d13f0d0..3541bf1 100644
--- a/pinapelz.moe/index.html
+++ b/pinapelz.moe/index.html
@@ -148,10 +148,7 @@
>
</li>
<li>
- Bluesky:
- <a rel="me" href="https://bsky.app/profile/pinapelz.moe"
- >@pinapelz.moe</a
- >
+ <span class="blink">►</span> Matrix: @pinapelz:chat.moekyun.me
</li>
<li>Discord: @pinapelz</li>
</ul>
@@ -169,7 +166,6 @@
</script>
</section>
<p id="quote" class="my-4"></p>
- <iframe class="w-full max-w-xs h-48 mx-auto block" style="border:none; height: 300px; min-height: 250px;" src="https://rubybulbs.net/neko.html"></iframe>
</div>
<div class="content w-full xl:w-3/4">
@@ -258,8 +254,13 @@
<p class="text-center text-sm mb-2">my personal tierlist for rhythm games. I try to judge a series as a whole since most of them keep the same mechanics in sequels</p>
<a href="/rhythm-games-tierlist.html" class="block text-center hover:underline">check it out here</a>
</div>
- <div class="w-full xl:flex-1 xl:pl-4 flex items-center justify-center">
- <p class="text-center">can we just pretend there's something cool here?</p>
+ <div class="w-full xl:flex-1 xl:pl-4">
+ <h3 class="text-lg font-bold mb-2 text-center">Recent Links (cause im lazy to make navigation)</h3>
+ <p>Not everything is public, but if you gain access i guess its public for u.
+ </p>
+ <ul class="list-disc list-inside space-y-2 text-sm">
+ <li><a href="/encoded-take-no1.html" class="hover:underline">[ENCODED SECRET POST NO.1]</a></li>
+ <li><a href="/encoded-take-no2.html" class="hover:underline">[ENCODED SECRET POST NO.2]</a></li>
</div>
</div>
diff --git a/pinapelz.moe/styles/carbon.css b/pinapelz.moe/styles/carbon.css
new file mode 100644
index 0000000..8d90e2a
--- /dev/null
+++ b/pinapelz.moe/styles/carbon.css
@@ -0,0 +1,755 @@
+/*Carbon themed CSS*/
+:root {
+ --primary-bg: #1a1a1a;
+ --secondary-bg: #252525;
+ --tertiary-bg: #2d2d2d;
+ --accent-gold: #c9aa71;
+ --accent-blue: #5b8fc7;
+ --text-primary: #e2e2e2;
+ --text-secondary: #b8b8b8;
+ --text-dim: #888888;
+ --border-color: #3a3a3a;
+ --link-color: #7db8e8;
+ --link-hover: #a5d0f0;
+ --header-gradient-start: #2a2a2a;
+ --header-gradient-end: #1a1a1a;
+ --nav-bg: #1f1f1f;
+ --nav-hover: #333333;
+}
+
+/* Reset and base styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Meiryo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+ background-color: var(--primary-bg);
+ color: var(--text-primary);
+ line-height: 1.7;
+ min-height: 100vh;
+ display: flex;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 10px,
+ rgba(255, 255, 255, 0.01) 10px,
+ rgba(255, 255, 255, 0.01) 20px
+ );
+}
+
+/* Navigation sidebar */
+.nav-sidebar {
+ width: 250px;
+ background-color: var(--nav-bg);
+ border-right: 1px solid var(--border-color);
+ height: 100vh;
+ position: fixed;
+ overflow-y: auto;
+ padding: 20px 0;
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.nav-logo {
+ padding: 15px 20px;
+ margin-bottom: 20px;
+ border-bottom: 1px solid var(--border-color);
+ text-align: center;
+}
+
+.nav-logo h3 {
+ color: var(--accent-gold);
+ font-size: 1.2em;
+ margin: 0;
+}
+
+.nav-menu {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.nav-menu li {
+ margin: 0;
+}
+
+.nav-menu a {
+ display: block;
+ padding: 10px 20px;
+ color: var(--text-secondary);
+ text-decoration: none;
+ border-left: 3px solid transparent;
+ transition: all 0.3s ease;
+}
+
+.nav-menu a:hover {
+ background-color: var(--nav-hover);
+ color: var(--accent-gold);
+ border-left-color: var(--accent-gold);
+ text-shadow: none;
+}
+
+.nav-menu a::after {
+ display: none;
+}
+
+.nav-menu h4 {
+ padding: 15px 20px 5px;
+ color: var(--accent-gold);
+ font-size: 1em;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.nav-submenu {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* Indentation for nested submenu items */
+.nav-submenu li.level-2 a {
+ padding-left: 30px;
+}
+
+.nav-submenu li.level-3 a {
+ padding-left: 40px;
+}
+
+.nav-submenu li.level-4 a {
+ padding-left: 50px;
+}
+
+.nav-submenu li.level-5 a {
+ padding-left: 60px;
+}
+
+.nav-submenu li.level-6 a {
+ padding-left: 70px;
+}
+
+/* Main content */
+.main-content {
+ flex: 1;
+ margin-left: 250px;
+ width: calc(100% - 250px);
+}
+
+/* Container */
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 40px 20px;
+ background-color: rgba(26, 26, 26, 0.95);
+ min-height: 100vh;
+ box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Jupiter Pro", "Cinzel", "Georgia", serif;
+ color: var(--accent-gold);
+ margin-top: 1.5em;
+ margin-bottom: 0.8em;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ position: relative;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+h1 {
+ font-size: 2.2em;
+ padding-bottom: 0.5em;
+ border-bottom: 3px solid var(--accent-gold);
+ background: var(--accent-gold);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: none;
+ margin-top: 0.5em;
+}
+
+h1::after {
+ content: "";
+ display: block;
+ position: absolute;
+ bottom: -3px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: linear-gradient(90deg, var(--accent-gold), transparent 70%);
+}
+
+h2 {
+ font-size: 1.8em;
+ color: var(--accent-blue);
+ padding-left: 15px;
+ border-left: 4px solid var(--accent-blue);
+ margin-left: -15px;
+}
+
+h3 {
+ font-size: 1.4em;
+ color: var(--text-primary);
+}
+
+h4 {
+ font-size: 1.2em;
+ color: var(--text-secondary);
+}
+
+h5,
+h6 {
+ font-size: 1.1em;
+ color: var(--text-secondary);
+}
+
+/* Paragraphs and text */
+p {
+ margin-bottom: 1.2em;
+ color: var(--text-secondary);
+ text-align: left;
+}
+
+/* Links with FFXIV styling */
+a {
+ color: var(--link-color);
+ text-decoration: none;
+ position: relative;
+ transition: color 0.3s ease;
+ font-weight: 500;
+}
+
+a:hover {
+ color: var(--link-hover);
+ text-shadow: 0 0 10px rgba(125, 184, 232, 0.5);
+}
+
+a::after {
+ content: "";
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background-color: var(--link-hover);
+ transition: width 0.3s ease;
+}
+
+a:hover::after {
+ width: 100%;
+}
+
+/* Bold and Italic */
+strong,
+b {
+ color: var(--accent-gold);
+ font-weight: 600;
+}
+
+em,
+i {
+ color: var(--text-primary);
+ font-style: italic;
+}
+
+/* Lists with FFXIV styling */
+ul,
+ol {
+ margin-left: 30px;
+ margin-bottom: 1.2em;
+}
+
+li {
+ margin-bottom: 0.5em;
+ color: var(--text-secondary);
+}
+
+ul li::marker {
+ color: var(--accent-gold);
+}
+
+ol li::marker {
+ color: var(--accent-blue);
+ font-weight: bold;
+}
+
+
+blockquote {
+ border-left: 4px solid var(--accent-gold);
+ background: linear-gradient(90deg, rgba(201, 170, 113, 0.1), transparent);
+ padding: 15px 20px;
+ margin: 1.5em 0;
+ color: var(--text-secondary);
+ position: relative;
+}
+
+blockquote::before {
+ font-size: 3em;
+ color: var(--accent-gold);
+ opacity: 0.3;
+ position: absolute;
+}
+
+table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ margin: 1.5em 0;
+ background-color: var(--secondary-bg);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+thead {
+ background: linear-gradient(
+ 180deg,
+ var(--tertiary-bg),
+ var(--secondary-bg)
+ );
+}
+
+th {
+ padding: 12px 15px;
+ text-align: left;
+ color: var(--accent-gold);
+ font-weight: 600;
+ border-bottom: 2px solid var(--accent-gold);
+ text-transform: uppercase;
+ font-size: 0.9em;
+ letter-spacing: 1px;
+}
+
+td {
+ padding: 10px 15px;
+ color: var(--text-secondary);
+ border-bottom: 1px solid var(--border-color);
+}
+
+tr:hover td {
+ background-color: rgba(201, 170, 113, 0.05);
+}
+
+hr {
+ border: none;
+ height: 2px;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ var(--accent-gold) 20%,
+ var(--accent-gold) 50%,
+ var(--accent-gold) 80%,
+ transparent
+ );
+ margin: 2em 0;
+ position: relative;
+}
+
+hr::before {
+ content: "◆";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--primary-bg);
+ color: var(--accent-gold);
+ padding: 0 10px;
+ font-size: 1.2em;
+}
+
+/* Images */
+img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 1.5em auto;
+ border: 2px solid var(--border-color);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+
+/* Wiki-style additional elements */
+.wiki-infobox {
+ float: right;
+ width: 300px;
+ margin: 0 0 20px 20px;
+ background-color: var(--secondary-bg);
+ border: 1px solid var(--border-color);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.wiki-infobox-header {
+ background-color: var(--tertiary-bg);
+ color: var(--accent-gold);
+ padding: 10px 15px;
+ text-align: center;
+ font-weight: bold;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.wiki-infobox-content {
+ padding: 15px;
+}
+
+.wiki-infobox-row {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.wiki-infobox-label {
+ flex: 1;
+ font-weight: bold;
+ color: var(--accent-blue);
+}
+
+.wiki-infobox-value {
+ flex: 2;
+ color: var(--text-secondary);
+}
+
+/* Article meta information */
+.article-meta {
+ border-top: 1px solid var(--border-color);
+ margin-top: 40px;
+ padding-top: 20px;
+ font-size: 0.9em;
+ color: var(--text-dim);
+}
+
+.article-categories {
+ margin-top: 10px;
+}
+
+.article-category {
+ display: inline-block;
+ background-color: var(--tertiary-bg);
+ color: var(--accent-gold);
+ padding: 3px 10px;
+ margin-right: 5px;
+ margin-bottom: 5px;
+ border-radius: 3px;
+ font-size: 0.85em;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+ width: 12px;
+ height: 12px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--secondary-bg);
+ border: 1px solid var(--border-color);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--accent-gold);
+ border: 1px solid var(--border-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--accent-blue);
+}
+
+/* Selection styling */
+::selection {
+ background-color: rgba(201, 170, 113, 0.3);
+ color: var(--text-primary);
+}
+
+::-moz-selection {
+ background-color: rgba(201, 170, 113, 0.3);
+ color: var(--text-primary);
+}
+
+/* Custom Figure styling */
+.custom-figure {
+ margin: 2.5rem auto;
+ padding: 1.5rem;
+ background-color: var(--secondary-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 5px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+ position: relative;
+ overflow: hidden;
+ max-width: 95%;
+}
+
+/* Image gallery layout for multiple images */
+.custom-figure .image-gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ grid-gap: 1rem;
+ margin-bottom: 1.5rem;
+}
+
+/* Single image in figure */
+.custom-figure img {
+ margin: 0 auto 1rem;
+ border: 1px solid var(--border-color);
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+ transition:
+ transform 0.3s ease,
+ box-shadow 0.3s ease;
+ max-height: 500px;
+ width: auto;
+}
+
+/* Hover effect for images */
+.custom-figure img:hover {
+ transform: scale(1.02);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+ border-color: var(--accent-gold);
+}
+
+/* Image titles (from title attribute) */
+.custom-figure .image-title {
+ display: block;
+ text-align: center;
+ font-style: italic;
+ color: var(--accent-gold);
+ font-size: 0.9em;
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+}
+
+/* Caption styling */
+.custom-figure figcaption {
+ font-family: "Jupiter Pro", "Cinzel", "Georgia", serif;
+ text-align: center;
+ color: var(--text-primary);
+ font-size: 1.1em;
+ padding: 0.8rem 0;
+ border-top: 1px solid rgba(201, 170, 113, 0.3);
+ margin-top: 0.5rem;
+ position: relative;
+}
+
+/* Special styling for captions to match FFXIV aesthetic */
+.custom-figure figcaption::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue));
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+ .container {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 992px) {
+ .nav-sidebar {
+ width: 200px;
+ }
+
+ .main-content {
+ margin-left: 200px;
+ width: calc(100% - 200px);
+ }
+}
+
+@media (max-width: 768px) {
+ body {
+ flex-direction: column;
+ }
+
+ .nav-sidebar {
+ width: 100%;
+ height: auto;
+ position: relative;
+ border-right: none;
+ border-bottom: 1px solid var(--border-color);
+ }
+
+ .main-content {
+ margin-left: 0;
+ width: 100%;
+ }
+
+ .container {
+ padding: 20px 15px;
+ }
+
+ .wiki-infobox {
+ float: none;
+ width: 100%;
+ margin: 1.5em 0;
+ }
+
+ h1 {
+ font-size: 2em;
+ }
+
+ h2 {
+ font-size: 1.6em;
+ }
+
+ h3 {
+ font-size: 1.3em;
+ }
+}
+/* Animation for page load */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .custom-figure {
+ padding: 1rem;
+ margin: 2rem auto;
+ }
+
+ .custom-figure .image-gallery {
+ grid-template-columns: 1fr;
+ }
+
+ .custom-figure img {
+ max-height: 350px;
+ }
+}
+
+.main-content > * {
+ animation: fadeIn 0.6s ease-out;
+}
+
+/* ============================================================
+ Lock screen — encrypted posts
+ ============================================================ */
+
+/* The data holder is invisible; only the lock UI is shown */
+#encrypted-content {
+ display: none;
+}
+
+/* Full-viewport overlay */
+#lock-screen {
+ position: fixed;
+ inset: 0;
+ background-color: var(--primary-bg);
+ background-image: repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 10px,
+ rgba(255, 255, 255, 0.01) 10px,
+ rgba(255, 255, 255, 0.01) 20px
+ );
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ animation: fadeIn 0.4s ease-out;
+}
+
+/* Card */
+#lock-box {
+ background-color: var(--secondary-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 2.75rem 3rem;
+ width: 90%;
+ max-width: 400px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.1rem;
+ box-shadow:
+ 0 12px 50px rgba(0, 0, 0, 0.7),
+ 0 0 0 1px rgba(201, 170, 113, 0.07);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Gradient top-accent bar */
+#lock-box::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue));
+}
+
+/* Lock emoji */
+.lock-icon {
+ font-size: 2.6rem;
+ line-height: 1;
+ margin-bottom: 0.15rem;
+}
+
+/* Override the global h2 blue/border-left styles inside the lock box */
+#lock-box h2 {
+ font-family: "Jupiter Pro", "Cinzel", "Georgia", serif;
+ font-size: 1.35rem;
+ font-weight: 500;
+ letter-spacing: 1px;
+ color: var(--accent-gold);
+ -webkit-text-fill-color: var(--accent-gold);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ text-shadow: none;
+ border-left: none;
+ padding-left: 0;
+ margin-left: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ position: static;
+}
+
+#lock-box p {
+ color: var(--text-dim);
+ font-size: 0.87rem;
+ margin: 0;
+ text-align: center;
+}
+
+/* Password input */
+#enc-input {
+ background-color: var(--tertiary-bg);
+ color: var(--text-primary);
+ border: 1px solid var(--border-color);
+ padding: 0.65rem 1rem;
+ border-radius: 6px;
+ width: 100%;
+ font-size: 0.95rem;
+ font-family: inherit;
+ text-align: center;
+ letter-spacing: 0.05em;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+#enc-input::placeholder {
+ color: var(--text-dim);
+ letter-spacing: 0;
+}
+
+#enc-input:focus {
+ outline: none;
+ border-color: var(--accent-blue);
+ box-shadow:
+ 0 0 0 3px rgba(91, 143, 199, 0.12),
+ inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 480px) {
+ #lock-box {
+ padding: 2rem 1.5rem;
+ }
+}
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage