aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--404.html9
-rw-r--r--content.html32
-rw-r--r--gentoo.html16
-rw-r--r--index.html76
-rw-r--r--style.css119
5 files changed, 226 insertions, 26 deletions
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..97c43f5
--- /dev/null
+++ b/404.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+ <head>
+ <title>404 Not Found</title>
+ </head>
+ <body>
+ <center>404</center>
+ </body>
+</html>
diff --git a/content.html b/content.html
new file mode 100644
index 0000000..3c33f9b
--- /dev/null
+++ b/content.html
@@ -0,0 +1,32 @@
+<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/gentoo.html b/gentoo.html
index d170810..7c4c462 100644
--- a/gentoo.html
+++ b/gentoo.html
@@ -58,7 +58,7 @@
<a href="#hardware_features">hardware features</a><br />
<a href="#kernel">kernel</a><br />
<a href="#bootloader">bootloader</a><br />
- <a href="#portage">portage</a><br />
+ <a href="#system_bits">system bits</a><br />
<a href="#applications">applications</a><br />
<a href="#miscellaneous">miscellaneous</a><br />
<a href="#screenshots">screenshots</a>
@@ -207,18 +207,18 @@ CONFIG_CMDLINE="root=PARTUUID=&ltuuid&gt ro"
</pre>
Reboot and the bootable system should be shown in Mac's EFI program.
</div>
- <div id="portage">
+ <div id="system_bits">
<h3>Other System Bits</h3>
<h4>C Library</h4>
I opted to use <a href="https://musl.libc.org" target="_blank">musl</a> on
this system, over the traditionally used glibc. While there are
never-ending debates over which library is better, using musl has some
- clear benefits on this machine. Namely, meaning shorter compile times --
- musl compiles in roughly 2 minutes, versus glibc's 2 hours. Omitting glibc
- also removes the dependency for GCC, another hefty package. As for the
- reduced "compatibility" when using musl, in terms of non-POSIX compliant
- code, Flatpak is an adequate solution. I currently use Flatpak packages
- for proprietary applications whose binaries are linked against glibc, and
+ clear benefits on this machine. Namely, shorter compile times -- musl
+ compiles in roughly 2 minutes, versus glibc's 2 hours. Omitting glibc also
+ removes the dependency for GCC, another hefty package. As for the reduced
+ "compatibility" when using musl, in terms of non-POSIX compliant code,
+ Flatpak is an adequate solution. I currently use Flatpak packages for
+ proprietary applications whose binaries are linked against glibc, and
Firefox, as NodeJS has a strict runtime dependency of GCC.
<h4>Compiler</h4>
As you may have guessed, this system's default compiler infrastructure is
diff --git a/index.html b/index.html
index a731b01..c71501f 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,66 @@
<html lang="en">
<head>
- <title>Notes Corner</title>
+ <title>pngu.org</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">
+ <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;
+ background-color: #57baac;
+ color: white;
+ }
+
+ a {
+ color: white;
+ }
+ </style>
</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 />
- <h2>Other Services</h2>
- <a href="https://git.pngu.org" target="_blank">git</a><br />
- <a href="https://mail.pngu.org" target="_blank">mail</a><br />
- <a href="https://vault.pngu.org" target="_blank">vault</a><br />
- <a href="https://calendar.pngu.org" target="_blank">calendar</a><br>
- <a href="https://uptime.pngu.org" target="_blank">system status</a><br>
+ <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>
+ </center>
</body>
</html>
diff --git a/style.css b/style.css
index 60564f1..b198dcf 100644
--- a/style.css
+++ b/style.css
@@ -8,6 +8,123 @@ body {
img {
max-width: 100%;
height: auto;
- width: auto\9;
+ 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);
+}