css-tidyup

Comments.
Merge toc.css and toolbar.css

Author: osfameron

src/css/body.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/doc.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/footer.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);

src/css/header.css

@@ -1,3 +1,8 @@
+/** header.css
+ * 
+ *  Styles for header
+ */
+
 .header-top-row {
   background: var(--color-brand-white);
   padding: 0 var(--width-container-gutter);
@@ -195,7 +200,7 @@
 }
 
 .navbar-dropdown li.current a.navbar-item::before {
-  content: "\2023";
+  content: "\2023"; /* ‣ */
   position: absolute;
   left: -0.75em;
 }

src/css/is-this-helpful.css

@@ -1,6 +1,4 @@
 
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap");
-
 .is-this-helpful-box * {
   font-family: "Source Sans Pro", sans-serif;
 }
@@ -9,7 +7,6 @@
   display: inline-block;
   width: 100%;
   margin-bottom: 25px;
-  /* border-top: 1px solid #ccc; */
   padding-top: 25px;
   font-family: "Source Sans Pro", sans-serif;
 }

src/css/main.css

@@ -1,3 +1,13 @@
+/** main.css
+ * 
+ *  Styles for:
+
+  <main class="article" data-ceiling="topbar">
+    <div class="article-header">...
+    <article class="doc">...
+
+ */
+
 main {
   padding-bottom: 4rem;
 }
@@ -43,6 +53,7 @@ main p {
   hyphens: auto; /* NOTE in Chrome, hyphens: auto is only supported on macOS and Android */
 }
 
+/* The "You are viewing a pre-release" banner */
 .article-banner {
   align-items: center;
   background: transparent;
@@ -113,7 +124,7 @@ main p {
   min-width: 0;
 }
 
-/* color css  */
+/* color css  NB: unused? */
 .text-color-brand-blue {
   color: var(--color-brand-blue);
 }

src/css/nav.css

@@ -1,3 +1,8 @@
+/** nav.css
+ * 
+ *  Styles for nav, left-sidebar, menus, and tutorials-filter
+ */
+
 .left-sidebar {
   width: 20rem;
 }

src/css/pagination.css

@@ -1,3 +1,12 @@
+/** pagination.css
+ * 
+ *  Styles for Prev and Next navigation, enabled on some pages 
+ *  by e.g.:
+ *    :page-pagination: full
+ *  
+ *  See e.g. https://docs.couchbase.com/php-sdk/current/hello-world/platform-help.html
+ */
+
 nav.pagination {
   display: flex;
   border-top: 1px solid var(--color-border-table);

src/css/site.css

@@ -25,7 +25,6 @@
 @import "main.css";
 @import "pagination.css";
 @import "toc.css";
-@import "toolbar.css";
 
 /* Landing pages */
 @import "home.css";

src/css/toc.css

@@ -1,3 +1,12 @@
+/** toc.css
+ * 
+ *  Styles for Table of Contents
+ *  which also includes:
+ *   - Tools (edit on github)
+ *
+ *  See also: is-it-helpful.css
+ */
+
 .toc {
   font-size: 0.875rem;
 }
@@ -7,22 +16,7 @@
   line-height: 1;
 }
 
-.sidebar-box {
-  position: fixed; /* for IE */
-  width: inherit; /* for position: fixed */
-  position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-  top: var(--height-to-body);
-  max-height: var(--height-toc-sidebar);
-  overflow-y: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  padding-right: var(--base-space);
-  padding-left: var(--base-space);
-}
 
-.sidebar-box::-webkit-scrollbar {
-  width: 0;
-}
 
 .toc.embedded .toc-menu {
   margin-top: 1rem;
@@ -125,3 +119,57 @@
 .toc ul li[data-level="2"] a {
   padding-top: 2px;
 }
+
+/* Sidebar Box and Tools */
+
+.sidebar-box {
+  position: fixed; /* for IE */
+  width: inherit; /* for position: fixed */
+  position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+  top: var(--height-to-body);
+  max-height: var(--height-toc-sidebar);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-right: var(--base-space);
+  padding-left: var(--base-space);
+}
+
+.sidebar-box::-webkit-scrollbar {
+  width: 0;
+}
+
+/* Tools e.g. "Edit on Github" */
+
+.sidebar-box .tools {
+  padding-top: 1.25rem;
+  display: inline-block;
+  width: 100%;
+}
+
+.tools ul {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.tools .edit {
+  line-height: 1;
+  display: inline-block;
+  width: 100%;
+  list-style: none;
+}
+
+.tools .edit a {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  background: url(../img/edit.svg) no-repeat center left;
+  background-size: 15px;
+  vertical-align: top;
+  color: #999;
+  padding-left: 25px;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-family: "Source Sans Pro", sans-serif;
+}