aboutsummaryrefslogtreecommitdiff
path: root/stuff/webgarden
diff options
context:
space:
mode:
Diffstat (limited to 'stuff/webgarden')
-rw-r--r--stuff/webgarden/images/collectmypages.pngbin0 -> 164542 bytes
-rw-r--r--stuff/webgarden/images/webgarden-bg-light.pngbin0 -> 2719 bytes
-rw-r--r--stuff/webgarden/images/yay.pngbin0 -> 170185 bytes
-rw-r--r--stuff/webgarden/index.php125
-rw-r--r--stuff/webgarden/status.php9
-rw-r--r--stuff/webgarden/style.css73
6 files changed, 157 insertions, 50 deletions
diff --git a/stuff/webgarden/images/collectmypages.png b/stuff/webgarden/images/collectmypages.png
new file mode 100644
index 0000000..3a367ea
--- /dev/null
+++ b/stuff/webgarden/images/collectmypages.png
Binary files differ
diff --git a/stuff/webgarden/images/webgarden-bg-light.png b/stuff/webgarden/images/webgarden-bg-light.png
new file mode 100644
index 0000000..caa6981
--- /dev/null
+++ b/stuff/webgarden/images/webgarden-bg-light.png
Binary files differ
diff --git a/stuff/webgarden/images/yay.png b/stuff/webgarden/images/yay.png
new file mode 100644
index 0000000..fae981b
--- /dev/null
+++ b/stuff/webgarden/images/yay.png
Binary files differ
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">&lt;</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>
diff --git a/stuff/webgarden/status.php b/stuff/webgarden/status.php
index 4330d31..a8708f9 100644
--- a/stuff/webgarden/status.php
+++ b/stuff/webgarden/status.php
@@ -5,15 +5,6 @@
<title>Status</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
- body {
- background: #222222;
- }
- #statuscafe a {
- color: #df1955;
- }
- #statuscafe a:hover {
- color: #00ffd5;
- }
#statuscafe {
display: flex;
flex-direction: column;
diff --git a/stuff/webgarden/style.css b/stuff/webgarden/style.css
index 0599032..bd37aec 100644
--- a/stuff/webgarden/style.css
+++ b/stuff/webgarden/style.css
@@ -22,33 +22,88 @@
font-weight: bold;
font-style: italic;
}
+
+:root {
+ color-scheme: dark light;
+
+ /* Trying to define as few specific colours as possible as generically as possible */
+ --background: light-dark(#fff5eb, #1a1a1d);
+ --foreground: light-dark(#222, #ddd);
+ --accent1: light-dark(#64790a, #ff1159);
+ --accent2: light-dark(#007a70, #00ffd5);
+ --shadow: #000a;
+ --message-red: light-dark(#c00, red);
+ --message-green: light-dark(#007500, lime);
+ --message-yellow: light-dark(#d3b200, yellow);
+ --message-blue: light-dark(#005fbb, dodgerblue);
+
+ --linkcolor: var(--accent1);
+ --linkhover: var(--accent2);
+
+ --fg0: var(--foreground);
+ --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+ --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+ --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+
+ --bg0: var(--background);
+ --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+ --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+ --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+ --bg00: light-dark(white, black);
+
+ --accentbordercolor: light-dark(var(--accent1), var(--fg0));
+}
+
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
- font-family: b612_mono, mono, monospace;
- color: white;
- background: #101010;
- text-shadow: 1px 1px 4px black;
+ font-family: b612_mono, monospace;
+ color: var(--fg0);
+ background-color: var(--bg0);
}
#plant {
height: 250px;
width: 250px;
}
-a#forward, a#back, h1, h2, #hoverme {
+a {
+ color: var(--linkcolor);
+}
+a:hover {
+ color: var(--linkhover);
+}
+a#forward, a#back, #hoverme {
font-family: 'Silkscreen';
color: white;
text-decoration: none;
}
+#hoverme, #statuscafe ~ #back {
+ color: var(--fg0);
+}
#hoverme {
position: absolute;
top: 4px;
- left: 209px;
- animation-name: arrowwiggle;
- animation-duration: 6s;
- animation-iteration-count: infinite;
+ left: 219px;
width: fit-content;
text-align: right;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+ .bubblecolumn {
+ display: none;
+ }
} \ No newline at end of file