diff options
| -rw-r--r-- | guestbook/comments.php | 2 | ||||
| -rw-r--r-- | index.php | 161 | ||||
| -rw-r--r-- | style.css | 7 |
3 files changed, 124 insertions, 46 deletions
diff --git a/guestbook/comments.php b/guestbook/comments.php index 432c1d2..b0acbae 100644 --- a/guestbook/comments.php +++ b/guestbook/comments.php @@ -36,7 +36,7 @@ function echo_comments($page, $Parsedown = null) { $output = $output."<div style='grid-area:gb-cool;' class='gb-cool'><b>cool thing</b>: <a href='$cool'>$coolsanitized</a></div>"; } if($found) { - $output = $output."<div style='grid-area:gb-found;'><b>How did you find me?</b><br>$found</div>"; + $output = $output."<div style='grid-area:gb-found;' class='gb-found'><b>How did you find me?</b><br>$found</div>"; } $output = $output."<div style='grid-area:gb-message;'>$message</div>"; if($reply) { @@ -16,13 +16,24 @@ flex-direction: column; justify-content: center; align-items: center; + gap: var(--stdpadding); } - main > :is(div, nav) { - width: 100%; + #mainmidsection { + display: flex; + gap: var(--stdpadding); + flex-wrap: wrap; + justify-content: center; + align-items: center; + } + #abt, #statuscafe, figure.quote { + height: fit-content; + margin-bottom: initial; } - #webrings > div { - margin: var(--stdpadding); + #webrings { + display: flex; + flex-direction: column; + gap: var(--stdpadding); } #webrings div :is(a, span) { padding: initial; @@ -116,12 +127,21 @@ } @media only screen and (hover: none) { #rightsidebg { - box-shadow: none; + filter: brightness(0.7); } main { justify-content: initial; height: initial; } + main > *, #mainmidsection > * { + box-sizing: border-box; + width: 100%; + } + #guys { + background-color: var(--bgcolor); + box-shadow: 0 0 1rem var(--stdshadow) inset; + padding: var(--stdpadding); + } #guys, #ads, #ads:hover { position: initial; bottom: initial; @@ -164,6 +184,43 @@ <?php include('nav.php'); bg(true, 11, "Pictured: The eponymous Deep Twisty"); ?> <main> <img src="images/landing.png" alt="Isopod on her skinkpad (thinkpad but with added skink)" title="The Lenovo SkinkPad P15w is powered by a highly efficient, passively-cooled RISC-V processor and features an IP69 water resistance rating for reliable amphibious operation at virtually unlimited depths, making it the perfect laptop for the deep-sea crustacean in your life."/> + + <div id="mainmidsection"> + <blockquote id="abt"> + > Hannah<br> + > <a href="/about/pronouns">she/it</a><br><br> + > real life isopod<br> + > chronic computer toucher + </blockquote> + <nav id="webrings"> + <div style="font-family: sans-serif; font-weight: bold;"> + <a href="https://hotlinewebring.club/bathynomus/previous" style="color: white; text-decoration: none;">←</a> + <a href="https://hotlinewebring.club/" style="color: white; text-decoration: none; font-style: italic;">HOTLINE WEBRING</a> + <a href="https://hotlinewebring.club/bathynomus/next" style="color: white; text-decoration: none;">→</a> + </div> + <div> + <a href="https://melonland.net/surf-club.html" style="color: #ff74ff;"><span style="color: #e7ad59;">melon</span><span style="color: #c0ea32;">ring</span></a> + <a href="https://brain.melonking.net/surf-club-random" style="color: #ff74ff;"><span style="color: #864cff;">?</span></a> + </div> + <div> + <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod" class="bflink">⥼</a> + <a href="https://webring.bucketfish.me" id="bucketfish"><span style="--n:-10000ms;">b</span><span style="--n:-9900ms;">u</span><span style="--n:-9800ms;">c</span><span style="--n:-9700ms;">k</span><span style="--n:-9600ms;">e</span><span style="--n:-9500ms;">t</span><span style="--n:-9400ms;"> </span><span style="--n:-9300ms;">w</span><span style="--n:-9200ms;">e</span><span style="--n:-9100ms;">b</span><span style="--n:-9000ms;">r</span><span style="--n:-8900ms;">i</span><span style="--n:-8800ms;">n</span><span style="--n:-8700ms;">g</span></a> + <a href="https://webring.bucketfish.me/redirect.html?to=next&name=isopod" class="bflink">⥽</a> + </div> + <div> + <a href="https://fediring.net/previous?host=isopod.cool">←</a> + <a href="https://fediring.net/">fediring</a> + <a href="https://fediring.net/random">?</a> + <a href="https://fediring.net/next?host=isopod.cool">→</a> + </div> + <div> + <a href="https://baccyflap.com/noai/?prv&s=ipd">←</a> + <a href="https://baccyflap.com/noai">no AI webring</a> + <a href="https://baccyflap.com/noai/?rnd">?</a> + <a href="https://baccyflap.com/noai/?nxt&s=ipd">→</a> + </div> + </nav> + </div> <?php $username = "niceopod"; // Your username here! $ch = curl_init("https://status.cafe/users/$username/status.json"); @@ -184,46 +241,10 @@ if(strlen($status_content) < 1) { $status_content = "Something's gone wrong server side..."; } - echo "<figure class='quote'><blockquote id='statuscafe'><div id='statuscafe-username'><a href='https://status.cafe/users/$username' target='_blank'>status</a> $face $timeago</div><div id='statuscafe-content'>$status_content</div></blockquote></figure>"; + echo "<blockquote id='statuscafe'><div id='statuscafe-username'><a href='https://status.cafe/users/$username' target='_blank'>status</a> $face $timeago</div><div id='statuscafe-content'>$status_content</div></blockquote>"; ?> - <nav id="webrings"> - <div style="font-family: sans-serif; font-weight: bold;"> - <a href="https://hotlinewebring.club/bathynomus/previous" style="color: white; text-decoration: none;">←</a> - <a href="https://hotlinewebring.club/" style="color: white; text-decoration: none; font-style: italic;">HOTLINE WEBRING</a> - <a href="https://hotlinewebring.club/bathynomus/next" style="color: white; text-decoration: none;">→</a> - </div> - <div> - <a href="https://melonland.net/surf-club.html" style="color: #ff74ff;"><span style="color: #e7ad59;">melon</span><span style="color: #c0ea32;">ring</span></a> - <a href="https://brain.melonking.net/surf-club-random" style="color: #ff74ff;"><span style="color: #864cff;">?</span></a> - </div> - <div> - <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod" class="bflink">⥼</a> - <a href="https://webring.bucketfish.me" id="bucketfish"><span style="--n:-10000ms;">b</span><span style="--n:-9900ms;">u</span><span style="--n:-9800ms;">c</span><span style="--n:-9700ms;">k</span><span style="--n:-9600ms;">e</span><span style="--n:-9500ms;">t</span><span style="--n:-9400ms;"> </span><span style="--n:-9300ms;">w</span><span style="--n:-9200ms;">e</span><span style="--n:-9100ms;">b</span><span style="--n:-9000ms;">r</span><span style="--n:-8900ms;">i</span><span style="--n:-8800ms;">n</span><span style="--n:-8700ms;">g</span></a> - <a href="https://webring.bucketfish.me/redirect.html?to=next&name=isopod" class="bflink">⥽</a> - </div> - <div> - <a href="https://fediring.net/previous?host=isopod.cool">←</a> - <a href="https://fediring.net/">fediring</a> - <a href="https://fediring.net/random">?</a> - <a href="https://fediring.net/next?host=isopod.cool">→</a> - </div> - <div> - <a href="https://baccyflap.com/noai/?prv&s=ipd">←</a> - <a href="https://baccyflap.com/noai">no AI webring</a> - <a href="https://baccyflap.com/noai/?rnd">?</a> - <a href="https://baccyflap.com/noai/?nxt&s=ipd">→</a> - </div> - </nav> <!--script type="text/javascript">document.write('<a href="desktop.html">$login<span class="blinking" >_</span></a>');</script--> </main> - - <div id="ads"> - <blockquote style="margin-bottom: 0; width: 100%; max-width: 680px;"> - Unpaid advertising below! My apolo<?php if(rand(0,100) > 90) { echo "cheese"; } else { echo "gies"; } ?>, but it's how we keep the lights on here at IsopodCoolGGMBH PBLLC. - </blockquote> - <iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/" id="johnvertisement"></iframe> - <iframe src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe> - </div> <div id="guys"> <a target="_blank" href="https://dokodemo.neocities.org/" title="made by Dokodemo"><img alt="An isopod!" src="images/isopod3.png"></a> @@ -234,12 +255,64 @@ <a target="_blank" href="https://kelpeater.neocities.org/collections/isopods" title="Another isopod!"><img alt="Another isopod!" src="images/casiopea_isopod.png" style="height: 4rem;"></a> <a target="_blank" href="https://shroom.ink/decay/adopt-a-shroom/" title="Ophiocordyceps Unilateralis"><img alt="Ophiocordyceps Unilateralis" src="images/Ophiocordyceps_unilateralis.png" style="height: 4rem;"></a> </div> + + <div id="ads"> + <blockquote style="margin-bottom: 0; width: 100%; max-width: 728px; box-sizing: border-box;"> + Unpaid advertising below! My apolo<?php if(rand(0,100) > 90) { echo "cheese"; } else { echo "gies"; } ?>, but it's how we keep the lights on here at IsopodCoolGGMBH PBLLC. + </blockquote> + <iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/" id="johnvertisement"></iframe> + <iframe src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe> + </div> + <div id="bubblecolumn"></div> <?php - if(date("w") == "5" && rand(0, 9) == 4) { + if(date("w") == "5") { $ind = rand(1,2); $filename = "images/flatworm friday $ind.mp4"; - echo "<div id='flatwormfriday' style='position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000000cc;display: flex;justify-content: center;align-items: center;'><video controls=''><source src='$filename' type='video/mp4'>It's Flatworm Friday! Your browser does not support the video tag.</video><span style='position: absolute; left: 1rem; bottom: 1rem;'>Refresh the page to close this</span></div>"; + echo " + <input type='checkbox' id='fwf' style='display: none;'> + <style> + #flatwormfriday { + right: var(--stdpadding); + bottom: var(--stdpadding); + position: fixed; + background: #0004; + backdrop-filter: blur(var(--stdpadding)); + padding: var(--stdpadding); + border: var(--stdaccentborder); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: var(--stdpadding); + left: initial; + top: initial; + } + #flatwormfriday label { + cursor: pointer; + } + #fwf:checked ~ #flatwormfriday { + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: initial; + } + .fwfshowonclick { + display: none; + } + #fwf:checked ~ * .fwfshowonclick { + display: initial; + } + </style> + <div id='flatwormfriday'> + <label for='fwf' class='rainbowtext'>It's Flatworm Friday!</label> + <video controls='' class='fwfshowonclick' style='margin: 0;'> + <source src='$filename' type='video/mp4'> + It's Flatworm Friday! Your browser does not support the video tag. + </video> + <label for='fwf' class='fwfshowonclick'>[close]</label> + </div>"; } ?> <script src="wimpod.js"></script> @@ -39,6 +39,7 @@ --navbarheight: calc(var(--stdpadding) * 4.5); --h1-image: url('images/isopod.php'); --shadowsize: 3rem; + --blockbackdrop: blur(1.5px); } html, body { height: 100%; @@ -129,6 +130,7 @@ nav a, body > a { nav a:hover, body > a:hover { --bgpos: 100%; border-left: var(--stdaccentborder); + backdrop-filter: var(--blockbackdrop); } body > a { display: block; @@ -237,6 +239,7 @@ figure.quote, blockquote { border-left: var(--stdaccentborder); background-color: var(--blockbg); margin-bottom: var(--stdpadding); + backdrop-filter: var(--blockbackdrop); } figure.quote blockquote { padding: initial; @@ -411,6 +414,7 @@ hr { nav a, body > a { border-left: 3px solid var(--fontcolor); background-color: var(--blockbg); + backdrop-filter: var(--blockbackdrop); } nav a, body > a, nav span { padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3); @@ -433,7 +437,8 @@ hr { } #leftsidebg, #rightsidebg { top: 0; left: 0; right: 0; bottom: 0; - box-shadow: 100vw 0 0 #000000bb inset; + filter: brightness(0.3); + box-shadow: none; } tr:hover { background-color: initial; |