Skip to content

Commit 4ba75ea

Browse files
line-oline-o
committed
style: improve overall layout even more
- search form - buttons - breadcrumb - colors - scss build (no need to import minified bootstrap)
1 parent a920524 commit 4ba75ea

File tree

9 files changed

+148
-122
lines changed

9 files changed

+148
-122
lines changed

‎src/main/frontend/sass/_colors.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,15 @@
33
--grey: #737577;
44
--darkgrey: #4D4C4E;
55

6+
--lighterprimary: #d3e1ec;
7+
68
--secondary: color-mix(in oklab, var(--primary) 80%, var(--black));
7-
--darktext: #555;
8-
--lightgrey: #ccc;
9+
--darktext: #47453f;
10+
--lightgrey: #dfdfe0;
911

1012
--white: #f3f3f3;
1113
--black: #232528;
1214

1315
--yell: #ffcb05;
1416
--whisper: #fef8c4;
15-
16-
--lighterprimary: color-mix(in oklab, var(--primary) 80%, var(--white));
17-
--test: #abe1ff;
1817
}

‎src/main/frontend/sass/doc.scss‎ renamed to ‎src/main/frontend/sass/_doc.scss‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,28 @@
22

33
/* CSS Document */
44

5-
.form-group {
6-
select {
7-
width: 8em;
8-
padding-right: 4px;
9-
}
10-
input {
11-
width: 20em;
12-
}
13-
select {
14-
width: 10em;
15-
}
16-
}
17-
185
table a {
196
padding-left: 3px;
207
padding-right: 3px;
218
}
229

2310
span.score {
24-
color: #B2B2B2;
11+
color: var(--lightgrey);
2512
}
2613

27-
div.headings {
28-
background: #EBEBEB;
29-
font-size: 110%;
14+
.section {
15+
margin-block-end: 1rem;
16+
color: var(--darktext);
3017
}
3118

32-
td {
33-
&.headings {
34-
background: #EBEBEB;
35-
font-size: 110%;
36-
}
37-
&.previous {
19+
div.headings, td.headings {
20+
background: var(--lightgrey);
21+
font-size: 1.5rem;
22+
color: var(--grey);
23+
}
24+
25+
td.previous {
3826
text-align: right;
39-
}
4027
}
4128

4229
.kwic .hi {

‎src/main/frontend/sass/_general.scss‎

Lines changed: 82 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
1-
h1 {
2-
font-size: 1.75em;
1+
@font-face {
2+
font-family: 'QuicksandBook';
3+
src: url('../fonts/Quicksand_Book-webfont.eot');
4+
src: url('../fonts/Quicksand_Book-webfont.eot?#iefix') format("embedded-opentype"), url('../fonts/Quicksand_Book-webfont.woff') format("woff"), url('../fonts/Quicksand_Book-webfont.ttf') format("truetype"), url('Quicksand_Book-webfont.svg#QuicksandBook') format("svg");
5+
font-weight: normal;
6+
font-style: normal;
7+
}
8+
9+
h1, h2 {
10+
font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
311
font-weight: bold;
4-
margin: .8em 0 0 0;
12+
}
13+
14+
h1 {
15+
font-size: 1.75rem;
516
padding: 0px 0 5px;
617
margin: 0;
7-
font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
818
color: var(--primary);
919
}
1020

1121
h2 {
12-
font-size: 1.2em;
22+
font-size: 1.25rem;
1323
padding: 10px 0;
14-
font-weight: bold;
15-
font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
1624
letter-spacing: 1px;
1725
}
1826

1927
h3 {
20-
font-size: 1.2em;
28+
font-size: 1.125rem;
2129
padding: 10px 0 5px;
2230
margin: 0 0 5px;
2331
font-weight: bold;
2432
}
2533

2634
h4 {
27-
font-size: 1.0em;
35+
font-size: 1rem;
2836
padding: 10px 0;
2937
font-style: italic;
3038
font-weight: normal;
3139
}
3240

3341
h5 {
34-
font-size: 1.0em;
42+
font-size: 1rem;
3543
padding: 10px 0;
3644
font-weight: normal;
3745
}
@@ -76,10 +84,6 @@ figcaption {
7684
text-align: center;
7785
}
7886

79-
form {
80-
margin: 20px 0;
81-
}
82-
8387
input:required:invalid, fieldset input:focus:invalid {
8488
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFvy8atzQfvzEWvDEXuzEZujIbuzEdvzAZvTAbvjAcvDAdvTIdrzcnszQisTQltTIitzQgtjUhsTssuDEguTIgujQgvD0nqkAutkM2tko5u0c4ul5Qwi8Zwy8awC8bxS4ZxiwcwTEZwDEawTAbwDAcwDEdwzIexjAaxTIZyDAbyjAcyTMdzzEazjEbzzAe0TIb0zMd0zQb1DIc1TQb1TQc1jYc1jYd1zgc2jQb2DUd2TQe2zYc3DUc3jgbxzYh1j4m4DYZ5jcZ5zYb5jYc5Dga5Dgd6TYf7Dcd7zce6zgZ6Dga7Dse7j0e8jcd8zYe8DYf8Tkb8zgd8joc8Toe8Dwf9jkb9Doc4zki5j4n6T0h7jghxkIsx0MuzUUt00Ep2kIt1kg13VE97EEm6Ugu4E064FQ98UIn8kMo80Mp90Ep9UMq3VpD3F1KxmdZw2haw2hbxGhaxGhbwW1hwHdpxndp2H1u4FlH4mVT63Jb9mZO92ZP9WhN+GVN+2RQ4HVlvIB13odx4oNv5IZy54h29o55+4p6+4t7+Y14/Yl6yI+Ew5aPxpuTxqCXyaWe3baq5JSI65CB7pKC9JKK66WX6rGb57ut6rOo7res5b6767yz+62i+q6j/qug/a2i87Cl9rGh9rOq8b+19L+z+L2x48G48MO68sa/8ci96tDK8sbB/crE/crF/srG+87K/svJ/M3I99bR99fS+9bV+93Z8ebe+OHd+eXd/OTd8ebh9e3m9u3r+ufl/eXj/ubg/ufh/efi/ufj/uXk+ujj++nl+uvl+urm/ejh++7q+u/r+vDu+vLt/PDv/fPv/vTy+/j3/Pj0//j2//n3/vv0/vr1/vv2/fr3+/39+/79/vr4/vv6/v37/f77/v38/v39/f78/f79AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOe7jtQAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuODc7gF0AAAEbSURBVChTARAB7/4A1rmNdG5xb3BwcG5tc4y43QC6isjT0NDR1djY1NLTzIu4AImVvL/Gxsa+vr7BwL29qX8AGp6rqrPDsqyurbu8r6ujFwALg5ybotjLoJqw37GfnZEOAAlsiIaEp9qmk8/FkoWHdw8AIj98eX14tc601ZB7eXpfEQAjNGJoaWd+z9uWY2pmZjYQACEzQlJUVWvK149MVlNKORUAIzFDSFBYodnJx3ZRTkEzAQAkLUBHS4HYmXXVpVhPPS8NAAInNUVkwsRlWZfVgEQ6KA8AFh0uN5TNgk1aYba3YCwHDAByAyArW11XRklGXlw+HwAbAKgSBRwpMDo8OzgyKh4EFaQA3pgZEwYIJCYmJQgKFBiO3JMVcr8Z+l4TAAAAAElFTkSuQmCC');
8589
background-position: right;
@@ -116,21 +120,70 @@ input:required:valid {
116120
display: none;
117121
}
118122

119-
#header-search {
120-
.btn-outline-info {
121-
--bs-btn-color: var(--yell);
122-
--bs-btn-border-color: var(--yell);
123-
--bs-btn-hover-color: var(--black);
124-
--bs-btn-hover-bg: var(--yell);
125-
--bs-btn-hover-border-color: var(--yell);
126-
--bs-btn-focus-shadow-rgb: 13,202,240;
127-
--bs-btn-active-color: var(--black);
128-
--bs-btn-active-bg: var(--yell);
129-
--bs-btn-active-border-color: var(--yell);
130-
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
131-
--bs-btn-disabled-color: var(--yell);
132-
--bs-btn-disabled-border-color: var(--yell);
133-
}
123+
.btn-primary {
124+
--bs-btn-color: var(--white);
125+
--bs-btn-bg: var(--primary);
126+
--bs-btn-border-color: rgba(0, 0, 0, 0.125);
127+
--bs-btn-hover-color: white;
128+
--bs-btn-hover-bg: var(--primary);
129+
--bs-btn-hover-border-color: var(--primary);
130+
--bs-btn-focus-shadow-rgb: 49,132,253;
131+
--bs-btn-active-color: var(--white);
132+
--bs-btn-active-bg: var(--primary);
133+
--bs-btn-active-border-color: var(--primary);
134+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
135+
--bs-btn-disabled-color: (--white);
136+
--bs-btn-disabled-bg: var(--primary);
137+
--bs-btn-disabled-border-color: var(--primary);
138+
}
139+
140+
.btn-outline-primary {
141+
--bs-btn-color: var(--primary);
142+
--bs-btn-border-color: rgba(0, 0, 0, 0.125);
143+
--bs-btn-hover-color: white;
144+
--bs-btn-hover-bg: var(--primary);
145+
--bs-btn-hover-border-color: var(--primary);
146+
--bs-btn-focus-shadow-rgb: 13,110,253;
147+
--bs-btn-active-color: var(--white);
148+
--bs-btn-active-bg: var(--primary);
149+
--bs-btn-active-border-color: var(--primary);
150+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
151+
--bs-btn-disabled-color: var(--primary);
152+
--bs-btn-disabled-bg: transparent;
153+
--bs-btn-disabled-border-color: var(--primary);
154+
--bs-gradient: none;
155+
}
156+
157+
.btn-info {
158+
--bs-btn-color: var(--black);
159+
--bs-btn-bg: var(--yell);
160+
--bs-btn-border-color: var(--yell);
161+
--bs-btn-hover-color: var(--black);
162+
--bs-btn-hover-bg: var(--yell);
163+
--bs-btn-hover-border-color: var(--yell);
164+
--bs-btn-focus-shadow-rgb: 11,172,204;
165+
--bs-btn-active-color: var(--black);
166+
--bs-btn-active-bg: var(--yell);
167+
--bs-btn-active-border-color: var(--yell);
168+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
169+
--bs-btn-disabled-color: var(--black);
170+
--bs-btn-disabled-bg: var(--yell);
171+
--bs-btn-disabled-border-color: var(--yell);
172+
}
173+
174+
.btn-outline-info {
175+
--bs-btn-color: var(--yell);
176+
--bs-btn-border-color: var(--yell);
177+
--bs-btn-hover-color: var(--black);
178+
--bs-btn-hover-bg: var(--yell);
179+
--bs-btn-hover-border-color: var(--yell);
180+
--bs-btn-focus-shadow-rgb: 13,202,240;
181+
--bs-btn-active-color: var(--black);
182+
--bs-btn-active-bg: var(--yell);
183+
--bs-btn-active-border-color: var(--yell);
184+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
185+
--bs-btn-disabled-color: var(--yell);
186+
--bs-btn-disabled-border-color: var(--yell);
134187
}
135188

136189
.toc {

‎src/main/frontend/sass/_layout.scss‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
padding-bottom: 2rem;
33
}
44

5-
#container {
6-
margin: 0 auto 2rem auto;
5+
#container-body {
6+
margin-block-start: 1.25rem;
77
}
88

99
@media (min-width: 767px) {
@@ -43,12 +43,18 @@
4343
margin: 0;
4444
}
4545

46+
.navbar-container {
47+
padding-inline-start: .25rem;
48+
}
49+
4650
.breadcrumb-bar {
4751
background-color: var(--lightgrey);
52+
height: 2rem;
53+
padding-block-start: .2rem;
4854
}
4955

50-
.navbar-container {
51-
padding-inline-start: .25rem;
56+
main {
57+
margin-block-start: 1rem;
5258
}
5359

5460
#content {
@@ -68,16 +74,16 @@
6874
#footer {
6975
display: grid;
7076
padding-block-start: 1rem;
71-
color: #222;
77+
color: var(--white);
7278
background-color: var(--black);
7379

7480
li {
7581
display: inline-block;
7682
a {
77-
padding: 2px 4px;
78-
color: #ffcb05;
83+
padding: .1rem .2rem;
84+
color: var(--yell);
7985
&:hover {
80-
background: var(--black);
86+
color: var(--whisper);
8187
}
8288
}
8389
}
@@ -88,6 +94,5 @@
8894
text-align: right;
8995
p {
9096
padding: 0;
91-
color: var(--white);
9297
}
9398
}

‎src/main/frontend/sass/documentation.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use 'colors';
2+
@use 'variables';
3+
@use 'layout';
4+
@use 'general';
5+
@use 'doc';

‎src/main/frontend/sass/exist-2.2.scss‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/main/xar-resources/modules/docbook.xql‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ declare %public function docbook:toc-db5($node as node()) as element()+ {
8989
}
9090
},
9191
element a {
92-
attribute class {'btn btn-outline-primary btn-sm btn-block'},
92+
attribute class {'btn btn-info btn-sm btn-block'},
9393
attribute href {escape-html-uri('https://github.com/eXist-db/documentation/issues/new?assignees=&labels=docs-outdated&template=content-issue.md&title=[' || $node//db5:info/db5:title || ']:')},
9494
'Improve this article'
9595
}

‎src/main/xar-resources/search.html‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
<div data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
2-
<div class="row" id="container-body">
3-
<div class="col-md-12" id="content">
4-
<form action="search.html" class="form-horizontal" method="GET" name="f-query" role="form">
5-
<div class="form-group">
6-
<label class="control-label col-sm-4" for="inputSearch">Search for</label>
7-
<div class="col-sm-10">
8-
<input class="form-control templates:form-control" id="inputSearch" name="q" type="text"/>
9-
</div>
2+
<div id="container-body">
3+
<form action="search.html" method="GET" name="f-query" role="form">
4+
<div class="row mb-3">
5+
<label class="col-form-label col-md-2 col-xl-1" for="inputSearch">Search for</label>
6+
<div class="col-md-10 col-xl-5">
7+
<input class="form-control templates:form-control" id="inputSearch" name="q" type="text"/>
108
</div>
11-
<div class="form-group">
12-
<label class="control-label col-sm-2" for="field">in</label>
13-
<div class="col-sm-10">
14-
<select class="form-control templates:form-control" name="field">
15-
<option selected="selected" value="all">All Contents</option>
16-
<option value="title">Headings Only</option>
17-
</select>
18-
</div>
9+
<label class="col-form-label col-md-2 col-xl-1" for="field">In</label>
10+
<div class="col-md-4 col-xl-2">
11+
<select class="form-select templates:form-control" name="field">
12+
<option selected="selected" value="all">All Contents</option>
13+
<option value="title">Headings Only</option>
14+
</select>
1915
</div>
20-
<div class="form-group">
21-
<label class="control-label col-sm-6" for="view">and display as</label>
22-
<div class="col-sm-10">
23-
<select class="form-control templates:form-control" name="view">
24-
<option selected="selected" value="summary">Summary</option>
25-
<option value="kwic">Concordance</option>
26-
</select>
27-
</div>
16+
<label class="col-form-label col-md-2 col-xl-1" for="view">Display as</label>
17+
<div class="col-md-4 col-xl-2">
18+
<select class="form-select templates:form-control" name="view">
19+
<option selected="selected" value="summary">Summary</option>
20+
<option value="kwic">Concordance</option>
21+
</select>
2822
</div>
29-
<div class="form-group">
30-
<div class="col-sm-offset-2 col-sm-10">
31-
<button class="btn btn-primary" id="f-btn-search" name="action" type="submit"> <span class="glyphicon glyphicon-search"/>
32-
Search</button>
33-
</div>
34-
<input name="prev" type="hidden" value=""/>
23+
</div>
24+
25+
<div class="row mb-3">
26+
<div class="col-sm-12">
27+
<button class="btn btn-info" id="f-btn-search" name="action" type="submit"> <span class="glyphicon glyphicon-search"/>
28+
Search</button>
3529
</div>
36-
</form>
37-
<div class="dq:query"/>
30+
<input name="prev" type="hidden" value=""/>
31+
</div>
32+
</form>
33+
<div class="row" id="content">
34+
<div class="dq:query"></div>
3835
</div>
3936
</div>
4037
</div>

0 commit comments

Comments
 (0)