Responsive version

Open lil5 opened this issue 2 years ago • 0 comments

This is a responsive version of this project, css is rebuild on tailwind css.

I have removed some useless divs surrounding each list.

The lists form a grid that wrap and adjust the columns by 1, 2, 3 for mobile, tablet & desktop respectively.

To release this for production: open the html file in a browser, let the tailwind script generate a <style> tag in the head and copy the contents into ./style.css.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>~/startpage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            body {
                @apply w-screen h-screen bg-slate-950;
            } 
            .container {
                @apply min-h-full flex flex-col md:flex-row justify-center;
            }
            .left-container {
                @apply flex items-center justify-center flex-shrink;
            }
            .gif {
                @apply aspect-square w-[300px] m-4;
            }
            .right-container {
                @apply md:w-6/12 flex flex-col justify-center items-center;
            }
            .head {
                @apply font-serif text-yellow-600 text-3xl mt-4 mb-8;
            }
            .blinking {
                @apply inline-block animate-pulse;
            }
            .bookmarks {
                @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 mb-4;
            }
            .links {
                @apply list-none text-center space-y-2 text-blue-400;
            }
            .links li:not(.title) a {
                @apply relative inline-block;
            }
            .links li:not(.title) a::before {
                @apply block w-0 h-[2px] bg-blue-400 content-[''] absolute -bottom-1 transition-all;
            }
            .links li:not(.title) a:hover::before,
            .links li:not(.title) a:focus::before {
                @apply w-full; 
            }
            .title {
                @apply text-lg font-serif text-yellow-600;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left-container">
            <div class="gif">
                <img src="cat.gif" />
            </div>
        </div>

        <div class="right-container">
            <div class="head">
                <p aria-label="startpage">> cd ~/<span class="blinking">&block;</span></p>
            </div>

            <div class="bookmarks">
                    <ul class="links">
                        <li class="title">work</li>
                        <li><a href="https://gmail.com">gmail</a></li>
                        <li><a href="https://outlook.office.com">outlook</a></li>
                        <li><a href="https://linkedin.com">linkedin</a></li>
                        <li><a href="https://vim.rtorr.com/">vim</a></li>
                    </ul>
            </div>
        </div>
    </div>
</body>
</html>

Dec 15 '23 12:12 lil5