Reorganize site.css

Refactor callouts.css

base.css - document, purge tailwind

css-tidyup

Comments.
Merge toc.css and toolbar.css

css-tidyup minor components

Author: osfameron

src/css/asciidoctor-external-callout.css

@@ -1,3 +1,8 @@
+/** base.css
+ * 
+ *  Resets and other basic CSS
+ */
+
 *,
 *::before,
 *::after {
@@ -91,7 +96,6 @@ i {
 .container,
 .container-fluid {
   margin: 0 auto;
-  /*  max-width: var(--width-container); */
   padding: 0 var(--width-container-gutter);
 }
 
@@ -119,16 +123,8 @@ i {
     padding-left: 0;
   }
 }
-/* .container-fluid {
-  max-width: var(--width-container-fluid);
-  padding: 0;
-  margin: 0 auto;
-} */
-
-/* checkbox css  */
-
-/* Base for label styling */
 
+/* Checkbox css  */
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
   position: absolute;
@@ -203,6 +199,7 @@ i {
   color: #aaa;
 }
 
+/* Labels */
 label:hover::before {
   border: 2px solid var(--color-brand-blue);
   outline: none;
@@ -216,219 +213,3 @@ label::after {
   outline: none;
   outline-width: 0;
 }
-
-
-/* Common margin padding css class */
-/* margin-top */
-.mt-0 {
-  margin-top: 0 !important;
-}
-
-.mt-1 {
-  margin-top: var(--base-extra-small-space) !important;  /* 8px */
-}
-
-.mt-2 {
-  margin-top: var(--base-small-space) !important;        /* 12px */
-}
-
-.mt-3 {
-  margin-top: var(--base-space) !important;             /* 16px */
-}
-
-.mt-4 {
-  margin-top: var(--base-medium-space) !important;    /* 24px */
-}
-
-.mt-5 {
-  margin-top: var(--base-large-space) !important;     /* 32px */
-}
-
-/* margin-bottom */
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-.mb-1 {
-  margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-}
-
-.mb-2 {
-  margin-bottom: var(--base-small-space) !important;     /* 12px */
-}
-
-.mb-3 {
-  margin-bottom: var(--base-space) !important;         /* 16px */
-}
-
-.mb-4 {
-  margin-bottom: var(--base-medium-space) !important;   /* 24px */
-}
-
-.mb-5 {
-  margin-bottom: var(--base-large-space) !important;   /* 32px */
-}
-
-/* Responsive css */
-/* For tablet,ipad Portrait view mode 1024px screen */
-@media screen and (min-width: 740px) {
-  /* Spacing media query */
-  .mt-sm-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-sm-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-sm-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-sm-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-sm-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-sm-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-sm-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-sm-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-sm-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-sm-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-sm-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-sm-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}
-/* For tablet,ipad landscape mode 1024px screen */
-@media screen and (min-width: 993px) {
-  .container-fluid {
-    /*  max-width: var(--width-container-fluid); */
-    padding: 0;
-    margin: 0 auto;
-  }
-
-  /* Spacing media query */
-  .mt-md-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-md-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-md-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-md-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-md-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-md-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-md-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-md-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-md-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-md-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-md-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-md-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}
-/* For large desktop to small desktop screen */
-@media screen and (min-width: 1200px) {
-  /* Spacing media query */
-  .mt-lg-0 {
-    margin-top: 0 !important;
-  }
-
-  .mt-lg-1 {
-    margin-top: var(--base-extra-small-space) !important;  /* 8px */
-  }
-
-  .mt-lg-2 {
-    margin-top: var(--base-small-space) !important;        /* 12px */
-  }
-
-  .mt-lg-3 {
-    margin-top: var(--base-space) !important;             /* 16px */
-  }
-
-  .mt-lg-4 {
-    margin-top: var(--base-medium-space) !important;    /* 24px */
-  }
-
-  .mt-lg-5 {
-    margin-top: var(--base-large-space) !important;     /* 32px */
-  }
-
-  /* margin-bottom */
-  .mb-lg-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .mb-lg-1 {
-    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
-  }
-
-  .mb-lg-2 {
-    margin-bottom: var(--base-small-space) !important;     /* 12px */
-  }
-
-  .mb-lg-3 {
-    margin-bottom: var(--base-space) !important;         /* 16px */
-  }
-
-  .mb-lg-4 {
-    margin-bottom: var(--base-medium-space) !important;   /* 24px */
-  }
-
-  .mb-lg-5 {
-    margin-bottom: var(--base-large-space) !important;   /* 32px */
-  }
-}

src/css/base.css

@@ -1,6 +1,10 @@
-/* NOTE
-  min-width of flex: 1 container = content-width to prevent wrapping by default; 
-  min-width: 0 lets content wrap */
+/** body.css
+ * 
+ *  Styles for body, main, and .nav
+ *  TODO: compare main.css and nav.css
+ */
+
+
 
 div.body {
   display: flex;
@@ -15,6 +19,9 @@ div.body {
   margin-top: var(--height-navbar);
 }
 
+/* NOTE
+  min-width of flex: 1 container = content-width to prevent wrapping by default; 
+  min-width: 0 lets content wrap */
 main {
   flex: 1;
   min-width: 0;

src/css/body.css

@@ -0,0 +1,23 @@
+/** callouts.css
+ *
+ *  Format code callouts https://docs.asciidoctor.org/asciidoc/latest/verbatim/callouts/
+ *  
+ *  Support for Ray's Externally defined callouts:
+ *      https://www.npmjs.com/package/asciidoctor-external-callout
+ *
+ *  Utility class `.no-callouts` lets you hide callouts in listing blocks.
+ *  Example:
+ *      [source.no-callouts,sqlpp]
+ *      --
+ *      SELECT foo from... <1>
+ *      --
+ */
+
+div.external-callout-block i.conum {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.no-callouts .conum {
+  display: none !important;
+}

src/css/callouts.css

@@ -1,3 +1,9 @@
+/** clipboard.css
+ * 
+ *  Styles for View Source code button
+ *  and other listing block formatting
+ */
+
 .view-source-button,
 .copy-code-button {
   color: var(--color-brand-gray4);

src/css/clipboard.css

@@ -1,3 +1,9 @@
+/** component-frame.css
+ * 
+ *  .component-frame and .frame-body
+ *  NB: may be unused, deleted in 4d2db54746392090df7084978770f58f4709e56c ?
+ */
+
 .component-frame {
   background: var(--color-brand-gray6);
   padding: 0 15px 0 15px;

src/css/component-frame.css

@@ -1,3 +1,8 @@
+/** crumbs.css
+ * 
+ *  Format the breadcrumbs 
+ */
+
 .crumbs {
   color: var(--color-muted);
   font-weight: var(--weight-light);

src/css/crumbs.css

@@ -1,3 +1,10 @@
+/** doc.css
+ * 
+ *  Styles for <article class="doc">
+ *
+ *  Looks like base formatting for the Asciidoc content.
+ */
+
 .doc {
   padding-top: 1.25rem;
 }

src/css/disable-callouts.css

@@ -1,3 +1,8 @@
+/** external-link-icon.css
+ * 
+ *  Add external link icon to links that aren't to couchbase.com
+ */
+
 .doc a[href^="https://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
 .doc a[href^="http://"]:not([href*=".couchbase.com"]):not([href*="localhost"]):not([href*="127.0.0.1"]):not(.remove-ext-icon)::after,
 a.add-ext-icon::after {

src/css/doc.css

@@ -1,4 +1,9 @@
-/* these elements are created by Jira Issue Collector script */
+/** feedback.css
+ * 
+ *  I believe these elements are created by 
+ *  Jira Issue Collector script.
+ *  e.g. we don't output these in docs-ui
+ */
 
 #atlwdg-trigger.atlwdg-trigger {
   display: none;

src/css/external-link-icon.css

@@ -1,3 +1,9 @@
+/** footer.css
+ * 
+ *  Styles for footer
+ *  NB: we have a couple of 'float' declarations below, to investigate.
+ */
+
 .footer {
   background-color: var(--color-footer-bg);
   color: var(--color-footer-text);