github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

refactor: Update font loading and styles to use Google Fonts CDN, streamline CSS, and enhance layout

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-03-04 19:37:25 +00:00
parent 9da5877209
commit cf5f51985f
5 changed files with 41 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
App/FeatureSet/Docs/Static/css/style.css
View File

@@ -1,43 +1,4 @@
@font-face {
font-family: __Inter_e66fe9;
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url(/docs/static/fonts/f1.woff2) format("woff2")
}
@font-face {
font-family: __Inter_Fallback_e66fe9;
src: local("Arial");
ascent-override:90.20%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.40%}
.__className_e66fe9 {
font-family: __Inter_e66fe9,__Inter_Fallback_e66fe9;
font-style: normal
}
.__variable_e66fe9 {
--font-inter: "__Inter_e66fe9","__Inter_Fallback_e66fe9"
}
@font-face {
font-family: __lexend_b436a8;
src: url(/docs/static/fonts/f2.woff2) format("woff2");
font-display: optional
}
@font-face {
font-family: __lexend_Fallback_b436a8;
src: local("Arial");
ascent-override:90.26%;descent-override:22.57%;line-gap-override:0.00%;size-adjust:110.79%}
.__className_b436a8 {
font-family: __lexend_b436a8,__lexend_Fallback_b436a8
}
.__variable_b436a8 {
--font-lexend: "__lexend_b436a8","__lexend_Fallback_b436a8"
}
/* Fonts are loaded via Google Fonts CDN in Head.ejs */
.token.class-name,.token.function,.token.selector,.token.selector .class,.token.selector.class,.token.tag {
@@ -86,7 +47,7 @@
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: var(--font-inter);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
@@ -1934,7 +1895,7 @@ img,video {
}
.font-display {
font-family: var(--font-lexend);
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "ss01"
}
@@ -1943,7 +1904,7 @@ img,video {
}
.font-sans {
font-family: var(--font-inter)
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
}
.text-2xl {
@@ -2410,7 +2371,7 @@ img,video {
}
.prose-headings\:font-display :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] *))) {
font-family: var(--font-lexend);
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "ss01"
}

2
App/FeatureSet/Docs/Views/Index.ejs
View File

@@ -1,4 +1,4 @@
<html lang="en" class="h-full antialiased __variable_e66fe9 __variable_b436a8 light scroll-smooth"
<html lang="en" class="h-full antialiased light scroll-smooth"
style="color-scheme: light;">
<head>

10
App/FeatureSet/Docs/Views/Partials/Content.ejs
View File

@@ -1,13 +1,13 @@
<article class="docs-article">
<header class="mb-10 pb-8 border-b border-slate-200">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-600/20">
<div class="flex items-center justify-between gap-4">
<h1 class="font-bold text-3xl sm:text-4xl tracking-tight text-slate-900 leading-tight">
<%- link.title %>
</h1>
<span class="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-600/20 whitespace-nowrap shrink-0">
<%- category.title %>
</span>
</div>
<h1 class="font-bold text-3xl sm:text-4xl tracking-tight text-slate-900 leading-tight">
<%- link.title %>
</h1>
</header>
<div class="prose prose-slate max-w-none
prose-headings:scroll-mt-28

12
App/FeatureSet/Docs/Views/Partials/Head.ejs
View File

@@ -1,15 +1,17 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#6366f1">
<link rel="preload" href="/docs/static/fonts/f1.woff2" as="font" crossorigin="" type="font/woff2">
<link rel="preload" href="/docs/static/fonts/f2.woff2" as="font" crossorigin="" type="font/woff2">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap" as="style">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<!-- Critical CSS to prevent CLS - these layout rules render immediately before any external resources -->
<style>
/* Reserve structural layout space to prevent CLS */
body { margin: 0; display: flex; min-height: 100vh; font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; display: flex; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body > div { display: flex; flex-direction: column; width: 100%; }
/* Header: fixed height prevents shift when styles load */
header { position: sticky; top: 0; z-index: 50; min-height: 57px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.95); border-bottom: 1px solid rgba(15,23,42,0.1); padding: 0.75rem 1rem; }
@@ -31,8 +33,8 @@
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
display: ['var(--font-lexend)', 'system-ui', 'sans-serif'],
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
display: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
},
}
}

50
Home/Views/Blog/Partials/OpenSourceCommitment.ejs
View File

@@ -1,29 +1,25 @@
<div class=" font-medium leading-6 text-gray-900 mt-24">Our Commitment to Open Source
</div>
<div class="mt-2 text-gray-900">
<ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
<li class="items-center justify-between py-4 pl-4 pr-5 leading-6">
<div class="items-center">
<div class="p-1 space-y-2">
<div>Everything we do at OneUptime is 100% open-source. You can contribute by writing a post just like this.
Please check contributing guidelines <a class="underline"
target="_blank"
href="https://github.com/oneuptime/blog">here.</a></div>
<% if(blogPost){%>
<div>If you wish to contribute to this post, you can make edits and improve it <a
class="underline" target="_blank"
href="https://github.com/oneuptime/blog/tree/master/posts/<%- blogPost.fileName -%>">here</a>.</div>
<% } %>
</div>
<div class="mt-16 p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50/30 border border-emerald-200 shadow-sm hover:shadow-md hover:border-emerald-300/60 transition-all duration-300">
<div class="flex flex-col sm:flex-row gap-5 sm:gap-6 items-start">
<div class="flex-shrink-0 h-12 w-12 bg-emerald-100 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Improve this Blog Post</h3>
<p class="text-sm text-gray-600 leading-relaxed mb-4">All our blog posts are open source. Found a typo, want to add more detail, or have a better explanation? Anyone can contribute and make this post better for everyone.</p>
<div class="flex flex-wrap gap-3">
<% if(blogPost){ %>
<a href="https://github.com/oneuptime/blog/tree/master/posts/<%- blogPost.fileName -%>" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 shadow-sm transition-all duration-200">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
Edit this Post on GitHub
</a>
<% } %>
<a href="https://github.com/oneuptime/blog" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white text-gray-700 text-sm font-medium border border-gray-200 hover:border-gray-300 hover:bg-gray-50 shadow-sm transition-all duration-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
Contributing Guidelines
</a>
</div>
</li>
</ul>
</div>
</div>
</div>