Skip to content

Commit c3b6ce7

Browse files
karenmajewiczkarenmajewicz
authored
Merge pull request #119 from OpenGeoMetadata/118_searchBug
re-styles breadcrumbs
2 parents af3e9f5 + a2cbc57 commit c3b6ce7

File tree

5 files changed

+158
-411
lines changed

5 files changed

+158
-411
lines changed

‎docs/stylesheets/extra.css‎

Lines changed: 131 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,178 @@
1-
/* Text styles */
1+
/*-----------------------------------------------------------
2+
LAYOUT & WIDTH
3+
-----------------------------------------------------------*/
24

5+
/* Set wider max content width */
6+
.md-grid {
7+
max-width: 90%;
8+
}
39

4-
/*
5-
# for the readthedocs theme
6-
.wy-nav-content {
7-
max-width: none;
10+
11+
/*-----------------------------------------------------------
12+
COLOR SCHEMES
13+
-----------------------------------------------------------*/
14+
15+
[data-md-color-scheme="default"] {
16+
--md-primary-fg-color: #2b6ca1;
17+
--md-accent-fg-color: #09c36c;
818
}
9-
*/
1019

11-
/* full width */
12-
.md-grid {
13-
max-width: 90%;
20+
[data-md-color-scheme="slate"] {
21+
--md-primary-fg-color: #09c36c;
22+
--md-accent-fg-color: #2b6ca1;
23+
}
24+
25+
26+
/*-----------------------------------------------------------
27+
TYPOGRAPHY
28+
-----------------------------------------------------------*/
29+
30+
/* Headings */
31+
.md-typeset h2 {
32+
color: inherit;
33+
font-weight: bold;
34+
font-size: 1.3em;
1435
}
1536

37+
/* Paragraphs and list items (scoped to content area) */
38+
.md-typeset > p,
39+
.md-typeset > ul > li,
40+
.md-typeset > ol > li {
41+
font-size: 1.1em;
42+
margin: 0 0 0.75em;
43+
}
44+
45+
/* Navigation section label */
1646
.md-nav__item--section > .md-nav__link[for] {
17-
color: inherit;
47+
color: inherit;
48+
}
49+
50+
/* Tabs */
51+
.md-tabs__link {
52+
font-size: 1.75em;
1853
}
1954

20-
/*
21-
:root {
22-
--md-primary-fg-color: #1F4068;
23-
--md-accent-fg-color: #C44601;
24-
--md-primary-fg-color--light: #ADD8E6;
25-
--md-primary-fg-color--dark: #90030C;
55+
/* Header topic text */
56+
.md-header__topic {
57+
font-size: 1.5em;
58+
line-height: 2em;
2659
}
27-
*/
2860

29-
[data-md-color-scheme="default"] {
30-
--md-primary-fg-color: #2b6ca1;
31-
--md-accent-fg-color: #09c36c;
32-
}
3361

34-
[data-md-color-scheme="slate"] {
35-
--md-primary-fg-color: #09c36c;
36-
--md-accent-fg-color: #2b6ca1;
37-
}
62+
/*-----------------------------------------------------------
63+
BREADCRUMBS (Navigation Path)
64+
-----------------------------------------------------------*/
3865

39-
.md-typeset h2{
40-
color: inherit;
41-
font-weight: bold;
42-
font-size: 1.3em;
66+
.md-path {
67+
border-bottom: 1px solid #ddd;
68+
padding-bottom: 0.3em;
69+
margin-bottom: 1.25rem;
70+
font-size: 0.8rem;
71+
font-family: "Roboto", sans-serif;
72+
font-weight: 400;
4373
}
4474

45-
/*
46-
p {
47-
font-size: 1.2em;
48-
}
4975

50-
li {
51-
font-size: 1.2em;
52-
}
53-
*/
76+
.md-path__list {
77+
display: flex;
78+
flex-wrap: wrap;
79+
list-style: none;
80+
margin: 0 !important; /* override default margin from theme or browser */
81+
padding: 0;
82+
}
5483

55-
# for the material theme
56-
increase default font sizep, li{
57-
margin: 0 0 0.75em;
58-
font-size: 1.1em;
59-
}
84+
.md-path__item {
85+
display: inline-flex;
86+
align-items: center;
87+
margin: 0 !important; /* force removal of top/bottom/side spacing */
88+
}
6089

61-
.center {
62-
text-align: center;
90+
/* Breadcrumb links (non-current) */
91+
.md-path__link {
92+
color: var(--md-default-fg-color--light);
93+
text-decoration: none;
94+
transition: color 0.2s ease;
6395
}
6496

97+
.md-path__link:hover {
98+
color: var(--md-primary-fg-color);
99+
}
65100

66-
increase header size and fonts.md-header__topic {
67-
font-size: 1.5em;
68-
line-height: 2em;
69-
}
101+
.md-path__link:focus {
102+
outline: 2px dotted var(--md-primary-fg-color);
103+
outline-offset: 2px;
104+
}
70105

71-
.md-tabs__link {
72-
font-size: 1.75em;
73-
}
106+
/* Ensure proper spacing on inner span */
107+
.md-path__link,
108+
.md-path__link > .md-ellipsis {
109+
margin: 0;
110+
padding: 0;
111+
line-height: 1;
112+
display: inline;
113+
}
114+
115+
/* Breadcrumb separator */
116+
.md-path__item + .md-path__item::before {
117+
content: "›";
118+
color: var(--md-default-fg-color--lighter);
119+
margin: 0 0.25rem;
120+
padding: 0;
121+
line-height: 1;
122+
vertical-align: middle;
123+
}
74124

75-
/* Hide main nav title */
125+
/* Current breadcrumb (non-clickable final item) */
126+
.md-path__current {
127+
/* color: #6a6a6a; */
128+
font-weight: 600;
129+
cursor: default;
130+
text-decoration: none;
131+
}
132+
/*-----------------------------------------------------------
133+
NAVIGATION / SIDEBAR
134+
-----------------------------------------------------------*/
135+
136+
/* Hide hamburger menu label */
76137
label[for="__drawer"] {
77-
display: none;
138+
display: none;
78139
}
79140

80141

81-
/* style the left hand nav section */
142+
/*-----------------------------------------------------------
143+
UTILITY CLASSES
144+
-----------------------------------------------------------*/
82145

83-
/*
84-
.md-nav--primary {
85-
background-color: #ADD8E6;
86-
width: 100%;
87-
padding: 2em;
88-
border: .1em;
89-
border-style: dotted;
90-
border-color: black;
91-
}
92-
*/
146+
.center {
147+
text-align: center;
148+
}
93149

94150

151+
/*-----------------------------------------------------------
152+
CUSTOM GRID LAYOUT
153+
-----------------------------------------------------------*/
95154

96-
/* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */
155+
/* Responsive single-column layout */
97156
@media screen and (max-width: 640px) {
98-
#grid-col { grid-template-columns: 100%; }
157+
#grid-col {
158+
grid-template-columns: 100%;
159+
}
99160
}
100161

101-
/* (A) GRID CONTAINER */
162+
/* Grid container */
102163
#grid-line {
103164
display: grid;
104-
grid-template-columns: auto auto ;
165+
grid-template-columns: auto auto;
105166
grid-gap: 20px;
106167
}
107168

108-
/* (B) GRID CELL */
169+
/* Grid cell styling */
109170
div.cell {
110171
border: 1px solid #e0e0e0;
111172
padding: 10px;
112173
}
113174

114-
/* (C) SPAN MULTIPLE COLUMNS */
175+
/* Span full width */
115176
.spancol {
116177
grid-column-start: 1;
117178
grid-column-end: 2;

0 commit comments

Comments
 (0)