feat: add april fools styling
|
@ -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">
|
||||
<div class="card-body">
|
||||
@Html.Raw(latestStatus.Content)
|
||||
@foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
|
||||
{
|
||||
switch (attachment.Type)
|
||||
@if (doAprilFools)
|
||||
{
|
||||
<h1>UNDER CONSTRUCTION</h1>
|
||||
<div style="text-align: center">
|
||||
<img src="~/img/construction_90x85.gif">
|
||||
<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:
|
||||
<p><audio controls="controls" src="@attachment.Url"></audio></p>
|
||||
break;
|
||||
switch (attachment.Type)
|
||||
{
|
||||
case AttachmentType.Audio:
|
||||
<p><audio controls="controls" src="@attachment.Url"></audio></p>
|
||||
break;
|
||||
|
||||
case AttachmentType.Video:
|
||||
<p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
|
||||
break;
|
||||
case AttachmentType.Video:
|
||||
<p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
|
||||
break;
|
||||
|
||||
case AttachmentType.Image:
|
||||
case AttachmentType.GifV:
|
||||
<p><img class="figure-img img-fluid" src="@attachment.Url"></p>
|
||||
break;
|
||||
case AttachmentType.Image:
|
||||
case AttachmentType.GifV:
|
||||
<p><img class="figure-img img-fluid" src="@attachment.Url"></p>
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
<abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
|
||||
•
|
||||
<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>
|
||||
•
|
||||
<a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
|
||||
|
||||
<div id="all-blog-posts">
|
||||
@await Html.PartialAsync("_LoadingSpinner")
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="all-blog-posts">
|
||||
@await Html.PartialAsync("_LoadingSpinner")
|
||||
</div>
|
||||
|
||||
<script id="blog-post-template" type="text/x-handlebars-template">
|
||||
<div class="card-header">
|
||||
<span class="text-muted">
|
||||
<img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
|
||||
<span>{{author.name}}<span>
|
||||
<span> • </span>
|
||||
<abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
|
||||
{{#if post.enable_comments}}
|
||||
<script id="blog-post-template" type="text/x-handlebars-template">
|
||||
<div class="card-header">
|
||||
<span class="text-muted">
|
||||
<img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
|
||||
<span>{{author.name}}<span>
|
||||
<span> • </span>
|
||||
<a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
|
||||
Loading comment count …
|
||||
</a>
|
||||
<abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
|
||||
{{#if post.enable_comments}}
|
||||
<span> • </span>
|
||||
<a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
|
||||
Loading comment count …
|
||||
</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 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}}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
{{#each post.tags}}
|
||||
<a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
{{#each post.tags}}
|
||||
<a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</script>
|
||||
}
|
|
@ -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>© @DateTime.UtcNow.Year</li>
|
||||
<li>@(doAprilFools ? "(C) 2003" : $"© {DateTime.UtcNow.Year}")</li>
|
||||
<li><a asp-page="/privacy/index">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 89 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 16 KiB |
|
@ -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;
|
||||
}
|
||||
}
|