diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..dc58830 --- /dev/null +++ b/index.html @@ -0,0 +1,226 @@ +<!DOCTYPE html> +<html> +<head> + <title>Soft Machine</title> + <link href="https://softmachine.dev/rss.xml/" rel="alternate" type="application/rss+xml" title="Soft Machine's RSS Feed" /> + <link href="common.css" rel="stylesheet" type="text/css"> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="The Weight of Comfort | Personal website containing art, music, programming, poetry, and the world of Moloch"> + <meta name="keywords" content="Personal, Music, Poetry, Art, Radiohotline, Teethinvitro, Moloch"> + <meta name="author" content="Radiohotline"> + + <style> + body { + background-image: url('img/index/index.jpg'); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + background-position: center; + } + + .shadow { + z-index: 2; + text-align: center; + padding: 0; + margin: 0; + position: fixed; + -webkit-box-shadow: 0 0 10px 10px rgba(0,0,0,0.6); + -moz-box-shadow: 0 0 10px 10px rgba(0,0,0,0.6); + box-shadow: 0 0 10px 10px rgba(0,0,0,0.6); + } + + #one a:nth-child(1)::after { + background: none; + } + + #two a:nth-child(1)::after { + bottom: 10%; + left: 10%; + height: 30%; + } + + #two a:nth-child(2)::after { + bottom: 2%; + left: 8%; + height: 10%; + } + + #two a:nth-child(3)::after { + bottom: 0px; + left: 0px; + width: 105%; + height: 45%; + } + + #three a:nth-child(1)::after { + bottom: 5%; + left: 0%; + height: 40%; + } + + #three a:nth-child(2)::after { + bottom: 5%; + left: 5%; + height: 55%; + width: 102%; + } + + .eye { + background: rgb(212, 212, 212); + border-radius: 50%; + position: absolute; + display: inline-block; + margin: 0; + overflow: hidden; + z-index: 2; + } + + .white { + width: 100%; + height: 50%; + box-shadow: 0px 0px 7px 3px rgb(230, 230, 230); + background: rgb(230, 230, 230); + border-radius: 50%; + position: absolute; + top: 70%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + } + + .pupil { + width: 25%; + aspect-ratio: 1 / 1; + background: rgb(17, 17, 17); + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + } + + .shine { + width: 17%; + aspect-ratio: 1 / 1; + background: rgba(255, 255, 255, 0.6); + box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, 0.6); + border-radius: 50%; + position: absolute; + top: 25%; + left: 70%; + transform: translate(-50%, -50%); + z-index: 3; + } + + .logo { + text-align: center; + top: 0; + left: 0; + position: fixed; + margin: 20px; + } + + .logo img { + width: 28vw; + } + + .logo img:hover { + width: 33vw; + } + + p { + color: white; + } + </style> +</head> +<body> + <h1 class="logo"><img src="img/logo.png" alt="Soft Machine"></h1> + + <div> + <div id="one" class="flex"> + <a href="brain.html"> + <img src="img/index/brain.png" style="width: 10.5vw;"></a> + </div> + + <div id="two" class="flex"> + <a href="art.html"> + <img src="img/index/art.png" style="width: 18.5vw;"></a> + + <a href="moloch.html" class="weener"> + <div class="eye" style="top: 19%; left: 37%; width: 15%; height: 8.5%;"> + <div class="white"></div> + <div class="pupil"></div> + <div class="shine"></div> + </div> + + <div class="eye" style="top: 16%; left: 56%; width: 14%; height: 8.5%"> + <div class="white"></div> + <div class="pupil"></div> + <div class="shine"></div> + </div> + + <img src="img/index/weener.png" style="width: 13.5vw;"> + </a> + + <a href="tech.html"> + <img src="img/index/computer.png" style="width: 18.5vw;"></a> + </div> + + <div id="three" class="flex" style="gap: 10vw;"> + <a href="creatures.html"> + <img src="img/index/doll.png" style="width: 10.5vw;"></a> + + <a href="music.html"> + <img src="img/index/music.png" style="width: 13.5vw;"></a> + </div> + </div> + + <div class="shadow" style="width: 10%; top: 0; right: 0;"> + <p><a href="https://d75i6wrgammbirodhv7fpulpko3jea3tb7qjjivf3kc6ohaambmptsad.onion/">tor</a> * <a href="http://softmachine.i2p/">i2p</a></p> + </div> + + <div class="shadow" style="width: 20%; bottom: 0; left: 0;"> + <p><a href="about.html">about</a> * <a href="sitemap.html">sitemap</a> * <a href="https://teeth.atabook.org/">guestbook</a></p> + </div> + + <div class="shadow" style="width: 20%; bottom: 0; right: 0;"> + <h2 style="margin-top: 10px;">Updates</h2> + + <ul style="text-align: left; margin: 0px 10px 10px 0px; font-size: 1em;"> + <li>16/02/26 - New site design</li> + <li>04/02/26 - Added Bluesky link</li> + <li>12/01/26 - Added tor and i2p mirrors</li> + <li>10/01/26 - Added The Black Tower to /books</li> + </ul> + + <a href="rss.xml">RSS Feed</a> + </div> + + <script> + document.addEventListener("mousemove", (e) => { + document.querySelectorAll(".eye").forEach(eye => { + const pupil = eye.querySelector(".pupil"); + const rect = eye.getBoundingClientRect(); + + const eyeX = rect.left + rect.width / 2; + const eyeY = rect.top + rect.height / 2; + + const dx = e.clientX - eyeX; + const dy = e.clientY - eyeY; + + const angle = Math.atan2(dy, dx); + + const maxMove = rect.width / 4; + + const x = Math.cos(angle) * maxMove; + const y = Math.sin(angle) * maxMove; + + pupil.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`; + }); + }); + </script> + +</body> +</html> |