Skip to content

Commit f9f94f1

Browse files
osfameronosfameron
committed
Reorganize site.css
Refactor callouts.css base.css - document, purge tailwind css-tidyup Comments. Merge toc.css and toolbar.css css-tidyup minor components
1 parent 5e85625 commit f9f94f1

30 files changed

+275
-322
lines changed

‎src/css/asciidoctor-external-callout.css‎

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

‎src/css/base.css‎

Lines changed: 7 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/** base.css
2+
*
3+
* Resets and other basic CSS
4+
*/
5+
16
*,
27
*::before,
38
*::after {
@@ -91,7 +96,6 @@ i {
9196
.container,
9297
.container-fluid {
9398
margin: 0 auto;
94-
/* max-width: var(--width-container); */
9599
padding: 0 var(--width-container-gutter);
96100
}
97101

@@ -119,16 +123,8 @@ i {
119123
padding-left: 0;
120124
}
121125
}
122-
/* .container-fluid {
123-
max-width: var(--width-container-fluid);
124-
padding: 0;
125-
margin: 0 auto;
126-
} */
127-
128-
/* checkbox css */
129-
130-
/* Base for label styling */
131126

127+
/* Checkbox css */
132128
[type="checkbox"]:not(:checked),
133129
[type="checkbox"]:checked {
134130
position: absolute;
@@ -203,6 +199,7 @@ i {
203199
color: #aaa;
204200
}
205201

202+
/* Labels */
206203
label:hover::before {
207204
border: 2px solid var(--color-brand-blue);
208205
outline: none;
@@ -216,219 +213,3 @@ label::after {
216213
outline: none;
217214
outline-width: 0;
218215
}
219-
220-
221-
/* Common margin padding css class */
222-
/* margin-top */
223-
.mt-0 {
224-
margin-top: 0 !important;
225-
}
226-
227-
.mt-1 {
228-
margin-top: var(--base-extra-small-space) !important; /* 8px */
229-
}
230-
231-
.mt-2 {
232-
margin-top: var(--base-small-space) !important; /* 12px */
233-
}
234-
235-
.mt-3 {
236-
margin-top: var(--base-space) !important; /* 16px */
237-
}
238-
239-
.mt-4 {
240-
margin-top: var(--base-medium-space) !important; /* 24px */
241-
}
242-
243-
.mt-5 {
244-
margin-top: var(--base-large-space) !important; /* 32px */
245-
}
246-
247-
/* margin-bottom */
248-
.mb-0 {
249-
margin-bottom: 0 !important;
250-
}
251-
252-
.mb-1 {
253-
margin-bottom: var(--base-extra-small-space) !important; /* 8px */
254-
}
255-
256-
.mb-2 {
257-
margin-bottom: var(--base-small-space) !important; /* 12px */
258-
}
259-
260-
.mb-3 {
261-
margin-bottom: var(--base-space) !important; /* 16px */
262-
}
263-
264-
.mb-4 {
265-
margin-bottom: var(--base-medium-space) !important; /* 24px */
266-
}
267-
268-
.mb-5 {
269-
margin-bottom: var(--base-large-space) !important; /* 32px */
270-
}
271-
272-
/* Responsive css */
273-
/* For tablet,ipad Portrait view mode 1024px screen */
274-
@media screen and (min-width: 740px) {
275-
/* Spacing media query */
276-
.mt-sm-0 {
277-
margin-top: 0 !important;
278-
}
279-
280-
.mt-sm-1 {
281-
margin-top: var(--base-extra-small-space) !important; /* 8px */
282-
}
283-
284-
.mt-sm-2 {
285-
margin-top: var(--base-small-space) !important; /* 12px */
286-
}
287-
288-
.mt-sm-3 {
289-
margin-top: var(--base-space) !important; /* 16px */
290-
}
291-
292-
.mt-sm-4 {
293-
margin-top: var(--base-medium-space) !important; /* 24px */
294-
}
295-
296-
.mt-sm-5 {
297-
margin-top: var(--base-large-space) !important; /* 32px */
298-
}
299-
300-
/* margin-bottom */
301-
.mb-sm-0 {
302-
margin-bottom: 0 !important;
303-
}
304-
305-
.mb-sm-1 {
306-
margin-bottom: var(--base-extra-small-space) !important; /* 8px */
307-
}
308-
309-
.mb-sm-2 {
310-
margin-bottom: var(--base-small-space) !important; /* 12px */
311-
}
312-
313-
.mb-sm-3 {
314-
margin-bottom: var(--base-space) !important; /* 16px */
315-
}
316-
317-
.mb-sm-4 {
318-
margin-bottom: var(--base-medium-space) !important; /* 24px */
319-
}
320-
321-
.mb-sm-5 {
322-
margin-bottom: var(--base-large-space) !important; /* 32px */
323-
}
324-
}
325-
/* For tablet,ipad landscape mode 1024px screen */
326-
@media screen and (min-width: 993px) {
327-
.container-fluid {
328-
/* max-width: var(--width-container-fluid); */
329-
padding: 0;
330-
margin: 0 auto;
331-
}
332-
333-
/* Spacing media query */
334-
.mt-md-0 {
335-
margin-top: 0 !important;
336-
}
337-
338-
.mt-md-1 {
339-
margin-top: var(--base-extra-small-space) !important; /* 8px */
340-
}
341-
342-
.mt-md-2 {
343-
margin-top: var(--base-small-space) !important; /* 12px */
344-
}
345-
346-
.mt-md-3 {
347-
margin-top: var(--base-space) !important; /* 16px */
348-
}
349-
350-
.mt-md-4 {
351-
margin-top: var(--base-medium-space) !important; /* 24px */
352-
}
353-
354-
.mt-md-5 {
355-
margin-top: var(--base-large-space) !important; /* 32px */
356-
}
357-
358-
/* margin-bottom */
359-
.mb-md-0 {
360-
margin-bottom: 0 !important;
361-
}
362-
363-
.mb-md-1 {
364-
margin-bottom: var(--base-extra-small-space) !important; /* 8px */
365-
}
366-
367-
.mb-md-2 {
368-
margin-bottom: var(--base-small-space) !important; /* 12px */
369-
}
370-
371-
.mb-md-3 {
372-
margin-bottom: var(--base-space) !important; /* 16px */
373-
}
374-
375-
.mb-md-4 {
376-
margin-bottom: var(--base-medium-space) !important; /* 24px */
377-
}
378-
379-
.mb-md-5 {
380-
margin-bottom: var(--base-large-space) !important; /* 32px */
381-
}
382-
}
383-
/* For large desktop to small desktop screen */
384-
@media screen and (min-width: 1200px) {
385-
/* Spacing media query */
386-
.mt-lg-0 {
387-
margin-top: 0 !important;
388-
}
389-
390-
.mt-lg-1 {
391-
margin-top: var(--base-extra-small-space) !important; /* 8px */
392-
}
393-
394-
.mt-lg-2 {
395-
margin-top: var(--base-small-space) !important; /* 12px */
396-
}
397-
398-
.mt-lg-3 {
399-
margin-top: var(--base-space) !important; /* 16px */
400-
}
401-
402-
.mt-lg-4 {
403-
margin-top: var(--base-medium-space) !important; /* 24px */
404-
}
405-
406-
.mt-lg-5 {
407-
margin-top: var(--base-large-space) !important; /* 32px */
408-
}
409-
410-
/* margin-bottom */
411-
.mb-lg-0 {
412-
margin-bottom: 0 !important;
413-
}
414-
415-
.mb-lg-1 {
416-
margin-bottom: var(--base-extra-small-space) !important; /* 8px */
417-
}
418-
419-
.mb-lg-2 {
420-
margin-bottom: var(--base-small-space) !important; /* 12px */
421-
}
422-
423-
.mb-lg-3 {
424-
margin-bottom: var(--base-space) !important; /* 16px */
425-
}
426-
427-
.mb-lg-4 {
428-
margin-bottom: var(--base-medium-space) !important; /* 24px */
429-
}
430-
431-
.mb-lg-5 {
432-
margin-bottom: var(--base-large-space) !important; /* 32px */
433-
}
434-
}

‎src/css/body.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
/* NOTE
2-
min-width of flex: 1 container = content-width to prevent wrapping by default;
3-
min-width: 0 lets content wrap */
1+
/** body.css
2+
*
3+
* Styles for body, main, and .nav
4+
* TODO: compare main.css and nav.css
5+
*/
6+
7+
48

59
div.body {
610
display: flex;
@@ -15,6 +19,9 @@ div.body {
1519
margin-top: var(--height-navbar);
1620
}
1721

22+
/* NOTE
23+
min-width of flex: 1 container = content-width to prevent wrapping by default;
24+
min-width: 0 lets content wrap */
1825
main {
1926
flex: 1;
2027
min-width: 0;

‎src/css/callouts.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/** callouts.css
2+
*
3+
* Format code callouts https://docs.asciidoctor.org/asciidoc/latest/verbatim/callouts/
4+
*
5+
* Support for Ray's Externally defined callouts:
6+
* https://www.npmjs.com/package/asciidoctor-external-callout
7+
*
8+
* Utility class `.no-callouts` lets you hide callouts in listing blocks.
9+
* Example:
10+
* [source.no-callouts,sqlpp]
11+
* --
12+
* SELECT foo from... <1>
13+
* --
14+
*/
15+
16+
div.external-callout-block i.conum {
17+
margin-left: 10px;
18+
margin-right: 10px;
19+
}
20+
21+
.no-callouts .conum {
22+
display: none !important;
23+
}

‎src/css/clipboard.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/** clipboard.css
2+
*
3+
* Styles for View Source code button
4+
* and other listing block formatting
5+
*/
6+
17
.view-source-button,
28
.copy-code-button {
39
color: var(--color-brand-gray4);

‎src/css/component-frame.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/** component-frame.css
2+
*
3+
* .component-frame and .frame-body
4+
* NB: may be unused, deleted in 4d2db54746392090df7084978770f58f4709e56c ?
5+
*/
6+
17
.component-frame {
28
background: var(--color-brand-gray6);
39
padding: 0 15px 0 15px;

‎src/css/crumbs.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/** crumbs.css
2+
*
3+
* Format the breadcrumbs
4+
*/
5+
16
.crumbs {
27
color: var(--color-muted);
38
font-weight: var(--weight-light);

‎src/css/disable-callouts.css‎

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

‎src/css/doc.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/** doc.css
2+
*
3+
* Styles for <article class="doc">
4+
*
5+
* Looks like base formatting for the Asciidoc content.
6+
*/
7+
18
.doc {
29
padding-top: 1.25rem;
310
}

‎src/css/external-link-icon.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/** external-link-icon.css
2+
*
3+
* Add external link icon to links that aren't to couchbase.com
4+
*/
5+
16
.doc a[href^="https://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
27
.doc a[href^="http://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
38
a.add-ext-icon::after {

0 commit comments

Comments
 (0)