pkgs/nomsing/index.html


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

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <title>noms!</title>
    <style>
    @font-face {
        font-family: "Annie Use Your Telescope";
        src: url("AnnieUseYourTelescope-Regular.ttf") format("truetype");
        font-display: swap;
     }
     @keyframes right {
         from {
             left: 0;
         }
         to {
             left: 5pt;
         }
     }
     @keyframes left {
         from {
             right: 0;
         }
         to {
             right: 5pt;
         }
     }

     body {
         text-align: center;
         margin-top: 40vh;
         background-color: lightcoral;
         font-family: "Annie Use Your Telescope";
         font-size: 40pt;
         color: white;
     }
     .webring {
         font-size: 30pt;
         a {
             position: relative;
             text-decoration: none;
             color: darkred;
             &:hover {
                 color: red;
                 animation-duration: 0.3s;
                 animation-iteration-count: infinite;
                 animation-direction: alternate;
                 &.right {
                     animation-name: right;
                 }
                 &.left {
                     animation-name: left;
                 }
             }
         }
     }
    </style>
    </head>
    <body>
        <img src="./BlobCat_Nom.png" alt="Blobcat biting another blobcat's neck">
        <p>You like biting cuties, don't you? :3</p>

        <p class="webring"><a class="left" href="https://webring.noms.ing/previous?from=noms.ing">&lt;&lt;&lt;</a> webring <a class="right" href="https://webring.noms.ing/next?from=noms.ing">&gt;&gt;&gt;</a></p>
    </body>
</html>