Periodic/blazestar.net
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes some mobile rendering.

Browse Source
This commit is contained in:
Periodic committed 2026-09-19 16:46:38 -07:00
1 parent a56191ffca
commit c6ce366d95
3 files changed
+101 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx
+55 -53
View File
@@ -97,59 +97,61 @@ I am also not accounting for the second-level and higher industry tiles being sc
In this table each industry is listed with all of it's levels and the VP and income per money and action are calculated. In this table each industry is listed with all of it's levels and the VP and income per money and action are calculated.
<table> <div class="overflow">
<tr> <table>
<th>Industry Name</th> <tr>
<th>Level</th> <th>Industry Name</th>
<th>Cost</th> <th>Level</th>
<th>VP</th> <th>Cost</th>
<th>VP/Money</th> <th>VP</th>
<th>VP/Action</th> <th>VP/Money</th>
<th>Income</th> <th>VP/Action</th>
<th>Income/Money</th> <th>Income</th>
<th>Income/Action</th> <th>Income/Money</th>
</tr> <th>Income/Action</th>
{(() => { </tr>
const rows = analysisRows(2, 2); {(() => {
const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney)); const rows = analysisRows(2, 2);
const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction)); const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney));
const maxIncomePerMoney = Math.max( const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction));
...rows.map((row) => row.incomePerMoney), const maxIncomePerMoney = Math.max(
); ...rows.map((row) => row.incomePerMoney),
const maxIncomePerAction = Math.max( );
...rows.map((row) => row.incomePerAction), const maxIncomePerAction = Math.max(
); ...rows.map((row) => row.incomePerAction),
return rows.map((row) => ( );
<tr> return rows.map((row) => (
<td>{row.industryName}</td> <tr>
<td>{row.industryLevel}</td> <td>{row.industryName}</td>
<td>{row.cost}</td> <td>{row.industryLevel}</td>
<td>{row.vp}</td> <td>{row.cost}</td>
<td <td>{row.vp}</td>
style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`} <td
> style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`}
{row.vpPerMoney.toFixed(2)} >
</td> {row.vpPerMoney.toFixed(2)}
<td </td>
style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`} <td
> style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`}
{row.vpPerAction.toFixed(2)} >
</td> {row.vpPerAction.toFixed(2)}
<td>{row.income}</td> </td>
<td <td>{row.income}</td>
style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`} <td
> style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`}
{row.incomePerMoney.toFixed(2)} >
</td> {row.incomePerMoney.toFixed(2)}
<td </td>
style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`} <td
> style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`}
{row.incomePerAction.toFixed(2)} >
</td> {row.incomePerAction.toFixed(2)}
</tr> </td>
)); </tr>
})()} ));
</table> })()}
</table>
</div>
### Cotton Mills ### Cotton Mills
src/layouts/RootLayout.astro
+41 -19
View File
@@ -33,7 +33,25 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
</div> </div>
</body> </body>
<style> <style>
@media (max-width: 1000px) { @media (min-width: 1000px) {
body {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 20rem 1fr;
margin: 2rem 1rem;
max-width: 1600px;
}
.header {
display: none;
}
.sidebar {
display: block;
}
}
@media (min-width: 500px) and (max-width: 1000px) {
body { body {
grid-template-areas: grid-template-areas:
"header" "header"
@@ -53,28 +71,27 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
} }
} }
@media (min-width: 1000px) {
body {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 20rem 1fr;
margin: 2rem 1rem;
max-width: 1600px;
}
.header {
display: none;
}
.sidebar {
display: block;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
body { body {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
margin: 1rem 0;
font-size: 14px; font-size: 14px;
} }
main {
padding: 0;
}
.header {
display: block;
}
.sidebar {
display: none;
}
} }
body { body {
@@ -96,6 +113,11 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
min-width: 0;
}
main > * {
min-width: 0;
} }
.footer { .footer {
src/styles/global.css
+5 -1
View File
@@ -110,7 +110,6 @@ body {
font-size: var(--font-size-md); font-size: var(--font-size-md);
line-height: 1.7; line-height: 1.7;
background-color: var(--color-space-blue); background-color: var(--color-space-blue);
min-width: 360px;
} }
main { main {
@@ -220,3 +219,8 @@ figure {
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */ /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap; white-space: nowrap;
} }
.overflow {
width: 100%;
overflow: scroll;
}