diff options
author | Brian Picciano <mediocregopher@gmail.com> | 2022-11-27 22:46:07 +0100 |
---|---|---|
committer | Brian Picciano <mediocregopher@gmail.com> | 2022-11-27 22:46:07 +0100 |
commit | 7f79413102b3dcab6ee9cec6af1485e6061ae752 (patch) | |
tree | ab6f574a80269ab15733f48c3b2d51a0ab300138 | |
parent | b3d3fa7c628e637f448daeaa39045a758ea2b46d (diff) |
Add the ghost to every page
-rw-r--r-- | src/http/tpl/base.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/src/http/tpl/base.html b/src/http/tpl/base.html index 7889867..3c559e5 100644 --- a/src/http/tpl/base.html +++ b/src/http/tpl/base.html @@ -14,6 +14,94 @@ <body> <header> + + <pre class="fuck-it-up"> + .%*. .-. + .%@@@+. .--=%@@@- + =@@@@@@- :--+@@@@@@@@@* + *@%@@@@@%: :--=#@@@@@@@@@@@@#@@+ + @@::%@@@@@@-: :::-=%@@@@@@@@@@@@@@%#*- :@* + .@@ =@@@@@@@@@+-:::::::-=*@@@@@@@@@@@@@@@@@@@%##- @@: + #@# +%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#*: -@@ + #@- *%@@@@@@@@@@@@@@@@@%%%#= %@= + @@: -=+++== .. @@: + @@ . -@@@ +@@ + #@% =@@@@- +@@@@# *+ %@# + #@- -@@@@@@@. +@@@@@% .%@@@@= @@: + @@: +@@@@@@@@@ +@+ +@@@ %@@@@@@@@@ -@@ + @@ *@%@* :@@@ *@+ -@@@ %@@@@@@@@@@@# @@@ + #@% %@ @% %@@ *@* .@@@ =@@@*@@ :@@@@ @@: + %@:## *@+ :@@ :@@ @@@ %@@: @# .@@@ .@@ + @@:. @@: .@@ @@ @@@ %@: @@ @@% @@% + @@ -@@. =@@ @@. @@@ %@. #@- @@# @@. + %@% +@@. @@. %@- @@@ #@ @@. :@@ -@@ + %@: +@@+ .@% #@= @@@.@ *@@ +@+ @@* + @@: +@@%. .%% *@+ @@@ %@@ -@# @@ + @@ :@@@@@@% :@@ @@% %@@ @# *@@ + %@@ #@@@@* @@ @@% %@@. %@. @@: + @@: ===: @@. @@% %@@: =@%. .@@ + @@. #@= @@% %@@%+%@#. @@% + @@ +@* @@# -@@@@@* .@@ + %@@ :@@ @@# %@@#: =@@ + @@: .@@ @@# : @@= + @@. @@. @@# :@@ + @@ #@= @@% %@% + #@@ +@+ #@% .@@ + @@: =@# +@% =@% + @@ :@% -@@ @@+ + @@ .@@ -@: -@@ + -@@ @% .: *@# + @@* # @@. + @@ =@@ + .@@ @@* + .@@ .@@ + *@@ =@# + @@* @@* + @@ -@@ + .@@ +@* + .@@ @@- + -@@ =@@ + %@% #@* + @@ @@: + @@ +@@ + .@@ %@+ + :@% @@. + :@% *@% + -@. %@= + %@ @@. + @@ *@% + @@ %@= + @% @@: + :@% +@@ + :@* =+- #@+ + :@: .%@@@. @@- + -@ =@@@@@# :@@ + =@ *@#.=@@% #@% + *@ #@- -@@% %@- + @@ #@: :@@% @@: + @@ #% .@@% .#@@* -@@ + @% #% .@@% +@@@@@- %@% + @# %@ :@@% .@@@@@@@@ %@: + @# %@ :@@% +@@% .@@@@ @@: + @# %@ :@@% #@@: :@@@ -@@ + @# @@. .@@@ .@@% .@@@= %@% + @# @@. .@@@: %@@- @@@% %@: + @# @@ @@@@ %@@@ *@@@ @@: + @# .@@ @@@@@@@@@@= :@@@ @@ + * @@@ :@@@@@@@@. :@@@ *@@ +.@@@@@% -@@@@@. .@@@ @@= +@@@@@: .. @@@ @@. +-@%: @@@ @@. + @@@ @@ + -@@ =@@ + .@@ @@+ + .@@:@@. + @@#@- + @@@. + +@- + - + </pre> + <a href="{{ BlogURL "/" }}"><strong>Mediocre Blog</strong></a> by <a href="https://mediocregopher.com">mediocregopher</a> @@ -29,5 +117,100 @@ </body> + <!-- + + Everything in this site is static and uses classless CSS. + + Except for the ghost. Cause he's special. + + --> + + <style> + + header { + /* so the ghost still affects the header's height */ + overflow: hidden; + } + + .fuck-it-up { + + color: var(--nc-lk-1); + font-family:Courier,monospace; + font-weight: bold; + font-size:0.18rem; + line-height:0.09rem; + + background-color: #FFFFFF00; + width: min-content; + + margin: 0; + padding: 0 1rem 0 0; + border: none; + + float: left; + overflow: hidden; + } + + @media (max-device-width: 800px) { + .fuck-it-up { + display: none; + } + } + </style> + + <script> + + const pre = document.querySelectorAll(".fuck-it-up")[0]; + + function replaceAt(str, index, replacement) { + return str.substr(0, index) + replacement+ str.substr(index + replacement.length); + } + + // right-pad the lines + const lines = pre.innerText.split('\n'); + + let maxL = 0; + lines.forEach((line) => { + maxL = maxL > line.length ? maxL : line.length; + }); + + pre.innerText = lines.map((line) => + line + " ".repeat(maxL - line.length) + ).join('\n'); + + function fuckItUp() { + while (true) { + var txt = pre.innerText; + var len = txt.length; + + var a = Math.floor(Math.random() * len); + var aChar = txt.charAt(a); + var b = Math.floor(Math.random() * len); + var bChar = txt.charAt(b); + + if ( + aChar == "\n" || bChar == "\n" + ) continue; + + txt = replaceAt(txt, a, bChar); + txt = replaceAt(txt, b, aChar); + pre.innerText = txt; + + break + } + } + + var wait = 1000; + function fuckItUpALot() { + fuckItUp(); + if (wait > 2) { wait *= 0.95; } + setTimeout(fuckItUpALot, wait); + } + + if (window.getComputedStyle(pre).display != "none") + setTimeout(fuckItUpALot, wait); + + </script> + </html> |