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

View File

@ -8,8 +8,21 @@
@{
ViewData["Title"] = "Blog";
MastodonStatus latestStatus = MastodonService.GetLatestStatus();
bool doAprilFools = DateOnly.FromDateTime(DateTime.UtcNow) == new DateOnly(2024, 04, 01) || Environment.GetEnvironmentVariable("DO_AF") == "1";
}
@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)
@ -79,3 +92,4 @@
{{/each}}
</div>
</script>
}

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/img/cloud_672x148.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

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