V0.3.3: Even more optimization
Some checks failed
Build and Push Docker Image to GHCR / build-and-push (push) Has been cancelled
Some checks failed
Build and Push Docker Image to GHCR / build-and-push (push) Has been cancelled
In this realease, I have further optimized Passport. The css that Passport now uses is entirely handrolled and build via postcss (sadly). Several bugs have also been fixed in this release, as well as a few performance improvements relating to the admin UI.
This commit is contained in:
@@ -1,100 +1,88 @@
|
||||
<main class="grid grid-rows-3 grid-cols-[1fr] justify-center items-center h-screen bg-base">
|
||||
<div class="flex h-full p-2.5 justify-between">
|
||||
<div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Passport</title>
|
||||
<link rel="favicon" href="/favicon.ico" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
|
||||
href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
|
||||
{{{embedFile "assets/styles/main.css"}}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="hero">
|
||||
<div class="glance-container">
|
||||
{{#if WeatherData}}
|
||||
<div class="text-subtle flex items-center">
|
||||
<span class="mr-2 flex items-center">
|
||||
<div class="weather-data">
|
||||
<span>
|
||||
{{{WeatherData.Icon}}}
|
||||
</span>
|
||||
<div class="font-semibold">
|
||||
<p>{{WeatherData.Temp}}°C</p>
|
||||
<p>{{WeatherData.Desc}}</p>
|
||||
<p class="leading-condensed">{{WeatherData.Temp}}°C</p>
|
||||
<p class="leading-condensed">{{WeatherData.Desc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div>
|
||||
{{#if UptimeData}}
|
||||
<div class="text-subtle flex items-end flex-col">
|
||||
<div class="uptime-data">
|
||||
<svg width="0" height="0" style="display:none">
|
||||
<defs>
|
||||
<circle id="status-dot" cx="5" cy="5" r="5" />
|
||||
</defs>
|
||||
</svg>
|
||||
{{#each UptimeData}}
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2 flex items-center">
|
||||
{{{this.FriendlyName}}}
|
||||
<div>
|
||||
<span>
|
||||
{{this.FriendlyName}}
|
||||
</span>
|
||||
<div class="relative my-auto size-2">
|
||||
<div class="relative my-auto size-2 flex-shrink-0 flex-grow-0">
|
||||
<svg class="absolute w-full h-full animate-ping" viewBox="0 0 10 10">
|
||||
<circle cx="5" cy="5" r="5"
|
||||
class="fill-current {{#if (eq this.Status 2)}} text-success {{else}} text-error {{/if}}">
|
||||
</circle>
|
||||
</svg>
|
||||
<svg class="relative w-full h-full" viewBox="0 0 10 10">
|
||||
<circle cx="5" cy="5" r="5"
|
||||
class="fill-current {{#if (eq this.Status 2)}} text-success {{else}} text-error {{/if}}">
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="uptime-status">
|
||||
<svg viewBox="0 0 10 10">
|
||||
<use href="#status-dot"
|
||||
class="{{#if (eq this.Status 2)}}text-success{{else}}text-error{{/if}}">
|
||||
</use>
|
||||
</svg>
|
||||
<svg viewBox="0 0 10 10">
|
||||
<use href="#status-dot"
|
||||
class="{{#if (eq this.Status 2)}}text-success{{else}}text-error{{/if}}">
|
||||
</use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-start-2 flex flex-col items-center w-full px-6">
|
||||
<div class="flex items-center pb-2.5">
|
||||
<svg class="mr-3 aspect-square w-[clamp(42px,10vw,60px)]" viewBox="0 0 100 100" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)"
|
||||
fill="url(#paint0_linear_20_10)" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z"
|
||||
fill="url(#paint1_linear_20_10)" />
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F0389B" />
|
||||
<stop offset="1" stop-color="#EEE740" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AA38F0" />
|
||||
<stop offset="1" stop-color="#EE406A" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<h1>Passport</h1>
|
||||
<div class="primary-hero-container">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100">
|
||||
<rect width="70" height="47" x="12.1" y="24.8" fill="url(#a)" rx="12"
|
||||
transform="rotate(14.6 12.1 24.8)" />
|
||||
<path fill="url(#b)" fill-rule="evenodd"
|
||||
d="M52.7 13.5a12 12 0 0 0-16.2 5l-3.7 7 35.6 9.3a17 17 0 0 1 12.2 20.7l-5.8 22.3a12 12 0 0 0 12.7-6.2l10.8-20.3a12 12 0 0 0-5-16.2z"
|
||||
clip-rule="evenodd" />
|
||||
<defs>
|
||||
<linearGradient id="a" x1="12.4" x2="82.5" y1="44.9" y2="48.3" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#f0389b" />
|
||||
<stop offset="1" stop-color="#eee740" />
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="33.9" x2="94.2" y1="25.7" y2="61.6" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#aa38f0" />
|
||||
<stop offset="1" stop-color="#ee406a" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<h1>Passport</h1>
|
||||
</div>
|
||||
<form action="{{ SearchProviderURL }}" method="GET">
|
||||
<input name="{{ SearchParam }}" aria-label="Search bar" placeholder="Search..." />
|
||||
</form>
|
||||
</div>
|
||||
<form class="w-full max-w-3xl" action="{{ SearchProviderURL }}" method="GET">
|
||||
<input name="{{ SearchParam }}" aria-label="Search bar"
|
||||
class="w-full bg-surface border border-highlight-sm/70 rounded-full px-3 py-1 text-white h-7 focus-visible:outline-none placeholder:italic placeholder:text-highlight search"
|
||||
placeholder="Search..." />
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<section class="flex justify-center w-full bg-surface">
|
||||
<div class="w-full sm:w-4/5 p-2.5">
|
||||
{{#each Categories}}
|
||||
<div class="flex items-center mt-2 first:mt-0">
|
||||
<img class="object-contain mr-2 select-none size-8" width="32" height="32" draggable="false"
|
||||
alt="{{this.Name}}" src="{{this.Icon}}" />
|
||||
<h2 class="capitalize break-all">{{this.Name}}</h2>
|
||||
</div>
|
||||
<div class="link-grid">
|
||||
{{#each this.Links}}
|
||||
<a href="{{this.URL}}" class="link-card" draggable="false" target="_blank" rel="noopener noreferrer">
|
||||
<div data-img-container>
|
||||
<img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
|
||||
</div>
|
||||
<div data-text-container>
|
||||
<h3>{{this.Name}}</h3>
|
||||
<p class="min-h-5">{{this.Description}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
<p class="text-subtle">No links here, add one!</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{> 'partials/category-grid' }}
|
||||
</body>
|
||||
|
||||
{{{devContent}}}
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user