Skip to content

Commit 95b584a

Browse files
sideshowbarkersideshowbarker
committed
docs: Add stuff for styling the Pages site
1 parent 403bb05 commit 95b584a

14 files changed

+280
-0
lines changed

‎.gitattributes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
_config.yml linguist-documentation
2+
_layouts/** linguist-documentation
3+
assets/** linguist-documentation

‎_config.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
markdown: kramdown
2+
remote_theme: pages-themes/[email protected]

‎_layouts/default.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ site.lang | default: "en-US" }}">
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="{{ '/assets/css/tocbot.css' | relative_url }}">
8+
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
9+
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/apple-touch-icon.png' | relative_url }}">
10+
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/favicon-32x32.png' | relative_url }}">
11+
<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/images/favicon-16x16.png' | relative_url }}">
12+
<link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}" type="image/x-icon" />
13+
<link rel="manifest" href="{{ '/assets/site.webmanifest' | relative_url }}">
14+
{% include head-custom.html %}
15+
16+
{% seo %}
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<nav class="toc toc-right js-toc relative z-1 transition--300 absolute pa4 pt5 is-position-fixed"></nav>
22+
<section id="main_content" class="js-toc-content">
23+
{{ content }}
24+
</section>
25+
</div>
26+
</body>
27+
<script src="{{ '/assets/js/anchor.min.js' | relative_url }}"></script>
28+
<script src="{{ '/assets/js/tocbot.min.js' | relative_url }}"></script>
29+
<script src="{{ '/assets/js/script.js' | relative_url }}"></script>
30+
</html>

‎assets/css/style.scss

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
---
3+
4+
@import "{{ site.theme }}";
5+
body {
6+
font-size: 16px;
7+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
8+
position: relative;
9+
margin-bottom: 500px;
10+
}
11+
@media print {
12+
.toc {
13+
display: none;
14+
}
15+
#main_content, section {
16+
max-width: none !important;
17+
width: 1000px !important;
18+
}
19+
}
20+
#footer {
21+
font-size: 13px;
22+
}
23+
#sticky {
24+
display: none;
25+
}
26+
@media (max-width: 600px) {
27+
.mobile {
28+
display: block;
29+
}
30+
#sticky {
31+
display: block;
32+
position: fixed;
33+
bottom: 0;
34+
left: 0;
35+
height: 60px;
36+
width: 100%;
37+
padding-top: 12px;
38+
padding-bottom: 60px;
39+
background: rgb(106, 106, 94);
40+
text-align: center;
41+
margin-bottom: 0;
42+
font-size: 14px;
43+
}
44+
}
45+
.close-button {
46+
border: none;
47+
display: inline-block;
48+
padding-right: 10px;
49+
padding-bottom: 0;
50+
vertical-align: middle;
51+
overflow: hidden;
52+
text-decoration: none;
53+
color: inherit;
54+
background-color: inherit;
55+
text-align: center;
56+
cursor: pointer;
57+
white-space: nowrap;
58+
font-size: 20px !important;
59+
}
60+
.topright {
61+
position: absolute;
62+
right: 0;
63+
top: 0;
64+
}
65+
.container {
66+
min-height: 100%;
67+
margin-left: auto;
68+
margin-bottom: 20px;
69+
}
70+
@media (max-width: 1310px) {
71+
.container {
72+
width: 60%;
73+
max-width: 90%;
74+
margin-left: 50px;
75+
}
76+
}
77+
@media (max-width: 1000px) {
78+
.container {
79+
width: 50%;
80+
margin-left: 30px;
81+
}
82+
}
83+
@media (max-width: 800px) {
84+
.container {
85+
width: 40%;
86+
}
87+
}
88+
@media (max-width: 600px) {
89+
.container {
90+
width: 90%;
91+
}
92+
.toc {
93+
display: none !important;
94+
}
95+
}
96+
.toc.toc-right {
97+
right: calc((100% - 48rem - 4rem)/2);
98+
}
99+
.toc.toc-right {
100+
right: 0;
101+
}
102+
.toc {
103+
height: 100%;
104+
width: 331px;
105+
transform: translateX(0);
106+
}
107+
.transition--300 {
108+
transition: all 300ms ease-in-out;
109+
}
110+
.is-position-fixed {
111+
position: fixed !important;
112+
top: 0;
113+
}
114+
.z-1 {
115+
z-index: 1;
116+
}
117+
.pt5 {
118+
padding-top: 4rem;
119+
}
120+
.pa4 {
121+
padding: 2rem;
122+
}
123+
.absolute {
124+
position: absolute;
125+
}
126+
.relative {
127+
position: relative;
128+
}
129+
article, aside, footer, header, nav, section {
130+
display: block;
131+
}
132+
* {
133+
box-sizing: border-box;
134+
}
135+
ul li {
136+
list-style-type: "\00BB " !important;
137+
list-style-image: none !important;
138+
padding-left: 3px;
139+
}
140+
.toc > .toc-list:first-child > li:first-child {
141+
list-style: none !important;
142+
}
143+
.toc-list {
144+
padding-left: 16px !important;
145+
}
146+
.is-active-link::before {
147+
color: rgb(184, 233, 90) !important;
148+
}
149+
.is-active-link {
150+
color: rgb(184, 233, 90) !important;
151+
text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px, rgba(86, 111, 15, 0.1) 0px 0px 5px, rgba(86, 111, 15, 0.1) 0px 0px 10px !important;
152+
}
153+
section {
154+
max-width: 859px;
155+
border-bottom: 1px dashed #b5e853 !important;
156+
padding-bottom: 16px;
157+
margin-bottom: 16px !important;
158+
}
159+
160+
#main_content h1 {
161+
font-size: 27px !important;
162+
}
163+
164+
h1 {
165+
margin-top: 32px;
166+
border-bottom: 1px dashed #b5e853;
167+
padding-bottom: 16px;
168+
}
169+
h2, h3, h4 {
170+
margin: 60px 0 6px;
171+
}
172+
h3 {
173+
margin-top: 32px;
174+
}
175+
#main_content h4 {
176+
font-size: 16px !important;
177+
margin-top: 20px;
178+
}
179+
#why-not-just-wds + p + h4 {
180+
font-size: 12.8px !important;
181+
}
182+
h2 + h2, h3 + h3, h4 + h4 {
183+
margin-top: 0px !important;
184+
}
185+
h2 + p, h3 + p, h4 + p {
186+
margin-top: 8px;
187+
}
188+
h1, h2, h3 {
189+
line-height: 1.1;
190+
}
191+
blockquote {
192+
margin-left: 3px;
193+
border-left: .25em solid rgb(184, 233, 90) !important;
194+
border-left-color: rgb(184, 233, 90) !important;
195+
}
196+
// blockquote p:first-of-type::first-line {
197+
// color: magenta;
198+
// }
199+
a {
200+
text-decoration: none;
201+
}
202+
code {
203+
font-size: 15px;
204+
color: orange !important;
205+
}

‎assets/css/tocbot.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/images/android-chrome-192x192.png

48.2 KB
Loading

‎assets/images/android-chrome-512x512.png

218 KB
Loading

‎assets/images/apple-touch-icon.png

43.3 KB
Loading

‎assets/images/favicon-16x16.png

1 KB
Loading

‎assets/images/favicon-32x32.png

2.57 KB
Loading

‎assets/images/favicon.ico

15 KB
Binary file not shown.

‎assets/js/anchor.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/script.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const replaceOnDocument = (pattern, string, {target = document.body} = {}) => {
2+
// Handle `string` — see the last section
3+
[
4+
target,
5+
...target.querySelectorAll("*:not(script):not(noscript):not(style)")
6+
].forEach(({childNodes: [...nodes]}) => nodes
7+
.filter(({nodeType}) => nodeType === Node.TEXT_NODE)
8+
.forEach((textNode) => textNode.textContent = textNode.textContent.replace(pattern, string)));
9+
};
10+
replaceOnDocument(/\[!IMPORTANT\]/g, "👋 Important: ");
11+
replaceOnDocument(/\[!NOTE\]/g, "👉 Note: ");
12+
replaceOnDocument(/https:\/\/github.com\/meiji163\/gh-notify\/assets\/92653266\/b7d7fcdb-8a25-43fc-8f63-d11f30960084/g,"")
13+
14+
anchors.options.placement = 'left';
15+
document.addEventListener('DOMContentLoaded', function(event) { anchors.add(); });
16+
17+
tocbot.init({
18+
// Where to render the table of contents.
19+
tocSelector: '.js-toc',
20+
// Where to grab the headings to build the table of contents.
21+
contentSelector: '.js-toc-content',
22+
// Which headings to grab inside of the contentSelector element.
23+
headingSelector: 'h1, h2, h3, h4',
24+
// For headings inside relative or absolute positioned containers within content.
25+
hasInnerContainers: true,
26+
orderedList: false,
27+
// Show the entire table of contents, fully expanded
28+
collapseDepth: 6,
29+
});

0 commit comments

Comments
 (0)