diff --git a/dist/index.css b/dist/index.css
index 5b956a7..ca78497 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -1 +1 @@
-:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%}html{box-sizing:border-box;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*::before,*::after{margin:0;padding:0;border:none;box-sizing:inherit;outline:0}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}ul{list-style-type:none}table{border-collapse:collapse;border-spacing:0}dd{width:80%;float:left}dl{width:100%;overflow-x:scroll;overflow-y:hidden}dt{width:20%;float:left}img{width:auto;max-width:100%;height:auto;max-height:100%;vertical-align:middle}a{color:inherit;text-decoration:none}button{background-color:transparent;color:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #999 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.badge--primary{background-color:#2f9176;color:#fff}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3;pointer-events:none}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.button--icon.button--play{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");background-position:calc(50% + 0.1rem) center}.button--icon.button--view{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");background-position:center calc(50% + 0.1rem)}.button--inverse{padding:var(--spacing-xs) var(--spacing-s);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}form,.form{margin-bottom:1rem}fieldset,.fieldset{display:flex;font-size:1rem;justify-content:center;margin-bottom:.5rem}fieldset button,fieldset input,.fieldset button,.fieldset input{height:2.5rem;border-style:solid;border-width:1px}fieldset button:not([type=button]):not([type=submit]),fieldset input:not([type=button]):not([type=submit]),.fieldset button:not([type=button]):not([type=submit]),.fieldset input:not([type=button]):not([type=submit]){flex:1;padding-right:1rem;padding-left:1rem;transition:border .2s}fieldset button:not([type=button]):not([type=submit]):not(:focus),fieldset input:not([type=button]):not([type=submit]):not(:focus),.fieldset button:not([type=button]):not([type=submit]):not(:focus),.fieldset input:not([type=button]):not([type=submit]):not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}fieldset button:not([type=button]):not([type=submit]):focus,fieldset input:not([type=button]):not([type=submit]):focus,.fieldset button:not([type=button]):not([type=submit]):focus,.fieldset input:not([type=button]):not([type=submit]):focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}fieldset button[type=button],fieldset button[type=submit],fieldset input[type=button],fieldset input[type=submit],.fieldset button[type=button],.fieldset button[type=submit],.fieldset input[type=button],.fieldset input[type=submit]{color:#fff;padding-right:1.5rem;padding-left:1.5rem;transition:all .2s}fieldset button[type=button]:not(:hover),fieldset button[type=submit]:not(:hover),fieldset input[type=button]:not(:hover),fieldset input[type=submit]:not(:hover),.fieldset button[type=button]:not(:hover),.fieldset button[type=submit]:not(:hover),.fieldset input[type=button]:not(:hover),.fieldset input[type=submit]:not(:hover){background-color:#212529;border-color:#212529}fieldset button[type=button]:hover,fieldset button[type=submit]:hover,fieldset input[type=button]:hover,fieldset input[type=submit]:hover,.fieldset button[type=button]:hover,.fieldset button[type=submit]:hover,.fieldset input[type=button]:hover,.fieldset input[type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--placeholder>*{animation-duration:4s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:loading-animation;animation-timing-function:linear;background-color:transparent;background-image:linear-gradient(to right, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}/*# sourceMappingURL=index.css.map */
+:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%;--lbry-gray-1:#e2e5e9;--lbry-gray-2:#d8dde1;--lbry-gray-3:#ced4da;--lbry-gray-4:#abb1b7;--lbry-gray-5:#898e93;--lbry-teal-1:#88e8cb;--lbry-teal-2:#60e1ba;--lbry-teal-3:#38d9a9;--lbry-teal-4:#33b58f;--lbry-teal-5:#2f9176;--lbry-cyan-1:#89dfe9;--lbry-cyan-2:#62d4e2;--lbry-cyan-3:#3bc9db;--lbry-cyan-4:#36a8b7;--lbry-cyan-5:#318794;--lbry-blue-1:#85c2f6;--lbry-blue-2:#5caef3;--lbry-blue-3:#339af0;--lbry-blue-4:#2f83c8;--lbry-blue-5:#2c6ba0;--lbry-indigo-1:#acbcfd;--lbry-indigo-2:#90a5fd;--lbry-indigo-3:#748ffc;--lbry-indigo-4:#637ad2;--lbry-indigo-5:#5365a8;--lbry-violet-1:#c1acfc;--lbry-violet-2:#ac91fb;--lbry-violet-3:#9775fa;--lbry-violet-4:#7f65d0;--lbry-violet-5:#6855a6;--lbry-grape-1:#e9adf7;--lbry-grape-2:#e192f5;--lbry-grape-3:#da77f2;--lbry-grape-4:#b567ca;--lbry-grape-5:#9056a2;--lbry-pink-1:#fab5cd;--lbry-pink-2:#f99cbd;--lbry-pink-3:#f783ac;--lbry-pink-4:#cc7092;--lbry-pink-5:#a15d78;--lbry-red-1:#ec8383;--lbry-red-2:#e65a5a;--lbry-red-3:#e03131;--lbry-red-4:#ba2f2f;--lbry-red-5:#942c2e;--lbry-orange-1:#ffbe80;--lbry-orange-2:#ffa855;--lbry-orange-3:#ff922b;--lbry-orange-4:#d37c2b;--lbry-orange-5:#a6662a;--lbry-yellow-1:#ffeca3;--lbry-yellow-2:#ffe685;--lbry-yellow-3:#ffe066;--lbry-yellow-4:#d3bb5a;--lbry-yellow-5:#a6954e;--lbry-lime-1:#cbee93;--lbry-lime-2:#bae96f;--lbry-lime-3:#a9e34b;--lbry-lime-4:#8ebd44;--lbry-lime-5:#73973d;--lbry-green-1:#97e2a3;--lbry-green-2:#74d985;--lbry-green-3:#51cf66;--lbry-green-4:#47ad5a;--lbry-green-5:#3e8b4e;--font-mono:"Fira Code";--font-sans:Inter;--font-serif:Georgia}html{box-sizing:border-box;font-size:12px;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*::before,*::after{margin:0;padding:0;border:none;box-sizing:inherit;outline:0}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[role=button],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}ul{list-style-type:none}table{border-spacing:0}dd{width:80%;float:left}dl{width:100%;overflow-x:scroll;overflow-y:hidden}dt{width:20%;float:left}img{width:auto;max-width:100%;height:auto;max-height:100%;vertical-align:middle}a{color:inherit;text-decoration:none}button{background-color:transparent;color:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:#e2e5e9}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #999 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.badge--primary{background-color:#2f9176;color:#fff}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3;pointer-events:none}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.button--icon.button--play{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");background-position:calc(50% + 0.1rem) center}.button--icon.button--view{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");background-position:center calc(50% + 0.1rem)}.button--inverse{padding:var(--spacing-xs) var(--spacing-s);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}form,.form{margin-bottom:1rem}fieldset,.fieldset{font-size:1rem;margin-bottom:.5rem;position:relative}fieldset button:not([type=button]):not([type=radio]):not([type=submit]),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]),fieldset input:not([type=button]):not([type=radio]):not([type=submit]),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]){padding-right:1rem;padding-left:1rem;transition:border .2s}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}fieldset button[type=button],.fieldset button[type=button],fieldset button[type=submit],.fieldset button[type=submit],fieldset input[type=button],.fieldset input[type=button],fieldset input[type=submit],.fieldset input[type=submit]{color:#fff;padding-right:1.5rem;padding-left:1.5rem;transition:all .2s}fieldset button[type=button]:not(:hover),.fieldset button[type=button]:not(:hover),fieldset button[type=submit]:not(:hover),.fieldset button[type=submit]:not(:hover),fieldset input[type=button]:not(:hover),.fieldset input[type=button]:not(:hover),fieldset input[type=submit]:not(:hover),.fieldset input[type=submit]:not(:hover){background-color:#212529;border-color:#212529}fieldset button[type=button]:hover,.fieldset button[type=button]:hover,fieldset button[type=submit]:hover,.fieldset button[type=submit]:hover,fieldset input[type=button]:hover,.fieldset input[type=button]:hover,fieldset input[type=submit]:hover,.fieldset input[type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}radio,.radio-group{min-height:2rem;align-items:center;display:inline-flex;flex-direction:row-reverse;position:relative}radio:hover label,.radio-group:hover label{color:#38d9a9}radio:hover check,.radio-group:hover check,radio:hover .check,.radio-group:hover .check{border-color:#38d9a9}radio label,.radio-group label{padding-left:.5rem;transition:color .2s}radio input[type=radio],.radio-group input[type=radio]{width:0;height:0;visibility:hidden}radio input[type=radio]:not(:checked)+label+check::before,.radio-group input[type=radio]:not(:checked)+label+check::before,radio input[type=radio]:not(:checked)+label+.check::before,.radio-group input[type=radio]:not(:checked)+label+.check::before{background-color:transparent}radio input[type=radio]:checked+label,.radio-group input[type=radio]:checked+label{color:#38d9a9}radio input[type=radio]:checked+label+check::before,.radio-group input[type=radio]:checked+label+check::before,radio input[type=radio]:checked+label+.check::before,.radio-group input[type=radio]:checked+label+.check::before{background-color:#38d9a9}check,.check{width:1.5rem;height:1.5rem;top:0;left:0;border:2px solid;border-radius:50%;display:block;position:relative;transition:border .2s;z-index:5}check::before,.check::before{width:.75rem;height:.75rem;top:.24rem;left:.24rem;border-radius:50%;content:"";display:block;position:absolute;transition:background-color .2s}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--placeholder>*{animation-duration:4s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:loading-animation;animation-timing-function:linear;background-color:transparent;background-image:linear-gradient(to right, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}table{width:100%;background-color:#fff;border:1px solid #212529;position:relative}table thead{background-color:#212529;color:#fff;cursor:default;position:relative}table thead tr{position:relative;z-index:1}table tbody{line-height:1.55}table tr:nth-of-type(even){background-color:#e2e5e9}table th,table td{padding:.5rem 1rem}table th{letter-spacing:.1rem;text-align:left;text-transform:uppercase}table tbody tr:not(:last-of-type) td{border-bottom:1px solid #e2e5e9}table a{font-weight:bolder}/*# sourceMappingURL=index.css.map */
diff --git a/dist/index.css.map b/dist/index.css.map
index eb344b3..5aa8dc1 100644
--- a/dist/index.css.map
+++ b/dist/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDvC8B,YCuC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MAEE,iBAKF,GAC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","file":"index.css"}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..0686e75
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,147 @@
+
+
+
+
+ Components by LBRY
+
+
+
+
+
+
+
+
+
+
+ @lbry/components
+ Styling for shared components across LBRY properties
+
+
+
+
+
+
+
+
+ Table
+
+
+
+
+ Component
+ Language (Toolset)
+ What Is It
+
+
+
+
+
+ lbrycrd
+ C++
+ A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle lbrycrd directly, and instead bundle lbry-sdk .
+
+
+ lbry-sdk
+ Python (asyncio)
+ A daemon that can be used directly or to develop other applications. Provides convenience APIs , bundles an SPV wallet (torba ), and contains an implementation of the LBRY data network.
+
+
+ torba
+ Python
+ An SPV (Simple Payment Verification) wallet. Bundled with lbry-sdk .
+
+
+ wallet server
+ Protobuf, Python
+ The wallet server used by torba .
+
+
+ schema
+ Protobuf, Python
+ Defines the structure of the metadata stored in the LBRY blockchain.
+
+
+
+
+
+
+ Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.
+
+
diff --git a/sass/form/_index.scss b/sass/form/_index.scss
index 41e75c3..7f1c211 100644
--- a/sass/form/_index.scss
+++ b/sass/form/_index.scss
@@ -1,30 +1,39 @@
-form,
-.form {
+form {
margin-bottom: 1rem;
}
-fieldset,
-.fieldset {
+fieldset {
// Flexbox is broken for fieldset elements in Chromium
// Source: https://bugs.chromium.org/p/chromium/issues/detail?id=375693
// Example: https://codepen.io/Garbee/pen/oYKMYp
- display: flex;
+ // display: flex; //
+ // justify-content: center; //
+
font-size: 1rem;
- justify-content: center;
margin-bottom: 0.5rem;
+ position: relative;
+
+ // @supports (not (-moz-appearance: none)) {
+ // display: block;
+ // }
button,
input {
- height: 2.5rem;
- border-style: solid;
- border-width: 1px;
+ // height: 2.5rem;
+ // border-style: solid;
+ // border-width: 1px;
- &:not([type="button"]):not([type="submit"]) {
- flex: 1;
+ &:not([type="button"]):not([type="radio"]):not([type="submit"]) {
+ // flex: 1; //
padding-right: 1rem;
padding-left: 1rem;
transition: border 0.2s;
+ // @supports (not (-moz-appearance: none)) {
+ // width: calc(100% - 10rem);
+ // float: left;
+ // }
+
&:not(:focus) {
border-top-color: $lbry-black;
border-right-color: transparent;
@@ -47,6 +56,11 @@ fieldset,
padding-left: 1.5rem;
transition: all 0.2s;
+ // @supports (not (-moz-appearance: none)) {
+ // width: 10rem;
+ // float: right;
+ // }
+
&:not(:hover) {
background-color: $lbry-black;
border-color: $lbry-black;
@@ -59,3 +73,92 @@ fieldset,
}
}
}
+
+
+
+radio {
+ min-height: 2rem;
+ align-items: center;
+ display: inline-flex;
+ flex-direction: row-reverse;
+ position: relative;
+
+ &:hover {
+ label {
+ color: $lbry-teal-3;
+ }
+
+ check {
+ border-color: $lbry-teal-3;
+ }
+ }
+
+ label {
+ padding-left: 0.5rem;
+ transition: color 0.2s;
+ }
+
+ input {
+ &[type="radio"] {
+ width: 0; height: 0;
+ visibility: hidden;
+
+ &:not(:checked) {
+ + label + check::before {
+ background-color: transparent;
+ }
+ }
+
+ &:checked {
+ + label {
+ color: $lbry-teal-3;
+ }
+
+ + label + check::before {
+ background-color: $lbry-teal-3;
+ }
+ }
+ }
+ }
+}
+
+check {
+ width: 1.5rem; height: 1.5rem;
+ top: 0; left: 0;
+
+ border: 2px solid;
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ transition: border 0.2s;
+ z-index: 5;
+
+ &::before {
+ width: 0.75rem; height: 0.75rem;
+ top: 0.24rem; left: 0.24rem;
+
+ border-radius: 50%;
+ content: "";
+ display: block;
+ position: absolute;
+ transition: background-color 0.2s;
+ }
+}
+
+
+
+.check {
+ @extend check;
+}
+
+.fieldset {
+ @extend fieldset;
+}
+
+.form {
+ @extend form;
+}
+
+.radio-group {
+ @extend radio;
+}
diff --git a/sass/index.scss b/sass/index.scss
index 2c3001a..fbd4d0e 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -9,3 +9,4 @@
@import "button";
@import "form";
@import "media";
+@import "table";
diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss
index b1b6ccf..5fe7783 100644
--- a/sass/init/_mixins.scss
+++ b/sass/init/_mixins.scss
@@ -58,11 +58,11 @@
}
@mixin font-mono {
- font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
+ font-family: "Fira Code", "Courier New", monospace;
}
@mixin font-sans {
- font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@mixin font-serif {
diff --git a/sass/init/_reset.scss b/sass/init/_reset.scss
index 8d3cff8..d35527e 100644
--- a/sass/init/_reset.scss
+++ b/sass/init/_reset.scss
@@ -2,6 +2,7 @@
html {
box-sizing: border-box;
+ font-size: 12px;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
@@ -28,6 +29,7 @@ html {
}
[for],
+[role="button"],
[type="button"],
[type="checkbox"],
[type="file"],
@@ -90,8 +92,10 @@ ul {
}
table {
- border-collapse: collapse;
+ // border-collapse: collapse;
border-spacing: 0;
+
+ // -webkit-appearance: none;
}
dd {
@@ -134,6 +138,11 @@ button {
}
}
+hr {
+ width: 100%; height: 1px;
+ background-color: $lbry-gray-1;
+}
+
input {
background-color: transparent;
color: inherit;
diff --git a/sass/init/_variables.scss b/sass/init/_variables.scss
index 5676bf8..feeb591 100644
--- a/sass/init/_variables.scss
+++ b/sass/init/_variables.scss
@@ -1,4 +1,5 @@
:root {
+ // Spacing
@include root-prop(--spacing-xxs, 0.2rem);
@include root-prop(--spacing-xs, 0.4rem);
@include root-prop(--spacing-s, 0.8rem);
@@ -7,15 +8,93 @@
@include root-prop(--spacing-xl, 3.2rem);
@include root-prop(--spacing-xxl, 6.4rem);
- // 12:5
- @include root-prop(--aspect-ratio-bluray, 41.6666666667%);
+ // Aspect ratio
+ @include root-prop(--aspect-ratio-bluray, 41.6666666667%); // 12:5
+ @include root-prop(--aspect-ratio-panavision, 36.3636363636%); // 11:4
+ @include root-prop(--aspect-ratio-sd, 75%); // 4:3
+ @include root-prop(--aspect-ratio-standard, 56.25%); // 16:9
- // 11:4
- @include root-prop(--aspect-ratio-panavision, 36.3636363636%);
+ // Color
+ @include root-prop(--lbry-gray-1, $lbry-gray-1);
+ @include root-prop(--lbry-gray-2, $lbry-gray-2);
+ @include root-prop(--lbry-gray-3, $lbry-gray-3);
+ @include root-prop(--lbry-gray-4, $lbry-gray-4);
+ @include root-prop(--lbry-gray-5, $lbry-gray-5);
- // 4:3
- @include root-prop(--aspect-ratio-sd, 75%);
+ @include root-prop(--lbry-teal-1, $lbry-teal-1);
+ @include root-prop(--lbry-teal-2, $lbry-teal-2);
+ @include root-prop(--lbry-teal-3, $lbry-teal-3);
+ @include root-prop(--lbry-teal-4, $lbry-teal-4);
+ @include root-prop(--lbry-teal-5, $lbry-teal-5);
- // 16:9
- @include root-prop(--aspect-ratio-standard, 56.25%);
+ @include root-prop(--lbry-cyan-1, $lbry-cyan-1);
+ @include root-prop(--lbry-cyan-2, $lbry-cyan-2);
+ @include root-prop(--lbry-cyan-3, $lbry-cyan-3);
+ @include root-prop(--lbry-cyan-4, $lbry-cyan-4);
+ @include root-prop(--lbry-cyan-5, $lbry-cyan-5);
+
+ @include root-prop(--lbry-blue-1, $lbry-blue-1);
+ @include root-prop(--lbry-blue-2, $lbry-blue-2);
+ @include root-prop(--lbry-blue-3, $lbry-blue-3);
+ @include root-prop(--lbry-blue-4, $lbry-blue-4);
+ @include root-prop(--lbry-blue-5, $lbry-blue-5);
+
+ @include root-prop(--lbry-indigo-1, $lbry-indigo-1);
+ @include root-prop(--lbry-indigo-2, $lbry-indigo-2);
+ @include root-prop(--lbry-indigo-3, $lbry-indigo-3);
+ @include root-prop(--lbry-indigo-4, $lbry-indigo-4);
+ @include root-prop(--lbry-indigo-5, $lbry-indigo-5);
+
+ @include root-prop(--lbry-violet-1, $lbry-violet-1);
+ @include root-prop(--lbry-violet-2, $lbry-violet-2);
+ @include root-prop(--lbry-violet-3, $lbry-violet-3);
+ @include root-prop(--lbry-violet-4, $lbry-violet-4);
+ @include root-prop(--lbry-violet-5, $lbry-violet-5);
+
+ @include root-prop(--lbry-grape-1, $lbry-grape-1);
+ @include root-prop(--lbry-grape-2, $lbry-grape-2);
+ @include root-prop(--lbry-grape-3, $lbry-grape-3);
+ @include root-prop(--lbry-grape-4, $lbry-grape-4);
+ @include root-prop(--lbry-grape-5, $lbry-grape-5);
+
+ @include root-prop(--lbry-pink-1, $lbry-pink-1);
+ @include root-prop(--lbry-pink-2, $lbry-pink-2);
+ @include root-prop(--lbry-pink-3, $lbry-pink-3);
+ @include root-prop(--lbry-pink-4, $lbry-pink-4);
+ @include root-prop(--lbry-pink-5, $lbry-pink-5);
+
+ @include root-prop(--lbry-red-1, $lbry-red-1);
+ @include root-prop(--lbry-red-2, $lbry-red-2);
+ @include root-prop(--lbry-red-3, $lbry-red-3);
+ @include root-prop(--lbry-red-4, $lbry-red-4);
+ @include root-prop(--lbry-red-5, $lbry-red-5);
+
+ @include root-prop(--lbry-orange-1, $lbry-orange-1);
+ @include root-prop(--lbry-orange-2, $lbry-orange-2);
+ @include root-prop(--lbry-orange-3, $lbry-orange-3);
+ @include root-prop(--lbry-orange-4, $lbry-orange-4);
+ @include root-prop(--lbry-orange-5, $lbry-orange-5);
+
+ @include root-prop(--lbry-yellow-1, $lbry-yellow-1);
+ @include root-prop(--lbry-yellow-2, $lbry-yellow-2);
+ @include root-prop(--lbry-yellow-3, $lbry-yellow-3);
+ @include root-prop(--lbry-yellow-4, $lbry-yellow-4);
+ @include root-prop(--lbry-yellow-5, $lbry-yellow-5);
+
+ @include root-prop(--lbry-lime-1, $lbry-lime-1);
+ @include root-prop(--lbry-lime-2, $lbry-lime-2);
+ @include root-prop(--lbry-lime-3, $lbry-lime-3);
+ @include root-prop(--lbry-lime-4, $lbry-lime-4);
+ @include root-prop(--lbry-lime-5, $lbry-lime-5);
+
+ @include root-prop(--lbry-green-1, $lbry-green-1);
+ @include root-prop(--lbry-green-2, $lbry-green-2);
+ @include root-prop(--lbry-green-3, $lbry-green-3);
+ @include root-prop(--lbry-green-4, $lbry-green-4);
+ @include root-prop(--lbry-green-5, $lbry-green-5);
+
+ // Type
+ @include root-prop(--font-mono, "Fira Code");
+ @include root-prop(--font-sans, Inter);
+ @include root-prop(--font-serif, Georgia);
}
diff --git a/sass/table/_index.scss b/sass/table/_index.scss
new file mode 100644
index 0000000..e84b8ea
--- /dev/null
+++ b/sass/table/_index.scss
@@ -0,0 +1,47 @@
+
+table {
+ width: 100%;
+
+ background-color: $lbry-white;
+ border: 1px solid $lbry-black;
+ position: relative;
+
+ thead {
+ background-color: $lbry-black;
+ color: $lbry-white;
+ cursor: default;
+ position: relative;
+
+ tr {
+ position: relative;
+ z-index: 1;
+ }
+ }
+
+ tbody {
+ line-height: 1.55;
+ }
+
+ tr:nth-of-type(even) {
+ background-color: $lbry-gray-1;
+ }
+
+ th,
+ td {
+ padding: 0.5rem 1rem;
+ }
+
+ th {
+ letter-spacing: 0.1rem;
+ text-align: left;
+ text-transform: uppercase;
+ }
+
+ tbody tr:not(:last-of-type) td {
+ border-bottom: 1px solid $lbry-gray-1;
+ }
+
+ a {
+ font-weight: bolder;
+ }
+}