style fixes and updates

pull/23/head
koehr 4 years ago
parent 4b9543fac7
commit c9f817a676

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -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) {
}

@ -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>

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

Loading…
Cancel
Save