aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--404.html143
-rw-r--r--content.html32
-rw-r--r--index.html76
-rw-r--r--style.css119
4 files changed, 210 insertions, 160 deletions
diff --git a/404.html b/404.html
index 99ec4f1..97c43f5 100644
--- a/404.html
+++ b/404.html
@@ -2,149 +2,8 @@
<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>
- <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>
+ <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/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);
+}