commit e94891dc72d20690a16ab8b90b2720a7fed34559
parent 33a75eb9f0db4b9955ac90bc010cd932e95f0611
Author: Jack Sangdahl <jack@pngu.org>
Date: Thu, 15 Jan 2026 19:27:31 -0700
Initial reworking of content
- Tidy up index page
- Remove some no longer necessary pages
- Update 404 page
- Add highlight.js support for code display
- Other changes
Diffstat:
12 files changed, 245 insertions(+), 235 deletions(-)
diff --git a/404.html b/404.html
@@ -2,8 +2,149 @@
<html>
<head>
<title>404 Not Found</title>
+ <!-- https://3dtransforms.desandro.com/ -->
+ <style>
+ html {
+ font-family:
+ Helvetica Neue,
+ Helvetica,
+ Arial,
+ sans-serif;
+ background-color: #57baac;
+ color: white;
+ }
+
+ /* ---- cube---- */
+
+ .scene--cube {
+ width: 300px;
+ height: 300px;
+ margin: 80px 0;
+ perspective: 500px;
+ }
+
+ .scene--persp-cube {
+ perspective: 400px;
+ }
+
+ .cube {
+ width: 300px;
+ height: 300px;
+ position: relative;
+ transform-style: preserve-3d;
+ transform: translateZ(-150px);
+ }
+
+ .scene--hero {
+ height: 300px;
+ margin: 80px 0;
+ perspective: 500px;
+ border: none;
+ }
+
+ .cube--hero {
+ margin: 0 auto;
+ }
+
+ .cube.is-spinning {
+ animation: spinCube 7s infinite linear;
+ }
+
+ @keyframes spinCube {
+ 0% {
+ transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);
+ }
+ 100% {
+ transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
+ }
+ }
+
+ .cube__face {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ border: 2px solid black;
+ line-height: 300px;
+ font-size: 40px;
+ font-weight: bold;
+ color: white;
+ text-align: center;
+ }
+
+ .cube.is-backface-hidden .cube__face {
+ backface-visibility: hidden;
+ }
+
+ .cube__face--front {
+ background: hsla(0, 100%, 50%, 0.7);
+ }
+ .cube__face--right {
+ background: hsla(60, 100%, 50%, 0.7);
+ }
+ .cube__face--back {
+ background: hsla(120, 100%, 50%, 0.7);
+ }
+ .cube__face--left {
+ background: hsla(180, 100%, 50%, 0.7);
+ }
+ .cube__face--top {
+ background: hsla(240, 100%, 50%, 0.7);
+ }
+ .cube__face--bottom {
+ background: hsla(300, 100%, 50%, 0.7);
+ }
+
+ .cube__face--front {
+ transform: rotateY(0deg) translateZ(150px);
+ }
+ .cube__face--right {
+ transform: rotateY(90deg) translateZ(150px);
+ }
+ .cube__face--back {
+ transform: rotateY(180deg) translateZ(150px);
+ }
+ .cube__face--left {
+ transform: rotateY(-90deg) translateZ(150px);
+ }
+ .cube__face--top {
+ transform: rotateX(90deg) translateZ(150px);
+ }
+ .cube__face--bottom {
+ transform: rotateX(-90deg) translateZ(150px);
+ }
+
+ .cube.show-front {
+ transform: translateZ(-150px) rotateY(0deg);
+ }
+ .cube.show-right {
+ transform: translateZ(-150px) rotateY(-90deg);
+ }
+ .cube.show-back {
+ transform: translateZ(-150px) rotateY(-180deg);
+ }
+ .cube.show-left {
+ transform: translateZ(-150px) rotateY(90deg);
+ }
+ .cube.show-top {
+ transform: translateZ(-150px) rotateX(-90deg);
+ }
+ .cube.show-bottom {
+ transform: translateZ(-150px) rotateX(90deg);
+ }
+ </style>
</head>
<body>
- <center>404</center>
+ <center>
+ <div class="scene scene--hero">
+ <div class="cube cube--hero is-spinning">
+ <div class="cube__face cube__face--front">404</div>
+ <div class="cube__face cube__face--right">Oops!</div>
+ <div class="cube__face cube__face--back">pngu.org</div>
+ <div class="cube__face cube__face--left">HTTP/1.1</div>
+ <div class="cube__face cube__face--top">text/html</div>
+ <div class="cube__face cube__face--bottom">Not Found</div>
+ </div>
+ </div>
+ </center>
</body>
</html>
diff --git a/contact.html b/contact.html
@@ -1,20 +0,0 @@
-<html lang="en">
- <head>
- <title>Contact</title>
- <link rel="stylesheet" href="style.css" />
- <link rel="apple-touch-icon" sizes="180x180" href="data/favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="data/favicon/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="data/favicon/favicon-16x16.png">
- <link rel="manifest" href="data/favicon/site.webmanifest">
- </head>
- <body>
- <a style="text-decoration: none" href="content.html"><--</a>
- <h2>Contact</h2>
- Email: <a href="mailto:jack@pngu.org">jack@pngu.org</a><br />
- PGP: <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/CF27648C14B46FAA922F62D7FC53C827D09C7050" target="_blank">CF27648C14B46FAA922F62D7FC53C827D09C7050</a><br>
- Github: <a href="https://github.com/waffle87" target="_blank">waffle87</a
- ><br />
- Leetcode: <a href="https://leetcode.com/0x6A73" target="_blank">0x6A73</a><br>
- Codeforeces: <a href="https://codeforces.com/profile/0x6A73" target="_blank">0x6A73</a>
- </body>
-</html>
diff --git a/content.html b/content.html
@@ -1,32 +0,0 @@
-<html lang="en">
- <head>
- <title>Notes Corner</title>
- <link rel="stylesheet" href="style.css" />
- <link
- rel="apple-touch-icon"
- sizes="180x180"
- href="data/favicon/apple-touch-icon.png"
- />
- <link
- rel="icon"
- type="image/png"
- sizes="32x32"
- href="data/favicon/favicon-32x32.png"
- />
- <link
- rel="icon"
- type="image/png"
- sizes="16x16"
- href="data/favicon/favicon-16x16.png"
- />
- <link rel="manifest" href="data/favicon/site.webmanifest" />
- </head>
- <body>
- <h2>Notes Corner</h2>
- <a href="gentoo.html">Gentoo</a><br />
- <a href="kernel.html">Kernel Configuration</a><br />
- <a href="extra.html">Extra Extra</a><br />
- <a href="projects.html">Personal Projects</a><br />
- <a href="contact.html">Other Platforms</a><br />
- </body>
-</html>
diff --git a/cube.css b/cube.css
@@ -1,116 +0,0 @@
-/* https://3dtransforms.desandro.com */
-.scene--cube {
- width: 300px;
- height: 300px;
- margin: 80px 0;
- perspective: 500px;
-}
-
-.scene--persp-cube {
- perspective: 400px;
-}
-
-.cube {
- width: 300px;
- height: 300px;
- position: relative;
- transform-style: preserve-3d;
- transform: translateZ(-150px);
-}
-
-.scene--hero {
- height: 300px;
- margin: 80px 0;
- perspective: 500px;
- border: none;
-}
-
-.cube--hero {
- margin: 0 auto;
-}
-
-.cube.is-spinning {
- animation: spinCube 7s infinite linear;
-}
-
-@keyframes spinCube {
- 0% {
- transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);
- }
- 100% {
- transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
- }
-}
-
-.cube__face {
- position: absolute;
- width: 300px;
- height: 300px;
- border: 2px solid grey;
- line-height: 300px;
- font-size: 40px;
- font-weight: bold;
- color: white;
- text-align: center;
-}
-
-.cube.is-backface-hidden .cube__face {
- backface-visibility: hidden;
-}
-
-.cube__face--front {
- background: hsla(0, 100%, 50%, 0.7);
-}
-.cube__face--right {
- background: hsla(60, 100%, 50%, 0.7);
-}
-.cube__face--back {
- background: hsla(120, 100%, 50%, 0.7);
-}
-.cube__face--left {
- background: hsla(180, 100%, 50%, 0.7);
-}
-.cube__face--top {
- background: hsla(240, 100%, 50%, 0.7);
-}
-.cube__face--bottom {
- background: hsla(300, 100%, 50%, 0.7);
-}
-
-.cube__face--front {
- transform: rotateY(0deg) translateZ(150px);
-}
-.cube__face--right {
- transform: rotateY(90deg) translateZ(150px);
-}
-.cube__face--back {
- transform: rotateY(180deg) translateZ(150px);
-}
-.cube__face--left {
- transform: rotateY(-90deg) translateZ(150px);
-}
-.cube__face--top {
- transform: rotateX(90deg) translateZ(150px);
-}
-.cube__face--bottom {
- transform: rotateX(-90deg) translateZ(150px);
-}
-
-.cube.show-front {
- transform: translateZ(-150px) rotateY(0deg);
-}
-.cube.show-right {
- transform: translateZ(-150px) rotateY(-90deg);
-}
-.cube.show-back {
- transform: translateZ(-150px) rotateY(-180deg);
-}
-.cube.show-left {
- transform: translateZ(-150px) rotateY(90deg);
-}
-.cube.show-top {
- transform: translateZ(-150px) rotateX(-90deg);
-}
-.cube.show-bottom {
- transform: translateZ(-150px) rotateX(90deg);
-}
diff --git a/data/with_emacs.png b/data/with_emacs.png
Binary files differ.
diff --git a/data/with_windows.jpg b/data/with_windows.jpg
Binary files differ.
diff --git a/frame.js b/frame.js
@@ -0,0 +1,3 @@
+document.writeln("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css'>");
+document.writeln("<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js'></script>");
+document.writeln("<script type='text/javascript'> document.querySelectorAll('code, div.code').forEach(el => { el.innerHTML = el.innerHTML.replace(/^\\n+|\\n+$/g, ''); hljs.highlightElement(el); }); </script>");
diff --git a/header.js b/header.js
@@ -0,0 +1,5 @@
+document.writeln("<link rel='stylesheet' href='style.css'/>");
+document.writeln("<link rel='apple-touch-icon' sizes='180x180' href='data/favicon/apple-touch-icon.png'/>");
+document.writeln("<link rel='icon' type='image/png' sizes='32x32' href='data/favicon/favicon-32x32.png'/>");
+document.writeln("<link rel='icon' type='image/png' sizes='16x16' href='data/favicon/favicon-16x16.png'/>");
+document.writeln("<link rel='manifest' href='data/favicon/site.webmanifest'/>");
diff --git a/index.html b/index.html
@@ -1,64 +1,64 @@
+<!doctype html>
<html lang="en">
<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>pngu.org</title>
- <link rel="stylesheet" href="style.css" />
- <link rel="stylesheet" href="cube.css" />
- <link
- rel="apple-touch-icon"
- sizes="180x180"
- href="data/favicon/apple-touch-icon.png"
- />
- <link
- rel="icon"
- type="image/png"
- sizes="32x32"
- href="data/favicon/favicon-32x32.png"
- />
- <link
- rel="icon"
- type="image/png"
- sizes="16x16"
- href="data/favicon/favicon-16x16.png"
- />
- <link rel="manifest" href="data/favicon/site.webmanifest" />
- <style>
- html {
- font-family:
- Helvetica Neue,
- Helvetica,
- Arial,
- sans-serif;
- color: white;
- }
- a {
- color: white;
- }
- </style>
+ <script src="header.js"></script>
</head>
<body>
<center>
- <div class="scene scene--hero">
- <div class="cube cube--hero is-spinning">
- <div class="cube__face cube__face--front">
- <a href="https://git.pngu.org">git</a>
- </div>
- <div class="cube__face cube__face--right">
- <a href="https://vault.pngu.org">vault</a>
- </div>
- <div class="cube__face cube__face--back">
- <a href="https://uptime.pngu.org">status</a>
- </div>
- <div class="cube__face cube__face--left">
- <a href="https://calendar.pngu.org">calendar</a>
- </div>
- <div class="cube__face cube__face--top">
- <a href="content.html">content</a>
- </div>
- <div class="cube__face cube__face--bottom">
- <a href="https://webmail.pngu.org">mail</a>
- </div>
- </div>
+ <div>
+ <a href="https://www.gentoo.org" style="text-decoration: none">
+ <img
+ src="data/with_windows.jpg"
+ alt="Made with Windows..."
+ style="vertical-align: middle"
+ />
+ </a>
+ | <a href="https://git.pngu.org">git</a> |
+ <a href="https://vault.pngu.org">vault</a> |
+ <a href="https://uptime.pngu.org">status</a> |
+ <a href="https://calendar.pngu.org">calendar</a> |
+ <a href="https://webmail.pngu.org">mail</a> |
+ <a href="content.html">content</a> |
+ <a href="https://www.vim.org" style="text-decoration: none">
+ <img
+ src="data/with_emacs.png"
+ alt="Made with Emacs..."
+ style="vertical-align: middle"
+ />
+ </a>
</div>
+ <hr />
</center>
+ <h3>Contact & Platforms</h3>
+ <p>
+ Email:
+ <!-- prettier-ignore -->
+ <span class="email">
+ _ _ ____
+ (_) __ _ ___| | __/ __ \ _ __ _ __ __ _ _ _ ___ _ __ __ _
+ | |/ _` |/ __| |/ / / _` | '_ \| '_ \ / _` | | | | / _ \| '__/ _` |
+ | | (_| | (__| < | (_| | |_) | | | | (_| | |_| || (_) | | | (_| |
+ _/ |\__,_|\___|_|\_\ \__,_| .__/|_| |_|\__, |\__,_(_)___/|_| \__, |
+|__/ \____/|_| |___/ |___/
+ </span
+ ><br />
+ PGP:
+ <a
+ href="https://keys.openpgp.org/vks/v1/by-fingerprint/CF27648C14B46FAA922F62D7FC53C827D09C7050"
+ target="_blank"
+ >CF27648C14B46FAA922F62D7FC53C827D09C7050</a
+ ><br />
+ Github: <a href="https://github.com/waffle87" target="_blank">waffle87</a>
+ <br />
+ Leetcode: <a href="https://leetcode.com/0x6A73" target="_blank">0x6A73</a>
+ <br />
+ </p>
+ <hr />
+ <h3>Content & Postings</h3>
+ <p>migration...</p>
+ <script src="frame.js"></script>
</body>
</html>
diff --git a/readme.md b/readme.md
@@ -1 +1 @@
-source files for [pngu.org](https://pngu.org)
+Source files for [pngu.org](https://pngu.org)
diff --git a/style.css b/style.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
+
body {
max-width: 65%;
margin: auto;
@@ -5,9 +7,22 @@ body {
padding: 15px 0px;
}
-img {
- max-width: 100%;
- height: auto;
- width: auto;
- margin: 8px 0px;
+.email {
+ font-size: 30%;
+ font-weight: bold;
+ white-space: pre;
+ line-height: 1;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.code {
+ font-size: smaller;
+ font-family: "JetBrains Mono", monospace;
+ white-space: pre;
+ width: inherit;
+ overflow-x: auto;
+ overflow-y: hidden;
+ line-height: 1;
+ display: block;
}
diff --git a/template.html b/template.html
@@ -1,14 +1,28 @@
+<!doctype html>
<html lang="en">
<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
- <link rel="stylesheet" href="style.css" />
- <link rel="apple-touch-icon" sizes="180x180" href="data/favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="data/favicon/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="data/favicon/favicon-16x16.png">
- <link rel="manifest" href="data/favicon/site.webmanifest">
+ <script src="header.js"></script>
</head>
<body>
- <a style="text-decoration: none" href="content.html"><--</a>
+ <a style="text-decoration: none" href="index.html"><--</a>
<h2>Page Header</h2>
+ <p><i>2026-01-14</i></p>
+ Some text on a web page.
+ <!-- prettier-ignore -->
+ <div class="code language-c">
+ int function(int x) {
+ return x * x;
+ }
+
+ int main() {
+ int x = 42;
+ printf("%d\n", function(x));
+ return 0;
+ }
+ </div>
+ <script src="frame.js"></script>
</body>
</html>
