Added sitemap and documentation to Sass files

documents/sitemap.md

@@ -0,0 +1,22 @@
+---
+title: Sitemap
+---
+
+- [/](/)
+- [/api](/api)
+- [/build](/build)
+- [/community](/community)
+- [/contribute](/contribute)
+- [/glossary](/glossary)
+- [/overview](/overview)
+- [/resources](/resources)
+  - [/claimtrie](/resources/claimtrie)
+  - [/encrypt-lbrycrd](/resources/encrypt-lbrycrd)
+  - [/lbry-claimtrie](/resources/lbry-claimtrie)
+  - [/pow](/resources/pow)
+  - [/regtest-setup](/resources/regtest-setup)
+  - [/repository-standards](/resources/repository-standards)
+  - [/schema](/resources/schema)
+  - [/signing-claim](/resources/signing-claim)
+  - [/uri](/resources/uri)
+- [/tour](/tour)

sass/init/_extends.scss

@@ -1,5 +1,25 @@
-
+/**
-//  B U T T O N S
+ * Button
+ *
+ * @class .__button-base
+ * @class .__button-basic
+ *
+ * @class .__button-plain
+ * @selector {::after}
+ * @state {:hover}
+ *
+ * @class .__button-black
+ * @state {:hover}
+ *
+ * @class .__button-white
+ * @state {:hover}
+ *
+ * @class .__button-gray
+ * @state {:hover}
+ *
+ * @class .__button-padding-horizontal
+ * @class .__button-padding-vertical
+ */
 
 .__button-base {
   border: 1px solid;
@@ -95,95 +115,26 @@
   }
 }
 
-.__button-padding-vertical {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .__button-padding-horizontal {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-
+.__button-padding-vertical {
-
+  padding-top: 0.5rem;
-//  G R I D
+  padding-bottom: 0.5rem;
-
-.__grid {
-  &:first-of-type {
-    cursor: default;
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: 0.2rem;
-    text-transform: uppercase;
-  }
-
-  &:not(:first-of-type) {
-    border-left: 1px solid $gray;
-
-    .col {
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-
-      &:last-of-type {
-        border-right-style: solid;
-        border-right-width: 1px;
-      }
-
-      &:not(.red):not(.orange):not(.yellow):not(.green) {
-        border-color: $gray;
-      }
-    }
-  }
-
-  @media (min-width: 600px) {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-
-    .col {
-      display: table-cell;
-    }
-  }
-}
-
-.col {
-  padding: 0.5rem 1rem;
-  width: 100%;
-
-  &:not(:first-of-type) {
-    text-align: right;
-  }
-}
-
-// Padded columns
-.grid-padded {
-  @media (min-width: 600px) {
-    margin-right: -1rem;
-    margin-left: -1rem;
-
-    .grid {
-      border-spacing: 1rem 0;
-    }
-  }
-}
-
-// Vertically center grid content
-// Requires content within the column to be inline/inline-block
-.grid-align-middle .col {
-  vertical-align: middle;
-}
-
-.grid-reverse {
-  direction: rtl;
-
-  .col {
-    direction: ltr;
-  }
 }
 
 
 
+/**
+ * Loader
+ *
+ * @class .__loading
+ * @selector {::before}
+ * @selector {::after}
+ */
+
 .__loading {
   width: 100%; height: 10rem;
   position: relative;

sass/pages/_api.scss

@@ -1,3 +1,10 @@
+/**
+ * API Wrapper
+ *
+ * @class .__slate
+ * @selector {::after}
+ */
+
 .__slate {
   width: 100%; height: 100%;
   position: relative;
@@ -9,6 +16,22 @@
 
 
 
+/**
+ * API | Table of Contents
+ *
+ * @class .api__toc
+ * @class .api__toc__search
+ * @class .api__toc__search__field
+ *
+ * @class .api__toc__search__clear
+ * @state {.active}
+ *
+ * @class .api__toc__items
+ *
+ * @class .api__toc__item
+ * @state {:hover}
+ */
+
 .api__toc {
   width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
   top: 4rem; left: 0; bottom: 0;
@@ -80,6 +103,21 @@
 
 
 
+/**
+ * API | Main Content
+ *
+ * @class .api__content
+ * @class .api__content__body
+ * @class .api__content__body__arguments
+ *
+ * @class .api__content__body__argument
+ * @selector {::after}
+ * @selector {:last-of-type}
+ * @selector {:nth-child}
+ *
+ * @class .api__content__example
+ */
+
 .api__content {
   display: grid;
   float: right;
@@ -198,8 +236,6 @@
   }
 }
 
-
-
 .api__content__example {
   background-color: mix($gray, $black, 10%);
   border-bottom: 1px solid rgba($white, 0.1);

sass/pages/_tour.scss

@@ -1,3 +1,12 @@
+/**
+ * Tour | Wrapper
+ *
+ * @class .tour
+ * @selector {::before}
+ * @selector {::after}
+ * @state {.waiting}
+ */
+
 .tour {
   border-top: 1px solid rgba($black, 0.05);
   position: relative;
@@ -21,6 +30,17 @@
 
 
 
+/**
+ * Tour | Sidebar
+ *
+ * @class .tour__sidebar
+ *
+ * @class .tour__sidebar__example
+ * @selector {:last-of-type}
+ * @state {.active}
+ * @state {:hover}
+ */
+
 .tour__sidebar {
   width: 250px; height: 100%;
 
@@ -75,6 +95,30 @@
 
 
 
+/**
+ * Tour | Content
+ *
+ * @class .tour__content
+ *
+ * @class .tour__content__meme
+ * @selector {::after}
+ *
+ * @class .tour__content__meme__canvas
+ *
+ * @class .tour__content__meme__canvas__thumbnail
+ * @selector {:last-of-type}
+ * @state {.selected}
+ *
+ * @class .tour__content__meme__editor
+ *
+ * @class .tour__content__trends
+ * @selector {::after}
+ * @state {:empty}
+ *
+ * @class .tour__content__trend
+ * @class .tour__content__urlbar
+ */
+
 .tour__content {
   width: calc(100% - 250px); height: 100%; min-height: 500px;
 
@@ -92,92 +136,14 @@
   }
 }
 
-.tour__content__urlbar {
+.tour__content__meme {
-  border: 1px solid rgba($black, 0.05);
-  display: flex;
-  margin-bottom: 1rem;
-
-  button,
-  input,
-  span {
-    float: left;
-    vertical-align: middle;
-  }
-
-  button,
-  span {
-    height: 100%;
-    line-height: 2rem;
-  }
-
-  button {
-    color: $white;
-    font-size: 1rem;
-    position: relative;
-    text-transform: lowercase;
-    transition: background-color 0.2s;
-    width: 6rem;
-
-    &::after {
-      width: calc(100% + 2px); height: calc(100% + 2px);
-      top: -1px; left: -1px;
-
-      content: "";
-      position: absolute;
-      transition: background-color 0.2s;
-      z-index: -1;
-    }
-
-    &:not(:hover) {
-      background-color: $black;
-
-      &::after {
-        background-color: $black;
-      }
-    }
-
-    &:hover {
-      background-color: $teal;
-
-      &::after {
-        background-color: $teal;
-      }
-    }
-  }
-
-  input {
-    font-size: 1rem;
-    width: calc(100% - 9.5rem);
-
-    &::placeholder {
-      color: rgba($black, 0.5);
-      opacity: 1;
-    }
-  }
-
-  span {
-    @include no-user-select;
-    color: rgba($black, 0.5);
-    cursor: default;
-    font-size: 1rem;
-    text-align: right;
-    width: 3.5rem;
-  }
-}
-
-
-
-.tour__content__meme,
-.tour__content__trends {
   overflow-y: auto;
   position: relative;
-}
 
-
+  &::after {
-
-.tour__content__meme::after {
     @include clearfix;
   }
+}
 
 .tour__content__meme__canvas {
   float: left;
@@ -328,12 +294,12 @@
   }
 }
 
-
-
 .tour__content__trends {
   display: grid;
   grid-gap: 2%;
   grid-template-columns: 32% 32% 32%;
+  overflow-y: auto;
+  position: relative;
 
   &:empty {
     @extend .__loading;
@@ -369,3 +335,76 @@
     }
   }
 }
+
+.tour__content__urlbar {
+  border: 1px solid rgba($black, 0.05);
+  display: flex;
+  margin-bottom: 1rem;
+
+  button,
+  input,
+  span {
+    float: left;
+    vertical-align: middle;
+  }
+
+  button,
+  span {
+    height: 100%;
+    line-height: 2rem;
+  }
+
+  button {
+    color: $white;
+    font-size: 1rem;
+    position: relative;
+    text-transform: lowercase;
+    transition: background-color 0.2s;
+    width: 6rem;
+
+    &::after {
+      width: calc(100% + 2px); height: calc(100% + 2px);
+      top: -1px; left: -1px;
+
+      content: "";
+      position: absolute;
+      transition: background-color 0.2s;
+      z-index: -1;
+    }
+
+    &:not(:hover) {
+      background-color: $black;
+
+      &::after {
+        background-color: $black;
+      }
+    }
+
+    &:hover {
+      background-color: $teal;
+
+      &::after {
+        background-color: $teal;
+      }
+    }
+  }
+
+  input {
+    font-size: 1rem;
+    width: calc(100% - 9.5rem);
+
+    &::placeholder {
+      color: rgba($black, 0.5);
+      opacity: 1;
+    }
+  }
+
+  span {
+    @include no-user-select;
+    color: rgba($black, 0.5);
+    cursor: default;
+    font-size: 1rem;
+    text-align: right;
+    width: 3.5rem;
+  }
+}