Skip to content

Commit cf05924

Browse files
lovasoalovasoa
committed
update official site theme
1 parent 62c0a2c commit cf05924

File tree

6 files changed

+212
-129
lines changed

6 files changed

+212
-129
lines changed

‎examples/official-site/assets/highlightjs-and-tabler-theme.css‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
@charset "utf-8";
2+
3+
:root,
4+
.layout-boxed[data-bs-theme="dark"] {
5+
color-scheme: dark;
6+
7+
/* Core colors refined for better contrast */
8+
--tblr-body-color: hsl(225deg 35% 86%);
9+
--tblr-secondary-color: hsl(225, 15%, 80%); /* Increased lightness for better readability */
10+
--tblr-muted-color: hsla(225, 15%, 75%, 0.8); /* Brighter muted text */
11+
12+
/* Background system */
13+
--tblr-body-bg: hsl(225deg 44% 9%);
14+
--tblr-bg-surface: hsl(225, 47%, 10%);
15+
--tblr-bg-surface-secondary: hsl(225, 47%, 12%);
16+
--tblr-bg-surface-tertiary: hsl(225, 47%, 14%);
17+
18+
/* Border colors */
19+
--tblr-border-color: hsl(225, 47%, 15%);
20+
--tblr-border-color-translucent: hsla(225, 47%, 15%, 0.16);
21+
22+
/* Text secondary RGB */
23+
--tblr-text-secondary-rgb: 204, 209, 217; /* RGB equivalent of hsl(225, 15%, 80%) */
24+
25+
/* Code colors */
26+
--tblr-code-color: hsl(225deg 45.4% 76.93%); /* Light code text for dark theme */
27+
--tblr-code-bg: hsla(225, 47%, 15%, 0.5); /* Subtle dark background */
28+
29+
/* Ethereal accent colors */
30+
--tblr-primary: hsla(212, 60%, 60%, 0.95); /* Cosmic blue */
31+
--tblr-secondary: hsla(246.7, 60%, 94.1%, 0.85); /* Nebula purple */
32+
33+
/* Luminous links */
34+
--tblr-link-color: hsl(212, 70%, 75%) !important; /* Star glow */
35+
--tblr-link-hover-color: hsl(212, 70%, 85%) !important; /* Supernova */
36+
37+
--tblr-blue-lt-rgb: 47, 61, 83;
38+
--tblr-blue-rgb: 189, 214, 237;
39+
40+
/* Ethereal shadows */
41+
--tblr-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px
42+
rgba(66, 153, 225, 0.15);
43+
--tblr-box-shadow-dropdown: 0px 8px 24px rgba(0, 0, 0, 0.25), 1px 9px 20px rgba(174, 62, 201, 0.15);
44+
45+
/* Pure white emphasis */
46+
--tblr-emphasis-color: #ffffff;
47+
--tblr-heading-color: #ffffff;
48+
49+
/* Syntax highlighting colors */
50+
--hljs-cosmic-comment: hsl(290, 10%, 60%); /* Distant star */
51+
--hljs-cosmic-punctuation: hsl(60, 40%, 85%); /* Stardust */
52+
--hljs-cosmic-property: hsl(340, 60%, 65%); /* Red giant */
53+
--hljs-cosmic-number: hsl(0, 50%, 75%); /* Solar flare */
54+
--hljs-cosmic-boolean: hsl(270, 100%, 75%); /* Purple nebula */
55+
--hljs-cosmic-string: hsl(120, 40%, 75%); /* Green aurora */
56+
--hljs-cosmic-operator: hsl(0, 0%, 95%); /* White dwarf */
57+
--hljs-cosmic-keyword: hsl(210, 100%, 75%); /* Blue giant */
58+
}
59+
60+
@media (min-width: 768px) {
61+
.layout-boxed {
62+
background: #07020ff5
63+
linear-gradient(70deg, rgba(23, 17, 39, 0.4), transparent) fixed;
64+
}
65+
}
66+
67+
/* Comments, Prolog, Doctype, and Cdata */
68+
.hljs-comment,
69+
.hljs-prolog,
70+
.hljs-meta,
71+
.hljs-cdata {
72+
color: var(--tblr-secondary-color);
73+
}
74+
75+
/* Punctuation */
76+
.hljs-template-variable,
77+
.hljs-punctuation {
78+
color: var(--hljs-cosmic-punctuation);
79+
}
80+
81+
/* Property and Tag */
82+
.hljs-property {
83+
color: var(--hljs-cosmic-property);
84+
}
85+
86+
/* Number */
87+
.hljs-number {
88+
color: var(--hljs-cosmic-number);
89+
}
90+
91+
/* Boolean */
92+
.hljs-literal {
93+
color: var(--hljs-cosmic-boolean);
94+
}
95+
96+
/* String */
97+
.hljs-selector-tag,
98+
.hljs-string {
99+
color: var(--hljs-cosmic-string);
100+
}
101+
102+
/* Operator */
103+
.hljs-operator,
104+
.hljs-symbol,
105+
.hljs-link,
106+
.language-css .hljs-string,
107+
.style .hljs-string {
108+
color: var(--hljs-cosmic-operator);
109+
}
110+
111+
/* Keyword */
112+
.hljs-template-tag,
113+
.hljs-keyword {
114+
color: var(--hljs-cosmic-keyword);
115+
}
116+
117+
/* Namespace */
118+
.hljs-namespace {
119+
opacity: 0.7;
120+
}
121+
122+
/* Selector, Attr-name, and String */
123+
.hljs-attr {
124+
color: #fcfce5;
125+
}
126+
127+
.hljs-name {
128+
color: #e4faf6;
129+
}
130+
131+
/* Operator, Entity, URL, CSS String, and Style String */
132+
.hljs-operator,
133+
.hljs-symbol,
134+
.hljs-link,
135+
.language-css .hljs-string,
136+
.style .hljs-string {
137+
color: #f8f8f2;
138+
}
139+
140+
/* At-rule and Attr-value */
141+
.hljs-tag,
142+
.hljs-keyword,
143+
.hljs-attribute-value {
144+
color: #e6db74;
145+
}
146+
147+
/* Regex and Important */
148+
.hljs-regexp,
149+
.hljs-important {
150+
color: var(--tblr-yellow);
151+
}
152+
153+
/* Important */
154+
.hljs-important {
155+
font-weight: bold;
156+
}
157+
158+
/* Entity */
159+
.hljs-symbol {
160+
cursor: help;
161+
}
162+
163+
/* Token transition */
164+
.hljs {
165+
transition: 0.3s;
166+
}
167+
168+
/* Code selection */
169+
code::selection,
170+
code ::selection {
171+
background: var(--tblr-yellow);
172+
color: var(--tblr-gray-900);
173+
border-radius: 0.1em;
174+
}
175+
176+
code .hljs-keyword::selection,
177+
code .hljs-punctuation::selection {
178+
color: var(--tblr-gray-800);
179+
}
180+
181+
/* Pre code padding */
182+
pre code {
183+
padding: 0;
184+
}
185+
186+
/* Limit height and add inset shadow to code blocks */
187+
pre:has(code) {
188+
max-height: 33vh; /* Limit height */
189+
overflow: auto;
190+
box-shadow: inset 0 -1px 20px hsla(207.7, 39.4%, 6.5%, 0.64);
191+
border-radius: 0.5rem;
192+
}
193+
194+
@media print {
195+
pre:has(code) {
196+
max-height: none !important;
197+
box-shadow: none !important;
198+
}
199+
}

examples/official-site/highlightjs-launch.js renamed to examples/official-site/assets/highlightjs-launch.js

File renamed without changes.

‎examples/official-site/examples/tabs/index.sql‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
select 'http_header' as component, '</tabs/>; rel="canonical"' as "Link";
2-
select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1;
1+
select 'http_header' as component, '<https://sql-page.com/examples/tabs/>; rel="canonical"' as "Link";
2+
3+
select 'dynamic' as component, json_patch(json_extract(properties, '$[0]'), json_object(
4+
'title', 'SQLPage - SQL website examples',
5+
'description', 'These small focused examples each illustrate one feature of the SQLPage website builder.'
6+
)) as properties
7+
FROM example WHERE component = 'shell' LIMIT 1;
38

49
drop table if exists example_cards;
510
create temporary table if not exists example_cards as
@@ -38,4 +43,4 @@ select title, description,
3843
from example_cards
3944
where $db is null or $db = db_engine;
4045

41-
select 'text' as component, 'See [source code on GitHub](https://github.com/sqlpage/SQLPage/blob/main/examples/official-site/examples/tabs/)' as contents_md;
46+
select 'text' as component, 'See [source code on GitHub](https://github.com/sqlpage/SQLPage/blob/main/examples/official-site/examples/tabs/)' as contents_md;

‎examples/official-site/highlightjs-tabler-theme.css‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎examples/official-site/sqlpage/migrations/01_documentation.sql‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,15 +1171,16 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
11711171
"language": "en-US",
11721172
"description": "Go from SQL queries to web applications in an instant.",
11731173
"preview_image": "https://sql-page.com/sqlpage_social_preview.webp",
1174+
"theme": "dark",
11741175
"font": "Poppins",
11751176
"javascript": [
11761177
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js",
11771178
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/sql.min.js",
11781179
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/handlebars.min.js",
11791180
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/json.min.js",
1180-
"/highlightjs-launch.js"
1181+
"/assets/highlightjs-launch.js"
11811182
],
1182-
"css": "/highlightjs-tabler-theme.css",
1183+
"css": "/assets/highlightjs-and-tabler-theme.css",
11831184
"footer": "Official [SQLPage](https://sql-page.com) documentation"
11841185
}]')),
11851186
('shell', '

‎examples/official-site/sqlpage/templates/shell-home.handlebars‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010
<meta property="og:title" content="SQLPage: SQL websites" />
11-
<meta name="description" content="Build interactive websites with only SQL queries." />
11+
<meta name="description" content="Build interactive websites and apps with only SQL queries. SQLPage is an open-source tool to generate nice user interfaces on top of traditional databases. Maps, charts, tables, forms, and dashboards - without traditional web programming." />
1212
<meta property="og:description" content="Build interactive websites with only SQL queries." />
1313
<meta property="og:image" content="/sqlpage_social_preview.webp" />
1414
<meta name="twitter:image" content="/sqlpage_social_preview.webp" />
@@ -1121,4 +1121,4 @@
11211121
</footer>
11221122
</body>
11231123

1124-
</html>
1124+
</html>

0 commit comments

Comments
 (0)