-
← Back to Home
-
-
-
+
-
+
diff --git a/base.css b/base.css
index 12c4927..383c9cd 100644
--- a/base.css
+++ b/base.css
@@ -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
tags in its
+ * (before base.css) to avoid falling back to system fonts:
+ *
+ *
+ *
+ *
+ */
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
@@ -28,9 +37,9 @@
}
body {
- /* Primary site font: Slfdreamer (fallbacks provided) */
+ /* Primary site font: Lexend (fallbacks provided) */
font-family:
- "Slfdreamer",
+ "Lexend",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
@@ -38,7 +47,7 @@ body {
"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);
@@ -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");
@@ -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;
diff --git a/brand.css b/brand.css
index cb344c4..d488b66 100644
--- a/brand.css
+++ b/brand.css
@@ -1,25 +1,115 @@
/* 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 }
-
-/* center codebox */
-pre.codebox { max-width: 820px; margin: 12px auto; text-align: left }
+.brand-section h3 {
+ text-align: center;
+}
+.brand-section p,
+.brand-section ul {
+ display: inline-block;
+ text-align: left;
+ max-width: 720px;
+}
/* 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 }
+.codebox-wrapper {
+ position: relative;
+ max-width: 820px;
+ margin: 12px auto;
+}
+pre.codebox {
+ max-width: 820px;
+ margin: 12px auto;
+ 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);
+ overflow: auto;
+ text-align: left;
+}
+button.copy-btn {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ background: var(--card-bg);
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ padding: 6px 8px;
+ border-radius: 6px;
+ font-weight: 700;
+ cursor: pointer;
+ z-index: 1;
+}
+/* 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;
+}
diff --git a/brand.html b/brand.html
index 79ee2be..b8cb65e 100644
--- a/brand.html
+++ b/brand.html
@@ -8,10 +8,16 @@
/* ensure theme attribute is present early to avoid FOUC */ (function () {
try {
const t = localStorage.getItem("theme");
- if (t) document.documentElement.setAttribute("data-theme", t);
- } catch (e) {}
+ if (t) document.documentElement.dataset.theme = t;
+ } catch (e) { console.warn(e); }
})();
+
+
+
-
+
← Back to Home
@@ -119,13 +88,12 @@
Brand guidelines
src="assetlab/raster/newslticon.png"
alt="SillyLittleTech logo"
class="brand-logo"
- onerror="
- this.onerror = null;
- this.src = 'assetlab/smallicon.png';
- "
+ data-fallback="assetlab/smallicon.png"
/>
-
SillyLittleTech
+
+ SillyLittleTech
+
Non-profit open-source project. We kindly ask you to get our
permission before using our logo — see the policy below.
@@ -135,15 +103,24 @@
SillyLittleTech
Typography
- Primary display font (example):
+ Primary font (example):
- @Sphinx of black quartz judge my vow — Slfdreamer Regular
+ @Sphinx of black quartz judge my vow — Lexend
+
+
+ @Sphinx of black quartz judge my vow — SLF Dreamer (copyright footer)
+
@@ -275,7 +252,10 @@
Licensing & permissions