Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 95b584a

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

File tree

14 files changed

+280
-0
lines changed

14 files changed

+280
-0
lines changed

‎.gitattributes‎

Lines changed: 3 additions & 0 deletions
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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
markdown: kramdown
2+
remote_theme: pages-themes/hacker@v0.2.0

‎_layouts/default.html‎

Lines changed: 30 additions & 0 deletions
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‎

Lines changed: 205 additions & 0 deletions
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: "00円BB " !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‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
48.2 KB
Loading[フレーム]
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[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /