From e813ec4b3989cba2119160704557e84e17b4a594 Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Wed, 24 Jan 2024 22:49:29 -0600 Subject: [PATCH] crt --- views/crt/index.html | 17 ++++++++++++++ views/index.html | 29 +++++++++++++++++++++++- views/styles/crt.css | 53 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 views/crt/index.html create mode 100644 views/styles/crt.css diff --git a/views/crt/index.html b/views/crt/index.html new file mode 100644 index 0000000..5abf2d6 --- /dev/null +++ b/views/crt/index.html @@ -0,0 +1,17 @@ + + + + + abtmtr.link - CRT + + + + +
+
+ +
+
+
+ + diff --git a/views/index.html b/views/index.html index a052fe4..6b3714f 100755 --- a/views/index.html +++ b/views/index.html @@ -43,6 +43,33 @@ grid-auto-flow: column; gap: 1em; } + @keyframes wave { + 0% { + transform: rotate(0deg); + } + 20% { + transform: rotate(-15deg); + } + 40% { + transform: rotate(15deg); + } + 60% { + transform: rotate(-15deg); + } + 80% { + transform: rotate(15deg); + } + 100% { + transform: rotate(0deg); + } + } + .waving { + transform-origin: 60% 60%; + cursor: none; + } + .waving:hover { + animation: infinite wave 0.5s; + } @@ -61,7 +88,7 @@

Hey! - 👋 + 👋

diff --git a/views/styles/crt.css b/views/styles/crt.css new file mode 100644 index 0000000..a9b4bf5 --- /dev/null +++ b/views/styles/crt.css @@ -0,0 +1,53 @@ +body { + background-color: black; + margin: 0; + padding: 0; + box-sizing: border-box; + overflow: hidden; + width: 100vw; + height: 100vh; +} + +div.screen { + width: 800px; + height: 600px; + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + box-shadow: 0 0 64px 4px #fff4; + border-radius: 8px; + overflow: hidden; +} + +div.screen iframe { + display: inline-block; + width: 100%; + height: 100%; + border: none; + margin: 0; + padding: 0; + font-size: 16px; +} + +div.screen div.crt { + display: inline-block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + #0006 0px, + #0006 1px, + #0000 1px, + #0000 2px + ); + background-repeat: repeat; + background-position: 0 0; + background-size: 2px; + user-select: none; + pointer-events: none; + z-index: 9000; +}