WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 2ead81f

Browse files
JavierMtzRdzJavierMtzRdz
authored
docs: update website design (#1699)
* docs: update website design * Improved colour palette to match delphidocs style. * Increase content area width and sdebar width (fixed #1516). * Added callout formatting for notes, warnings, and alerts. * Enabled tab formatting for code/content switching. * Added a hidden tabs_demo.md page to demonstrate how to use blockquotes, callouts, and tabs. * docs: adjust SCSS and tans_demo searchability * Change link colour from cmu-red to skibo-red * Adjust navigation bar colour and hover/active SCSS * Exclude tans_demo.md from being searchable.
1 parent c9820e2 commit 2ead81f

File tree

7 files changed

+490
-3
lines changed

7 files changed

+490
-3
lines changed

‎docs/_config.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,5 @@ favicon_ico: "favicon.ico"
5757
# - vendor/cache/
5858
# - vendor/gems/
5959
# - vendor/ruby/
60+
61+
color_scheme: delphi

‎docs/_includes/head_custom.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
2-
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
3-
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
1+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
2+
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
3+
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
4+
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
5+
crossorigin="anonymous"></script>
6+
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
7+
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
48
onload="renderMathInElement(document.getElementById('main-content'));"></script>
9+
<script src="{{ '/assets/js/tabs.js' | relative_url }}"></script>

‎docs/_sass/color_schemes/delphi.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Delphi Color Scheme - Delphidocs Style
2+
// Blue headings/title, Red links
3+
4+
// Core Colors
5+
$cmu-red: #C41230;
6+
$skibo-red: #941120;
7+
$berkley-blue: #002676;
8+
$fg: #373c46;
9+
$bg: #fff;
10+
$border: #e1e4e8;
11+
12+
// Base Colors
13+
$body-background-color: $bg;
14+
$body-text-color: $fg;
15+
$headings-color: $berkley-blue;
16+
$link-color: $skibo-red;
17+
$border-color: $border;
18+
19+
// Sidebar and Navigation
20+
$site-title-color: $berkley-blue;
21+
$nav-list-link-color: $fg;
22+
$nav-list-link-hover-color: $berkley-blue;
23+
$nav-list-link-active-color: $berkley-blue;
24+
$nav-child-link-color: $fg;
25+
26+
// Code
27+
$code-background-color: #f6f8fa;
28+
$code-text-color: $fg;
29+
30+
// Layout Configuration
31+
// Sidebar width
32+
$nav-width: 22rem;
33+
$nav-width-md: 22rem;
34+
35+
// Content area width
36+
$content-width: 100rem;

‎docs/_sass/custom/custom.scss‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
2+
3+
// Import Custom Tabs Styles
4+
@import "custom/tabs";
5+
6+
body {
7+
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
8+
color: var(--body-text);
9+
}
10+
11+
.site-header {
12+
transition: all 0.3s ease;
13+
border-bottom: none !important;
14+
background-color: var(--body-background) !important;
15+
font-family: 'Source Serif Pro', serif !important;
16+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
17+
}
18+
19+
.site-title {
20+
font-family: 'Source Serif Pro', serif !important;
21+
font-weight: 600;
22+
color: #002676 !important;
23+
white-space: nowrap !important;
24+
}
25+
26+
.main-content h1 {
27+
border-bottom: none;
28+
line-height: 1.15;
29+
margin: 2.75rem 0 1.05rem;
30+
}
31+
32+
h1,
33+
h2,
34+
h3,
35+
h4,
36+
h5,
37+
h6 {
38+
font-family: 'Source Serif Pro', serif !important;
39+
color: #002676 !important;
40+
line-height: 1.15;
41+
margin: 2.75rem 0 1.05rem;
42+
}
43+
44+
.nav-list-item {
45+
margin-bottom: 0.25rem;
46+
}
47+
48+
.nav-list-link {
49+
padding: 0.25rem 0.5rem;
50+
border-radius: 4px;
51+
transition: background-color 0.2s, color 0.2s;
52+
opacity: 0.9;
53+
54+
&.active {
55+
font-weight: 600;
56+
color: #941120;
57+
opacity: 1;
58+
}
59+
60+
&:hover {
61+
color: #941120;
62+
font-weight: 600;
63+
text-decoration: none;
64+
opacity: 1;
65+
}
66+
}
67+
68+
.list-unstyled li {
69+
margin-bottom: 0.5rem;
70+
}
71+
72+
.dev-status .list-unstyled li {
73+
margin-bottom: 0.1rem;
74+
}
75+
76+
.row>main {
77+
margin-bottom: 56px;
78+
}
79+
80+
footer {
81+
border-top: 1px solid rgba(0, 0, 0, 0.05);
82+
margin: 0 0 1rem 0;
83+
font-size: 0.8rem;
84+
color: var(--body-text);
85+
padding-top: 1rem;
86+
}
87+
88+
.site-footer-credits {
89+
display: none !important;
90+
}
91+
92+
table {
93+
width: 100%;
94+
border-collapse: collapse;
95+
margin-bottom: 1.5rem;
96+
97+
th,
98+
td {
99+
padding: 0.75rem;
100+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
101+
}
102+
103+
th {
104+
text-align: left;
105+
font-weight: 600;
106+
color: #002676;
107+
border-bottom: 2px solid rgba(0, 38, 118, 0.2);
108+
}
109+
}
110+
111+
code {
112+
background-color: rgba(0, 0, 0, 0.04);
113+
padding: 0.2em 0.4em;
114+
border-radius: 3px;
115+
font-size: 85%;
116+
}
117+
118+
pre code {
119+
background-color: transparent;
120+
padding: 0;
121+
}
122+
123+
.note,
124+
.warning,
125+
.important,
126+
.tip,
127+
.caution {
128+
padding: 1rem;
129+
margin: 1.5rem 0;
130+
border-left: 4px solid;
131+
border-radius: 4px;
132+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
133+
134+
>p {
135+
margin: 0;
136+
}
137+
138+
>p:first-child strong:first-child {
139+
display: block;
140+
margin-bottom: 0.5rem;
141+
font-size: 0.9rem;
142+
text-transform: uppercase;
143+
letter-spacing: 0.05em;
144+
}
145+
}
146+
147+
.note {
148+
background-color: rgba(0, 123, 192, 0.05);
149+
border-left-color: #007BC0;
150+
color: #005F95;
151+
152+
>p:first-child strong:first-child {
153+
color: #005F95;
154+
}
155+
}
156+
157+
.important {
158+
background-color: rgba(0, 38, 118, 0.05);
159+
border-left-color: #002676;
160+
color: #002676;
161+
162+
>p:first-child strong:first-child {
163+
color: #002676;
164+
}
165+
}
166+
167+
.warning,
168+
.caution {
169+
background-color: rgba(196, 18, 48, 0.03);
170+
border-left-color: #C41230;
171+
color: #941120;
172+
173+
>p:first-child strong:first-child {
174+
color: #941120;
175+
}
176+
}
177+
178+
179+
.tip {
180+
background-color: rgba(54, 143, 51, 0.05);
181+
border-left-color: #368f33;
182+
color: #1b5e20;
183+
184+
>p:first-child strong:first-child {
185+
color: #2e7d32;
186+
}
187+
}
188+
189+
.note>blockquote,
190+
.warning>blockquote,
191+
.important>blockquote,
192+
.tip>blockquote,
193+
.caution>blockquote {
194+
border-left: none;
195+
padding-left: 0;
196+
margin-left: 0;
197+
color: inherit;
198+
}

‎docs/_sass/custom/tabs.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Code Tabs Styling
2+
.code-tabs {
3+
margin-bottom: 1.5rem;
4+
border: 1px solid var(--border-color);
5+
border-radius: 4px;
6+
overflow: hidden;
7+
8+
.tab-header {
9+
display: flex;
10+
background-color: #f6f8fa;
11+
border-bottom: 1px solid var(--border-color);
12+
13+
button {
14+
background: none;
15+
border: none;
16+
padding: 0.75rem 1.5rem;
17+
cursor: pointer;
18+
font-family: 'Source Sans Pro', sans-serif;
19+
font-size: 0.9rem;
20+
color: var(--body-text);
21+
border-right: 1px solid transparent;
22+
border-bottom: 2px solid transparent;
23+
transition: all 0.2s ease;
24+
25+
&:hover {
26+
color: #005F95;
27+
background-color: rgba(0, 123, 192, 0.05);
28+
}
29+
30+
&.active {
31+
color: #002676;
32+
font-weight: 600;
33+
background-color: #fff;
34+
border-bottom: 2px solid #002676;
35+
border-right: 1px solid var(--border-color);
36+
margin-bottom: -1px;
37+
}
38+
39+
&:focus {
40+
outline: none;
41+
}
42+
}
43+
}
44+
45+
.tab-content {
46+
display: none;
47+
padding: 1rem;
48+
background-color: #fff;
49+
50+
&.active {
51+
display: block;
52+
}
53+
54+
div[class*="language-"] {
55+
margin: 0;
56+
border-radius: 0;
57+
}
58+
59+
pre {
60+
margin: 0;
61+
border: none;
62+
}
63+
}
64+
}

‎docs/assets/js/tabs.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Simple Tab Switching Logic
2+
function activateTab(clickedButton, container) {
3+
const buttons = container.querySelectorAll('.tab-header button');
4+
const contents = container.querySelectorAll('.tab-content');
5+
6+
// Deactivate all
7+
buttons.forEach(btn => btn.classList.remove('active'));
8+
contents.forEach(content => content.classList.remove('active'));
9+
10+
// Activate clicked button
11+
clickedButton.classList.add('active');
12+
13+
// Activate corresponding content
14+
const tabId = clickedButton.dataset.tab;
15+
const content = container.querySelector(`.tab-content[data-tab="${tabId}"]`);
16+
if (content) {
17+
content.classList.add('active');
18+
}
19+
}
20+
21+
function initTabContainer(container) {
22+
const buttons = container.querySelectorAll('.tab-header button');
23+
buttons.forEach(button => {
24+
button.addEventListener('click', () => activateTab(button, container));
25+
});
26+
}
27+
28+
document.addEventListener('DOMContentLoaded', () => {
29+
const tabContainers = document.querySelectorAll('.code-tabs');
30+
tabContainers.forEach(initTabContainer);
31+
});

0 commit comments

Comments
 (0)