Started work on new Tour page
This commit is contained in:
ポール ウェッブ
parent
c3f8c6c65b
commit
c7f7783d84
13 changed files with 541 additions and 391 deletions
|
|
@ -53,4 +53,4 @@ We take security seriously. Please contact [security@lbry.io](mailto:security@lb
|
|||
|
||||
## Contact
|
||||
|
||||
The primary contact for this project is [@netoperatorwibby](https://github.com/netoperatorwibby).
|
||||
The primary contact for this project is [@netoperatorwibby](https://github.com/netoperatorwibby)(paul@lbry.io).
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ function main() {
|
|||
app.route("/api", page(require("./views/pages/api")(app)));
|
||||
app.route("/resources", page(require("./views/pages/resources")(app)));
|
||||
app.route("/resources/*", page(require("./views/pages/page")(app)));
|
||||
app.route("/tour", page(require("./views/pages/tour")(app)));
|
||||
app.route("/*", page(require("./views/pages/page")(app)));
|
||||
|
||||
return app;
|
||||
|
|
|
|||
18
documents/styleguide.md
Normal file
18
documents/styleguide.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Styleguide
|
||||
---
|
||||
|
||||
### CSS
|
||||
- Styles should never override
|
||||
- IDs do not belong in stylesheets
|
||||
- Nesting is should be a maximum of three levels deep
|
||||
- BEM is your friend
|
||||
- Nested includes should be at the top of rules
|
||||
- CSS parameters in alphabetical order, except for presentation styles
|
||||
|
||||
|
||||
|
||||
### JS
|
||||
- No trailing commas
|
||||
- Semicolons are there to protect you from yourself
|
||||
- Use strict comparing (`!==` / `===`), as false-y values are evil
|
||||
9
documents/tour.md
Normal file
9
documents/tour.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Tour
|
||||
---
|
||||
|
||||
LBRY (pronounced "library") is an application layer protocol, similar to HTTP. However, while HTTP links can direct you to decentralized content, the LBRY protocol *itself* is decentralized.
|
||||
|
||||
Check out any of the examples to get a feel for the LBRY protocol!
|
||||
|
||||
<Tour/>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@octokit/rest": "^15.9.4",
|
||||
"@octokit/rest": "^15.9.5",
|
||||
"app-root-path": "^2.1.0",
|
||||
"async": "^2.6.1",
|
||||
"choo": "^6.13.0",
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"slack-node": "^0.1.8",
|
||||
"socket.io": "^2.1.1",
|
||||
"stringify-object": "^3.2.2",
|
||||
"turbocolor": "^2.4.1",
|
||||
"turbocolor": "^2.4.3",
|
||||
"ws": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"choo-devtools": "^2.5.1",
|
||||
"nodemon": "^1.18.3",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"sass": "^1.10.1",
|
||||
"sass": "^1.10.3",
|
||||
"snazzy": "^7.1.1",
|
||||
"standardx": "^2.1.0",
|
||||
"updates": "^4.1.2"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -17,14 +17,13 @@ html {
|
|||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
button, [role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea { // Remove touch delay on supported devices
|
||||
touch-action: manipulation;
|
||||
textarea {
|
||||
touch-action: manipulation; // Remove touch delay on supported devices
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -50,10 +49,6 @@ button {
|
|||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
// top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -79,7 +74,8 @@ textarea {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
[type=button],
|
||||
[type=submit] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
395
sass/pages/_--tour.scss
Normal file
395
sass/pages/_--tour.scss
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
.hook {
|
||||
.loader {
|
||||
animation: spin 2s linear infinite;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
|
||||
&:not(.small):not(.tiny) {
|
||||
width: 4rem; height: 4rem;
|
||||
|
||||
border-width: 6px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 2rem; height: 2rem;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
width: 1rem; height: 1rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__navigation {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hook__navigation__step {
|
||||
background-color: transparent;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem; height: 3rem;
|
||||
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1rem; height: 1rem;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
color: $white;
|
||||
|
||||
span {
|
||||
border-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $teal;
|
||||
|
||||
span {
|
||||
border-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page {
|
||||
@extend .page__content;
|
||||
}
|
||||
|
||||
.hook__page__hero {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim,
|
||||
.hook__page__hero__support {
|
||||
margin-bottom: 3rem; padding-left: 1rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.7);
|
||||
font-size: 1rem;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
button, input {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
}
|
||||
|
||||
button {
|
||||
border-left: 1px solid rgba($gray, 0.7);
|
||||
color: $white;
|
||||
float: right;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
width: 6rem;
|
||||
|
||||
&::after {
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
top: -1px; left: -1px;
|
||||
|
||||
border: 1px solid;
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $black;
|
||||
|
||||
&::after {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $teal;
|
||||
|
||||
&::after {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
.hook__page__hero__support {
|
||||
input[type=number] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: calc(100% - 11.5rem);
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page__content::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
margin-bottom: 1rem; padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme {
|
||||
margin-bottom: 2rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
background-color: rgba($teal, 0.3);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2.__metadata {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="submit"]),
|
||||
select,
|
||||
textarea {
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
content: "✓";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:not(:checked)::after {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
border-bottom: 2px solid;
|
||||
width: 100%;
|
||||
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("/assets/media/svg/down.svg");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__thumbnail {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__uploader {
|
||||
@extend .__button-black;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
|
||||
> div:first-of-type {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input {
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
}
|
||||
|
||||
ol,
|
||||
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
|
||||
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
|
||||
padding-top: 0.5rem;
|
||||
|
||||
li {
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
|
||||
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,395 +1,73 @@
|
|||
.hook {
|
||||
.loader {
|
||||
animation: spin 2s linear infinite;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
.tour {
|
||||
border-top: 1px solid rgba($black, 0.05);
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
|
||||
&:not(.small):not(.tiny) {
|
||||
width: 4rem; height: 4rem;
|
||||
|
||||
border-width: 6px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 2rem; height: 2rem;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
width: 1rem; height: 1rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__navigation {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
.tour__sidebar {
|
||||
width: 250px; height: 100%;
|
||||
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.hook__navigation__step {
|
||||
background-color: transparent;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
display: inline-block;
|
||||
.tour__sidebar__step {
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem; height: 3rem;
|
||||
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1rem; height: 1rem;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
color: $white;
|
||||
|
||||
span {
|
||||
border-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $teal;
|
||||
|
||||
span {
|
||||
border-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page {
|
||||
@extend .page__content;
|
||||
}
|
||||
|
||||
.hook__page__hero {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba($black, 0.05);
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim,
|
||||
.hook__page__hero__support {
|
||||
margin-bottom: 3rem; padding-left: 1rem;
|
||||
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.7);
|
||||
font-size: 1rem;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
button, input {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
button,
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
button {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
span {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
button {
|
||||
border-left: 1px solid rgba($gray, 0.7);
|
||||
color: $white;
|
||||
float: right;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
width: 6rem;
|
||||
|
||||
&::after {
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
top: -1px; left: -1px;
|
||||
|
||||
border: 1px solid;
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $black;
|
||||
|
||||
&::after {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $teal;
|
||||
|
||||
&::after {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
.hook__page__hero__support {
|
||||
input[type=number] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: calc(100% - 11.5rem);
|
||||
background-color: transparent;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hook__page__content::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
margin-bottom: 1rem; padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme {
|
||||
margin-bottom: 2rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
background-color: rgba($teal, 0.3);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2.__metadata {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="submit"]),
|
||||
select,
|
||||
textarea {
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
content: "✓";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:not(:checked)::after {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
border-bottom: 2px solid;
|
||||
width: 100%;
|
||||
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("/assets/media/svg/down.svg");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__thumbnail {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.tour__content {
|
||||
width: calc(100% - 250px); height: 100%; min-height: 500px;
|
||||
|
||||
&:not(.selected) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__uploader {
|
||||
@extend .__button-black;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
|
||||
> div:first-of-type {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input {
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
border-left: 1px solid rgba($black, 0.05);
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
|||
55
views/partials/tour.js
Normal file
55
views/partials/tour.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// https://api.lbry.io/file/list_homepage
|
||||
// https://api.lbry.io/file/list_trending
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E S
|
||||
|
||||
const dedent = require("dedent");
|
||||
const html = require("choo-async/html");
|
||||
const raw = require("nanohtml/raw");
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
module.exports = exports = () => html`
|
||||
<section class="tour">
|
||||
<ul class="tour__sidebar">
|
||||
${raw(sidebar())}
|
||||
</ul>
|
||||
|
||||
<section class="tour__content">
|
||||
${raw(content())}
|
||||
</section>
|
||||
</section>
|
||||
`;
|
||||
|
||||
|
||||
|
||||
function sidebar() { // TODO: Save tutorial position to localStorage // "active" class is added dynamically
|
||||
return dedent`
|
||||
<li class="tour__sidebar__step active">
|
||||
<button data-action="tour, step 1" data-step="1" type="button">Resolve a claim</button>
|
||||
<span>Get details of media (aka, "claim" metadata)</span>
|
||||
</li>
|
||||
|
||||
<li class="tour__sidebar__step">
|
||||
<button data-action="tour, step 2" data-step="2" type="button">Publish content</button>
|
||||
<span>Create a meme and upload it to the LBRY blockchain</span>
|
||||
</li>
|
||||
|
||||
<li class="tour__sidebar__step">
|
||||
<button data-action="tour, step 3" data-step="3" type="button">Support with LBC</button>
|
||||
<span>Support creators on LBRY with a tip, on us!</span>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
function content() {
|
||||
return html`
|
||||
<p>Some content here</p>
|
||||
`;
|
||||
}
|
||||
Loading…
Reference in a new issue