Skip to content

Commit bc0bd2c

Browse files
DamonsJDamonsJ
committed
feat: add tufte css theme
1 parent 485e22f commit bc0bd2c

File tree

11 files changed

+572
-0
lines changed

11 files changed

+572
-0
lines changed

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@ Run the test yourself: [Google Lighthouse PageSpeed Insights](https://pagespeed.
241241
- [The iconic style of Distill](#the-iconic-style-of-distill)
242242
- [Full support for math \& code](#full-support-for-math--code)
243243
- [Photos, Audio, Video and more](#photos-audio-video-and-more)
244+
- [Sidenote,Marginnote and MarginFigure](#sidenotemarginnote-and-marginfigure)
244245
- [Other features](#other-features)
245246
- [GitHub's repositories and user stats](#githubs-repositories-and-user-stats)
246247
- [Theming](#theming)
@@ -349,6 +350,14 @@ Photo formatting is made simple using [Bootstrap's grid system](https://getboots
349350
</a>
350351
</p>
351352

353+
#### Sidenote,Marginnote and MarginFigure
354+
355+
Thanks for the excellent theme [tufte](https://github.com/edwardtufte/tufte-css) css and the [tufte jeklly theme](https://github.com/clayh53/tufte-jekyll).
356+
357+
The sidenote is useful when you cite something.
358+
359+
You can refer the post(2025-03-15-tufte-style-jekyll-blog) to get how to add sidenotes and marginfigures.
360+
352361
---
353362

354363
### Other features

‎_includes/head.liquid

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<!-- Fonts & Icons -->
2525
<link defer rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
2626
<link defer rel="stylesheet" href="{{ '/assets/css/scholar-icons.css' | relative_url | bust_file_cache }}">
27+
<link defer rel="stylesheet" href="{{ '/assets/css/tufte-note.css' | relative_url | bust_file_cache }}">
2728
<link
2829
defer
2930
rel="stylesheet"

‎_plugins/margin_figure.rb

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Liquid tag 'marginfigure' used to add image data that fits
2+
## in the right margin column area of the layout
3+
## Usage {% marginfigure 'margin-id-whatever' 'path/to/image' 'This is the caption' %}
4+
#
5+
module Jekyll
6+
class RenderMarginFigureTag < Liquid::Tag
7+
8+
require "shellwords"
9+
10+
def initialize(tag_name, text, tokens)
11+
super
12+
@text = text.shellsplit
13+
end
14+
15+
def render(context)
16+
baseurl = context.registers[:site].config['baseurl']
17+
if @text[1].start_with?('http://', 'https://', '//')
18+
"<label for='#{@text[0]}' class='margin-toggle'>&#8853;</label>"+
19+
"<input type='checkbox' id='#{@text[0]}' class='margin-toggle'/>"+
20+
"<span class='marginnote'><img class='fullwidth' src='#{@text[1]}'/><br>#{@text[2]}</span>"
21+
else
22+
"<label for='#{@text[0]}' class='margin-toggle'>&#8853;</label>"+
23+
"<input type='checkbox' id='#{@text[0]}' class='margin-toggle'/>"+
24+
"<span class='marginnote'><img class='fullwidth' src='#{baseurl}/#{@text[1]}'/><br>#{@text[2]}</span>"
25+
end
26+
end
27+
end
28+
end
29+
30+
Liquid::Template.register_tag('marginfigure', Jekyll::RenderMarginFigureTag)

‎_plugins/marginnote.rb

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module Jekyll
2+
class RenderMarginNoteTag < Liquid::Tag
3+
4+
require "shellwords"
5+
6+
def initialize(tag_name, text, tokens)
7+
super
8+
@text = text.shellsplit
9+
end
10+
11+
def render(context)
12+
"<label for='#{@text[0]}' class='margin-toggle'> &#8853;</label><input type='checkbox' id='#{@text[0]}' class='margin-toggle'/><span class='marginnote'>#{@text[1]} </span>"
13+
end
14+
end
15+
end
16+
17+
Liquid::Template.register_tag('marginnote', Jekyll::RenderMarginNoteTag)
18+

‎_plugins/newthought.rb

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Newthought tag will render anything in the tag with small caps
2+
## Usage {% newthought Your text string here} will render a span
3+
## YOUR TEXT STRING HERE (sort of, you know, small caps) if you are using the tufte.css file
4+
5+
module Jekyll
6+
class RenderNewThoughtTag < Liquid::Tag
7+
8+
require "shellwords"
9+
10+
def initialize(tag_name, text, tokens)
11+
super
12+
@text = text.shellsplit
13+
end
14+
15+
16+
def render(context)
17+
"<span class='newthought'>#{@text[0]}</span> "
18+
end
19+
end
20+
end
21+
22+
Liquid::Template.register_tag('newthought', Jekyll::RenderNewThoughtTag)

‎_plugins/sidenote.rb

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module Jekyll
2+
class RenderSideNoteTag < Liquid::Tag
3+
4+
require "shellwords"
5+
6+
def initialize(tag_name, text, tokens)
7+
super
8+
@text = text.shellsplit
9+
end
10+
11+
def render(context)
12+
"<label for='#{@text[0]}' class='margin-toggle sidenote-number'></label><input type='checkbox' id='#{@text[0]}' class='margin-toggle'/><span class='sidenote'>#{@text[1]} </span>"
13+
end
14+
end
15+
end
16+
17+
Liquid::Template.register_tag('sidenote', Jekyll::RenderSideNoteTag)
18+

‎_posts/2025-03-15-tufte-style-jekyll-blog.md

Lines changed: 346 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/tufte-note.css

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@charset "UTF-8";
2+
/*****************************************************************************/
3+
/*
4+
/* Tufte Jekyll blog theme
5+
/* Based on Tufte CSS by Dave Liepmann ( https://github.com/edwardtufte/tufte-css )
6+
/*
7+
/* The README.md will show you how to set up your site along with other goodies
8+
/*****************************************************************************/
9+
@font-face {
10+
font-family: "Comic Mono";
11+
src: url("/assets/fonts/ComicMono.ttf") format("truetype");
12+
font-weight: normal;
13+
font-style: normal;
14+
}
15+
16+
/* This file contains all the constants for colors and font styles */
17+
/** Syntax highlighting styles */
18+
body {
19+
counter-reset: sidenote-counter;
20+
}
21+
.sidenote,
22+
.marginnote {
23+
float: right;
24+
clear: right;
25+
margin-right: -55%;
26+
width: 50%;
27+
margin-top: 0;
28+
margin-bottom: 1.96rem;
29+
font-size: 1rem;
30+
line-height: 1.96;
31+
vertical-align: baseline;
32+
position: relative;
33+
}
34+
35+
li .sidenote,
36+
li .marginnote {
37+
margin-right: -80%;
38+
}
39+
40+
blockquote .sidenote,
41+
blockquote .marginnote {
42+
margin-right: -79%;
43+
}
44+
45+
.sidenote-number {
46+
counter-increment: sidenote-counter;
47+
}
48+
49+
.sidenote-number:after,
50+
.sidenote:before {
51+
content: counter(sidenote-counter) " ";
52+
font-family: et-bembo-roman-old-style;
53+
color: #a00000;
54+
position: relative;
55+
vertical-align: baseline;
56+
}
57+
58+
.sidenote-number:after {
59+
content: counter(sidenote-counter);
60+
font-size: 1rem;
61+
top: -0.5rem;
62+
left: 0.1rem;
63+
}
64+
65+
.sidenote:before {
66+
content: counter(sidenote-counter) ". ";
67+
color: #a00000;
68+
top: 0rem;
69+
}
70+
71+
.marginnote code,
72+
.sidenote code {
73+
font-size: 1rem;
74+
}
75+
76+
span.newthought {
77+
font-variant: small-caps;
78+
font-size: 1.2em;
79+
letter-spacing: 0.05rem;
80+
}
81+
82+
.fullwidth,
83+
li.listing div {
84+
max-width: 90%;
85+
}
86+
87+
.full-width .sidenote,
88+
.full-width .sidenote-number,
89+
.full-width .marginnote {
90+
display: none;
91+
}
92+
93+
input.margin-toggle {
94+
display: none;
95+
}
96+
97+
label.sidenote-number {
98+
display: inline;
99+
}
100+
101+
label.margin-toggle:not(.sidenote-number) {
102+
display: none;
103+
}
104+
105+
@media (max-width: 760px) {
106+
label.margin-toggle:not(.sidenote-number) {
107+
display: inline;
108+
color: #a00000;
109+
}
110+
.sidenote,
111+
.marginnote {
112+
display: none;
113+
}
114+
.margin-toggle:checked + .sidenote,
115+
.margin-toggle:checked + .marginnote {
116+
display: block;
117+
float: left;
118+
left: 1rem;
119+
clear: both;
120+
width: 95%;
121+
margin: 1rem 2.5%;
122+
vertical-align: baseline;
123+
position: relative;
124+
}
125+
label {
126+
cursor: pointer;
127+
}
128+
}

‎assets/img/exports-imports.png

3.6 MB
Loading

‎assets/img/napoleons-march.png

1.19 MB
Loading

0 commit comments

Comments
 (0)