Added sitemap and documentation to Sass files

This commit is contained in:
ポール ウェッブ 2018-08-22 16:57:45 -05:00
parent d31d26b2df
commit 1161adace4
6 changed files with 218 additions and 170 deletions

22
documents/sitemap.md Normal file
View file

@ -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)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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;
}
// G R I D
.__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;
}
.__button-padding-vertical {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/**
* Loader
*
* @class .__loading
* @selector {::before}
* @selector {::after}
*/
.__loading {
width: 100%; height: 10rem;
position: relative;

View file

@ -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);

View file

@ -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,91 +136,13 @@
}
}
.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;
}
}
.tour__content__meme,
.tour__content__trends {
.tour__content__meme {
overflow-y: auto;
position: relative;
}
.tour__content__meme::after {
@include clearfix;
&::after {
@include clearfix;
}
}
.tour__content__meme__canvas {
@ -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;
}
}