From 98a493290a1f30ac9c20ee1996c62f7d59f39110 Mon Sep 17 00:00:00 2001 From: Casey Rodarmor Date: Thu, 6 Oct 2022 13:13:00 -0700 Subject: [PATCH] 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) --- book/book.toml | 2 + book/src/SUMMARY.md | 2 +- book/src/theory.md | 3 +- src/subcommand/server.rs | 8 +-- src/subcommand/server/templates/home.rs | 11 ++-- static/index.css | 80 +++++++++++++++---------- templates/home.html | 4 +- 7 files changed, 62 insertions(+), 48 deletions(-) diff --git a/book/book.toml b/book/book.toml index 7b9ca585d6..8dad3440f2 100644 --- 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 index c6d345e2de..b9666e83a6 100644 --- 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 index 9a265b7cd6..22420b6234 100644 --- 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 index 0717938bc4..5171794d2a 100644 --- a/src/subcommand/server.rs +++ b/src/subcommand/server.rs @@ -1061,8 +1061,8 @@ mod tests {

Latest Blocks

    -
  1. [[:xdigit:]]{64}
    2. -
  2. 000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f
    3. +
  3. [[:xdigit:]]{64}
    4. +
  4. 000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f
.*", ); } @@ -1076,7 +1076,7 @@ mod tests { test_server.assert_response_regex( "/", StatusCode::OK, - ".*
    \n(
  1. [[:xdigit:]]{64}
    2. \n){100}
.*" + ".*
    \n(
  1. [[:xdigit:]]{64}
    2. \n){100}
.*" ); } @@ -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 index 9ea06a1043..c93feb9dfd 100644 --- 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, starting_ordinal: Option, } @@ -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 {

Latest Blocks

    -
  1. 1{64}
    2. -
  2. 0{64}
    3. +
  3. 1{64}
    4. +
  4. 0{64}
", ); diff --git a/static/index.css b/static/index.css index 97e0de37a5..8e125e7a92 100644 --- 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 index 28979938a0..ec6606d516 100644 --- a/templates/home.html +++ b/templates/home.html @@ -9,7 +9,7 @@

Status

%% }

Latest Blocks

    -%% for (rarity, hash) in &self.blocks { -
  1. {{hash}}
    2. +%% for hash in &self.blocks { +
  2. {{hash}}
    3. %% }