oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

feat: add april fools styling

This commit is contained in:
Oliver Booth 2024-02-29 18:59:30 +00:00
parent 900d46115e
commit 798b91179e
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
10 changed files with 160 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
OliverBooth/Pages/Blog/Index.cshtml
View File

@ -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>
&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>
&bull;
<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> &bull; </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> &bull; </span>
<a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
Loading comment count &hellip;
</a>
<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}}">
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 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>
}

30
OliverBooth/Pages/Shared/_Layout.cshtml
View File

@ -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>

BIN
src/img/af-homepage_500x383.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/img/af-oliverbooth-1236x293.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/img/af-oliverbooth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/img/cloud_672x148.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/img/construction_90x85.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/img/ob-af-256x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/underconstruction_323x118.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

59
src/scss/af-app.scss Normal file
View File

@ -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;
}
}