diff options
| -rwxr-xr-x | served/home.html | 9 | ||||
| -rw-r--r-- | served/styles/home.css | 38 | ||||
| -rw-r--r-- | served/the-continuum/banners/banners.css | 27 | ||||
| -rw-r--r-- | served/the-continuum/banners/banners.html | 18 | ||||
| -rw-r--r-- | served/the-continuum/the-continuum.css | 14 | ||||
| -rw-r--r-- | served/the-continuum/the-continuum.html | 23 |
6 files changed, 123 insertions, 6 deletions
diff --git a/served/home.html b/served/home.html index fe1e80b..c0ab04a 100755 --- a/served/home.html +++ b/served/home.html @@ -36,7 +36,14 @@ style=/styles/home.css </ul> </section> - <img id="banner" alt="" src="look1.jpg" /> + <div id="banner-container"> + <img id="banner" alt="" src="the-continuum/banners/2024-12-21/banner.gif" /> + <div id="banner-info" style="display: none"> + <!-- we start in the new year --> + <p>updated daily</p> + <a href="the-continuum/">the continuum</a> + </div> + </div> </section> <!-- no, not until it's redone --> diff --git a/served/styles/home.css b/served/styles/home.css index ac00786..fd5f6b2 100644 --- a/served/styles/home.css +++ b/served/styles/home.css @@ -19,8 +19,31 @@ ul { height: min-content; } +#banner-container { + width: 256px; +} + +#banner-info { + display: flex; + flex-direction: row; + justify-content: space-between; + + margin-top: -0.25rem; + margin-top: -0.25rem; +} + +#banner-info p { + margin: 0; + color: var(--text-dim); + font-style: italic; +} + #banner { - max-width: min(100%, calc(var(--pwidth) + 15px)); + /* the banner has specific dimensions and i want it to keep them */ + box-sizing: content-box; + width: 256px; + height: 40px; + /*min(100%, calc(var(--pwidth) + 15px));*/ border: 1px solid var(--text-dim); } @@ -34,17 +57,22 @@ ul { padding: 0; } +/* too-narrow. "mobile" style */ @media (max-width: 50rem) { #contact { margin-top: 2rem; margin-right: 1rem; } - #banner { + #banner-container { + /* 256px in 100% calc... i do not know. it worked better than 241px. */ + /* 241px because 256px - 15px (15px from contact dropshadows) */ + margin-left: min(calc(100% - 256px), calc(var(--pwidth) - 241px)); margin-top: 1rem; } } +/* too-narrow to do some desktop things. narrower than we might want, but still pretty thick */ @media (min-width: 50rem) { #hello { display: grid; @@ -67,9 +95,9 @@ ul { width: fit-content; } - #banner { - max-width: 16rem; + #banner-container { + /*max-width: 16rem;*/ grid-column: 2; - grid-row: 4 + grid-row: 4 / 6; } } \ No newline at end of file diff --git a/served/the-continuum/banners/banners.css b/served/the-continuum/banners/banners.css new file mode 100644 index 0000000..4e50555 --- /dev/null +++ b/served/the-continuum/banners/banners.css @@ -0,0 +1,27 @@ +:root { + --pwidth: 100%; +} + +#banners { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; +} + +img { + display: block; + width: 256px; + height: 40px; + border: 1px solid var(--text-dim); +} + +p:has(img) { + display: inline-block; + margin: 0 0; + + color: var(--text-dim); + + font-size: 1rem; + font-style: italic; +} \ No newline at end of file diff --git a/served/the-continuum/banners/banners.html b/served/the-continuum/banners/banners.html new file mode 100644 index 0000000..7d41861 --- /dev/null +++ b/served/the-continuum/banners/banners.html @@ -0,0 +1,18 @@ +--- +template=post +title=Banner Archive +style=/styles/post.css +style=banners.css +--- + +<section id="banners"> + <p> + 2024-12-20 + <img src="2024-12-20/banner.gif" alt="a paved road with a sign on the right saying "Stop Head"" /> + </p> + <p> + 2024-12-21 + <img src="2024-12-21/banner.gif" + alt="a can of monster pressed to the side of my face near my eyes. you can only see my eyes and they are looking starkly to the left at the can." /> + </p> +</section> \ No newline at end of file diff --git a/served/the-continuum/the-continuum.css b/served/the-continuum/the-continuum.css new file mode 100644 index 0000000..5a0243b --- /dev/null +++ b/served/the-continuum/the-continuum.css @@ -0,0 +1,14 @@ +@media (min-width: 58rem) { + main { + display: grid; + grid-template-columns: var(--pwidth) 1fr; + } + + main>h1 { + grid-column: 1; + } + + #info { + grid-column: 1; + } +} \ No newline at end of file diff --git a/served/the-continuum/the-continuum.html b/served/the-continuum/the-continuum.html new file mode 100644 index 0000000..685b672 --- /dev/null +++ b/served/the-continuum/the-continuum.html @@ -0,0 +1,23 @@ +--- +template=post +title=The Continuum +style=/styles/post.css +style=the-continuum.css +--- +[@paragraphs off] + +<section id="info"> + <p>The Continuum takes the updated-daily banners from the home page, compresses + their height to 1 pixel tall, and adds them to an ever alive image.</p> + + <p>Banner archive: <a href="banners/">banners.html</a></p> + + <p>Heavily inspired by Movie Iris by LoSinCos. + Check it out on github: <a href="https://github.com/LoSinCos/movie-iris">LoSinCos/movie-iris</a>.</p> + + <p>I suspect since the images are not part of a larger work, like a movie, this + may devolve into chaos. I welcome chaos! It'd be neat to see seasonal changes, + though, or some kind of pattern emerge.</p> +</section> + +<img src="continuum.png" alt="" /> \ No newline at end of file |