style fixes and updates

4 years ago · c9f817a676
parent 4b9543fac7
commit c9f817a676
5 changed files with 1388 additions and 16 deletions
--- a/public/build/bundle.js
+++ b/public/build/bundle.js
--- a/public/build/bundle.js.map
+++ b/public/build/bundle.js.map
--- a/public/global.css
+++ b/public/global.css
@ -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) {
+}
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/App.svelte
+++ b/src/App.svelte
@ -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 />