diff --git a/out/index.html b/out/index.html
index f57edd4..baad434 100644
--- a/out/index.html
+++ b/out/index.html
@@ -8,6 +8,13 @@
</head>
<body>
<main>
+ <div class="silly-little-images">
+ <!-- todo setting dimensions manually is bad but there's no good
+ way to scale an image up by a percentage in css so we just hope
+ that we never use a pixel scale other than 2 -->
+ <img src="https://i.eritbh.me/temp/umbreon.png" width="48" height="58" alt="an umbreon getting ready to pounce">
+ <img src="https://i.eritbh.me/temp/kate.png" width="54" height="86" alt="the female protagonist of Pokemon Ranger: Shadows of Almia doing her ranger pose">
+ </div>
<div class="textbox textbox--simple textbox--yellow">
<div class="textbox__text">
Welcome to <span class="color color--red">webring.umbreon.online</span>!
diff --git a/out/style.css b/out/style.css
index 242ce96..9458392 100644
--- a/out/style.css
+++ b/out/style.css
@@ -192,12 +192,14 @@ ul {
list-style-type: "· ";
}
-.theme-options-grid {
+.silly-little-images {
display: flex;
- flex-wrap: wrap;
- width: 186rem;
- gap: 8rem 6rem;
- padding: 4rem 3rem;
+ justify-content: center;
+ align-items: flex-end;
+ margin-bottom: 1em;
+}
+.silly-little-images img {
+ image-rendering: crisp-edges;
}
/*# sourceMappingURL=style.css.map */
diff --git a/out/style.css.map b/out/style.css.map
index 576b9dc..6fc2a0c 100644
--- a/out/style.css.map
+++ b/out/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index 63c309b..7a2cb89 100644
--- a/style.scss
+++ b/style.scss
@@ -338,11 +338,15 @@ ul {
list-style-type: "· ";
}
-// misc shit
-.theme-options-grid {
+.silly-little-images {
display: flex;
- flex-wrap: wrap;
- width: 186rem;
- gap: 8rem 6rem;
- padding: 4rem 3rem;
+ justify-content: center;
+ align-items: flex-end;
+ margin-bottom: 1em;
+
+ img {
+ image-rendering: crisp-edges;
+ // transform: scale(calc(100% * var(--pixel-scale)));
+ // transform-origin: bottom;
+ }
}