Skip to content

Commit a0d4c41

Browse files
vitovito
committed
wip
Signed-off-by: Alex Suraci <[email protected]>
1 parent 254ae02 commit a0d4c41

12 files changed

+176
-169
lines changed

‎css/booklit.css

+90-96
Original file line numberDiff line numberDiff line change
@@ -8,94 +8,120 @@ body {
88
font-size: 16px;
99
font-weight: 400;
1010
line-height: 1.6;
11-
background: #fff;
1211
color: #2A2929;
1312
width: 100%;
13+
background: #f5f5f5;
1414
}
1515

1616
#top {
17-
background: #fff;
17+
background-color: #3398DC;
1818
color: #fff;
19-
color: #2A2929;
2019
font-family: 'Roboto Slab', serif;
2120
line-height: 80px;
2221
}
2322

23+
#content {
24+
display: flex;
25+
flex-direction: row;
26+
flex-wrap: wrap;
27+
justify-content: center;
28+
}
29+
2430
.header {
2531
display: flex;
2632
flex-direction: row;
2733
}
2834

29-
.side, .page, .right-side {
30-
padding-top: 70px;
35+
.side, .page, .side-right {
36+
padding: 70px 30px;
37+
}
38+
39+
.side, .side-right {
40+
flex: 1;
41+
}
42+
43+
.side {
44+
order: 1;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: flex-end;
3148
}
3249

3350
.page {
34-
width: 500px;
51+
order: 2;
52+
padding: 70px;
53+
position: relative;
54+
min-width: 500px;
55+
max-width: 900px;
56+
box-sizing: border-box;
57+
flex-shrink: 0;
58+
flex-grow: 1;
3559
background: #fff;
36-
padding-right: 30px;
3760
}
3861

39-
#content {
62+
.side-right {
63+
order: 3;
64+
}
65+
66+
.header {
4067
display: flex;
4168
flex-direction: row;
42-
flex-wrap: wrap;
69+
justify-content: center;
4370
}
4471

45-
.header a, .header a:visited, .header a:hover {
46-
color: #616161;
47-
text-decoration: none;
72+
.header .logo {
73+
flex: 1;
74+
text-align: right;
4875
}
4976

50-
.header h1 {
77+
.header .logo a {
5178
color: #fff;
52-
background-color: #3398DC;
5379
margin: 0;
54-
border: 0;
5580
font-size: 22px;
56-
margin-right: 30px;
57-
display: flex;
58-
flex-direction: row;
59-
width: 215px;
81+
padding: 0 50px 0 80px;
82+
background-image: url('../images/logo-white.svg');
83+
background-repeat: no-repeat;
84+
background-size: 40px 40px;
85+
background-position: 16.5px 18px;
86+
line-height: 80px;
87+
display: inline-block;
88+
vertical-align: top;
6089
}
6190

62-
.header h1 a, .header h1 a:visited {
63-
box-sizing: border-box;
64-
height: 80px;
65-
margin: 0px;
91+
.header .logo a:visited {
6692
color: #fff;
67-
padding-top: 27px;
68-
line-height: 1;
6993
}
7094

71-
.header h1 .logo {
72-
width: 80px;
73-
height: 80px;
74-
background-color: #3398DC;
75-
background-image: url('../images/logo-white.svg');
76-
background-repeat: no-repeat;
77-
background-size: 40px 40px;
78-
background-position: 16.5px 18px;
95+
.header .search {
96+
flex: 1;
97+
}
98+
99+
.header nav {
100+
flex-grow: 1;
101+
max-width: 900px;
79102
}
80103

81104
.header nav a {
82-
margin-right: 50px;
83105
font-size: 16px;
106+
text-transform: lowercase;
107+
line-height: 80px;
108+
display: inline-block;
109+
padding: 0 25px;
84110
}
85111

86-
.header nav a:hover {
87-
border-bottom: 1px solid #868585;
112+
.header nav a.active {
113+
background: #fff;
114+
color: #616161;
115+
text-decoration: underline;
88116
}
89117

90-
.header nav .tutorial-link {
91-
background: #fb8c00;
92-
padding: 4px 6px;
93-
color: #fff;
118+
.header nav a:hover {
119+
text-decoration: underline;
94120
}
95121

96-
.header nav .tutorial-link:hover {
97-
border: 0;
98-
opacity: 0.9;
122+
.header a, .header a:visited, .header a:hover {
123+
color: #fff;
124+
text-decoration: none;
99125
}
100126

101127
.page h1 {
@@ -220,10 +246,7 @@ h2, h3 {
220246
}
221247

222248
.side {
223-
background: #fff;
224249
width: 190px;
225-
padding-left: 35px;
226-
padding-right: 20px;
227250
font-family: 'Roboto Slab', serif;
228251
font-size: 14px;
229252
color: #7A7373;
@@ -246,33 +269,27 @@ h2, h3 {
246269
position: relative;
247270
}
248271

249-
.page {
250-
padding-bottom: 30px;
251-
}
252-
253-
.side .improve-docs {
254-
background: rgba(255, 255, 255, 0.75);
272+
.improve-docs {
255273
position: fixed;
256274
bottom: 0;
275+
left: 0;
257276
color: #9B9B9B;
258277
font-size: 13px;
259278
list-style-type: none;
260279
margin: 0;
261-
padding: 0;
262-
padding-top: 20px;
263-
padding-bottom: 20px;
280+
padding: 30px;
264281
}
265282

266-
.side .improve-docs a, .side .improve-docs a:visited {
283+
.improve-docs a, .improve-docs a:visited {
267284
color: #616161;
268285
}
269286

270-
.side .improve-docs li {
271-
margin-bottom: 5px;
287+
.improve-docs li {
288+
margin-top: 5px;
272289
margin-left: -4px;
273290
}
274291

275-
.side .improve-docs img {
292+
.improve-docs img {
276293
width: 16px;
277294
height: 16px;
278295
margin-bottom: -4px;
@@ -281,7 +298,7 @@ h2, h3 {
281298
opacity: 0.5;
282299
}
283300

284-
.side .improve-docs li:hover img {
301+
.improve-docs li:hover img {
285302
filter: none;
286303
opacity: 1;
287304
}
@@ -290,6 +307,7 @@ h2, h3 {
290307
position: relative;
291308
margin-bottom: 2rem;
292309
margin-left: -.15rem;
310+
width: 200px;
293311
}
294312

295313
.side .context a {
@@ -382,11 +400,6 @@ h2, h3 {
382400
margin-bottom: 0;
383401
}
384402

385-
.page {
386-
position: relative;
387-
flex-shrink: 0;
388-
}
389-
390403
.aside {
391404
border-left: 2px solid #EFB198;
392405
padding: 0 1em;
@@ -396,7 +409,6 @@ h2, h3 {
396409
font-size: 18px;
397410
font-style: italic;
398411
color: #616161;
399-
padding-bottom: 30px;
400412
}
401413

402414
.splash-intro h2 {
@@ -446,20 +458,6 @@ h2, h3 {
446458
border-left: 1px solid #E6E7E8;
447459
}
448460

449-
.side-right {
450-
background: #f5f5f5;
451-
flex-shrink: 1;
452-
flex-grow: 1;
453-
flex-basis: 500px;
454-
padding-left: 245px;
455-
border-top: 1px solid #ddd;
456-
padding-top: 20px;
457-
}
458-
459-
.content-right {
460-
width: 500px;
461-
}
462-
463461
.side-right .example {
464462
margin-bottom: 3em;
465463
}
@@ -487,20 +485,17 @@ h2, h3 {
487485
}
488486

489487
@media (min-width: 1115px) {
490-
.page.wide {
491-
width: 800px;
492-
}
493-
494488
.side-by-side {
495489
flex-direction: row;
496490
justify-content: space-between;
497491
}
498492

499493
.segment {
500-
width: 386px;
494+
width: 350px;
501495
}
502496

503497
.segment.example {
498+
width: 385px;
504499
flex-shrink: 0;
505500
}
506501

@@ -509,17 +504,16 @@ h2, h3 {
509504
}
510505
}
511506

507+
.side-right .content-right {
508+
width: 500px;
509+
}
510+
512511
@media (min-width: 1246px) {
513-
.side-right {
514-
flex-basis: 400px;
515-
padding-left: 30px;
516-
border-left: 1px solid #ddd;
512+
.side-right:not(:empty) {
517513
border-top: 0;
518-
margin-top: -80px;
519-
padding-top: 142px;
520514
}
521515

522-
.content-right {
516+
.side-right .content-right {
523517
width: 400px;
524518
}
525519
}
@@ -806,13 +800,12 @@ h2, h3 {
806800
z-index: 101;
807801
border: 1px solid transparent;
808802
box-sizing: border-box;
809-
background: #cdcdcd url('../images/search_icon.svg') no-repeat top 3.5px right 2.5px;
803+
background: rgba(255, 255, 255, 0.25) url('../images/search_icon.svg') no-repeat top 3.5px right 2.5px;
810804
padding: 5px;
811805
transition: all 0.25s ease-out;
812806
position: absolute;
813-
left: 470px;
807+
right: 30px;
814808
top: 24px;
815-
right: 0;
816809
width: 32px;
817810
height: 32px;
818811
}
@@ -828,7 +821,7 @@ h2, h3 {
828821
.search-input:focus, .search-input:valid {
829822
outline: none;
830823
position: absolute;
831-
left: 0;
824+
right: 30px;
832825
background: #fff;
833826
border-color: #ddd;
834827
width: 500px;
@@ -847,6 +840,7 @@ h2, h3 {
847840
box-sizing: border-box;
848841
position: fixed;
849842
top: 50px;
843+
right: 30px;
850844
bottom: 0;
851845
margin: 0;
852846
overflow-y: auto;

‎go/docs/plugin.go

-4
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@ func NewPlugin(section *booklit.Section) booklit.Plugin {
3535
}
3636
}
3737

38-
func (p Plugin) Wide() {
39-
p.section.SetPartial("Wide", booklit.Empty)
40-
}
41-
4238
func (p Plugin) FontAwesome(class string) booklit.Content {
4339
return booklit.Styled{
4440
Style: "font-awesome",

‎html/head.tmpl

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-60508041-1"></script>
2+
3+
<script>
4+
window.dataLayer = window.dataLayer || [];
5+
function gtag(){dataLayer.push(arguments);}
6+
gtag('js', new Date());
7+
8+
gtag('config', 'UA-60508041-1');
9+
</script>
10+
11+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
12+
<meta name="viewport" content="width=775" />
13+
<title>{{.Title.String}} - Concourse CI</title>
14+
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
15+
<link rel="stylesheet" type="text/css" href="css/pipeline.css" />
16+
<link rel="stylesheet" type="text/css" href="css/iosevka.css" />
17+
<link rel="stylesheet" type="text/css" href="css/booklit.css" />
18+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
19+
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700|Roboto+Slab:300,400,700" rel="stylesheet" />
20+
<script src="js/search.js"></script>

0 commit comments

Comments
 (0)