diff options
-rw-r--r-- | 404.html | 9 | ||||
-rw-r--r-- | content.html | 32 | ||||
-rw-r--r-- | gentoo.html | 16 | ||||
-rw-r--r-- | index.html | 76 | ||||
-rw-r--r-- | style.css | 119 |
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=<uuid> 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 @@ -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> @@ -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); +} |