Improve styling (#626)

- Add description of name encoding on theory page - Vertically align contents of nav bar and make logo bold and white - Don't color block links on homepage by rarity (in practice, they're always an ugly green color) - Use CSS variables for colors - Use `coal` as the default theme for the book - Style the site with `coal` theme colors (we can change this later, I just want both to be the same color)
ordinals · Oct 6, 2022 · 98a4932 · 98a4932
1 parent 7a7aa7f
commit 98a4932
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 48 deletions.
diff --git a/book/book.toml b/book/book.toml
@@ -10,6 +10,8 @@ create-missing = false
 
 [output.html]
 cname = "docs.ordinals.com"
+default-theme = "coal"
 git-repository-url = "https://github.com/casey/ord"
+preferred-dark-theme = "coal"
 
 [output.linkcheck]
diff --git a/book/src/SUMMARY.md b/book/src/SUMMARY.md
@@ -1,8 +1,8 @@
 # Summary
 
 - [Theory](./theory.md)
+- [Hunting](./hunting.md)
 - [FAQ](./faq.md)
-- [Ordinal Hunting](./hunting.md)
 
 - [Bounties](./bounty.md)
   - [Bounty 0: 100,000 sats Claimed!](./bounty/0.md)

diff --git a/book/src/theory.md b/book/src/theory.md
@@ -31,7 +31,8 @@ Ordinals have a few different representations:
   [`99.99971949060254%`](https://ordinals.com/ordinal/99.99971949060254%25) .
   The ordinals position in Bitcoin's supply, expressed as a percentage.
 
-- *Name*: [`satoshi`](https://ordinals.com/ordinal/satoshi).
+- *Name*: [`satoshi`](https://ordinals.com/ordinal/satoshi). An encoding of the
+  ordinal number using the characters `a` through `z`.
 
 Arbitrary assets, such as NFTs, security tokens, accounts, or stablecoins can
 be attached to Ordinals.

diff --git a/src/subcommand/server.rs b/src/subcommand/server.rs
@@ -1061,8 +1061,8 @@ mod tests {
 </dl>
 <h2>Latest Blocks</h2>
 <ol start=1 reversed class='blocks monospace'>
-  <li><a href=/block/[[:xdigit:]]{64} class=uncommon>[[:xdigit:]]{64}</a></li>
-  <li><a href=/block/000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f class=mythic>000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f</a></li>
+  <li><a href=/block/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>
+  <li><a href=/block/000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f>000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f</a></li>
 </ol>.*",
   );
   }
@@ -1076,7 +1076,7 @@ mod tests {
     test_server.assert_response_regex(
     "/",
     StatusCode::OK,
-    ".*<ol start=101 reversed class='blocks monospace'>\n(  <li><a href=/block/[[:xdigit:]]{64} class=uncommon>[[:xdigit:]]{64}</a></li>\n){100}</ol>.*"
+    ".*<ol start=101 reversed class='blocks monospace'>\n(  <li><a href=/block/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>\n){100}</ol>.*"
   );
   }
 
@@ -1113,7 +1113,7 @@ mod tests {
       "/static/index.css",
       StatusCode::OK,
       r".*\.rare \{
-  background-color: cornflowerblue;
+  background-color: var\(--rare\);
 }.*",
     );
   }

diff --git a/src/subcommand/server/templates/home.rs b/src/subcommand/server/templates/home.rs
@@ -3,7 +3,7 @@ use super::*;
 #[derive(Boilerplate)]
 pub(crate) struct HomeHtml {
   last: u64,
-  blocks: Vec<(Rarity, BlockHash)>,
+  blocks: Vec<BlockHash>,
   starting_ordinal: Option<Ordinal>,
 }
 
@@ -18,10 +18,7 @@ impl HomeHtml {
         .map(|(height, _)| height)
         .cloned()
         .unwrap_or(0),
-      blocks: blocks
-        .into_iter()
-        .map(|(height, hash)| (Height(height).starting_ordinal().rarity(), hash))
-        .collect(),
+      blocks: blocks.into_iter().map(|(_, hash)| hash).collect(),
     }
   }
 }
@@ -63,8 +60,8 @@ mod tests {
 </dl>
 <h2>Latest Blocks</h2>
 <ol start=1260001 reversed class='blocks monospace'>
-  <li><a href=/block/1{64} class=uncommon>1{64}</a></li>
-  <li><a href=/block/0{64} class=legendary>0{64}</a></li>
+  <li><a href=/block/1{64}>1{64}</a></li>
+  <li><a href=/block/0{64}>0{64}</a></li>
 </ol>
 ",
     );

diff --git a/static/index.css b/static/index.css
@@ -1,6 +1,23 @@
+:root {
+  --dark-bg: hsl(200, 7%, 8%);
+  --dark-fg: #98a3ad;
+  --light-bg: #292c2f;
+  --light-fg: #a1adb8;
+  --search-bg: #b7b7b7;
+  --search-fg: #000000;
+  --search-border: #aaaaaa;
+  --common: grey;
+  --uncommon: forestgreen;
+  --rare: cornflowerblue;
+  --epic: darkorchid;
+  --legendary: gold;
+  --mythic: #f2a900;
+  --link: #4169e1;
+}
+
 html {
-  background-color: #121212;
-  color: white;
+  background-color: var(--dark-bg);
+  color: var(--dark-fg);
 }
 
 main {
@@ -17,20 +34,8 @@ h1 {
   width: 100%;
 }
 
-pre {
-  overflow: scroll;
-  padding: 1rem;
-  border-radius: 0.375rem;
-}
-
-p > code {
-  background-color: #2b303b;
-  padding: 0rem 0.2rem 0rem 0.2rem;
-  border-radius: 0.375rem;
-}
-
 a {
-  color: #4169E1;
+  color: var(--link);
   text-decoration: none;
 }
 
@@ -39,20 +44,33 @@ a:hover {
 }
 
 a:visited {
-  color: #4169E1;
+  color: var(--link);
 }
 
 nav {
   display: flex;
   gap: 1rem;
   padding: 1rem;
-  background-color: #242424;
+  background-color: var(--light-bg);
+  align-items: center;
+}
+
+nav > :first-child {
+  font-weight: bold;
+  color: var(--light-fg);
 }
 
 nav > form {
   margin-left: auto;
 }
 
+input[type=text] {
+  color: var(--search-fg);
+  background-color: var(--search-bg);
+  border-radius: 3px;
+  border: 1px solid var(--search-border);
+}
+
 @media (max-width: 38rem) {
   nav {
     flex-direction: column;
@@ -69,10 +87,6 @@ nav > form {
   white-space: nowrap;
 }
 
-.strikethrough {
-  text-decoration: line-through;
-}
-
 .monospace {
   font-family: monospace, monospace;
 }
@@ -83,49 +97,49 @@ span.common, span.uncommon, span.rare, span.epic, span.legendary, span.mythic {
 }
 
 span.common {
-  background-color: grey;
+  background-color: var(--common);
 }
 
 span.uncommon {
-  background-color: forestgreen;
+  background-color: var(--uncommon);
 }
 
 span.rare {
-  background-color: cornflowerblue;
+  background-color: var(--rare);
 }
 
 span.epic {
-  background-color: darkorchid;
+  background-color: var(--epic);
 }
 
 span.legendary {
-  background-color: gold;
+  background-color: var(--legendary);
 }
 
 span.mythic {
-  background-color: #f2a900;
+  background-color: var(--mythic);
 }
 
 a.common {
-  color: grey;
+  color: var(--common);
 }
 
 a.uncommon {
-  color: forestgreen;
+  color: var(--uncommon);
 }
 
 a.rare {
-  color: cornflowerblue;
+  color: var(--rare);
 }
 
 a.epic {
-  color: darkorchid;
+  color: var(--epic);
 }
 
 a.legendary {
-  color: gold;
+  color: var(--legendary);
 }
 
 a.mythic {
-  color: #f2a900;
+  color: var(--mythic);
 }
diff --git a/templates/home.html b/templates/home.html
@@ -9,7 +9,7 @@ <h2>Status</h2>
 %% }
 <h2>Latest Blocks</h2>
 <ol start={{self.last}} reversed class='blocks monospace'>
-%% for (rarity, hash) in &self.blocks {
-  <li><a href=/block/{{hash}} class={{rarity}}>{{hash}}</a></li>
+%% for hash in &self.blocks {
+  <li><a href=/block/{{hash}}>{{hash}}</a></li>
 %% }
 </ol>