Skip to content

Commit 067b57f

Browse files
line-oline-o
committed
fix: improve page layout
- introduce color variables - unified and correct brand colors - more prominent search button in the navbar - fixed burger-icon for mobile view - fixed footer - fixed page alignment - improve sidebar (toc and button) - crispy project logo - less markup for more impact
1 parent 187ab04 commit 067b57f

File tree

8 files changed

+221
-208
lines changed

8 files changed

+221
-208
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:root {
2+
--primary: #3B86C6;
3+
--grey: #737577;
4+
--darkgrey: #4D4C4E;
5+
6+
--secondary: color-mix(in oklab, var(--primary) 80%, var(--black));
7+
--darktext: #555;
8+
--lightgrey: #ccc;
9+
10+
--white: #f3f3f3;
11+
--black: #232528;
12+
13+
--yell: #ffcb05;
14+
--whisper: #fef8c4;
15+
16+
--lighterprimary: color-mix(in oklab, var(--primary) 80%, var(--white));
17+
--test: #abe1ff;
18+
}

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ h1 {
55
padding: 0px 0 5px;
66
margin: 0;
77
font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
8-
color: #0083cb;
8+
color: var(--primary);
99
}
1010

1111
h2 {
@@ -37,10 +37,11 @@ h5 {
3737
}
3838

3939
a {
40-
color: #0083cb;
40+
color: var(--primary);
4141
text-decoration: none;
4242
&:hover {
43-
color: #ffcb05;
43+
color: var(--secondary);
44+
text-decoration: underline;
4445
}
4546
}
4647

@@ -49,14 +50,13 @@ a {
4950
}
5051

5152
.imgborder {
52-
border: 1px solid #CCC;
53+
border: 1px solid var(--white);
5354
padding: 3px;
5455
margin: 3px;
5556
}
5657

5758
.code {
5859
font: 14px/20px "Ubuntu Mono", Menlo, Consolas, "Courier New", Courier, monospace;
59-
/* background: #444444 url(../images/noise.png); */
6060
padding: 8.5px;
6161
width: 100%;
6262
margin: 18px 0 18px;
@@ -115,3 +115,25 @@ input:required:valid {
115115
.hidden {
116116
display: none;
117117
}
118+
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+
}
134+
}
135+
136+
.toc {
137+
list-style-type: none;
138+
padding-inline-start: 0;
139+
}

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

Lines changed: 40 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,93 @@
1-
body {
2-
color: #222;
3-
background: url(../images/body.gif) repeat 50% 100%;
4-
}
5-
61
.grey-bot {
7-
/* background: url(../images/body-base.gif) repeat-x 50% 100%;*/
8-
padding-bottom: 2em;
2+
padding-bottom: 2rem;
93
}
104

115
#container {
12-
margin: 0 auto 30px auto;
6+
margin: 0 auto 2rem auto;
137
}
148

159
@media (min-width: 767px) {
1610
#grey-top {
17-
background: #f3f3f3 url(../images/horizontal.gif) repeat-x 50% 0;
11+
background: var(--white);
1812
height: 100%;
1913
position: relative;
2014
}
2115
#header {
22-
background: #f3f3f3 url(../images/header.gif) top right no-repeat;
23-
width: 100%;
16+
background: var(--white) url(../images/header.gif) top right no-repeat;
2417
a#logo {
25-
background: url(../images/existdb.png) center left no-repeat;
18+
background: url(../images/existdb-web.svg) center left no-repeat;
2619
display: block;
2720
width: 220px;
2821
height: 100px;
2922
text-indent: -999em;
3023
outline: 0;
31-
margin: 10px 0;
3224
}
3325
}
3426
}
3527

3628
@media (max-width: 767px) {
3729
#grey-top {
38-
background: #f3f3f3;
30+
background: var(--white);
3931
height: 100%;
4032
}
4133
#header {
4234
display: none;
4335
}
4436
}
4537

46-
.navbar .container {
47-
padding-left: 0;
48-
padding-right: 0;
38+
.navbar-dark {
39+
background-color: var(--black);
40+
}
41+
42+
#header-search {
43+
margin: 0;
44+
}
45+
46+
.breadcrumb-bar {
47+
background-color: var(--lightgrey);
48+
}
49+
50+
.navbar-container {
51+
padding-inline-start: .25rem;
4952
}
5053

5154
#content {
5255
min-height: 600px;
5356
}
5457

55-
#sourceforge {
56-
background: url(../images/sourceforge.gif) no-repeat 50%;
57-
width: 130px;
58-
height: 30px;
59-
display: block;
60-
margin: 30px auto;
61-
text-indent: -999em;
62-
overflow: hidden;
58+
#poweredby {
59+
float: right;
60+
width: 120px;
61+
height: 56px;
62+
margin-bottom: 10px;
63+
background: url(../images/powered-by.svg) no-repeat 50%;
64+
background-size: 100% 100%;
6365
}
6466

67+
6568
#footer {
66-
clear: both;
67-
margin: 0 auto;
68-
height: 50px;
69+
display: grid;
70+
padding-block-start: 1rem;
6971
color: #222;
70-
background: url(../images/body.gif) repeat 50% 100%;
71-
.container {
72-
padding-left: 0;
73-
padding-right: 0;
74-
}
75-
ul {
76-
float: left;
77-
margin: 0 0 0 -4px;
78-
padding: 1em 1em 1em 0;
79-
li {
80-
display: inline;
81-
a {
82-
padding: 2px 4px;
83-
color: #ffcb05;
84-
&:hover {
85-
background: #333;
86-
}
72+
background-color: var(--black);
73+
74+
li {
75+
display: inline-block;
76+
a {
77+
padding: 2px 4px;
78+
color: #ffcb05;
79+
&:hover {
80+
background: var(--black);
8781
}
8882
}
8983
}
9084
}
9185

9286
#copyright {
93-
float: right;
9487
width: 240px;
9588
text-align: right;
96-
padding-top: 1em;
9789
p {
9890
padding: 0;
99-
color: #F3F3F3;
91+
color: var(--white);
10092
}
10193
}
102-
103-
#poweredby {
104-
float: right;
105-
width: 120px;
106-
height: 56px;
107-
margin-bottom: 10px;
108-
display: inline-block;
109-
background: url(../images/powered-by.svg) no-repeat 50%;
110-
background-size: 100% 100%;
111-
}

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
margin: .8em 0 0 0;
1212
}
1313
h2 {
14-
color: #0083cb;
14+
color: var(--primary);
1515
font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
1616
font-size: 1.33em;
1717
font-weight: bold;
@@ -56,14 +56,14 @@
5656
text-align: justify;
5757
padding: 10px 15px 0 15px;
5858
border: 1px solid #abe1ff;
59-
background: #FFF;
59+
background: var(--white);
6060
margin: 5px 0 10px;
6161
h3 {
6262
padding: 0;
6363
border: 0;
6464
margin: 0;
6565
font-size: 12px;
66-
color: #0083cb;
66+
color: var(--primary);
6767
}
6868
p {
6969
padding: 0 0 10px;
@@ -110,13 +110,11 @@
110110
float: left;
111111
margin-right: 1em;
112112
width: 50%;
113-
display: inline-block;
114113
}
115114
&.float-right {
116115
float: right;
117116
margin-left: 1em;
118117
width: 50%;
119-
display: inline-block;
120118
}
121119
}
122120
.img-float-left {
@@ -133,7 +131,7 @@
133131
margin-bottom: .85em;
134132
}
135133
.guimenuitem {
136-
background: #fef8c4;
134+
background: var(--whisper);
137135
}
138136
.example {
139137
margin: .25em 0 .25em 1em;

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
@use 'colors';
2+
@use 'variables';
3+
@use 'layout';
4+
@use 'general';
5+
16
@import url('bootstrap.min.css');
27

3-
@charset "utf-8";
8+
/* @charset "utf-8"; */
49

510
/* ---------------------------------------- FONTS ---------------------------------------- */
611
@font-face {
@@ -11,14 +16,5 @@
1116
font-style: normal;
1217
}
1318

14-
15-
1619
/* ------------------------------------ Documentation styles ---------------------------------- */
1720

18-
@import 'variables';
19-
@import 'layout';
20-
@import 'general';
21-
22-
.row {
23-
margin-left: 0rem;
24-
}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ declare function app:bread-nav($node as node(), $model as map(*)) as element(nav
1616

1717

1818
return
19-
<nav aria-label="breadcrumb">
20-
<ol class="breadcrumb">
21-
<li class="breadcrumb-item"><a href="documentation" data-toggle="popover" title="Version: {data($config:expath-descriptor//@version)}">Home</a></li>
22-
<li class="breadcrumb-item"><a href="#">{$file}</a></li>
23-
</ol>
19+
<nav aria-label="breadcrumb" class="breadcrumb-bar">
20+
<div class="container">
21+
<ol class="breadcrumb">
22+
<li class="breadcrumb-item"><a href="documentation" data-toggle="popover" title="Version: {data($config:expath-descriptor//@version)}">Home</a></li>
23+
<li class="breadcrumb-item"><a href="#">{$file}</a></li>
24+
</ol>
25+
</div>
2426
</nav>
2527
};

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -67,32 +67,32 @@ declare %private function docbook:to-html($nodes as node()*) {
6767
(:== DB5 HANDLING: ==:)
6868

6969
(: Will create the TOC for the DB5 document. Will only go two levels deep (deeper is not very useful for a TOC). :)
70-
declare %public function docbook:toc-db5($node as node()) as element(ul) {
70+
declare %public function docbook:toc-db5($node as node()) as element()+ {
7171
element ul {
72-
attribute class {'toc'},
73-
for $l1 in $node//db5:sect1
74-
let $l2 := $l1/db5:sect2
75-
return
76-
element li {
77-
element a {
78-
attribute href {'#' || data($l1/@xml:id)},
79-
$l1/db5:title/string()
80-
},
81-
if ($l2)
82-
then (
72+
attribute class {'toc'},
73+
for $l1 in $node//db5:sect1
74+
let $l2 := $l1/db5:sect2
75+
return
76+
element li {
77+
element a {
78+
attribute href {'#' || data($l1/@xml:id)},
79+
$l1/db5:title/string()
80+
},
81+
if ($l2) then (
8382
element ul {
84-
for $n in $l2
85-
return
86-
element li {element a {attribute href {'#' || data($n/@xml:id)}, $n/db5:title/string()}}})
87-
else ()
88-
},
89-
element button { attribute class {'btn btn-outline-primary btn-sm btn-block'},
90-
element a {
91-
attribute href {escape-html-uri('https://github.com/eXist-db/documentation/issues/new?assignees=&amp;labels=docs-outdated&amp;template=content-issue.md&amp;title=[' || $node//db5:info/db5:title || ']:')},
92-
'Improve this article'
93-
}
94-
}
95-
}
83+
for $n in $l2
84+
return
85+
element li {
86+
element a {
87+
attribute href {'#' || data($n/@xml:id)}, $n/db5:title/string()}}})
88+
else ()
89+
}
90+
},
91+
element a {
92+
attribute class {'btn btn-outline-primary btn-sm btn-block'},
93+
attribute href {escape-html-uri('https://github.com/eXist-db/documentation/issues/new?assignees=&amp;labels=docs-outdated&amp;template=content-issue.md&amp;title=[' || $node//db5:info/db5:title || ']:')},
94+
'Improve this article'
95+
}
9696
};
9797

9898
declare %private function docbook:to-html-db5($node as node()) {

0 commit comments

Comments
 (0)