Skip to content

Commit 4e9f00f

Browse files
felixmulderfelixmulder
committed
Update Dottydoc look
1 parent cc0748e commit 4e9f00f

File tree

3 files changed

+63
-30
lines changed

3 files changed

+63
-30
lines changed

‎doc-tool/resources/css/api-page.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ div.entity-section {
5555
background-color: #fff;
5656
border-radius: 4px;
5757
margin: 0;
58-
padding: 30px;
58+
padding: 30px 0;
5959
}
6060

6161
div.entity-section *:last-child {

‎doc-tool/resources/css/dottydoc.css

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);
2+
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700);
3+
14
html, body {
25
overflow-x: hidden;
6+
font-family: "Roboto Slab", serif;
7+
font-weight: 300;
38
}
49

510
html {
@@ -13,13 +18,11 @@ body {
1318
div#content-wrapper {
1419
min-height: 100vh;
1520
padding-left: 0;
21+
margin-top: 75px;
1622
}
1723

1824
div#content-wrapper div#content-body {
19-
background-color: #f4f3f4;
20-
border-left: 1px solid #e0e0e0;
21-
box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.14);
22-
padding: 40px 1px 1px 1px;
25+
padding: 20px 1px 1px 1px;
2326
position: relative;
2427
min-height: 100vh;
2528
}
@@ -87,6 +90,12 @@ div#entity-container h3 > a,
8790
div#entity-container h4 > a,
8891
div#entity-container h5 > a,
8992
div#entity-container h6 > a,
93+
div#blog-post-container h1 > a,
94+
div#blog-post-container h2 > a,
95+
div#blog-post-container h3 > a,
96+
div#blog-post-container h4 > a,
97+
div#blog-post-container h5 > a,
98+
div#blog-post-container h6 > a,
9099
div#doc-page-container > h1 > a,
91100
div#doc-page-container > h2 > a,
92101
div#doc-page-container > h3 > a,
@@ -95,6 +104,8 @@ div#doc-page-container > h5 > a,
95104
div#doc-page-container > h6 > a {
96105
text-decoration: none;
97106
color: #373a3c;
107+
font-family: "Source Sans Pro", sans-serif;
108+
font-weight: 400;
98109
}
99110

100111
div#entity-container h1 > a:hover,
@@ -103,6 +114,12 @@ div#entity-container h3 > a:hover,
103114
div#entity-container h4 > a:hover,
104115
div#entity-container h5 > a:hover,
105116
div#entity-container h6 > a:hover,
117+
div#blog-post-container h1 > a:hover,
118+
div#blog-post-container h2 > a:hover,
119+
div#blog-post-container h3 > a:hover,
120+
div#blog-post-container h4 > a:hover,
121+
div#blog-post-container h5 > a:hover,
122+
div#blog-post-container h6 > a:hover,
106123
div#doc-page-container > h1 > a:hover,
107124
div#doc-page-container > h2 > a:hover,
108125
div#doc-page-container > h3 > a:hover,
@@ -134,8 +151,9 @@ div#doc-page-container > h6 > a:focus {
134151
div#post-title,
135152
div#post-footer,
136153
h1#doc-page-title {
137-
margin-left: 20px;
138-
margin-top: 10px;
154+
margin: 10px 0 40px 10px;
155+
font-family: "Source Sans Pro", sans-serif;
156+
font-weight: 400;
139157
}
140158

141159
div#post-title > h2#sub-title {
@@ -149,13 +167,21 @@ div#post-title > h3#post-date {
149167
margin-bottom: 2px;
150168
}
151169

170+
div#content-wrapper div#content-body.doc-page-body {
171+
max-width: 1000px;
172+
margin: 0 auto;
173+
padding-right: 250px; /** account for sidebar */
174+
}
175+
176+
div#content-body.doc-page-body > hr {
177+
margin-left: 10px;
178+
}
179+
152180
div#blog-post-container,
153181
div#doc-page-container {
154182
background-color: #fff;
155183
padding: 10px;
156184
border-radius: 4px;
157-
margin: 20px;
158-
padding: 30px;
159185
}
160186

161187
div#doc-page-container > p + h1 {
@@ -182,7 +208,14 @@ pre {
182208
border: 1px solid rgba(0, 0, 0, 0.1);
183209
}
184210

211+
p > img {
212+
/** Make sure images adhere to container rules */
213+
width: 100%;
214+
height: auto;
215+
}
216+
185217
pre > code.language-none,
218+
pre > code.language-shell,
186219
pre > code.hljs {
187220
display: block;
188221
padding: 10px;

‎doc-tool/resources/css/sidebar.css

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600);
2+
13
div#content-wrapper div.index-wrapper {
2-
background-color: #fafafa;
34
position: fixed;
45
top: 0;
56
left: 0;
67
height: 100%;
78
overflow-y: auto;
89
overflow-x: hidden;
10+
font-family: "Titillium Web", sans-serif;
11+
font-weight: 200;
12+
padding-left: 14px;
913
}
1014

1115
/** Mobile (x < 576px) sidebar: Defaults closed with 60% wide sidebar */
@@ -45,24 +49,12 @@ ul.toc > li > a#home-button:hover {
4549
background: transparent;
4650
}
4751

48-
ul.toc > li > a#home-button svg g#logo-foreground {
49-
fill: rgba(202, 68, 94, 1);
50-
}
51-
52-
ul.toc > li > a#home-button svg g#logo-background {
53-
fill: rgba(202, 68, 94, 0.45);
54-
}
55-
56-
ul.toc > li > a {
57-
width: 100%;
58-
user-select: none;
59-
}
60-
6152
ul.toc > li,
6253
ul.index-entities > li {
6354
line-height: 40px;
6455
display: inline-block;
6556
width: 100%;
57+
border-left: 1px solid #fff;
6658
}
6759

6860
ul.toc > li.logo-li > a {
@@ -75,10 +67,12 @@ ul.toc > li > a {
7567
font-size: 13px;
7668
display: block;
7769
padding: 0 0 0 24px;
70+
width: 100%;
7871
color: rgba(0, 0, 0, 0.87);
7972
background: transparent;
8073
cursor: pointer;
8174
float: left;
75+
text-transform: uppercase;
8276
}
8377

8478
ul.toc > li > ul.show {
@@ -96,6 +90,7 @@ ul.index-entities > li.index-title > span {
9690
font-weight: bold;
9791
color: rgba(0, 0, 0, 0.87);
9892
padding: 0 24px;
93+
text-transform: uppercase;
9994
}
10095

10196
ul.index-entities > li.index-title:hover {
@@ -107,11 +102,11 @@ li.index-entity > a:focus {
107102
}
108103

109104
ul.toc > li > a:hover {
110-
background-color: rgba(0, 0, 0, 0.2);
105+
text-decoration: none;
111106
}
112107

113-
ul.toc > li > a:hover {
114-
text-decoration: none;
108+
ul.toc > li:hover {
109+
border-left: 1px solid #0fa00f;
115110
}
116111

117112
li.index-entity.entity-package:hover {
@@ -122,6 +117,7 @@ li.entity-package > h1 > a.entity-name {
122117
color: #ff4081;
123118
text-decoration: none;
124119
font-size: 13px;
120+
font-weight: 300;
125121
padding-left: 24px;
126122
}
127123

@@ -200,21 +196,25 @@ div#cover-block {
200196
}
201197

202198
/** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
203-
@media screen and (min-width: 576px) {
199+
@media screen and (min-width: 576px) and (max-width: 899px) {
204200
div#content-wrapper {}
205201
div#content-wrapper div#content-body {}
206-
div#content-wrapper div.index-wrapper { width: 250px; }
202+
div#content-wrapper div#content-body.doc-page-body { padding-right: 0; }
203+
div#content-wrapper div.index-wrapper { display: none; }
207204

208205
div#content-wrapper.toggled {}
209206
div#content-wrapper.toggled div#content-body { left: 250px; }
210207
div#content-wrapper.toggled div.index-wrapper {}
211208
}
212209

213210
/** Desktop (x >= 768px) sidebar: Defaults open with 250px wide sidebar */
214-
@media screen and (min-width: 768px) {
211+
@media screen and (min-width: 900px) {
215212
div#content-wrapper { padding-left: 250px; }
216213
div#content-wrapper div#content-body {}
217-
div#content-wrapper div.index-wrapper { width: 250px; }
214+
div#content-wrapper div.index-wrapper {
215+
width: 250px;
216+
display: block;
217+
}
218218

219219
div#content-wrapper.toggled { padding-left: 0; }
220220
div#content-wrapper.toggled div#content-body { left: 0; }

0 commit comments

Comments
 (0)