feat: add april fools styling

OliverBooth/Pages/Blog/Index.cshtml

@@ -8,74 +8,88 @@
 @{
     ViewData["Title"] = "Blog";
     MastodonStatus latestStatus = MastodonService.GetLatestStatus();
+    bool doAprilFools = DateOnly.FromDateTime(DateTime.UtcNow) == new DateOnly(2024, 04, 01) || Environment.GetEnvironmentVariable("DO_AF") == "1";
 }
 
-<div class="card text-center mastodon-update-card">
+@if (doAprilFools)
-    <div class="card-body">
+{
-        @Html.Raw(latestStatus.Content)
+    <h1>UNDER CONSTRUCTION</h1>
-        @foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
+    <div style="text-align: center">
-        {
+        <img src="~/img/construction_90x85.gif">
-            switch (attachment.Type)
+        <img src="~/img/underconstruction_323x118.gif">
+        <img src="~/img/construction_90x85.gif">
+        <p>Coming soon WATCH THIS SPACE</p>
+    </div>
+}
+else
+{
+    <div class="card text-center mastodon-update-card">
+        <div class="card-body">
+            @Html.Raw(latestStatus.Content)
+            @foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
             {
-                case AttachmentType.Audio:
+                switch (attachment.Type)
-                    <p><audio controls="controls" src="@attachment.Url"></audio></p>
+                {
-                    break;
+                    case AttachmentType.Audio:
+                        <p><audio controls="controls" src="@attachment.Url"></audio></p>
+                        break;
 
-                case AttachmentType.Video:
+                    case AttachmentType.Video:
-                    <p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
+                        <p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
-                    break;
+                        break;
 
-                case AttachmentType.Image:
+                    case AttachmentType.Image:
-                case AttachmentType.GifV:
+                    case AttachmentType.GifV:
-                    <p><img class="figure-img img-fluid" src="@attachment.Url"></p>
+                        <p><img class="figure-img img-fluid" src="@attachment.Url"></p>
-                    break;
+                        break;
+                }
             }
-        }
+        </div>
+        <div class="card-footer text-muted">
+            <abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
+            &bull;
+            <a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
+        </div>
     </div>
-    <div class="card-footer text-muted">
+
-        <abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
+    <div id="all-blog-posts">
-        &bull;
+        @await Html.PartialAsync("_LoadingSpinner")
-        <a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
     </div>
-</div>
 
-<div id="all-blog-posts">
+    <script id="blog-post-template" type="text/x-handlebars-template">
-    @await Html.PartialAsync("_LoadingSpinner")
+        <div class="card-header">
-</div>
+            <span class="text-muted">
-
+                <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
-<script id="blog-post-template" type="text/x-handlebars-template">
+                <span>{{author.name}}<span>
-    <div class="card-header">
-        <span class="text-muted">
-            <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
-            <span>{{author.name}}<span>
-            <span> &bull; </span>
-            <abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
-            {{#if post.enable_comments}}
                 <span> &bull; </span>
-                <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
+                <abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
-                    Loading comment count &hellip;
+                {{#if post.enable_comments}}
-                </a>
+                    <span> &bull; </span>
+                    <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
+                        Loading comment count &hellip;
+                    </a>
+                {{/if}}
+            </span>
+        </div>
+        <div class="card-body">
+            <h2>
+                <a href="{{post.url}}"> {{post.title}}</a>
+            </h2>
+
+            <p>{{{post.excerpt}}}</p>
+
+            {{#if post.trimmed}}
+                <p>
+                    <a href="{{post.url}}">
+                        Read more...
+                    </a>
+                </p>
             {{/if}}
-        </span>
+        </div>
-    </div>
+        <div class="card-footer">
-    <div class="card-body">
+            {{#each post.tags}}
-        <h2>
+                <a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
-            <a href="{{post.url}}"> {{post.title}}</a>
+            {{/each}}
-        </h2>
+        </div>
-
+    </script>
-        <p>{{{post.excerpt}}}</p>
+}
-
-        {{#if post.trimmed}}
-            <p>
-                <a href="{{post.url}}">
-                    Read more...
-                </a>
-            </p>
-        {{/if}}
-    </div>
-    <div class="card-footer">
-        {{#each post.tags}}
-            <a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
-        {{/each}}
-    </div>
-</script>

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -4,6 +4,7 @@
 @{
     HttpRequest request = Context.Request;
     var url = new Uri($"{request.Scheme}://{request.Host}{request.Path}{request.QueryString}");
+    bool doAprilFools = DateOnly.FromDateTime(DateTime.UtcNow) == new DateOnly(2024, 04, 01) || Environment.GetEnvironmentVariable("DO_AF") == "1";
 }
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
@@ -61,12 +62,28 @@
     <link rel="stylesheet" href="~/css/prism.vs.min.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/ribbon.min.css" asp-append-version="true">
+    @if (doAprilFools)
+    {
+        <link rel="stylesheet" href="~/css/af-app.min.css" asp-append-version="true">
+    }
 </head>
 <body>
 <header class="container" style="margin-top: 20px;">
     <div id="site-title" class="text-center">
         <h1>
-            <a href="/"><img src="~/img/ob-256x256.png" alt="Oliver Booth" height="128"> Oliver Booth</a>
+            @if (doAprilFools)
+            {
+                <marquee>
+                    <a href="/">
+                        <img src="~/img/ob-af-256x256.png" alt="Oliver Booth" height="128">
+                        <img src="~/img/af-oliverbooth-1236x293.png" alt="Oliver Booth" height="128">
+                    </a>
+                </marquee>
+            }
+            else
+            {
+                <a href="/"><img src="~/img/ob-256x256.png" alt="Oliver Booth" height="128"> Oliver Booth</a>
+            }
         </h1>
     </div>
 </header>
@@ -95,7 +112,7 @@
 
 <div style="margin:50px 0;"></div>
 
-@if (DateTimeOffset.UtcNow < new DateTime(2024, 03, 08))
+@if (!doAprilFools && DateTimeOffset.UtcNow < new DateTime(2024, 03, 08))
 {
     <div id="usa-countdown" class="container">
         <div class="row">
@@ -110,6 +127,13 @@
 <div style="margin:50px 0;"></div>
 
 <div class="container">
+    @if (doAprilFools)
+    {
+        <h1 style="text-decoration: underline; color: #0f0 !important; margin: 20px 0;">
+            <img src="~/img/af-homepage_500x383.jpg" alt="WELCOME TO MY HOMEPAGE!!!!111SHIFT+1">
+        </h1>
+    }
+
     <main role="main" class="pb-3">
         @RenderBody()
     </main>
@@ -127,7 +151,7 @@
         </ul>
 
         <ul class="footer-nav" style="margin-top: 20px;">
-            <li>&copy; @DateTime.UtcNow.Year</li>
+            <li>@(doAprilFools ? "(C) 2003" : $"&copy; {DateTime.UtcNow.Year}")</li>
             <li><a asp-page="/privacy/index">Privacy</a></li>
         </ul>
     </div>

src/scss/af-app.scss

@@ -0,0 +1,59 @@
+$font: "Comic Sans MS", cursive !important;
+
+html, body {
+  background: #c7e7ff url("/img/cloud_672x148.gif") repeat !important;
+}
+
+html, body, * {
+  font-family: serif !important;
+  color: #f00;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font;
+  text-transform: uppercase !important;
+}
+
+a:link {
+  color: #00f !important;
+  text-decoration: underline !important;
+}
+
+a:visited {
+  color: #909 !important;
+  text-decoration: underline !important;
+}
+a:hover {
+  color: #00f !important;
+  text-decoration: underline !important;
+}
+a:active {
+  color: #909 !important;
+  text-decoration: underline !important;
+}
+
+footer, footer *{
+  color: #000 !important;
+}
+
+.rounded-circle {
+  border-radius: 0 !important;
+}
+
+main.container {
+  background: #ff0 !important;
+}
+
+.alert {
+  border-radius: 0 !important;
+}
+
+input.form-control, textarea.form-control {
+  background: #fff !important;
+  color: #000 !important;
+  font-family: $font;
+  
+  &::placeholder {
+    color: #9e9e9e !important;
+  }
+}