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; + } }