Skip to content

Commit

Permalink
responsive tweaks and improvements, @ media
Browse files Browse the repository at this point in the history
  • Loading branch information
@insanj
insanj authored Apr 4, 2023
1 parent 58eed9c commit d0f0091
Showing 1 changed file with 174 additions and 107 deletions.
281 changes: 174 additions & 107 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>interesting.works from @insanj</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://em-content.zobj.net/source/skype/289/video-game_1f3ae.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
href="https://em-content.zobj.net/source/skype/289/video-game_1f3ae.png"
/>
<style>
html, body {
html,
body,
header,
footer,
#content {
min-width: 344px;
}

html,
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
background: #070918;
color: #ebffda;
}
Expand All @@ -20,7 +35,10 @@
color: inherit;
}

h1, h2, h3, h4 {
h1,
h2,
h3,
h4 {
margin: 0;
}

Expand All @@ -34,7 +52,7 @@
user-select: none;
top: -20px;
opacity: 0.11;

position: absolute;
font-size: 100px;
font-weight: 800;
Expand All @@ -50,7 +68,7 @@

padding: 20px;
border-bottom: 4px solid rgba(255, 255, 255, 0.1);

background: rgba(0, 0, 0, 0.97);
}

Expand All @@ -60,9 +78,9 @@
backdrop-filter: blur(20px);
}
}


header > h1, header > h3 {
header > h1,
header > h3 {
z-index: 2;
text-shadow: 0px 2px 3px 4px rgba(0, 0, 0, 1);
}
Expand Down Expand Up @@ -96,7 +114,22 @@
font-size: 16px;
}

.poster {
.description {
display: flex;
flex-direction: row;

gap: 12px;
padding: 0px 0px 14px;
}

@media only screen and (max-width: 600px) {
.description {
flex-direction: column;
align-items: center;
}
}

.poster img {
margin-top: 20px;
width: 300px;
height: auto;
Expand All @@ -109,112 +142,146 @@
box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 0.2);
}

.description {
display: flex;
flex-direction: row;

gap: 12px;
padding: 0px 0px 14px;
}

.text {
padding-bottom: 4px;
text-shadow: 0px -1px rgba(255, 255, 255, 0.2) !important;
}


</style>
</head>
<body>

<header>
<div class="letterhead">
interesting.works
</div>
<h1>
game microblog
</h1>
<h3>
handmade from &amp; for <a href="https://github.com/insanj">@insanj</a>
</h3>
</header>

<div id="content">

<article id="2023-04-01-obelisk" key="2023-04-01-obelisk">
<div class="title">
<h3><a href="https://store.steampowered.com/app/1313140/Cult_of_the_Lamb/" target="_blank">Cult of the Lamb</a></h3>
<h3>❃</h3>
<h4>2 Apr 2023</h4>
<h3>❃</h3>
<div class="rating">
💖 Must play
</div>
</div>

<div class="description">
<img class="poster" src="https://cdn.akamai.steamstatic.com/steam/apps/1313140/header.jpg?t=1678729165" />

<div class="text">
<p>
<i>Cult of the Lamb</i>, from indie darling <a href="https://massivemonster.co" target="_blank">Massive Monster</a>, demands your attention. Yes, it's not for everyone. It's for you, with a taste for the eccentric and a hunger for indie games that last longer than one sitting. It's time to pick up the controller.
</p>

<p>
Before I stepped in, I had no idea the fundamental structure of this game starts with <i>Binding of Isaac</i>. Each dungeon is laid out with that familiar, minimal room design packed with mysterious characters. But now, the universe of the game has life beyond combat. After each dungeon crawl, whether you survive or die, you return to a homebase (think: <i>Harvest Moon</i> but with a rate of excrement to rival a closet full of old Tamogatchis).
</p>

<p>
Bottom line, for about ⅓ the $ of a AAA game, we have a fresh mix of real time strategy, base building, and of course, the thing that cements it all &mdash; roguelike deckbuilding combat sequences. And by the 10<sup>th</sup> hour, the attention to detail really helps to keep the experience going, with exceptional music direction, a bouncy cartoon-but-not-<i>Flash</i> artstyle, and a seriously good unlock curve for its many skill trees.

Plus, there's replay value, with a cute and surprisingly complex "daily routine" gameplay loop &mdash; aspects that remind me of <i>Animal Crossing</i>, from hell.
</p>

<p>
And yes, maybe spending all day today with <i>Cult of the Lamb</i> has me speaking idiomatically as a fluffy pagan warlord. <i>Devolver Digital</i> &mdash; a publisher so bombastically ostentatious, and yet, so utterly of the people. I can only hope this latest classic-in-the-making represents yet one of many peaks to come.
</p>
<body>
<header>
<div class="letterhead">interesting.works</div>
<h1>game microblog</h1>
<h3>
handmade from &amp; for <a href="https://github.com/insanj">@insanj</a>
</h3>
</header>

<div id="content">
<article id="2023-04-01-obelisk" key="2023-04-01-obelisk">
<div class="title">
<h3>
<a
href="https://store.steampowered.com/app/1313140/Cult_of_the_Lamb/"
target="_blank"
>Cult of the Lamb</a
>
</h3>
<h3>❃</h3>
<h4>2 Apr 2023</h4>
<h3>❃</h3>
<div class="rating">💖 Must play</div>
</div>

</div>
</article>

<article id="2023-04-01-obelisk" key="2023-04-01-obelisk">
<div class="title">
<h3><a href="https://store.steampowered.com/app/1385380/Across_the_Obelisk/" target="_blank">Across the Obelisk</a></h3>
<h3>❃</h3>
<h4>1 Apr 2023</h4>
<h3>❃</h3>
<div class="rating">
🤞 Ok to pass, may return
<div class="description">
<div class="poster">
<img
src="https://cdn.akamai.steamstatic.com/steam/apps/1313140/header.jpg?t=1678729165"
/>
</div>

<div class="text">
<p>
<i>Cult of the Lamb</i>, from indie darling
<a href="https://massivemonster.co" target="_blank"
>Massive Monster</a
>, demands your attention. Yes, it's not for everyone. It's for
you, with a taste for the eccentric and a hunger for indie games
that last longer than one sitting. It's time to pick up the
controller.
</p>

<p>
Before I stepped in, I had no idea the fundamental structure of
this game starts with <i>Binding of Isaac</i>. Each dungeon is
laid out with that familiar, minimal room design packed with
mysterious characters. But now, the universe of the game has life
beyond combat. After each dungeon crawl, whether you survive or
die, you return to a homebase (think: <i>Harvest Moon</i> but with
a rate of excrement to rival a closet full of old Tamogatchis).
</p>

<p>
Bottom line, for about ⅓ the $ of a AAA game, we have a fresh mix
of real time strategy, base building, and of course, the thing
that cements it all &mdash; roguelike deckbuilding combat
sequences. And by the 10<sup>th</sup> hour, the attention to
detail really helps to keep the experience going, with exceptional
music direction, a bouncy cartoon-but-not-<i>Flash</i> artstyle,
and a seriously good unlock curve for its many skill trees. Plus,
there's replay value, with a cute and surprisingly complex "daily
routine" gameplay loop &mdash; aspects that remind me of
<i>Animal Crossing</i>, from hell.
</p>

<p>
And yes, maybe spending all day today with
<i>Cult of the Lamb</i> has me speaking idiomatically as a fluffy
pagan warlord. <i>Devolver Digital</i> &mdash; a publisher so
bombastically ostentatious, and yet, so utterly of the people. I
can only hope this latest classic-in-the-making represents yet one
of many peaks to come.
</p>
</div>
</div>
</div>

<div class="description">
<img class="poster" src="https://cdn.akamai.steamstatic.com/steam/apps/1385380/header.jpg?t=1680196435" />

<div class="text">
<p>
I was drawn into this <i>Slay the Spire</i>-like deckbuilding roguelike when I read it supported co-op. From the first moment, two things became clear &mdash; this game does not look good in 4k, and this game feels ripped right out of the <a href="https://www.battleon.com/" target="_blank">AdventureQuest</a> universe.
</p>

<p>
After one battle, I was brought into the "Town," which reminded me of a point-and-click adventure. A shop, an upgrade station, plot points... this is richer, with more to customize and change my experience, than a single floor in the archetypal <i>Slay the Spire</i> or <i>Dicey Dungeons</i>.
</p>

<p>
Ultimately, I favor the art and focus of the classics, but should return to this when wishing for a story and online co-op teamwork.
</p>

</article>

<article id="2023-04-01-obelisk" key="2023-04-01-obelisk">
<div class="title">
<h3>
<a
href="https://store.steampowered.com/app/1385380/Across_the_Obelisk/"
target="_blank"
>Across the Obelisk</a
>
</h3>
<h3>❃</h3>
<h4>1 Apr 2023</h4>
<h3>❃</h3>
<div class="rating">🤞 Ok to pass, may return</div>
</div>

</div>
</article>

</div>

<footer>
&copy; 2021-2023 Julian "insanj" Weiss. <a href="https://github.com/insanj/interesting" target="_blank">Open source on Github ↗</a>
</footer>
<div class="description">
<div class="poster">
<img
src="https://cdn.akamai.steamstatic.com/steam/apps/1385380/header.jpg?t=1680196435"
/>
</div>

<div class="text">
<p>
I was drawn into this <i>Slay the Spire</i>-like deckbuilding
roguelike when I read it supported co-op. From the first moment,
two things became clear &mdash; this game does not look good in
4k, and this game feels ripped right out of the
<a href="https://www.battleon.com/" target="_blank"
>AdventureQuest</a
>
universe.
</p>

<p>
After one battle, I was brought into the "Town," which reminded me
of a point-and-click adventure. A shop, an upgrade station, plot
points... this is richer, with more to customize and change my
experience, than a single floor in the archetypal
<i>Slay the Spire</i> or <i>Dicey Dungeons</i>.
</p>

<p>
Ultimately, I favor the art and focus of the classics, but should
return to this when wishing for a story and online co-op teamwork.
</p>
</div>
</div>
</article>
</div>

</body>
</html>
<footer>
&copy; 2021-2023 Julian "insanj" Weiss.
<a href="https://github.com/insanj/interesting" target="_blank"
>Open source on Github ↗</a
>
</footer>
</body>
</html>

0 comments on commit d0f0091

Please sign in to comment.