2019-02-06 01:03:03 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< title > Components by LBRY< / title >
< link rel = "stylesheet" href = "https://rsms.me/inter/inter.css" / >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css" / >
2019-03-05 22:11:05 +01:00
<!-- <link rel="stylesheet" href="../dist/index.css"/> -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css" / >
2019-02-06 01:03:03 +01:00
< style >
body {
display: flex;
flex-direction: column;
font-family: var(--font-sans);
2019-02-08 00:55:31 +01:00
padding-top: var(--spacing-l);
2019-02-06 01:03:03 +01:00
}
header {
border-bottom: 1px solid var(--lbry-gray-1);
margin-bottom: var(--spacing-l);
}
2019-02-08 00:55:31 +01:00
drawer-navigation,
drawer-wrap {
padding-right: var(--spacing-l);
padding-left: var(--spacing-l);
}
drawer-navigation {
font-size: 1.25rem;
}
2019-02-06 01:03:03 +01:00
main {
flex: 1;
min-height: 100vh;
2019-02-08 00:55:31 +01:00
padding-right: var(--spacing-l);
padding-left: var(--spacing-l);
2019-02-06 01:03:03 +01:00
}
section {
2019-02-07 00:41:44 +01:00
border-bottom: 1px solid var(--lbry-gray-1);
2019-02-06 01:03:03 +01:00
margin-bottom: var(--spacing-l);
}
h1 {
font-size: 3rem;
font-weight: bolder;
2019-02-08 00:55:31 +01:00
padding-right: var(--spacing-l);
padding-left: var(--spacing-l);
2019-02-06 01:03:03 +01:00
}
h2 {
font-size: 2rem;
2019-02-08 00:55:31 +01:00
padding-right: var(--spacing-l);
padding-left: var(--spacing-l);
2019-02-06 01:03:03 +01:00
padding-bottom: var(--spacing-s);
}
h3 {
2019-02-07 00:41:44 +01:00
background-color: var(--lbry-black);
color: var(--lbry-white);
display: inline-block;
2019-02-06 01:03:03 +01:00
font-size: 1.5rem;
font-weight: bolder;
2019-02-07 00:41:44 +01:00
margin-bottom: var(--spacing-s);
padding: 0.25rem 1rem;
pointer-events: none;
2019-02-06 01:03:03 +01:00
}
p {
font-size: 1.25rem;
margin-bottom: var(--spacing-s);
}
hr {
margin-bottom: var(--spacing-s);
}
footer {
border-top: 1px solid var(--lbry-gray-1);
color: var(--lbry-gray-5);
2019-02-08 00:55:31 +01:00
padding: var(--spacing-l);
2019-02-06 01:03:03 +01:00
}
2019-02-08 21:17:21 +01:00
.social-links a {
width: 1.25rem; height: 1.25rem;
background-color: var(--lbry-black);
color: transparent;
display: inline-block;
font-size: 0;
border-radius: 50%;
line-height: 0;
}
.social-links a:not(:last-of-type) {
margin-right: 0.5rem;
}
2019-02-06 01:03:03 +01:00
< / style >
< / head >
< body >
< header >
< h1 > @lbry/components< / h1 >
< h2 > Styling for shared components across LBRY properties< / h2 >
2019-02-08 00:55:31 +01:00
< drawer-navigation >
< drawer-section >
2019-03-05 22:02:41 +01:00
< drawer-title >
Link I
< drawer-navigation-helper / >
< / drawer-title >
2019-02-08 00:55:31 +01:00
< drawer-wrap >
< drawer-children >
< drawer-child >
< a href = "" >
< strong > Use LBRY< / strong >
< span > Get the most out of LBRY< / span >
< / a >
< / drawer-child >
< drawer-child >
< a href = "" >
< strong > FAQ< / strong >
< span > Got questions? We might have answers!< / span >
< / a >
< / drawer-child >
< drawer-child >
< a href = "" >
< strong > Blockchain Explorer< / strong >
< span > The history of LBRY’ < / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child class = "social-links" >
2019-02-08 00:55:31 +01:00
< div >
< strong > Social< / strong >
2019-02-08 21:17:21 +01:00
< span >
< a href = "" > Network 1< / a >
< a href = "" > Network 2< / a >
< a href = "" > Network 3< / a >
< a href = "" > Network 4< / a >
< a href = "" > Network 5< / a >
< / span >
2019-02-08 00:55:31 +01:00
< / div >
< / drawer-child >
< drawer-child >
< a href = "" >
< strong > Tour< / strong >
< span > Do you want to learn how to publish content to the LBRY network?< / span >
< / a >
< / drawer-child >
< drawer-child >
< a href = "" >
< strong > News< / strong >
< span > The latest happenings with the LBRY team and community< / span >
< / a >
< / drawer-child >
< drawer-child >
< a href = "" >
< strong > Chat< / strong >
< span > Chat with other LBRY users and LBRY team members< / span >
< / a >
< / drawer-child >
< / drawer-children >
< / drawer-wrap >
< / drawer-section >
2019-02-08 21:17:21 +01:00
< drawer-section >
2019-03-05 22:02:41 +01:00
< drawer-title >
Link II
< drawer-navigation-helper / >
< / drawer-title >
2019-02-08 00:55:31 +01:00
2019-02-08 21:17:21 +01:00
< drawer-wrap >
< drawer-children >
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > YouTube Partner Program< / strong >
< span > Bring all your content to LBRY with just a few clicks< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
2019-02-08 00:55:31 +01:00
< a href = "" >
< strong > Creator FAQ< / strong >
< span > Like the FAQ, but for Creators< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > Fund a Project< / strong >
< span > How to to get some LBC for your latest idea or project< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
2019-02-08 00:55:31 +01:00
< a href = "" >
< strong > Makers< / strong >
< span > Would you like to share and sell 3D printable files?< / span >
< / a >
< / drawer-child >
< / drawer-children >
< / drawer-wrap >
< / drawer-section >
2019-02-08 21:17:21 +01:00
< drawer-section >
2019-03-05 22:02:41 +01:00
< drawer-title >
Link III
< drawer-navigation-helper / >
< / drawer-title >
2019-02-08 00:55:31 +01:00
2019-02-08 21:17:21 +01:00
< drawer-wrap >
< drawer-children >
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > Team / About< / strong >
< span > Meet the people building LBRY and find out why they’ < / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > Join Us< / strong >
< span > Work with the LBRY team< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
2019-02-08 00:55:31 +01:00
< a href = "" >
< strong > Contact< / strong >
< span > Have a question or want to connect with the LBRY, Inc. team?< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > Credit Reports< / strong >
< span > Four times a year we share the current state of LBRY, Inc.'s balance sheet< / span >
< / a >
< / drawer-child >
< / drawer-children >
< / drawer-wrap >
< / drawer-section >
2019-02-08 21:17:21 +01:00
< drawer-section >
2019-03-05 22:02:41 +01:00
< drawer-title >
Link IV
< drawer-navigation-helper / >
< / drawer-title >
2019-02-08 00:55:31 +01:00
2019-02-08 21:17:21 +01:00
< drawer-wrap >
< drawer-children >
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > LBRY.tech< / strong >
< span > Find out how the heck all of this works< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > GitHub< / strong >
< span > The LBRY code is open source, check out the repos< / span >
< / a >
< / drawer-child >
2019-02-08 21:17:21 +01:00
< drawer-child >
< a href = "" >
2019-02-08 00:55:31 +01:00
< strong > Contributor's Guide< / strong >
< span > Tips and guidelines for being a contributor to the LBRY projects< / span >
< / a >
< / drawer-child >
< / drawer-children >
< / drawer-wrap >
< / drawer-section >
< / drawer-navigation >
2019-02-06 01:03:03 +01:00
< / header >
< main >
< section >
< p > Hello and whaddup!< / p >
< / section >
< section >
< h3 > Form< / h3 >
< form >
< fieldset >
< legend > Subscribe to our newsletter< / legend >
< input-submit >
< input id = "emailAddress" placeholder = "you@domain.tld" type = "text" / >
< button title = "Subscribe to our technical newsletter" type = "button" > Subscribe< / button >
< / input-submit >
< / fieldset >
2019-02-07 21:22:04 +01:00
< fieldset >
< legend > Become a Gym Leader< / legend >
< fieldset-group >
< fieldset-section >
< label for = "name" > Name< / label >
< input id = "name" placeholder = "Will Smith" type = "text" / >
< / fieldset-section >
< fieldset-section >
< label for = "starter" > Pokémon< / label >
< select id = "starter" >
< option disabled selected > Choose a Pokémon< / option >
< option > Bulbasaur< / option >
< option > Charmander< / option >
< option > Squirtle< / option >
< / select >
< / fieldset-section >
< / fieldset-group >
< fieldset-section class = "full-width" >
< label for = "notes" > Notes< / label >
< textarea id = "notes" > < / textarea >
< / fieldset-section >
< / fieldset >
2019-02-06 01:03:03 +01:00
< fieldset >
< legend > Click some buttons< / legend >
2019-02-07 21:22:04 +01:00
< radio-element >
2019-02-07 00:41:44 +01:00
< input id = "test-radio-1" name = "toggle" type = "radio" >
< label for = "test-radio-1" > Radio button 1< / label >
2019-02-07 21:22:04 +01:00
< radio-toggle / >
< / radio-element >
2019-02-07 00:41:44 +01:00
2019-02-07 21:22:04 +01:00
< radio-element >
2019-02-07 00:41:44 +01:00
< input id = "test-radio-2" name = "toggle" type = "radio" >
< label for = "test-radio-2" > Radio button 2< / label >
2019-02-07 21:22:04 +01:00
< radio-toggle / >
< / radio-element >
< checkbox-element >
< input id = "test-checkbox-1" name = "check" type = "checkbox" >
< label for = "test-checkbox-1" > Checkbox< / label >
< checkbox-toggle / >
< / checkbox-element >
2019-02-06 01:03:03 +01:00
< / fieldset >
< / form >
< / section >
< section >
< h3 > Table< / h3 >
< table >
< thead >
< tr >
< th > Component< / th >
< th > Language (Toolset)< / th >
< th > What Is It< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < a href = "https://github.com/lbryio/lbrycrd" rel = "noopener noreferrer" target = "_blank" > lbrycrd< / a > < / td >
< td > C++< / td >
< td > A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle < a class = "link--glossary" href = "/glossary#lbrycrd" > lbrycrd< / a > directly, and instead bundle < a class = "link--glossary" href = "/glossary#lbry-sdk" > lbry-sdk< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry" rel = "noopener noreferrer" target = "_blank" > lbry-sdk< / a > < / td >
< td > Python (asyncio)< / td >
< td > A daemon that can be used directly or to develop other applications. Provides convenience < a href = "/api/sdk" > APIs< / a > , bundles an SPV wallet (< a class = "link--glossary" href = "/glossary#torba" > torba< / a > ), and contains an implementation of the LBRY data network.< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/torba" rel = "noopener noreferrer" target = "_blank" > torba< / a > < / td >
< td > Python< / td >
< td > An < a class = "link--glossary" href = "/glossary#SPV" > SPV< / a > (Simple Payment Verification) wallet. Bundled with < a class = "link--glossary" href = "/glossary#lbry-sdk" > lbry-sdk< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry/tree/master/lbrynet/extras/wallet/server" rel = "noopener noreferrer" target = "_blank" > wallet server< / a > < / td >
< td > Protobuf, Python< / td >
< td > The wallet server used by < a class = "link--glossary" href = "/glossary#torba" > torba< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry/tree/master/lbrynet/schema" rel = "noopener noreferrer" target = "_blank" > schema< / a > < / td >
< td > Protobuf, Python< / td >
< td > Defines the structure of the metadata stored in the LBRY blockchain.< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / main >
< footer > Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.< / footer >
< / body >
< / html >
