n/250kb-club
1
0
Fork 0
mirror of https://github.com/nkoehring/250kb-club.git synced 2025-04-19 13:49:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style fixes and updates

Browse source
This commit is contained in:
koehr 2020-11-22 20:22:49 +01:00
parent 4b9543fac7
commit c9f817a676
5 changed files with 1388 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1361
public/build/bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/build/bundle.js.map
View file

File diff suppressed because one or more lines are too long

17
public/global.css
View file

@ -9,6 +9,13 @@ body {
h1 {
font-size: 2.2em;
line-height: 1.2;
letter-spacing: 6px;
text-align: center;
margin-top: 1.2em;
}
p {
text-align: justify;
}
body>header,main,body>footer {
@ -28,7 +35,6 @@ a,a:visited {
}
select, button {
margin: 0 .5em;
padding: .25em .5em;
border: 2px solid gray;
background: none;
@ -91,10 +97,15 @@ li {
width: var(--ratio);
}
.float-right {
float: right;
aside {
display: flex;
flex-flow: row break;
justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
body { background: #222; color: white; }
}
@media (max-width: 420px) {
}

4
public/index.html
View file

@ -11,7 +11,7 @@
</head>
<body>
<header>
<h1>The 250kb Club</h1>
<h1>The 250kb&nbsp;Club</h1>
<p>
The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content.
These things are a <strong>cancerous growth</strong> on the web that we should stand up against.
@ -31,7 +31,7 @@
Made with &hearts; for a performant web by <a href="https://koehr.in" rel="noopener" target="_blank">Norman Köhring</a>.
Inspired by <a href="https://uglyduck.ca" rel="noopener" target="_blank">Bradley Taunt</a>s <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a>
<br/>
The code of this page is open source. You can <a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">find it on Github</a>.
The code of this page is open source. You can <a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">find&nbsp;it&nbsp;on&nbsp;Github</a>.
</p>
</footer>
<script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

20
src/App.svelte
View file

@ -37,15 +37,17 @@
function toggleInfo () { showInfoPopup = !showInfoPopup }
</script>
<header>
Sort by:
<select bind:value={sortParam}>
{#each sortParameters as param}
<option value={param}>content-{param}</option>
{/each}
</select>
<button class="float-right" on:click={toggleInfo}>{showInfoPopup ? 'x' : 'How does this work?'}</button>
</header>
<aside>
<div>
Sort by:
<select bind:value={sortParam}>
{#each sortParameters as param}
<option value={param}>content-{param}</option>
{/each}
</select>
</div>
<button class="info-toggle" on:click={toggleInfo}>{showInfoPopup ? 'x' : 'How does this work?'}</button>
</aside>
{#if showInfoPopup}
<InfoPopup />