n/250kb-club
1
0
Fork 0
mirror of https://github.com/nkoehring/250kb-club.git synced 2025-04-19 21:59: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 { h1 {
font-size: 2.2em; font-size: 2.2em;
line-height: 1.2; line-height: 1.2;
letter-spacing: 6px;
text-align: center;
margin-top: 1.2em;
}
p {
text-align: justify;
} }
body>header,main,body>footer { body>header,main,body>footer {
@ -28,7 +35,6 @@ a,a:visited {
} }
select, button { select, button {
margin: 0 .5em;
padding: .25em .5em; padding: .25em .5em;
border: 2px solid gray; border: 2px solid gray;
background: none; background: none;
@ -91,10 +97,15 @@ li {
width: var(--ratio); width: var(--ratio);
} }
.float-right { aside {
float: right; display: flex;
flex-flow: row break;
justify-content: space-between;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { background: #222; color: white; } body { background: #222; color: white; }
} }
@media (max-width: 420px) {
}

4
public/index.html
View file

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<header> <header>
<h1>The 250kb Club</h1> <h1>The 250kb&nbsp;Club</h1>
<p> <p>
The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content. 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. 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>. 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> 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/> <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> </p>
</footer> </footer>
<script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> <script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

8
src/App.svelte
View file

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