Skip to content

Commit 517f307

Browse files
jcollins-gjcollins-g
authored
Refine styles to better match current dartlang.org (#1916)
* Link to source now works, minus icons * Add material icons * Refactor dartdoc_test to avoid asynchronous delete collisions * dartfmt * Fix windows * dartfmt * Tweak padding and change icon to description * Fix styles to match dartlang site * Review comments * Add example and use it in the dartdoc package. * dartfmt * Review comment
1 parent 5a4308d commit 517f307

File tree

2 files changed

+40
-25
lines changed

2 files changed

+40
-25
lines changed

‎lib/resources/styles.css

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@ body {
1616
margin: 0;
1717
padding: 0;
1818
height: 100%;
19+
width: 100%;
20+
overflow: hidden;
21+
box-sizing: border-box;
22+
}
23+
24+
*, *:before, *:after {
25+
box-sizing: inherit;
1926
}
2027

2128
body {
@@ -25,7 +32,7 @@ body {
2532
}
2633

2734
header {
28-
flex: 0 0 56px;
35+
flex: 0 0 50px;
2936
display: flex;
3037
flex-direction: row;
3138
align-items: center;
@@ -64,44 +71,44 @@ main {
6471
flex: 1;
6572
display: flex;
6673
flex-direction: row;
74+
padding: 20px;
6775
}
6876

6977
.sidebar-offcanvas-left {
70-
flex: 0 1 195px;
78+
flex: 0 1 230px;
7179
overflow-y: scroll;
7280
padding: 20px 0 15px 30px;
81+
margin: 5px 20px 0 0;
7382
}
7483

7584
::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0px; background-color: #AAA; }
7685
::-webkit-scrollbar-button:hover{ background-color: #AAA; }
7786
::-webkit-scrollbar-thumb{ background-color: #CCC; }
7887
::-webkit-scrollbar-thumb:hover{ background-color: #CCC; }
7988
::-webkit-scrollbar{ width: 4px; }
89+
::-webkit-overflow-scrolling: touch;
90+
8091
.main-content::-webkit-scrollbar{ width: 8px; }
8192

8293
.main-content {
8394
flex: 1;
84-
overflow-y: auto;
85-
padding: 20px 15px 0 30px;
86-
}
87-
88-
.sidebar,
89-
.main-content {
90-
margin: 20px 0;
95+
overflow-y: scroll;
96+
padding: 10px 20px 0 20px;
9197
}
9298

9399
.sidebar-offcanvas-right {
94100
flex: 0 1 12em;
95-
overflow-y: auto;
101+
overflow-y: scroll;
96102
padding: 20px 15px 15px 15px;
103+
margin-top: 5px;
97104
margin-right: 20px;
98105
}
99106
/* end for layout */
100107

101108
body {
102109
-webkit-text-size-adjust: 100%;
103110
overflow-x: hidden;
104-
font-family: "Source Sans Pro", sans-serif;
111+
font-family: Roboto, sans-serif;
105112
font-size: 16px;
106113
line-height: 1.42857143;
107114
color: #111111;
@@ -185,7 +192,7 @@ h3,
185192
h4,
186193
h5,
187194
h6 {
188-
font-family: "Source Sans Pro", sans-serif;
195+
font-family: Roboto, sans-serif;
189196
font-weight: 400;
190197
margin-top: 1.5em;
191198
color: #111111;
@@ -226,8 +233,12 @@ p {
226233
margin-top: 0;
227234
}
228235

229-
a, a:hover {
230-
color: #1155cc;
236+
a {
237+
color: #0175C2;
238+
}
239+
240+
a:hover {
241+
color: #13B9FD;
231242
}
232243

233244
pre.prettyprint {
@@ -294,10 +305,13 @@ header h1 {
294305
}
295306

296307
header a,
297-
header a:hover,
298308
header p,
299309
header li {
300-
color: #111;
310+
color: #111111;
311+
}
312+
313+
header a:hover {
314+
color: #0175C2;
301315
}
302316

303317
header h1 .kind {
@@ -439,10 +453,13 @@ h1 .category {
439453

440454
.source-link {
441455
padding: 18px 4px;
442-
font-size: 12px;
443456
vertical-align: middle;
444457
}
445458

459+
.source-link .material-icons {
460+
font-size: 18px;
461+
}
462+
446463
@media (max-width: 768px) {
447464
.source-link {
448465
padding: 7px 2px;
@@ -695,10 +712,6 @@ ul.subnav li:last-of-type {
695712
padding-top: 0;
696713
}
697714

698-
.sidebar ol li.section-title a {
699-
color: inherit;
700-
}
701-
702715
.sidebar ol li.section-title {
703716
font-size: 18px;
704717
font-weight: normal;
@@ -768,10 +781,12 @@ button {
768781
z-index: 2000;
769782
top: 0;
770783
width: 280px; /* works all the way down to an iphone 4 */
771-
height: 100%;
784+
height: 90%;
772785
background-color: white;
773-
overflow-y: auto; /* TODO: how to hide scroll bars? */
786+
overflow-y: scroll; /* TODO: how to hide scroll bars? */
774787
padding: 10px;
788+
margin: 10px 10px;
789+
box-shadow: 5px 5px 5px 5px #444444;
775790
}
776791

777792
ol#sidebar-nav {
@@ -852,7 +867,7 @@ button {
852867
left: inherit !important;
853868
width: 422px;
854869
max-height: 250px;
855-
overflow-y: auto;
870+
overflow-y: scroll;
856871
}
857872

858873
.tt-menu {

‎lib/templates/_head.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
77
{{#includeVersion}}
88
<meta name="generator" content="made with love by dartdoc {{version}}">
99
{{/includeVersion}}

0 commit comments

Comments
 (0)