club-mate: improve mobile styling
Hunter
Thursday, July 24th, 2025 at 7:51 PM
4 <style>
5 @font-face {
6 font-family: 'tribeca';
- src: url('https://hunterirving.github.io/web_workshop/pages/club-mate/resources/tribeca.woff2');
7 + src: url('pages/club-mate/resources/tribeca.woff2');
8 }
9 html {
10 scrollbar-color: #c68e17 #f7c200;
94 flex-direction: column;
95 }
96 blockquote {
- margin-top:40px;
- margin-bottom:40px;
97 + margin-top:30px;
98 + margin-bottom:30px;
99 + }
100 + body {
101 + font-size: 22px;
102 + }
103 + h1 {
104 + font-size:42px;
105 + }
106 + subchunk {
107 + margin-top:5px;
108 + margin-bottom: 20px;
109 }
110 }
111 </style>
113 <body class="centered">
114 <div class="inner-div">
115 <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">
116 + <img class="header-bottle" src="pages/club-mate/images/cm_bottle_photo.png">
117 + <img class="header-logo" src="pages/club-mate/images/hunters_club-mate_fan_club.svg">
118 + <img class="header-bottle" src="pages/club-mate/images/cm_bottle_photo.png">
119 </div>
120 <hr>
121 <div class="centered gaucho-section">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/gaucho.svg">
122 + <img src="pages/club-mate/images/gaucho.svg">
123 <blockquote class="centered">Cheers! And welcome to my online shrine to the celebrated German energy drink, Club-Mate. Have a maté, mate!</blockquote>
124 </div>
125 <div>
132 something of a barrier to entry.
133 </p>
134 <p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/first_sip.png" class="inline-bottle" style="max-width:110px">
135 + <img src="pages/club-mate/images/first_sip.png" class="inline-bottle" style="max-width:110px">
136 Varying first-taste reviews have compared the drink's earthy
137 essence to hay, herbal tea, and even an ashtray, but, as the drink's official slogan
138 promises, <i>"man gewöhnt sich daran"</i> (one gets used to it). If you find yourself struggling,
150 Especially if you're pregnant or breastfeeding:
151 </p>
152 <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;">
153 + <img src="pages/club-mate/images/warning.jpg" style="width:400px; max-width:100%; padding-bottom: 10px;">
154 </div>
155 <p>
156 I don't think I've ever seen a beverage
168 hacker.
169 </p>
170 <div class="centered">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/di.jpg">
171 + <img src="pages/club-mate/images/di.jpg">
172 </div>
173 <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>
174 <p>
183 <i>Buy at least one pallet of Club-Mate and sell it in your hackerspace. You will realize the results very soon!</i>
184 </blockquote>
185 <div class="centered">
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/noisebridge_stash.jpg">
186 + <img src="pages/club-mate/images/noisebridge_stash.jpg">
187 </div>
188 <center class="image-caption">The Club-Mate stash at <a href="https://www.noisebridge.net/wiki/Noisebridge">Noisebridge hackerspace</a> in San Francisco</center>
189 <p>
191 </p>
192 <p>Oh well, more mate for me :-)</p>
193 <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;">
194 + <img src="pages/club-mate/images/matemat.jpg" style="max-height:750px;">
195 </div>
196 <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>
197 </div>
203 <div class="subchunk">
204 <h2>Club-Mate Winter Edition</h2>
205 <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">
206 + <img src="pages/club-mate/images/club-mate_winter_edition.png" class="inline-bottle" style="max-width:90px">
207 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>.
208 </p>
209 <p>
213 <div class="subchunk">
214 <h2>Club-Mate Cola</h2>
215 <p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_cola.png" class="inline-bottle" style="max-width:90px">
216 + <img src="pages/club-mate/images/club-mate_cola.png" class="inline-bottle" style="max-width:90px">
217 As the name suggests, it's Club-Mate... plus Cola.
218 </p>
219 <p>
226 <div class="subchunk">
227 <h2>Club-Mate Beere</h2>
228 <p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_beere.png" class="inline-bottle" style="max-width:90px">
229 + <img src="pages/club-mate/images/club-mate_beere.png" class="inline-bottle" style="max-width:90px">
230 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.
231 </p>
232 <p>What's that? It's just regular Club-Mate infused with with wild berry flavor?</p>
235 <div class="subchunk">
236 <h2>Club-Mate Granat</h2>
237 <p>
- <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_granat.png" class="inline-bottle" style="max-width:90px">
238 + <img src="pages/club-mate/images/club-mate_granat.png" class="inline-bottle" style="max-width:90px">
239 It looks like this one mixes Club-Mate with pomegranate juice.
240 </p>
241 <p>
246 </p>
247 </div>
248 <div class="subchunk">
- <h2>Club-Mate Ice-T</h2>
249 + <h2>Club-Mate Ice‑T</h2>
250 <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">
251 + <img src="pages/club-mate/images/club-mate_ice-t.png" class="inline-bottle" style="max-width:90px">
252 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.
253 </p>
254 <p>