commit bad671d0454dda943d1219612db33674a66f9e46
parent 6500cb10dc51879c5f91e49117b667651b45f7a8
Author: Hunter
Date: Thu, 24 Jul 2025 19:51:05 -0400
club-mate: improve mobile styling
Diffstat:
1 file changed, 28 insertions(+), 18 deletions(-)
diff --git a/pages/club-mate/index.html b/pages/club-mate/index.html
@@ -4,7 +4,7 @@
<style>
@font-face {
font-family: 'tribeca';
- src: url('https://hunterirving.github.io/web_workshop/pages/club-mate/resources/tribeca.woff2');
+ src: url('pages/club-mate/resources/tribeca.woff2');
}
html {
scrollbar-color: #c68e17 #f7c200;
@@ -94,8 +94,18 @@
flex-direction: column;
}
blockquote {
- margin-top:40px;
- margin-bottom:40px;
+ margin-top:30px;
+ margin-bottom:30px;
+ }
+ body {
+ font-size: 22px;
+ }
+ h1 {
+ font-size:42px;
+ }
+ subchunk {
+ margin-top:5px;
+ margin-bottom: 20px;
}
}
</style>
@@ -103,13 +113,13 @@
<body class="centered">
<div class="inner-div">
<div class="centered" style="max-width:100%">
- <img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">
- <img class="header-logo" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/hunters_club-mate_fan_club.svg">
- <img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">
+ <img class="header-bottle" src="pages/club-mate/images/cm_bottle_photo.png">
+ <img class="header-logo" src="pages/club-mate/images/hunters_club-mate_fan_club.svg">
+ <img class="header-bottle" src="pages/club-mate/images/cm_bottle_photo.png">
</div>
<hr>
<div class="centered gaucho-section">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/gaucho.svg">
+ <img src="pages/club-mate/images/gaucho.svg">
<blockquote class="centered">Cheers! And welcome to my online shrine to the celebrated German energy drink, Club-Mate. Have a maté, mate!</blockquote>
</div>
<div>
@@ -122,7 +132,7 @@
something of a barrier to entry.
</p>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/first_sip.png" class="inline-bottle" style="max-width:110px">
+ <img src="pages/club-mate/images/first_sip.png" class="inline-bottle" style="max-width:110px">
Varying first-taste reviews have compared the drink's earthy
essence to hay, herbal tea, and even an ashtray, but, as the drink's official slogan
promises, <i>"man gewöhnt sich daran"</i> (one gets used to it). If you find yourself struggling,
@@ -140,7 +150,7 @@
Especially if you're pregnant or breastfeeding:
</p>
<div class="centered">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/warning.jpg" style="width:400px; max-width:100%; padding-bottom: 10px;">
+ <img src="pages/club-mate/images/warning.jpg" style="width:400px; max-width:100%; padding-bottom: 10px;">
</div>
<p>
I don't think I've ever seen a beverage
@@ -158,7 +168,7 @@
hacker.
</p>
<div class="centered">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/di.jpg">
+ <img src="pages/club-mate/images/di.jpg">
</div>
<center class="image-caption">My friend Di on her way to the club, despite a broken leg.<br>That's the power of Club-Mate.</center>
<p>
@@ -173,7 +183,7 @@
<i>Buy at least one pallet of Club-Mate and sell it in your hackerspace. You will realize the results very soon!</i>
</blockquote>
<div class="centered">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/noisebridge_stash.jpg">
+ <img src="pages/club-mate/images/noisebridge_stash.jpg">
</div>
<center class="image-caption">The Club-Mate stash at <a href="https://www.noisebridge.net/wiki/Noisebridge">Noisebridge hackerspace</a> in San Francisco</center>
<p>
@@ -181,7 +191,7 @@
</p>
<p>Oh well, more mate for me :-)</p>
<div class="centered" style="max-width:100%">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/matemat.jpg" style="max-height:750px;">
+ <img src="pages/club-mate/images/matemat.jpg" style="max-height:750px;">
</div>
<center style="margin-top:10px; font-size: 22px;"><a href="https://blog.attraktor.org/2012/09/matemat-im-grosformat/">Attraktor</a> in Hamburg, Germany features MateMat, a Club-Mate vending machine. I'm trying to convince Hacksburg to build one of these...</center>
</div>
@@ -193,7 +203,7 @@
<div class="subchunk">
<h2>Club-Mate Winter Edition</h2>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_winter_edition.png" class="inline-bottle" style="max-width:90px">
+ <img src="pages/club-mate/images/club-mate_winter_edition.png" class="inline-bottle" style="max-width:90px">
This limited edition Mate (introduced 2007) takes the original Club-Mate formula and adds "cardamom, cinnamon, star anise and citrus extract"<sup><a href="https://en.wikipedia.org/wiki/Club-Mate">1</a></sup>.
</p>
<p>
@@ -203,7 +213,7 @@
<div class="subchunk">
<h2>Club-Mate Cola</h2>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_cola.png" class="inline-bottle" style="max-width:90px">
+ <img src="pages/club-mate/images/club-mate_cola.png" class="inline-bottle" style="max-width:90px">
As the name suggests, it's Club-Mate... plus Cola.
</p>
<p>
@@ -216,7 +226,7 @@
<div class="subchunk">
<h2>Club-Mate Beere</h2>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_beere.png" class="inline-bottle" style="max-width:90px">
+ <img src="pages/club-mate/images/club-mate_beere.png" class="inline-bottle" style="max-width:90px">
Hold up, are you <b>21 or older</b>? If not, I probably shouldn't even be talking about this variant, which presumably mixes Club-Mate with straight up beer.
</p>
<p>What's that? It's just regular Club-Mate infused with with wild berry flavor?</p>
@@ -225,7 +235,7 @@
<div class="subchunk">
<h2>Club-Mate Granat</h2>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_granat.png" class="inline-bottle" style="max-width:90px">
+ <img src="pages/club-mate/images/club-mate_granat.png" class="inline-bottle" style="max-width:90px">
It looks like this one mixes Club-Mate with pomegranate juice.
</p>
<p>
@@ -236,9 +246,9 @@
</p>
</div>
<div class="subchunk">
- <h2>Club-Mate Ice-T</h2>
+ <h2>Club-Mate Ice‑T</h2>
<p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_ice-t.png" class="inline-bottle" style="max-width:90px">
+ <img src="pages/club-mate/images/club-mate_ice-t.png" class="inline-bottle" style="max-width:90px">
This Mate was created in collaboration with the <a href="https://en.wikipedia.org/wiki/Ice-T">American Hip Hop artist</a> of the same name.
</p>
<p>