backloggd-copost-template.html

<!--
  Instructions:
  1. Copy the HTML below into a Copost.
  2. Search for "[[[" and replace the bracketed sections with your review's info.
  3. If you're a Backloggd backer, uncomment the BACKER badge below. Don't lie!
  4. Optionally, uncomment the IGDB background image section. This is kind of a
     pain to access, so feel free to ignore it if you don't want the image.
  5. Check the preview and make sure everything looks right.
  6. Post!

  I might add an automatic copost generator for these, so stay tuned.
-->

<div
    style="display: flex; flex-wrap: wrap; color: #badefc; background-color: #16181c; padding-bottom: 1rem; border-radius: 5px; border: 1px solid #242832; overflow: hidden; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7)">
    <div
        style="display: flex; flex-wrap: wrap; background-color: #242832; width: 100%; padding-top: 0.75rem; padding-bottom: 0.25rem; z-index: 2">
        <div
            style="margin-bottom: auto; padding-right: 0; flex: 0 0 auto; width: auto; max-width: 100%; position: relative; padding-left: 15px">
            <a href="https://www.backloggd.com/u/[[[Backloggd username]]]/">
                <img src="[[[Backloggd avatar URL]]]"
                    style="width: 40px; height: 40px; border-radius: 4px; vertical-align: middle; margin: 0">
            </a>
        </div>
        <div
            style="min-width: 0; flex-basis: 0; flex-grow: 1; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px;">
            <div
                style="display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; font-size: .9rem; margin-bottom: 0.25rem;">
                <div
                    style="min-width: 0; flex-basis: 0; flex-grow: 1; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px;">
                    <div
                        style="display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; margin-bottom: 0.25rem">
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; padding-right: 0; margin-bottom: auto; margin-top: auto; margin-right: -0.5rem;">
                            <a href="https://www.backloggd.com/u/[[[Backloggd username]]]/"
                                style="margin-bottom: auto; margin-top: auto; color: #cbd4dc; font-weight: 700; text-decoration: none; display: block">
                                <p style="font-size: 1.1rem; line-height: normal; margin: 0">[[[Backloggd username]]]</p>
                            </a>
                        </div>
                        <!--
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; margin-bottom: auto; margin-top: auto; padding-left: 0; padding-right: 0; margin-left: 0.5rem; margin-right: -0.5rem">
                            <p
                                style="margin: 0 5px; background-color: #ea377a; color: #16181c; font-size: .7rem; border-radius: 4px; font-weight: 600; padding: 0 4px;">
                                BACKER</p>
                        </div>
                        -->
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; padding-right: 15px; margin-top: auto">
                            <p style="margin: 0; line-height: normal; font-weight: 200; color: #8f9ca7">reviewed <a
                                    href="[[[Game URL]]]"
                                    style="color: #cbd4dc; text-decoration: none; font-weight: 600">[[[Game name]]]</a></p>
                        </div>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;">
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; padding-right: 0; margin-top: auto; margin-bottom: auto;">
                            <div
                                style="display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; line-height: normal; margin-left: -2px; font-size: 1.15rem; line-height: 17px; unicode-bidi: bidi-override; color: rgba(146,161,204,.23); height: auto; width: auto; margin: 0 auto; position: relative; padding: 0; white-space: nowrap;">
                                <div
                                    style="width:[[[Rating as a %. For example, if you gave 3.5 stars, put "70%"]]]; color: #ea377a; padding: 0; position: absolute; z-index: 1; display: block; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap;">
                                    ★★★★★</div>
                                <div style="padding: 0; display: block; z-index: 0">★★★★★</div>
                            </div>
                        </div>
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 0.5rem; padding-right: 0.25rem; margin-top: auto; margin-bottom: auto; position: relative; margin-left: 0.5rem">
                            <a href="https://www.backloggd.com/u/[[[Backloggd username]]]/games/added/game_status:completed/"
                                style="text-decoration: none">
                                <p style="margin: 0; color: #cbd4dc; padding: 0; line-height: normal; font-weight: 600">Completed</p>
                                <div
                                    style="background-color: #43b94f; position: absolute; width: 7px; height: 7px; top: 6px; left: -1px; border-radius: 10px;">
                                </div>
                            </a>
                        </div>
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 0; padding-right: 0.25rem; line-height: normal; font-weight: 200; color: #8f9ca7; margin-right: -0.75rem">
                            <p style="margin: 0">on</p>
                        </div>
                        <div
                            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; padding-right: 15px; margin-top: auto; margin-bottom: auto">
                            <a href=https://www.backloggd.com//u/[[[Backloggd username]]]/games/added/played_platform:[[[platform slug]]]/"
                                style="margin-top: 0; margin-bottom: 0; margin-left: auto; color: #cbd4dc; line-height: normal; text-decoration: none; font-weight: 600">
                                <p style="margin: 0">[[[platform name]]]</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--
        <div style="width: 100%; height: 0; margin-bottom: 200px">
            <img style="width: 100%; margin: 0; transform: translateY(-25%)" src="[[[
                IGDB background image
                To find this, run `console.log($("#artwork-high-res").attr('src'))` in the JS console on Backloggd page for the game.
            ]]]">
        </div>
    -->
    <div style="display: flex; flex-wrap: wrap; margin-bottom: 0.5rem; margin-top: calc(0.5rem - 200px); z-index: 1; background: linear-gradient(180deg,rgba(125,185,232,0) 0,#16181c calc(200px + 3rem)); padding-top: 200px">
        <div
            style="min-width: 0; flex-basis: 0; flex-grow: 1; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px;">
            <div style="font-weight: 400; font-size: 0.9rem; margin-bottom: 0">
                <p style="margin: 0; display: inline-block; word-break: break-word; width: 100%">
                    [[[
                        Your review as HTML. To get this:
                        1. Open your Backloggd review in another tab.
                        2. Right-click the text of the review and click "Inspect". The dev inspector should open with a <p> tag highlighted.
                        3. Right-click the <p> tag and click Copy > Inner HTML.
                        4. Paste the HTML in here and delete the <p> and </p> tags.
                    ]]]
                </p>
            </div>
        </div>
    </div>
    <div style="display: flex; flex-wrap: wrap; width: 100%">
        <div
            style="position: relative; width: auto; max-width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto">
            <p style="margin: 0; font-size: .9rem; line-height: normal; color: #8f9ca7"><a
                    href="[[[review link]]]"
                    style="font-weight: 200; text-decoration: none">Reviewed on [[[review date]]]</a></p>
        </div>
    </div>
</div>
<div style="text-align: right; font-size: min(1.87vw, 70%); opacity: 0.7; line-height: 100%;"> made with @nex3's <a
        href="https://gist.github.com/nex3/e947ff7a94fc466736e2025355ffe97f">Backloggd template</a></div>