diff options
Diffstat (limited to 'stuff/webgarden/index.php')
| -rw-r--r-- | stuff/webgarden/index.php | 125 |
1 files changed, 93 insertions, 32 deletions
diff --git a/stuff/webgarden/index.php b/stuff/webgarden/index.php index 0f1d2d4..0f79686 100644 --- a/stuff/webgarden/index.php +++ b/stuff/webgarden/index.php @@ -56,6 +56,7 @@ <head> <meta charset="utf-8"> <title>Pot</title> + <link href="style.css" rel="stylesheet" type="text/css" media="all"> <style type="text/css"> :root { @@ -66,53 +67,79 @@ padding: 0; margin: 0; } - h1 { - width: 224px; - position: absolute; - top: var(--top-header-gap); - left: 6px; + body > a { + text-decoration: none; + } + body > a:hover { + color: var(--fg0); + } + #plant { + background: url('images/webgarden-bg.png'); + background-size: cover; + } + .header { + background-color: var(--bg0); + border-bottom: .33rem solid var(--accent1); + width: 100%; + padding: 8px 0; + } + .header h2 { font-family: b612_mono, monospace; - border-left: 3px solid gainsboro; + font-size: 2em; padding-left: 6px; + text-decoration: none; + margin: 0; + + border-bottom: .2rem solid; + width: fit-content; + + --hbcolor: var(--fg0); + border-image: linear-gradient(to right, var(--hbcolor) 50%, transparent 50%) 100% 1; } - h2 { + .h2caption { width: 212px; - position: absolute; - top: calc(45px + var(--top-header-gap)); - left: 6px; - font-size: 1.1em; - font-family: b612_mono, monospace; - border-left: 3px solid gainsboro; padding-left: 6px; + font-family: b612_mono, monospace; + font-style: italic; + text-decoration: none; + margin: 0; } #mainmenu { - background: #222222; + background: var(--bg0); transition-duration: 0.6s; height: 250px; width: var(--menuwidth); position: absolute; top: 0; - left: 224px; + left: calc(250px - 1rem); z-index: 2; - box-shadow: 0 0 0 black; display: flex; flex-direction: column; align-items: center; justify-content: center; - box-shadow: 0 0 8px black; + box-shadow: 0 0 0 black; + border-left: 1rem solid var(--accent1); } body:hover #mainmenu { - left: calc(250px - var(--menuwidth)); - box-shadow: 0 0 20px black; + left: calc(250px - var(--menuwidth) - 1rem); + box-shadow: 0 0 40px black; } a { - color: white; + color: var(--fg0); } #mainmenu a { - color: #df1955; + color: var(--linkcolor); } #mainmenu a:hover { - color: #00ffd5; + color: var(--linkhover); + } + hr { + width: 100%; + border-bottom: none; + border-left: none; + border-right: none; + color: var(--stdaccentborder); + border-top-color: var(--stdaccentborder); } .flipped { @@ -169,30 +196,64 @@ #mus:checked ~ audio { display: initial; } + + @media screen and (prefers-color-scheme: light) { + #plant { + background-image: + url('images/webgarden-bg-light.png'); + } + } + + .meee { + width: 70px; + position: absolute; + top: 172px; + left: 142px; + --hannahbg: light-dark(#2228, #ddd4); + background: + linear-gradient(135deg, transparent 1rem, var(--hannahbg) 0) top left; + + padding-right: 3rem; + padding-top: 8px; + padding-left: 8px; + } </style> </head> <body> - <a target="_blank" href="../../"> - <div id="plant" style="background: url('images/webgarden-bg.png'); background-size: cover;"> - <h1>isopod.cool</h1> - <h2><?php echo $cap; ?></h2> - <img src="../../images/autoisopod_small.png" style="width: 70px; position: absolute; transform: scaleX(-1) rotate(-30deg); top: 188px; left: 144px;" /> - <img src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" /> + <a target="_blank" href="/"> + <div id="plant"> + <div class="header"> + <h2>isopod.cool</h2> + <p class="h2caption"><?php echo $cap; ?></p> + </div> + <div class="meee"> + <img <?php + + if(rand(1, 1000) == 500) { + echo('src="images/collectmypages.png"'); + } else { + echo('src="images/yay.png"'); + } + + ?> style="max-width: 100%; height: auto;" /> + </div> + + <img class="bubblecolumn" src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" /> <span id="hoverme"><</span> </div> </a> <input type="checkbox" id="mus" name="mus" style="display: none;"></input> <div id="mainmenu"> - <a target="_blank" href="../../">homepage</a> + <a target="_blank" href="/">homepage</a> <!--a target="_blank" href="../../desktop.html">$login<span class="blinking">_</span></a--> - <hr style="width: 30px;"> + <hr> <a href="image1.html">images</a> <a href="status.php">status</a> <label for="mus"><a style="text-decoration: underline; cursor: pointer;">song</a></label> - <hr style="width: 30px;"> + <hr> <iframe src="https://isopod.cool/stuff/beat/frame.php?theme=pixel" style="width: 84px; height: 27px;"></iframe> <img src="/etc/buttons/isopodhours.png" alt="isopod hours"/> - <img src="/etc/buttons/trans.png" alt="nonbinary"/> + <img src="/etc/buttons/trans.png" alt="transgender"/> </div> <audio controls style="position: absolute; width: calc(100% - 0.4rem); top: 0.2rem; left: 0.2rem; z-index: 5;"><source src="music.mp3" type="audio/mp3"></audio> </body> |