mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-11-03 22:59:16 +01:00
🔤 logo
This commit is contained in:
28
docs/assets/favicon.svg
Normal file
28
docs/assets/favicon.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#333333" />
|
||||
<stop offset="100%" stop-color="#222222" />
|
||||
</linearGradient>
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e32c2c" />
|
||||
<stop offset="100%" stop-color="#ff5252" />
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="0.5" stdDeviation="0.5" flood-color="#000" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Square background with rounded corners -->
|
||||
<rect x="2" y="2" width="28" height="28" rx="4" ry="4" fill="url(#bgGradient)" />
|
||||
|
||||
<!-- Subtle code brackets as background element -->
|
||||
<g opacity="0.15" fill="#fff">
|
||||
<path d="M10,7.5 L6.25,16 L10,24.5" stroke="#fff" stroke-width="1" fill="none"/>
|
||||
<path d="M22,7.5 L25.75,16 L22,24.5" stroke="#fff" stroke-width="1" fill="none"/>
|
||||
</g>
|
||||
|
||||
<!-- lowercase dde letters -->
|
||||
<text x="16" y="21" text-anchor="middle" font-family="'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'SF Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" font-size="14" font-weight="bold" fill="url(#textGradient)" filter="url(#shadow)">dde</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
33
docs/assets/logo.svg
Normal file
33
docs/assets/logo.svg
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Gradients and effects -->
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#333333" />
|
||||
<stop offset="100%" stop-color="#222222" />
|
||||
</linearGradient>
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e32c2c" />
|
||||
<stop offset="100%" stop-color="#ff5252" />
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Square background with rounded corners -->
|
||||
<rect x="18" y="18" width="220" height="220" rx="20" ry="20" fill="url(#bgGradient)" />
|
||||
|
||||
<!-- Subtle code brackets as background element -->
|
||||
<g opacity="0.15" fill="#fff" filter="url(#glow)">
|
||||
<path d="M80,60 L50,128 L80,196" stroke="#fff" stroke-width="8" fill="none"/>
|
||||
<path d="M176,60 L206,128 L176,196" stroke="#fff" stroke-width="8" fill="none"/>
|
||||
</g>
|
||||
|
||||
<!-- lowercase dde letters with shadow effect -->
|
||||
<text x="128" y="154" text-anchor="middle" font-family="'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'SF Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" font-size="100" font-weight="bold" fill="url(#textGradient)" filter="url(#shadow)">dde</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -49,22 +49,11 @@ ${host} p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
${host} .github-link {
|
||||
${host_nav} .github-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
${host} .github-link:hover {
|
||||
background-color: hsla(0, 0%, 0%, 0.3);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
@@ -107,13 +96,6 @@ ${host_nav} a .nav-number {
|
||||
color: rgb(from currentColor r g b / .75);
|
||||
}
|
||||
|
||||
${host_nav} a:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile navigation */
|
||||
@media (max-width: 767px) {
|
||||
${host_nav} {
|
||||
@@ -163,15 +145,13 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
// Header section with accessibility support
|
||||
el("header", { role: "banner", className: header.name }).append(
|
||||
el("div", { className: "header-title" }).append(
|
||||
el("a", {
|
||||
href: pkg.homepage,
|
||||
className: "github-link",
|
||||
"aria-label": "View on GitHub",
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
}).append(
|
||||
el(iconGitHub),
|
||||
),
|
||||
el("img", {
|
||||
src: "assets/logo.svg",
|
||||
alt: "DDE Logo",
|
||||
width: "32",
|
||||
height: "32",
|
||||
style: "margin-right: 0.5rem;"
|
||||
}),
|
||||
el("h1").append(
|
||||
el("a", { href: pages[0].href, textContent: pkg.name, title: "Go to documentation homepage" }),
|
||||
),
|
||||
@@ -185,15 +165,25 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
),
|
||||
|
||||
// Navigation between pages
|
||||
nav({ href })
|
||||
nav({ href, pkg })
|
||||
);
|
||||
}
|
||||
function nav({ href }){
|
||||
function nav({ href, pkg }){
|
||||
return el("nav", {
|
||||
role: "navigation",
|
||||
"aria-label": "Main navigation",
|
||||
className: nav.name
|
||||
}).append(
|
||||
el("a", {
|
||||
href: pkg.homepage,
|
||||
className: "github-link",
|
||||
"aria-label": "View on GitHub",
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
}).append(
|
||||
el(iconGitHub),
|
||||
"GitHub"
|
||||
),
|
||||
...pages.map((p, i) => {
|
||||
const isIndex = p.href === "index";
|
||||
const isCurrent = p.href === href;
|
||||
@@ -211,7 +201,7 @@ function nav({ href }){
|
||||
}),
|
||||
p.title
|
||||
);
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
function head({ title, description, pkg }){
|
||||
@@ -219,6 +209,7 @@ function head({ title, description, pkg }){
|
||||
el("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
|
||||
el("meta", { name: "description", content: description }),
|
||||
el("meta", { name: "theme-color", content: "#b71c1c" }),
|
||||
el("link", { rel: "icon", href: "assets/favicon.svg", type: "image/svg+xml" }),
|
||||
el("title", title),
|
||||
el(metaAuthor),
|
||||
el(metaTwitter, pkg),
|
||||
@@ -239,7 +230,7 @@ function metaTwitter({ name, description, homepage }){
|
||||
el("meta", { name: "twitter:url", content: homepage }),
|
||||
el("meta", { name: "twitter:title", content: name }),
|
||||
el("meta", { name: "twitter:description", content: description }),
|
||||
//el("meta", { name: "twitter:image", content: "" }),
|
||||
el("meta", { name: "twitter:image", content: homepage + "/assets/logo.svg" }),
|
||||
el("meta", { name: "twitter:creator", content: "@jaandrle" }),
|
||||
);
|
||||
}
|
||||
@@ -248,7 +239,7 @@ function metaFacebook({ name, description, homepage }){
|
||||
el("meta", { name: "og:url", content: homepage }),
|
||||
el("meta", { name: "og:title", content: name }),
|
||||
el("meta", { name: "og:description", content: description }),
|
||||
//el("meta", { name: "og:image", content: "" }),
|
||||
el("meta", { name: "og:image", content: homepage + "/assets/logo.svg" }),
|
||||
el("meta", { name: "og:creator", content: "@jaandrle" }),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
export { t } from "./utils/index.js";
|
||||
export const path_target= {
|
||||
root: "dist/docs/",
|
||||
css: "dist/docs/"
|
||||
css: "dist/docs/",
|
||||
assets: "dist/docs/assets/"
|
||||
};
|
||||
/**
|
||||
* This variable will be filled with the list of pages during the build process (see `bs/docs.js`).
|
||||
|
||||
Reference in New Issue
Block a user