diff --git a/css/style.css b/css/style.css index 56b43bd..9391e74 100644 --- a/css/style.css +++ b/css/style.css @@ -8,13 +8,25 @@ --background: white; } +.box { + position: absolute; + top: 0; + left: 0; + width: 256px; + height: 256px; + background-color: var(--color); + border-radius: 4px; + pointer-events: none; +} + html, body { + cursor: none; font-family: Arial, Helvetica, sans-serif; - font-size: 28px; - line-height: 1.4; + font-size: 68px; + line-height: 1.2; color: var(--color); - margin: 0; + margin: 0 16px; } a { @@ -36,8 +48,11 @@ h1 { width: 8ch; text-align: center; color: white; - -webkit-text-fill: white; - -webkit-text-stroke: 1.5px var(--color); + z-index: 1000; + opacity: 0.75; + user-select: none; + /* -webkit-text-fill: white; */ + /* -webkit-text-stroke: 1.5px var(--color); */ } main { @@ -45,9 +60,36 @@ main { margin: 0 auto; } +.filtered { + display: inline-block; + width: 68px; + height: 68px; + background-color: var(--color); + margin: 0; + position: relative; +} + img { width: 100%; - object-fit: contain; + height: 100%; + + object-fit: cover; + + /* mix-blend-mode: screen; + -webkit-filter: grayscale(100%) contrast(150%); + filter: grayscale(100%) contrast(150%); + opacity: 1; */ +} + +img:focus, +img:hover { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 50; + width: 256px; + height: 256px; } .index { @@ -73,8 +115,8 @@ a.purple, a.orange { display: inline-block; vertical-align: middle; - width: 28px; - height: 28px; + width: 1em; + height: 1em; margin: 0 4px; } diff --git a/home.html b/home.html index 9bb0a82..66d4776 100644 --- a/home.html +++ b/home.html @@ -8,8 +8,10 @@ + +

This
box
found
you
for a
@@ -30,14 +32,16 @@

Games in themselves often perform a reproductive role, presenting capitalism as a system of natural laws, exemplified by in-game predatory monetisation schemes. On - the other hand, games provide necessary down time and relaxation, helping people - function in a largely dysfunctional economy and society. Yet leisure remains a - contested space which is still unequally distributed, between genders, ethnicities - and abilities. + the other hand, games provide necessary down time and relaxation, + + + + + helping people function in a largely dysfunctional economy and society. Yet leisure + remains a contested space which is still unequally distributed, between genders, + ethnicities and abilities.

- -

Index