Skip to content

Switch primary font to Lexend and refine typography weights #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kiyarose merged 5 commits into from
Mar 19, 2026
Merged

Switch primary font to Lexend and refine typography weights #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23298b3
Switch primary font to Lexend and keep footer in SLF Dreamer
cursoragent Mar 18, 2026
3e8c457
Increase button font weight and lighten Tech wordmark
cursoragent Mar 19, 2026
94db86e
style: format code with Prettier and StandardJS
deepsource-autofix[bot] Mar 19, 2026
954fbdc
Move Google Fonts to `<link>` preconnect and fix "Tech" wordmark font…
Copilot Mar 19, 2026
d8945db
Merge branch 'main' into cursor/lexend-font-integration-3db0
kiyarose Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
411 changes: 230 additions & 181 deletions apply.html
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 26 additions & 4 deletions base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
/* base.css - shared variables and minimal resets used by all pages */
/*
* NOTE: The Lexend font used as the primary body font is NOT loaded here.
* Every page that includes base.css MUST load Lexend via <link> tags in its
* <head> (before base.css) to avoid falling back to system fonts:
*
* <link rel="preconnect" href="https://fonts.googleapis.com" />
* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
* <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" />
*/
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
Expand Down Expand Up @@ -28,17 +37,17 @@
}

body {
/* Primary site font: Slfdreamer (fallbacks provided) */
/* Primary site font: Lexend (fallbacks provided) */
font-family:
"Slfdreamer",
"Lexend",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
/* Base font size: larger for Slfdreamer legibility */
/* Base font size tuned for readability */
font-size: 18px;
background: var(--bg-color);
color: var(--text-color);
Expand All @@ -59,7 +68,7 @@ body {
}
}

/* Slfdreamer primary display font */
/* SLF Dreamer font used by footer copyright */
@font-face {
font-family: "Slfdreamer";
src: url("assetlab/faces/Slfdreamer-Regular.ttf") format("truetype");
Expand Down Expand Up @@ -167,6 +176,19 @@ footer.site-footer {
z-index: 1000;
}

/* Keep footer copyright in SLF Dreamer */
footer.site-footer .footer-copyright {
font-family:
"Slfdreamer",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
}

/* link/button groups baseline */
.links {
display: flex;
Expand Down
118 changes: 103 additions & 15 deletions brand.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,113 @@
/* brand.css - overrides and layout specific to brand guidelines page */
.container.single-column { grid-template-columns: 1fr; max-width:900px; gap:28px; padding:24px; margin: 0 auto; text-align: center }
.brand-hero { display:flex; gap:20px; align-items:center; margin:40px 0; flex-direction:column }
.brand-logo { width:140px; height:140px; object-fit:contain; margin:0 auto }
.brand-section { margin:28px 0 }
.badge-sample { width:160px; margin:8px; display:inline-block }
.container.single-column {
grid-template-columns: 1fr;
max-width: 900px;
gap: 28px;
padding: 24px;
margin: 0 auto;
text-align: center;
}
.brand-hero {
display: flex;
gap: 20px;
align-items: center;
margin: 40px 0;
flex-direction: column;
}
.brand-logo {
width: 140px;
height: 140px;
object-fit: contain;
margin: 0 auto;
}
.brand-section {
margin: 28px 0;
}
.badge-sample {
width: 160px;
margin: 8px;
display: inline-block;
}

.back-link { display: inline-block; margin-bottom: 30px; color: var(--accent-color); text-decoration: none; font-weight: 500 }
.back-link:hover { text-decoration: underline }
.back-link {
display: inline-block;
margin-bottom: 30px;
color: var(--accent-color);
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}

/* center headings and sections */
.brand-section h3 { text-align:center }
.brand-section p, .brand-section ul { display:inline-block; text-align:left; max-width:720px }
.brand-section h3 {
text-align: center;
}
.brand-section p,
.brand-section ul {
display: inline-block;
text-align: left;
max-width: 720px;
}

/* center codebox */
pre.codebox { max-width: 820px; margin: 12px auto; text-align: left }
pre.codebox {
max-width: 820px;
margin: 12px auto;
text-align: left;
}

/* tabs */
.tab { padding:6px 10px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-color); cursor:pointer; font-weight:600 }
.tab.active { background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, black 8%)); color:white; border-color:transparent }
.tab {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
cursor: pointer;
font-weight: 700;
}
.tab.active {
background: linear-gradient(
180deg,
var(--accent-color),
color-mix(in srgb, var(--accent-color) 82%, black 8%)
);
color: white;
border-color: transparent;
}

/* codebox */
pre.codebox { background: var(--card-bg); color: var(--text-color); padding:14px; border-radius:10px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,0.06); position:relative; overflow:auto }
button.copy-btn { position:absolute; right:10px; top:10px; background:transparent; color:var(--text-color); border:1px solid var(--border-color); padding:6px 8px; border-radius:6px }
pre.codebox, pre.codebox code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:14px }
pre.codebox {
background: var(--card-bg);
color: var(--text-color);
padding: 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
position: relative;
overflow: auto;
}
button.copy-btn {
position: absolute;
right: 10px;
top: 10px;
background: transparent;
color: var(--text-color);
border: 1px solid var(--border-color);
padding: 6px 8px;
border-radius: 6px;
font-weight: 700;
}
/* keep Tech lighter in the brand wordmark */
.brand-wordmark .tech-thin {
font-weight: 300;
}
pre.codebox,
pre.codebox code {
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New",
monospace;
font-size: 14px;
}
30 changes: 25 additions & 5 deletions brand.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
} catch (e) {}
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
/>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="brand.css" />
<style>
Expand Down Expand Up @@ -125,7 +131,9 @@ <h1 style="margin: 0">Brand guidelines</h1>
"
/>
<div>
<h2>SillyLittleTech</h2>
<h2 class="brand-wordmark">
SillyLittle<span class="tech-thin">Tech</span>
</h2>
<p class="muted">
Non-profit open-source project. We kindly ask you to get our
permission before using our logo — see the policy below.
Expand All @@ -135,15 +143,24 @@ <h2>SillyLittleTech</h2>

<section class="brand-section">
<h3>Typography</h3>
<p class="muted">Primary display font (example):</p>
<p class="muted">Primary font (example):</p>
<div
style="
font-family: Slfdreamer, system-ui, sans-serif;
font-family: Lexend, system-ui, sans-serif;
font-size: 28px;
margin-top: 8px;
"
>
@Sphinx of black quartz judge my vow — Slfdreamer Regular
@Sphinx of black quartz judge my vow — Lexend
</div>
<div
style="
margin-top: 12px;
font-family: Slfdreamer, system-ui, sans-serif;
font-size: 22px;
"
>
@Sphinx of black quartz judge my vow — SLF Dreamer (copyright footer)
</div>
<div
style="
Expand Down Expand Up @@ -275,7 +292,10 @@ <h3>Licensing & permissions</h3>

<footer class="site-footer">
<div>
<div style="font-size: 12px; opacity: 0.85; margin-top: 4px">
<div
class="footer-copyright"
style="font-size: 12px; opacity: 0.85; margin-top: 4px"
>
© 2026 SillyLittleTech
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Make a Donation - SillyLittleTech</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
/>
<script>
(function () {
// Always derive theme from OS preference on this page (no localStorage)
Expand Down
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
} catch (e) {}
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
/>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="site.css" />
</head>
Expand Down Expand Up @@ -71,7 +77,7 @@
"
/>
</div>
<h1 class="name">Silly Little Tech</h1>
<h1 class="name">Silly Little <span class="tech-thin">Tech</span></h1>
</div>
<p class="description">
SillyLittleTech is a small organization building open-source web tools
Expand Down
5 changes: 4 additions & 1 deletion site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
Arial,
sans-serif;
}
.name .tech-thin {
font-weight: 400;
}
.description {
font-size: 1.125rem; /* ~20px at 18px base */
color: var(--text-color);
Expand Down Expand Up @@ -101,7 +104,7 @@
border-radius: 10px;
text-decoration: none;
color: var(--text-color);
font-weight: 600;
font-weight: 700;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
Expand Down
9 changes: 5 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
}

body {
/* Use Slfdreamer site-wide with system fallbacks */
/* Use Lexend site-wide with system fallbacks */
font-family:
"Slfdreamer",
"Lexend",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Expand Down Expand Up @@ -78,7 +78,7 @@ body {
background: transparent;
color: var(--text-color);
cursor: pointer;
font-weight: 600;
font-weight: 700;
}
.tab.active {
background: linear-gradient(
Expand Down Expand Up @@ -231,7 +231,7 @@ body {
border-radius: 10px;
text-decoration: none;
color: var(--text-color);
font-weight: 600;
font-weight: 700;
font-size: 15px;
transition:
transform 0.14s ease,
Expand Down Expand Up @@ -273,6 +273,7 @@ button.copy-btn {
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
}

button.copy-btn:hover {
Expand Down