okay, this lays out in firefox+chrome+vimb and looks normal in lynx+links2+w3mHEAD master

author: Aleteoryx <alyx@aleteoryx.me> 2024-08-18 09:31:40 -0400
committer: Aleteoryx <alyx@aleteoryx.me> 2024-08-18 09:31:40 -0400
commit: a017acb0689378d2cb844f8e0c5348e764e3363d (patch)
tree: 38b0ee106b1bb43196c690ac45318c76f537ef6b
parent: 6b5302c37a825656ba6265e2d99689329fee20e2 (diff)
download: ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.tar.gz
ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.tar.bz2
ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.zip
16 files changed, 139 insertions, 7 deletions
diff --git a/bg.xcf b/bg.xcf
deleted file mode 100644
index 288a5c7..0000000
--- a/bg.xcf
+++ /dev/null
diff --git a/border.png b/border.png
deleted file mode 100644
index 5369ddd..0000000
--- a/border.png
+++ /dev/null
diff --git a/index.php b/index.php
index 38d201b..9677f01 100644
--- a/index.php
+++ b/index.php
@@ -11,6 +11,25 @@ define("NAMES", [
   "Marcy",
   "Sasha"
 ]);
+
+$wb = new WhichBrowser\Parser(getallheaders());
+
+function lstart(string $title) {
+  global $wb;
+  if (!$wb->isMobile())
+    return "<details class=border><summary><h3>$title</h3></summary>";
+  else
+    return "<section class=border><h3>$title</h3>";
+}
+
+function lend() {
+  global $wb;
+  if (!$wb->isMobile())
+    return "</details>";
+  else
+    return "</section>";
+}
+
 ?>
 <!doctype html>
 <html lang=en>
@@ -18,14 +37,21 @@ define("NAMES", [
   <meta charset="utf-8">
   <meta name=viewport content="width=device-width, initial-scale=1">
   <link rel=stylesheet href="/style.css">
+  <?php if ($wb->isEngine("Gecko")): ?>
+  <link rel=stylesheet href="/style/firefox.css">
+  <?php endif; ?>
+  <?php if ($wb->isEngine("Blink") && $wb->isMobile()): ?>
+  <link rel=stylesheet href="/style/mobile-chrome.css">
+  <?php endif; ?>
   <link rel=canonical href="https://aleteoryx.me/">
 </head>
-<body<?php if ((new WhichBrowser\Parser(getallheaders()))->isType("mobile")) echo " class=mobile"; ?>>
+<body>
   <div aria-label="logo: ah lee tee ore ikhs dot m e" id=logo>
     <pre><?= file_get_contents("logo.txt") ?></pre>
     <pre><?= file_get_contents("logo.txt") ?></pre>
   </div>
-  <div class=border>
-    <p>text text text</p>
+  <?= lstart("text text text") ?>
+    <hr>
+  <?= lend() ?>
 </body>
 </html>
diff --git a/media/arrow-down.gif b/media/arrow-down.gif
new file mode 100644
index 0000000..1171d81
--- /dev/null
+++ b/media/arrow-down.gif
diff --git a/media/arrow-right.gif b/media/arrow-right.gif
new file mode 100644
index 0000000..3b245d0
--- /dev/null
+++ b/media/arrow-right.gif
diff --git a/media/border-full.gif b/media/border-full.gif
new file mode 100644
index 0000000..29ddc88
--- /dev/null
+++ b/media/border-full.gif
diff --git a/media/border-hr.gif b/media/border-hr.gif
new file mode 100644
index 0000000..fcd2f32
--- /dev/null
+++ b/media/border-hr.gif
diff --git a/media/border-summary.gif b/media/border-summary.gif
new file mode 100644
index 0000000..5ff5792
--- /dev/null
+++ b/media/border-summary.gif
diff --git a/style.css b/style.css
index f53e107..49e6fff 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,16 @@
+/*@import url("/times.css");*/
+
 :root {
-  background: #122;
+  image-rendering: pixelated;
+  font-family: "Times New Roman";
 }
 
+p {
+  font-size: 15px;
+}
+h3 {
+  font-size: 18px;
+}
 /* --- LOGO --- */
 
 #logo {
@@ -24,7 +33,51 @@
 /* --- BORDER --- */
 
 .border {
-  border: 22px solid #0000;
-  border-image: url(/border.png) 22;
-  border-image-repeat: round;
+  border-image-slice: 6 5 5 6 fill;
+  border-image-width: 6px 5px 5px 6px;
+  border-image-outset: 5px 5px 5px 5px;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("data:image/gif;base64,R0lGODdhDAAMAHcAACH5BAgKAAAALAAAAAAMAAwAgiIgNEUoPGY5MY9WO9mgZu7DmgAAAAAAAAMrGLq89DCCQIa9VsyKr6YWIALZFj5BCQ4AUaTDxzEq18XmjQdC7/+joBCQAAA7");
+  border-style: solid;
+  padding: 0px
 }
+
+.border > hr {
+  border-image-slice: 1 1 5 1;
+  border-image-width: 1px 1px 5px 1px;
+  border-image-outset: 0px 4px 0px 4px;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("data:image/gif;base64,R0lGODdhAwAGAHcAACH5BAgKAAAALAAAAAADAAYAgSIgNEUoPI9WO9mgZgIHjIWZwDBRAAA7");
+  border-style: solid;
+  border-width: 1px 1px 5px 1px;
+  margin: 0px;
+  margin-top: 3px;
+}
+
+.border > h3:first-child {
+  margin: 0px;
+  font-weight: bold;
+}
+.border > summary > h3:first-child {
+  margin: 0px;
+  margin-left: 8px;
+  font-weight: bold;
+  display: inline;
+  border-image-slice: 1 0 1 6;
+  border-image-width: 1px 0px 1px 6px;
+  border-image-outset: 0px 0px 0px 6px;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("data:image/gif;base64,R0lGODdhBgAEAKIAACIgNEUoPGY5MY9WO9mgZu7DmgAAAAAAACH5BAgKAAAALAAAAAAGAAQAAAMLCLMAsQOQxyYMIQEAOw==");
+  border-left-style: solid;
+  box-sizing: border-box;
+  padding-top: 4px;
+  padding-bottom: 5px;
+}
+.border > summary {
+  margin-left: 5px;
+  height: 21px;
+}
+.border > summary::marker {
+  color: #663931;
+}
+
diff --git a/style/firefox.css b/style/firefox.css
new file mode 100644
index 0000000..f6b67aa
--- /dev/null
+++ b/style/firefox.css
@@ -0,0 +1,20 @@
+/* sigh, spacings are all over the place between browsers.
+   my attempt to fix it with unicode-char markers only made
+   things *significantly* worse. webkit and chromium seem
+   to have parity the way things are now, so it's just
+   gecko that needs a 1px tweak.
+
+   rip. */
+
+.border > summary > h3:first-child {
+  padding-bottom: 4px;
+}
+
+/* tweak to square summary marker box */
+
+.border > summary {
+  margin-left: 7px;
+}
+.border > summary > h3:first-child {
+  margin-left: 9px;
+}
diff --git a/style/mobile-chrome.css b/style/mobile-chrome.css
new file mode 100644
index 0000000..36c86e9
--- /dev/null
+++ b/style/mobile-chrome.css
@@ -0,0 +1,5 @@
+/* unfuck the pixels! */
+/* TODO: idk submit a bug ticket */
+.border > hr {
+  border-image-outset: 0px 2px 0px 2px;
+}
diff --git a/times.css b/times.css
new file mode 100644
index 0000000..bd0a148
--- /dev/null
+++ b/times.css
@@ -0,0 +1,28 @@
+@font-face {
+  font-family: "Times New Roman";
+  src:
+    local("Times New Roman"),
+    url("/times/times.ttf");
+}
+@font-face {
+  font-family: "Times New Roman";
+  font-weight: bold;
+  src:
+    local("Times New Roman"),
+    url("/times/bold.ttf");
+}
+@font-face {
+  font-family: "Times New Roman";
+  font-style: italic;
+  src:
+    local("Times New Roman"),
+    url("/times/italic.ttf");
+}
+@font-face {
+  font-family: "Times New Roman";
+  font-weight: bold;
+  font-style: italic;
+  src:
+    local("Times New Roman"),
+    url("/times/bold-italic.ttf");
+}
diff --git a/times/bold-italic.ttf b/times/bold-italic.ttf
new file mode 100644
index 0000000..47e8580
--- /dev/null
+++ b/times/bold-italic.ttf
diff --git a/times/bold.ttf b/times/bold.ttf
new file mode 100644
index 0000000..578542c
--- /dev/null
+++ b/times/bold.ttf
diff --git a/times/italic.ttf b/times/italic.ttf
new file mode 100644
index 0000000..eff3616
--- /dev/null
+++ b/times/italic.ttf
diff --git a/times/times.ttf b/times/times.ttf
new file mode 100644
index 0000000..d7969c3
--- /dev/null
+++ b/times/times.ttf
author	Aleteoryx <alyx@aleteoryx.me>	2024-08-18 09:31:40 -0400
committer	Aleteoryx <alyx@aleteoryx.me>	2024-08-18 09:31:40 -0400
commit	a017acb0689378d2cb844f8e0c5348e764e3363d (patch)
tree	38b0ee106b1bb43196c690ac45318c76f537ef6b
parent	6b5302c37a825656ba6265e2d99689329fee20e2 (diff)
download	ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.tar.gz ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.tar.bz2 ame-homepage-a017acb0689378d2cb844f8e0c5348e764e3363d.zip