commit 33a75eb9f0db4b9955ac90bc010cd932e95f0611
parent 2dafcf630ca1a07ae1260434d8e998aaed46b5dd
Author: Jack Sangdahl <jack@pngu.org>
Date: Wed, 14 Jan 2026 09:51:42 -0700
Fix links once again, add some dates
Diffstat:
7 files changed, 122 insertions(+), 120 deletions(-)
diff --git a/cube.css b/cube.css
@@ -0,0 +1,116 @@
+/* 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/extra.html b/extra.html
@@ -26,6 +26,7 @@
<body>
<a style="text-decoration: none;" href="content.html"><--</a>
<h2>Some bits & bobs</h2>
+ <h5>2023-11-14</h5>
Here lives some miscellaneous things I reference one or one hundred
times and figure they should be gathered somewhere.
<h3>WPA Supplicant</h3>
diff --git a/gentoo.html b/gentoo.html
@@ -41,6 +41,7 @@
<body>
<a style="text-decoration: none" href="content.html"><--</a>
<h2>Gentoo Linux on Macbook Air</h2>
+ <h5>2024-05-11</h5>
This page covers various features, nuances, notes, etc. of my Gentoo system
running on a 2012 Macbook Air. This laptop was initially bought as a
tinkering project for 150USD. While this is not the most powerful device, it
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
<head>
<title>pngu.org</title>
<link rel="stylesheet" href="style.css" />
+ <link rel="stylesheet" href="cube.css" />
<link
rel="apple-touch-icon"
sizes="180x180"
@@ -20,7 +21,6 @@
href="data/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="data/favicon/site.webmanifest" />
-
<style>
html {
font-family:
@@ -28,10 +28,8 @@
Helvetica,
Arial,
sans-serif;
- background-color: #57baac;
color: white;
}
-
a {
color: white;
}
diff --git a/kernel.html b/kernel.html
@@ -20,6 +20,7 @@
<body>
<a style="text-decoration: none" href="content.html"><--</a>
<h2>Kernel Configuration Pseudo Guide</h2>
+ <h5>2024-04-08</h5>
<h4>
Current base:
<a
diff --git a/projects.html b/projects.html
@@ -27,6 +27,7 @@
<a style="text-decoration: none" href="content.html"><--</a>
<h2>Personal Projects</h2>
<h3>Synacor Challenge</h3>
+ <h5>2024-07-25</h5>
After participating in
<a href="https://adventofcode.com" target="_blank">Advent of Code</a> for a
few years now, I have grown a fan of Eric Wastl's puzzles. This is a
@@ -207,6 +208,7 @@ Through the mirror, you see <CODE> scrawled in charcoal on your forehead.
Congratulations; you have reached the end of the challenge!
</pre>
<h3>Hardware security key for authentication on Linux</h3>
+ <h5>2024-03-01</h5>
Typing in a rather long password each time I log into my computer
or need to complete a privileged task can be bothersome. A couple
years ago I came across <a href="https://github.com/solokeys" target="_blank">solokeys</a>,
diff --git a/style.css b/style.css
@@ -11,120 +11,3 @@ img {
width: auto;
margin: 8px 0px;
}
-
-/* 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);
-}
