twitter-embed/index.html at master · westtle/twitter-embed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="westtle">
    <meta name="description" content="codedesign.dev - Twitter tweet embed with light/dark mode.">
    <meta name="keywords" content="Twitter, tweet, embed, twitter embed, twitter tweet embed, twitter component, codedesign, codedesign.dev, codethedesign, code the design">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Twitter Embed</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=source-sans-pro:400,600,700" rel="stylesheet" />

    <link rel="icon" type="image/x-icon" href="#">
    <link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
</head>
<body data-theme="light-mode">
    <main>
        <button id="theme-toggle" aria-label="Toggle theme.">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-theme-icon)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
        </button>

        <article id="twitter-embed">
            <div class="__top-row">
                <div class="_user-info">
                    <div class="profile-picture_">
                        <img src="./assets/images/profile-picture-1x.png" srcset="./assets/images/profile-picture-1x.png 1x, ./assets/images/profile-picture-2x.png 2x" alt="Profile picture." width="50" height="50">
                    </div>
                    <div class="name-and-handle_">
                        <h1 class="name__"><a href="#">John Doe</a></h1>
                        <h2 class="handle__">@realjohndoe</h2>
                    </div>
                </div>
                <a class="_twitter-icon" href="#" aria-label="Twitter.">
                    <svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.75 0.749996C26.553 1.59434 25.2276 2.24013 23.825 2.6625C23.0722 1.79688 22.0717 1.18336 20.9588 0.904904C19.8459 0.626447 18.6744 0.696491 17.6026 1.10556C16.5308 1.51464 15.6106 2.243 14.9662 3.19214C14.3219 4.14129 13.9846 5.26542 14 6.4125V7.6625C11.8033 7.71946 9.62659 7.23226 7.66376 6.2443C5.70093 5.25635 4.0129 3.79829 2.75 2C2.75 2 -2.25 13.25 9 18.25C6.42566 19.9975 3.35895 20.8737 0.25 20.75C11.5 27 25.25 20.75 25.25 6.375C25.2488 6.02681 25.2154 5.67949 25.15 5.3375C26.4258 4.07936 27.326 2.49089 27.75 0.749996Z" fill="#1DA1F2"/>
                    </svg>
                </a>
            </div>
            <p class="__tweet-content">Why do they call it 'debugging' when it feels more like 'wildly guessing and hoping for the best'? <a class="hashtag--" href="#">#programming</a> <a class="hashtag--" href="#">#coding</a> <a class="hashtag--" href="#">#debugging</a></p>
            <div class="__bottom-row">
                <div class="_like">
                    <button class="like-button_" aria-label="Like.">
                        <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.84 3.61C20.3292 3.099 19.7228 2.69364 19.0554 2.41708C18.3879 2.14052 17.6725 1.99817 16.95 1.99817C16.2275 1.99817 15.5121 2.14052 14.8446 2.41708C14.1772 2.69364 13.5708 3.099 13.06 3.61L12 4.67L10.94 3.61C9.9083 2.57831 8.50903 1.99871 7.05 1.99871C5.59096 1.99871 4.19169 2.57831 3.16 3.61C2.1283 4.64169 1.54871 6.04097 1.54871 7.5C1.54871 8.95903 2.1283 10.3583 3.16 11.39L4.22 12.45L12 20.23L19.78 12.45L20.84 11.39C21.351 10.8792 21.7563 10.2728 22.0329 9.60535C22.3095 8.93789 22.4518 8.22249 22.4518 7.5C22.4518 6.77751 22.3095 6.0621 22.0329 5.39464C21.7563 4.72718 21.351 4.12075 20.84 3.61V3.61Z" stroke="hsl(var(--color-primary))" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <span class="like-amount_">650</span>
                </div>
                <time class="_posted-time" datetime="2022-02-24T15:40:00">3:40 PM – Feb 24, 2022</time>
            </div>
        </article>
    </main>

    <footer>
        <div id="attribution">
            <a href="https://codedesign.dev/challenge/twitter-embed" target="_blank">Challenge</a> -
            <a href="https://github.com/westtle" target="_blank">westtle</a> -
            <a href="https://github.com/westtle/twitter-embed" target="_blank">Repository</a>
        </div>
    </footer>

    <script type="text/javascript" src="./assets/scripts/script.js"></script>
</body>
</html>