Skip to content

Commit cc2becc

Browse files
darthcoderclaude
darthcoder
and
claude
committed
add CSS assets and update MathJax to v3 CDN
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent ff1f31a commit cc2becc

4 files changed

Lines changed: 751 additions & 1 deletion

File tree

‎_includes/lib/mathjax.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
<script>
2+
MathJax = {
3+
tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }
4+
};
5+
</script>
16
<script type="text/javascript" async
2-
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
7+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
38
</script>

‎public/css/hyde.css‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
/*
2+
* __ __
3+
* /\ \ /\ \
4+
* \ \ \___ __ __ \_\ \ __
5+
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
6+
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
7+
* \ \_\ \_\/`____ \ \___,_\ \____\
8+
* \/_/\/_/`/___/> \/__,_ /\/____/
9+
* /\___/
10+
* \/__/
11+
*
12+
* Designed, built, and released under MIT license by @mdo. Learn more at
13+
* https://github.com/poole/hyde.
14+
*/
15+
16+
17+
/*
18+
* Contents
19+
*
20+
* Global resets
21+
* Sidebar
22+
* Container
23+
* Reverse layout
24+
* Themes
25+
*/
26+
27+
28+
/*
29+
* Global resets
30+
*
31+
* Update the foundational and global aspects of the page.
32+
*/
33+
34+
html {
35+
font-family: "PT Sans", Helvetica, Arial, sans-serif;
36+
}
37+
@media (min-width: 48em) {
38+
html {
39+
font-size: 16px;
40+
}
41+
}
42+
@media (min-width: 58em) {
43+
html {
44+
font-size: 20px;
45+
}
46+
}
47+
48+
49+
/*
50+
* Sidebar
51+
*
52+
* Flexible banner for housing site name, intro, and "footer" content. Starts
53+
* out above content in mobile and later moves to the side with wider viewports.
54+
*/
55+
56+
.sidebar {
57+
text-align: center;
58+
padding: 2rem 1rem;
59+
color: rgba(255,255,255,.5);
60+
background-color: #202020;
61+
}
62+
@media (min-width: 48em) {
63+
.sidebar {
64+
position: fixed;
65+
top: 0;
66+
left: 0;
67+
bottom: 0;
68+
width: 18rem;
69+
text-align: left;
70+
}
71+
}
72+
73+
/* Sidebar links */
74+
.sidebar a {
75+
color: #fff;
76+
}
77+
78+
/* About section */
79+
.sidebar-about h1 {
80+
color: #fff;
81+
margin-top: 0;
82+
font-family: "Abril Fatface", serif;
83+
font-size: 3.25rem;
84+
}
85+
86+
/* Sidebar nav */
87+
.sidebar-nav {
88+
margin-bottom: 1rem;
89+
}
90+
.sidebar-nav-item {
91+
display: block;
92+
line-height: 1.75;
93+
}
94+
a.sidebar-nav-item:hover,
95+
a.sidebar-nav-item:focus {
96+
text-decoration: underline;
97+
}
98+
.sidebar-nav-item.active {
99+
font-weight: bold;
100+
}
101+
102+
/* Sticky sidebar
103+
*
104+
* Add the `sidebar-sticky` class to the sidebar's container to affix it the
105+
* contents to the bottom of the sidebar in tablets and up.
106+
*/
107+
108+
@media (min-width: 48em) {
109+
.sidebar-sticky {
110+
position: absolute;
111+
right: 1rem;
112+
bottom: 1rem;
113+
left: 1rem;
114+
}
115+
}
116+
117+
118+
/* Container
119+
*
120+
* Align the contents of the site above the proper threshold with some margin-fu
121+
* with a 25%-wide `.sidebar`.
122+
*/
123+
124+
.content {
125+
padding-top: 4rem;
126+
padding-bottom: 4rem;
127+
}
128+
129+
@media (min-width: 48em) {
130+
.content {
131+
max-width: 38rem;
132+
margin-left: 20rem;
133+
margin-right: 2rem;
134+
}
135+
}
136+
137+
@media (min-width: 64em) {
138+
.content {
139+
margin-left: 22rem;
140+
margin-right: 4rem;
141+
}
142+
}
143+
144+
145+
/*
146+
* Reverse layout
147+
*
148+
* Flip the orientation of the page by placing the `.sidebar` on the right.
149+
*/
150+
151+
@media (min-width: 48em) {
152+
.layout-reverse .sidebar {
153+
left: auto;
154+
right: 0;
155+
}
156+
.layout-reverse .content {
157+
margin-left: 2rem;
158+
margin-right: 20rem;
159+
}
160+
}
161+
162+
@media (min-width: 64em) {
163+
.layout-reverse .content {
164+
margin-left: 4rem;
165+
margin-right: 22rem;
166+
}
167+
}
168+
169+
170+
171+
/*
172+
* Themes
173+
*
174+
* As of v1.1, Hyde includes optional themes to color the sidebar and links
175+
* within blog posts. To use, add the class of your choosing to the `body`.
176+
*/
177+
178+
/* Base16 (http://chriskempson.github.io/base16/#default) */
179+
180+
/* Red */
181+
.theme-base-08 .sidebar {
182+
background-color: #ac4142;
183+
}
184+
.theme-base-08 .content a,
185+
.theme-base-08 .related-posts li a:hover {
186+
color: #ac4142;
187+
}
188+
189+
/* Orange */
190+
.theme-base-09 .sidebar {
191+
background-color: #d28445;
192+
}
193+
.theme-base-09 .content a,
194+
.theme-base-09 .related-posts li a:hover {
195+
color: #d28445;
196+
}
197+
198+
/* Yellow */
199+
.theme-base-0a .sidebar {
200+
background-color: #f4bf75;
201+
}
202+
.theme-base-0a .content a,
203+
.theme-base-0a .related-posts li a:hover {
204+
color: #f4bf75;
205+
}
206+
207+
/* Green */
208+
.theme-base-0b .sidebar {
209+
background-color: #90a959;
210+
}
211+
.theme-base-0b .content a,
212+
.theme-base-0b .related-posts li a:hover {
213+
color: #90a959;
214+
}
215+
216+
/* Cyan */
217+
.theme-base-0c .sidebar {
218+
background-color: #75b5aa;
219+
}
220+
.theme-base-0c .content a,
221+
.theme-base-0c .related-posts li a:hover {
222+
color: #75b5aa;
223+
}
224+
225+
/* Blue */
226+
.theme-base-0d .sidebar {
227+
background-color: #6a9fb5;
228+
}
229+
.theme-base-0d .content a,
230+
.theme-base-0d .related-posts li a:hover {
231+
color: #6a9fb5;
232+
}
233+
234+
/* Magenta */
235+
.theme-base-0e .sidebar {
236+
background-color: #aa759f;
237+
}
238+
.theme-base-0e .content a,
239+
.theme-base-0e .related-posts li a:hover {
240+
color: #aa759f;
241+
}
242+
243+
/* Brown */
244+
.theme-base-0f .sidebar {
245+
background-color: #8f5536;
246+
}
247+
.theme-base-0f .content a,
248+
.theme-base-0f .related-posts li a:hover {
249+
color: #8f5536;
250+
}

0 commit comments

Comments
 (0)