src/http/tpl/base.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

<!DOCTYPE html>
<html>

  <head>
    <title>{{ .Title }}</title>
    <link rel="stylesheet" type="text/css" href="{{ .RootURL.Static "new.css" }}" />
    <link rel="stylesheet" type="text/css" href="{{ .RootURL.Static "mediocre.css" }}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{{ .RootURL.Static "favicon/apple-touch-icon.png" }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ .RootURL.Static "favicon/favicon-32x32.png" }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ .RootURL.Static "favicon/favicon-16x16.png" }}">
    <link rel="manifest" href="{{ .RootURL.Static "favicon/site.webmanifest" }}">
  </head>

  <body>

    <header>

      <pre class="fuck-it-up">
                .%*.                                                        .-.
               .%@@@+.                                                .--=%@@@-
               =@@@@@@-                                         :--+@@@@@@@@@*
               *@%@@@@@%:                               :--=#@@@@@@@@@@@@#@@+
               @@::%@@@@@@-:                   :::-=%@@@@@@@@@@@@@@%#*-  :@*
              .@@   =@@@@@@@@@+-:::::::-=*@@@@@@@@@@@@@@@@@@@%##-        @@:
              #@#     +%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#*:              -@@
              #@-        *%@@@@@@@@@@@@@@@@@%%%#=                       %@=
              @@:             -=+++==     ..                            @@:
              @@        .               -@@@                           +@@
             #@%     =@@@@-            +@@@@#              *+          %@#
             #@-   -@@@@@@@.          +@@@@@%           .%@@@@=        @@:
             @@:  +@@@@@@@@@         +@+ +@@@         %@@@@@@@@@      -@@
             @@  *@%@*  :@@@        *@+  -@@@       %@@@@@@@@@@@#     @@@
            #@% %@ @%    %@@       *@*   .@@@     =@@@*@@   :@@@@     @@:
            %@:## *@+    :@@      :@@     @@@    %@@: @#     .@@@    .@@
            @@:.  @@:    .@@      @@      @@@   %@:  @@       @@%    @@%
            @@   -@@.    =@@     @@.      @@@  %@.  #@-       @@#    @@.
           %@%   +@@.    @@.    %@-       @@@ #@    @@.      :@@    -@@
           %@:   +@@+   .@%    #@=        @@@.@    *@@       +@+    @@*
           @@:   +@@%. .%%    *@+         @@@      %@@      -@#     @@
           @@    :@@@@@@%    :@@          @@%      %@@      @#     *@@
          %@@     #@@@@*     @@           @@%      %@@.    %@.     @@:
          @@:      ===:     @@.           @@%      %@@:  =@%.     .@@
          @@.              #@=            @@%      %@@%+%@#.      @@%
          @@              +@*             @@#      -@@@@@*       .@@
         %@@             :@@              @@#       %@@#:        =@@
         @@:            .@@               @@#        :           @@=
         @@.            @@.               @@#                   :@@
         @@            #@=                @@%                   %@%
        #@@           +@+                 #@%                  .@@
        @@:          =@#                  +@%                  =@%
        @@          :@%                   -@@                  @@+
        @@         .@@                    -@:                 -@@
       -@@         @%                     .:                  *@#
       @@*         #                                          @@.
       @@                                                    =@@
      .@@                                                    @@*
      .@@                                                   .@@
      *@@                                                   =@#
      @@*                                                   @@*
      @@                                                   -@@
     .@@                                                   +@*
     .@@                                                   @@-
     -@@                                                  =@@
     %@%                                                  #@*
     @@                                                   @@:
     @@                                                  +@@
    .@@                                                  %@+
    :@%                                                  @@.
    :@%                                                 *@%
    -@.                                                 %@=
    %@                                                  @@.
    @@                                                 *@%
    @@                                                 %@=
    @%                                                 @@:
   :@%                                                +@@
   :@*                =+-                             #@+
   :@:              .%@@@.                            @@-
   -@              =@@@@@#                           :@@
   =@             *@#.=@@%                           #@%
   *@            #@-  -@@%                           %@-
   @@           #@:   :@@%                           @@:
   @@          #%     .@@%               .#@@*      -@@
   @%         #%      .@@%              +@@@@@-     %@%
   @#        %@       :@@%            .@@@@@@@@     %@:
   @#       %@        :@@%           +@@% .@@@@     @@:
   @#      %@         :@@%          #@@:   :@@@    -@@
   @#     @@.         .@@@        .@@%     .@@@=   %@%
   @#    @@.          .@@@:      %@@-       @@@%   %@:
   @#   @@             @@@@    %@@@         *@@@   @@:
   @# .@@              @@@@@@@@@@=          :@@@   @@
   * @@@               :@@@@@@@@.           :@@@  *@@
.@@@@@%                 -@@@@@.             .@@@  @@=
@@@@@:                    ..                 @@@  @@.
-@%:                                         @@@  @@.
                                             @@@  @@
                                             -@@ =@@
                                             .@@ @@+
                                             .@@:@@.
                                              @@#@-
                                              @@@.
                                              +@-
                                               -
      </pre>

      <strong>mediocregopher</strong>'s lil web corner
      <br/>
      <br/>
      <a href="{{ .RootURL }}">Home</a>
      &nbsp;//&nbsp;
      <a href="{{ .RootURL.Posts }}">Posts</a>
      &nbsp;/&nbsp;
      <a href="{{ .RootURL.Path "follow" }}">Follow</a>
      &nbsp;/&nbsp;
      <a href="{{ .RootURL.Path "feed.xml" }}">RSS</a>
      &nbsp;//&nbsp;
      <a href="https://dev.mediocregopher.com/mediocre-blog/">Source</a>
      &nbsp;/&nbsp;
      <a href="{{ .RootURL.Static "wtfpl.txt" }}">License</a>
    </header>

    {{ template "body" . }}

  </body>

  <!--

    Everything in this site is static and uses classless CSS.

    Except for the ghost. Cause he's special.

  -->

  <style>

    header {
      /* so the ghost still affects the header's height */
      overflow: hidden;
    }

    .fuck-it-up {

      color: var(--nc-tx-1);
      font-family:Courier,monospace;
      font-weight: bold;
      font-size:0.18rem;
      line-height:0.09rem;

      background-color: #FFFFFF00;
      width: min-content;

      margin: 0;
      padding: 0 1rem 0 0;
      border: none;

      float: left;
      overflow: hidden;
    }

    @media (max-device-width: 800px) {
      .fuck-it-up {
        display: none;
      }
    }
  </style>

  <script>

    const pre = document.querySelectorAll(".fuck-it-up")[0];

    function replaceAt(str, index, replacement) {
      return str.substr(0, index) + replacement+ str.substr(index + replacement.length);
    }

    // right-pad the lines
    const lines = pre.innerText.split('\n');

    let maxL = 0;
    lines.forEach((line) => {
      maxL = maxL > line.length ? maxL : line.length;
    });

    pre.innerText = lines.map((line) =>
      line + " ".repeat(maxL - line.length)
    ).join('\n');

    function fuckItUp() {
      while (true) {
        var txt = pre.innerText;
        var len = txt.length;

        var a = Math.floor(Math.random() * len);
        var aChar = txt.charAt(a);
        var b = Math.floor(Math.random() * len);
        var bChar = txt.charAt(b);

        if (
          aChar == "\n" || bChar == "\n"
        ) continue;

        txt = replaceAt(txt, a, bChar);
        txt = replaceAt(txt, b, aChar);
        pre.innerText = txt;

        break
      }
    }

    var wait = 1000;
    function fuckItUpALot() {
      fuckItUp();
      if (wait > 2) { wait *= 0.95; }
      setTimeout(fuckItUpALot, wait);
    }

    if (window.getComputedStyle(pre).display != "none")
      setTimeout(fuckItUpALot, wait);

  </script>

</html>