diff --git a/src/data.rs b/src/data.rs index 9e1a3c5..9a005f7 100644 --- a/src/data.rs +++ b/src/data.rs @@ -55,8 +55,7 @@ impl Display for Card { (None, None) => write!(f, "? ATK / ? DEF")?, } } - f.write_str("
")?; - f.write_str(&self.text)?; + write!(f, "

{}

", &self.text)?; Ok(()) } } diff --git a/src/main.rs b/src/main.rs index dfcca32..214fd2e 100644 --- a/src/main.rs +++ b/src/main.rs @@ -21,6 +21,8 @@ static CARDS_BY_ID: LazyLock> = LazyLock::new(|| CARDS.iter().map(|c| (c.id, Card { text: c.text.replace('\r', "").replace('\n', "
"), ..c.clone() })).collect()); static SEARCH_CARDS: LazyLock> = LazyLock::new(|| CARDS.iter().map(SearchCard::from).collect()); +static IMG_HOST: LazyLock = LazyLock::new(|| std::env::var("IMG_HOST").unwrap_or_else(|_| String::new())); + #[actix_web::main] async fn main() -> std::io::Result<()> { let now = Instant::now(); @@ -78,10 +80,11 @@ async fn card_info(card_id: web::Path) -> Result -
{card}
-
+
+ + {card}
"#, + IMG_HOST.as_str(), card.id, )?; } @@ -140,14 +143,17 @@ fn render_results(res: &mut String, query: &str) -> Result<(), Box"); + res.push_str("
"); for card in matches { write!( res, - r#"{card}"#, - card.id, card.id + r#"
{card}
"#, + card.id, + IMG_HOST.as_str(), + card.id )?; } + res.push_str("
"); Ok(()) } diff --git a/static/header.html b/static/header.html index b503047..5a247e1 100644 --- a/static/header.html +++ b/static/header.html @@ -1,138 +1,6 @@ - + diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..94ee566 --- /dev/null +++ b/static/style.css @@ -0,0 +1,115 @@ +:root { + --hl: #59e9fd; + --bg: black; + --bg2: #101012; + --fg: #ececef; + --fg-dim: #ddddde; +} + +html { + padding: 2em 0; + background-color: var(--bg); + color: var(--fg); + font-family: 'Lato', 'Segoe UI', sans-serif; + font-size: 13pt; + line-height: 140%; +} + +body { + background-color: var(--bg2); + border-radius: 2em; + padding: 5%; + width: 80%; + margin: auto; +} + +code { + font-family: "Hack", "Fira Code", "Courier New", monospace; + background-color: #2a2a2a; +} + +.meta { + font-size: 75%; + color: var(--fg-dim); +} + +p { + text-align: justify; +} + +form > * { + height: 2em; + border-color: var(--hl); + background-color: var(--bg2); + color: var(--fg); + border-width: 0 0 2px 0; +} + +form > *:focus { + outline: none; +} + +#searchbox { + width: 90%; +} + +#submit { + width: 10%; +} + +a { + color: var(--hl); +} + +hr { + border-color: var(--hl); +} + +h2 { + margin-block-end: 0; + margin-block-start: 0; + font-weight: normal; + font-size: 120%; +} + +img { + box-shadow: 10px 10px var(--bg); +} + +.thumb { + max-height: 250px; + max-width: 30%; + float: right; + margin: 0 0 0.8em 1.2em; +} +.fullimage { + width: 30%; + float: right; + margin: 0 0 1em 1.5em; +} +.cardresult { + margin: 1em; + flex-grow: 1; + flex-basis: 25em; +} + +@media screen and (max-width: 680px) { + body { + width: 95%; + padding: 3%; + } + #bottom { + bottom: 1em; + } +} + +/* little floaty thing at the bottom with links to home and help */ +#bottom { + position: fixed; + bottom: 2em; + right: 10%; + background-color: var(--bg); + z-index: 2; + padding: 1em; + border-radius: 1em; +}