Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create a mockup for the Notion integration pages #18

Open
velocitatem opened this issue Sep 14, 2023 · 0 comments
Open

Create a mockup for the Notion integration pages #18

velocitatem opened this issue Sep 14, 2023 · 0 comments
Assignees
@coat-soup

Comments

@velocitatem
Copy link
Contributor

We will also be integrating notion pages into the website, as of now it just HTML without any styling. These pages are all dynamically filled so we never know what elements will be present, using tailwindcss and CSS define styles for elements that might be used. The documentation of how to do this is given here:

https://tailwindcss.com/docs/functions-and-directives#apply

You can use the following to test your styles:

<html lang="en">
<body>
    <header>
        <h1>Welcome to My Blog</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Post Title</h2>
            <p>Posted by <a href="/author">Author Name</a> on <time datetime="2023-09-13">September 13, 2023</time></p>
            <img src="post-image.jpg" alt="Post Image">
            <p>This is the main content of the blog post. It can be as long as you need it to be.</p>
            <a href="/read-more">Read More</a>

            <!-- Table added here -->
            <table>
                <caption>Sample Table</caption>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data 1</td>
                        <td>Data 2</td>
                        <td>Data 3</td>
                    </tr>
                    <tr>
                        <td>Data 4</td>
                        <td>Data 5</td>
                        <td>Data 6</td>
                    </tr>
                </tbody>
            </table>
        </article>

        <aside>
            <section>
                <h2>Categories</h2>
                <ul>
                    <li><a href="/category/tech">Tech</a></li>
                    <li><a href="/category/travel">Travel</a></li>
                    <li><a href="/category/lifestyle">Lifestyle</a></li>
                </ul>
            </section>

            <section>
                <h2>Popular Posts</h2>
                <ul>
                    <li><a href="/popular-post-1">Popular Post 1</a></li>
                    <li><a href="/popular-post-2">Popular Post 2</a></li>
                    <li><a href="/popular-post-3">Popular Post 3</a></li>
                </ul>
            </section>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 My Blog. All rights reserved.</p>
    </footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@coat-soup coat-soup

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@coat-soup @velocitatem