Skip to content

Commit 161a142

Browse files
JavierMtzRdzJavierMtzRdz
committed
docs: improve site style
1 parent fd84329 commit 161a142

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
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/_sass/color_schemes/delphi.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Delphi Color Scheme - Delphidocs Style
2+
// Blue headings/title, Red links
3+
4+
// Core Colors
5+
$cmu-red: #C41230;
6+
$berkley-blue: #002676; // Dark Blue from screenshot
7+
$fg: #172431; // Dark Gray/Black
8+
$bg: #fff;
9+
$border: #e1e4e8;
10+
11+
// Base Colors
12+
$body-background-color: $bg;
13+
$body-text-color: $fg;
14+
$headings-color: $berkley-blue; // Blue headings
15+
$link-color: $cmu-red; // Red links
16+
$border-color: $border;
17+
18+
// Sidebar and Navigation
19+
$site-title-color: $berkley-blue; // Blue site title
20+
$nav-list-link-color: $fg;
21+
$nav-list-link-hover-color: $berkley-blue;
22+
$nav-list-link-active-color: $berkley-blue;
23+
$nav-child-link-color: $fg;
24+
25+
// Code
26+
$code-background-color: #f6f8fa;
27+
$code-text-color: $fg;

‎docs/_sass/custom/custom.scss‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
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+
body {
4+
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
5+
color: var(--body-text);
6+
}
7+
8+
.site-header {
9+
transition: all 0.3s ease;
10+
border-bottom: none !important;
11+
/* Removed hard blue line */
12+
background-color: var(--body-background) !important;
13+
font-family: 'Source Serif Pro', serif !important;
14+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
15+
/* Better, softer shadow */
16+
}
17+
18+
.site-title {
19+
font-family: 'Source Serif Pro', serif !important;
20+
font-weight: 600;
21+
color: #002676 !important;
22+
white-space: nowrap !important;
23+
}
24+
25+
.main-content h1 {
26+
border-bottom: none;
27+
line-height: 1.15;
28+
margin: 2.75rem 0 1.05rem;
29+
}
30+
31+
h1,
32+
h2,
33+
h3,
34+
h4,
35+
h5,
36+
h6,
37+
h7 {
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+
aside {
45+
padding-top: 1.5rem;
46+
border-left: none;
47+
/* Removed blue line on the left */
48+
49+
h2 {
50+
margin-top: 1.2rem;
51+
font-size: 1.25rem;
52+
font-family: 'Source Serif Pro', serif;
53+
color: #002676;
54+
}
55+
56+
.roles {
57+
color: var(--body-text);
58+
opacity: 0.8;
59+
}
60+
61+
.nav-list-item {
62+
margin-bottom: 0.25rem;
63+
}
64+
65+
.nav-list-link {
66+
padding: 0.25rem 0.5rem;
67+
border-radius: 4px;
68+
transition: background-color 0.2s, color 0.2s;
69+
70+
&:hover {
71+
background-color: rgba(0, 38, 118, 0.05);
72+
/* Very subtle blue blend */
73+
color: #C41230;
74+
text-decoration: none;
75+
}
76+
77+
&.active {
78+
font-weight: 600;
79+
color: #C41230;
80+
background-color: rgba(196, 18, 48, 0.03);
81+
/* Subtle red blend for active */
82+
}
83+
}
84+
85+
.list-unstyled li {
86+
margin-bottom: 0.5rem;
87+
}
88+
89+
.dev-status .list-unstyled li {
90+
margin-bottom: 0.1rem;
91+
}
92+
}
93+
94+
@media (max-width: 576px) {
95+
aside {
96+
margin: 0.5rem;
97+
width: calc(100vw - 1rem);
98+
background-color: #f8f9fa;
99+
border-radius: 4px;
100+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
101+
102+
h2:first-child {
103+
margin-top: 1rem;
104+
}
105+
}
106+
}
107+
108+
.row>main {
109+
margin-bottom: 56px;
110+
}
111+
112+
footer {
113+
border-top: 1px solid rgba(0, 0, 0, 0.05);
114+
/* Subtle blend instead of hard line */
115+
margin: 0 0 1rem 0;
116+
font-size: 0.8rem;
117+
color: var(--body-text);
118+
padding-top: 1rem;
119+
}
120+
121+
.site-footer-credits {
122+
display: none !important;
123+
}
124+
125+
table {
126+
width: 100%;
127+
border-collapse: collapse;
128+
margin-bottom: 1.5rem;
129+
130+
th,
131+
td {
132+
padding: 0.75rem;
133+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
134+
/* Softer borders */
135+
}
136+
137+
th {
138+
text-align: left;
139+
font-weight: 600;
140+
color: #002676;
141+
border-bottom: 2px solid rgba(0, 38, 118, 0.2);
142+
/* Softer header underline */
143+
}
144+
}
145+
146+
code {
147+
background-color: rgba(0, 0, 0, 0.04);
148+
/* Blended background */
149+
padding: 0.2em 0.4em;
150+
border-radius: 3px;
151+
font-size: 85%;
152+
}
153+
154+
pre code {
155+
background-color: transparent;
156+
padding: 0;
157+
}
158+
159+
/* Callouts - softer blend */
160+
.note,
161+
.warning,
162+
.important,
163+
.tip,
164+
.caution {
165+
padding: 1rem;
166+
margin: 1.5rem 0;
167+
border-left: 4px solid;
168+
border-radius: 4px;
169+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
170+
/* Subtle lift */
171+
172+
>p {
173+
margin: 0;
174+
}
175+
176+
>p:first-child strong:first-child {
177+
display: block;
178+
margin-bottom: 0.5rem;
179+
font-size: 0.9rem;
180+
text-transform: uppercase;
181+
letter-spacing: 0.05em;
182+
}
183+
}
184+
185+
.note,
186+
.important {
187+
background-color: rgba(0, 38, 118, 0.03);
188+
/* Blended Blue */
189+
border-left-color: #002676;
190+
color: #002676;
191+
192+
>p:first-child strong:first-child {
193+
color: #002676;
194+
}
195+
}
196+
197+
.warning,
198+
.caution {
199+
background-color: rgba(196, 18, 48, 0.03);
200+
/* Blended Red */
201+
border-left-color: #C41230;
202+
color: #941120;
203+
204+
>p:first-child strong:first-child {
205+
color: #C41230;
206+
}
207+
}
208+
209+
.tip {
210+
background-color: rgba(54, 143, 51, 0.05);
211+
/* Blended Green */
212+
border-left-color: #368f33;
213+
color: #1b5e20;
214+
215+
>p:first-child strong:first-child {
216+
color: #2e7d32;
217+
}
218+
}
219+
220+
.note>blockquote,
221+
.warning>blockquote,
222+
.important>blockquote,
223+
.tip>blockquote,
224+
.caution>blockquote {
225+
border-left: none;
226+
padding-left: 0;
227+
margin-left: 0;
228+
color: inherit;
229+
}

0 commit comments

Comments
 (0)