Skip to content

Commit

Permalink
Updated display of top section, added About Us
Browse files Browse the repository at this point in the history
  • Loading branch information
@CorpulentBrony
CorpulentBrony committed Dec 2, 2021
1 parent 2bb672d commit 4f4ad3b
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 30 deletions.
2 changes: 1 addition & 1 deletion .cid
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"checksum":"e3c6c9611e809f98c3be96555b505112a36bc95c","cid":"bafybeiagdhf6o4qd7h23amthzxdjqje6oz3b5syikavkpyhf773typjox4"}
{"checksum":"7f2d59b0fca801d862bdced29973cb8bdfc11955","cid":"bafybeicvctneggvvccaqajv6o5xzxdlkyqnny6b73vceep7wawfo7od2fa"}
39 changes: 28 additions & 11 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ body {
font-family: "Open Sans", sans-serif;
}
body[data-is-js-disabled] { background-image: url(stars.webp); }
body[data-is-copy-button-hidden] copy-button { display: none; }
footer { min-height: 25vw; }
footer, header {
display: flex;
Expand Down Expand Up @@ -190,8 +191,10 @@ dfn[title="brohoof /)"] {
text-overflow: ellipsis;
}
#buy-now {
--border-radius-size: 1rem;
--buy-now-width: 60rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(calc(var(--buy-now-width) / 2), 1fr));
place-content: stretch;
place-items: stretch;
}
Expand All @@ -208,30 +211,37 @@ dfn[title="brohoof /)"] {
}
#buy-now > section:nth-child(1) {
background-color: var(--twilight-background);
border-radius: 1rem 0 0 1rem;
border-radius: var(--border-radius-size) 0 0 var(--border-radius-size);
}
#buy-now > section:nth-child(2) {
background-color: var(--twilight-pink);
border-radius: 0 1rem 1rem 0;
border-radius: 0 var(--border-radius-size) var(--border-radius-size) 0;
}
#buy-now > section > section:nth-child(4) {
display: flex;
display: none;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#buy-now > section > section:nth-child(4) > a {
border-color: var(--twilight-purple);
border-radius: 0.5rem;
margin: 1rem;
border-style: solid;
font-weight: 700;
margin: 0.5rem;
padding: 1rem;
}
#buy-now > section > section:nth-child(4) > a:hover { background-color: unset; }
#buy-now > section > section:nth-child(4) > a:first-child {
border-color: var(--twilight-purple);
border-style: solid;
#buy-now > section > section:nth-child(4) > a:first-child:hover {
background-color: var(--twilight-purple);
color: var(--twilight-pink);
}
#buy-now > section > section:nth-child(4) > a:not(:first-child) {
background-color: var(--twilight-purple);
}
#buy-now > section > section:nth-child(4) > a:not(:first-child):hover {
background-color: unset;
color: var(--twilight-purple);
}
#contract-detail-list {
align-items: center;
column-gap: 1rem;
Expand Down Expand Up @@ -320,6 +330,7 @@ dfn[title="brohoof /)"] {
transform: translateY(calc(var(--scroll-y) * var(--scroll-speed)));
transition: all 0.2s linear;
}
#buy-now > section > section:nth-child(4) { display: flex; }
#moon-background {
animation-duration: 10s;
animation-name: moon-glow;
Expand Down Expand Up @@ -357,7 +368,6 @@ dfn[title="brohoof /)"] {
list-style: none;
}
}
@media (prefers-reduced-motion) { .stars { transform: none; } }
@media (max-width: 1440px) {
.big-header.detail { font-size: 2rem; }
.card {
Expand All @@ -378,4 +388,11 @@ dfn[title="brohoof /)"] {
grid-template-columns: 1rem 3fr;
height: 2.25rem;
}
}
}
@media (max-width: 60rem) {
#buy-now { margin: 1rem 0; }
#buy-now > section { margin: 0; }
#buy-now > section:nth-child(1) { border-radius: var(--border-radius-size) var(--border-radius-size) 0 0; }
#buy-now > section:nth-child(2) { border-radius: 0 0 var(--border-radius-size) var(--border-radius-size); }
}
@media (prefers-reduced-motion) { .stars { transform: none; } }
55 changes: 37 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,17 +99,17 @@
<link href="index.css" rel="stylesheet">
<script src="script/stars.mjs" type="module"></script>
</head>
<body data-is-js-disabled>
<body data-is-js-disabled data-is-copy-button-hidden>
<script>if ("noModule" in self.HTMLScriptElement.prototype) delete self.document.body.dataset.isJsDisabled;</script>
<section id="top-nav">
<span><a href="." rel="home index">$MARE</a></span>
<nav>
<ul>
<li><a href="#section-vision">Vision</a></li>
<li><a href="#section-community">Community</a></li>
<li><a href="#section-bananas">Bananas</a></li>
<li><a href="#section-portability">Portability</a></li>
<li><a href="#section-contracts">Contracts</a></li>
<li><a href="#section-about">About Us</a></li>
<li><a href="#section-social">Social</a></li>
<li><a href="#section-buy">GET $MARE</a></li>
</ul>
Expand Down Expand Up @@ -205,23 +205,23 @@ <h3 class="card detail header" id="section-vision">
</section>
<section>
<h3 class="card detail header" id="section-community">
Community
<picture>
<source sizes="3.75rem" srcset="cutie_marks/RD-1x.avif 1x, cutie_marks/RD-3x.avif 2x, cutie_marks/RD-3x.avif 3x, cutie_marks/RD.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/RD.webp" srcset="cutie_marks/RD-1x.webp 1x, cutie_marks/RD-3x.webp 2x, cutie_marks/RD-3x.webp 3x" type="image/webp">
</picture>
Community
</h3>
<div class="card detail dash">
The key component to making MARE Bits a success is <b>(You)</b>: Help us out by designing apps or sites that leverage MARE. If you're a creator, run a fandom project, or run a horse charity, <b>reach out to us</b> and we can help you accept MARE payments. And everypony else, <b>ask the people you support to consider accepting MARE</b>. Together, we can spread the good news about <b>how awesome mares are</b> by talking about MARE.
</div>
</section>
<section>
<h3 class="card detail header" id="section-bananas">
Do you like bananas?
<picture>
<source sizes="3.75rem" srcset="cutie_marks/FS-1x.avif 1x, cutie_marks/FS-3x.avif 2x, cutie_marks/FS-3x.avif 3x, cutie_marks/FS.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/FS.webp" srcset="cutie_marks/FS-1x.webp 1x, cutie_marks/FS-3x.webp 2x, cutie_marks/FS-3x.webp 3x" type="image/webp">
</picture>
Do you like bananas?
</h3>
<div class="card detail flutter">
<div>
Expand All @@ -235,37 +235,25 @@ <h3 class="card detail header" id="section-bananas">
</div>
</div>
</section>
<!-- <section>
<h3 class="card detail header">
Reducing Arbitrage Risks
<picture>
<source sizes="3.75rem" srcset="cutie_marks/RY-1x.avif 1x, cutie_marks/RY-3x.avif 2x, cutie_marks/RY-3x.avif 3x, cutie_marks/RY.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/RY.webp" srcset="cutie_marks/RY-1x.webp 1x, cutie_marks/RY-3x.webp 2x, cutie_marks/RY-3x.webp 3x" type="image/webp">
</picture>
</h3>
<div class="card detail rarity">
In order to mitigate the risks of <q>impermanent</q> loss due to arbitrage, at least <data value="105149893009.9313034959596640334">50% of the tokens set aside for liquidity</data> will immediately be issued to a single exchange (likely <a href="//uniswap.org/">Uniswap</a>) with the remaining distributed amongst other liquidity providers.
</div>
</section> -->
<section>
<h3 class="card detail header" id="section-portability">
Blockchain Portability
<picture>
<source sizes="3.75rem" srcset="cutie_marks/PP-1x.avif 1x, cutie_marks/PP-3x.avif 2x, cutie_marks/PP-3x.avif 3x, cutie_marks/PP.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/PP.webp" srcset="cutie_marks/PP-1x.webp 1x, cutie_marks/PP-3x.webp 2x, cutie_marks/PP-3x.webp 3x" type="image/webp">
</picture>
Blockchain Portability
</h3>
<div class="card detail pinkie">
<a href="//polygon.technology/" rel="external noopener">Polygon</a> has provided a <a href="//wallet.matic.network/bridge" rel="external noopener">PoS bridge</a> between Mare Bits on Ethereum and the Matic blockchain; this means <b>you can easily move your Mare Bits to and from Matic to take advantage of lower transaction fees</b>. We will be looking to provide liquidity on Matic as well. <a href="//polygonscan.com/token/0xb362A97aD06C907c4b575D3503fB9DC474498480" rel="external">See the contract on Polygonscan</a><copy-button>0xb362A97aD06C907c4b575D3503fB9DC474498480</copy-button>.
</div>
</section>
<section>
Contracts
<h3 class="card detail header" id="section-contracts">
<picture>
<source sizes="3.75rem" srcset="cutie_marks/AJ-1x.avif 1x, cutie_marks/AJ-3x.avif 2x, cutie_marks/AJ-3x.avif 3x, cutie_marks/AJ.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/AJ.webp" srcset="cutie_marks/AJ-1x.webp 1x, cutie_marks/AJ-3x.webp 2x, cutie_marks/AJ-3x.webp 3x" type="image/webp">
</picture>
Contracts
</h3>
<div class="card detail apple">
<h4>Important contract related links for (You):</h4>
Expand All @@ -281,6 +269,37 @@ <h4>Important contract related links for (You):</h4>
</dl>
</div>
</section>
<section>
<h3 class="card detail header" id="section-about">
<picture>
<source sizes="3.75rem" srcset="cutie_marks/RY-1x.avif 1x, cutie_marks/RY-3x.avif 2x, cutie_marks/RY-3x.avif 3x, cutie_marks/RY.avif" type="image/avif">
<img class="cutie-mark" loading="lazy" role="presentation" sizes="3.75rem" src="cutie_marks/RY.webp" srcset="cutie_marks/RY-1x.webp 1x, cutie_marks/RY-3x.webp 2x, cutie_marks/RY-3x.webp 3x" type="image/webp">
</picture>
About Us
</h3>
<div class="card detail rarity">
<div>
This entire project is currently run by a <strong>single individual</strong> known in the brony fandom as <a href="https://twitter.com/TwifagHN">Twifag</a> or <a href="https://pone.social/@corpubro">Corpulent Brony</a>. I'd love to have more friends on board helping to build utility for this token. I've sunk quite a bit of my personal money into it; not with any hopes of future financial gain, but just to <strong>help spread the love of mares</strong> to the wide crypto world and offer fellow pony enthusisasts an alternative to the doggy tokens.
</div>
<div>
We'd really love your help to come up with more ideas and to help implement ideas we already have. Future ideas we are currently developing:
<ul>
<li><b>Mare Bits Locker</b>: A way of locking tokens away for a predetermined amount of time. The Locker will issue an ERC-721 NFT token that can be used to withdraw locked funds once the lock period has expired. May require anyone making a deposit or withdraw must hold $MARE. (Nearing completion, this is in testing already.)</li>
<li><b>Mare Balance Check API</b>: Will provide a single and simple API call that other fandom sites can use to check the $MARE balance of a given wallet address. Can make implementing features dependent on users hodling $MARE for third party fandom web sites (i.e., a special badge is displayed for those who hodl). (I should be able to handle this on my own, unless someone else would like to help as well.)</li>
<li>General ERC-721 minting contract that will allow artists to mint any NFT tokens. While there would be no fees charged, anyone minting a token will have to hold $MARE. (I should be able to handle this on my own, unless someone else would like to help as well.)</li>
<li>ERC-721 (or ERC-1155) NFT allowing users to build their own ponies. Would use SVGs and allow users to custom design their own pony and hodl it as an NFT. Additional features like adding accessories may be restricted only to those who hodl $MARE. (Would need help with vectoring and fancier web site design.)</li>
</ul>
</div>
<div>
<b>Others who have helped make this a reality</b>:
<ul>
<li>Anonymous artist who helped design our logo (name withheld until they give permission to use it)</li>
<li>Anonymous artist who helped vector our logo (name withheld until they give permission to use it)</li>
<li>(You) for helping to spread the word about $MARE</li>
</ul>
</div>
</div>
</section>
<h2 class="big-header detail" id="section-social">Join Us</h2>
<section class="card nav">
If you also believe in mares and want to make this project a success, please reach out and lend a hoof.
Expand Down
1 change: 1 addition & 0 deletions script/CopyButton.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ class CopyButton extends MareCustomElement {
return;
const privates = _privates.get(this);
privates.copyContractClickEvent = browserEvents.add(new MareEvent(privates.button, "click", () => onCopyContractClick.call(this).catch(console.error), { passive: true }));
delete self.document.body.dataset.isCopyButtonHidden;
super.connectedCallback();
}
createdCallback(options) {
Expand Down

0 comments on commit 4f4ad3b

Please sign in to comment.