add top menu and about page

This commit is contained in:
Yanick Champoux 2024-02-04 17:08:21 -05:00
parent b1c66f6ff8
commit 9fdd3ae20c
3 changed files with 89 additions and 36 deletions

View File

@ -9,3 +9,13 @@
import 'beercss/dist/cdn/beer.min.css'; import 'beercss/dist/cdn/beer.min.css';
//import beercss from "./dist/cdn/beer.min.js"; //import beercss from "./dist/cdn/beer.min.js";
</script> </script>
<style>
:global(:root) {
--font-size-10: 1rem;
--font-size-11: 1.5rem;
--font-size-12: 1.75rem;
--font-size-13: 2rem;
--font-size-14: 2.25rem;
}
</style>

View File

@ -1,33 +1,13 @@
<header>
<nav>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
<a class="button circle transparent" href="/about">
<i>question_mark</i>
</a>
</nav>
</header>
<article> <article>
<h1>Ottawa board games for sale and to trade</h1>
<p>
This is a list of games for sale or trade of people living in the Ottawa
region, taken from their profiles on
<a href="https://boardgamegeek.com">Board Game Geek</a>.
</p>
<p>
If you want to be added to the list of sellers, you can send me a
<a
target="_blank"
href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
BGG mail</a
>. All I need is your BGG username, and I'll be able to gather all your
games tagged <em>For Trade</em>. If there is a price mentioned in the
<em>Trading Notes</em>
of the game (that is, any number prefixed with a <em>$</em>), it'll be
assumed to be the asking price.
</p>
<p>
Have questions, suggestions, anything else? Discussion of this service
happens in the <a
href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
>Ottawa Guild</a
>.
</p>
{#await data.games} {#await data.games}
<div class="medium-height middle-align center-align"> <div class="medium-height middle-align center-align">
<div class="center-align"> <div class="center-align">
@ -57,13 +37,6 @@
</script> </script>
<style> <style>
:global(:root) {
--font-size-10: 1rem;
--font-size-11: 1.5rem;
--font-size-12: 1.75rem;
--font-size-13: 2rem;
--font-size-14: 2.25rem;
}
p { p {
font-size: var(--font-size-10); font-size: var(--font-size-10);
max-width: 60em; max-width: 60em;

View File

@ -0,0 +1,70 @@
<header>
<nav>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
<a class="button circle transparent" href="/">
<i>arrow_back</i>
</a>
</nav>
</header>
<article>
<p>
<code>bgg.babyl.ca</code> is an aggregation of board games for sale or
trade of people living in the Ottawa region, taken from their profiles
on
<a href="https://boardgamegeek.com">Board Game Geek</a>.
</p>
<p>
If you want to be added to the list of sellers, you can send me a
<a
target="_blank"
href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
BGG mail</a
>. All I need is your BGG username, and I'll be able to gather all your
games tagged <em>For Trade</em>. If there is a price mentioned in the
<em>Trading Notes</em>
of the game (that is, any number prefixed with a <em>$</em>), it'll be
assumed to be the asking price.
</p>
<p>
Have questions, suggestions, anything else? Discussion of this service
happens in the <a
href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
>Ottawa Guild</a
>.
</p>
<p class="send-off">
Enjoy!<br /> <a href="https://boardgamegeek.com/user/yenzie">`/anick</a>
</p>
</article>
<script>
</script>
<style>
.send-off {
margin-top: 3em;
}
p {
font-size: var(--font-size-10);
max-width: 60em;
text-align: justify;
margin-left: 3em;
margin-right: 3em;
}
a {
color: var(--primary);
text-decoration: underline;
}
@media screen and (max-width: 730px) {
p {
font-size: inherit;
margin-left: 1em;
margin-right: 1em;
}
}
</style>