LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

decouple markdown and page content, simplify css

Browse source
This commit is contained in:
Jeremy Kauffman 2018-09-25 12:34:13 -04:00
parent e42082dd9d
commit 66a675806e
9 changed files with 360 additions and 350 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/components/ecosystem/submodule-chainquery.js
View file

@ -9,17 +9,18 @@ module.exports = exports = () => `
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="chainquery">chainquery</h3>
<div class="ecosystem__submodule__description">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>The model of Chainquery at its foundation consists of the fundamental data types found in the blockchain. This information is then expounded on with additional columns and tables that make querying the data much easier.</p>
<div class="ecosystem__submodule__markdown">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>The model of Chainquery at its foundation consists of the fundamental data types found in the blockchain. This information is then expounded on with additional columns and tables that make querying the data much easier.</p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
</ul>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/chainquery" title="chainquery source code">https://github.com/lbryio/chainquery</a></li>
</ul>
</div>
<ul class="__parents">
<li class="__parent green" data-action="open" data-target="applications">Applications</li>
<li class="__parent red" data-action="open" data-target="lbrycrd">Blockchain</li>

18
app/components/ecosystem/submodule-lighthouse.js
View file

@ -9,16 +9,18 @@ module.exports = exports = () => `
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="lighthouse">lighthouse</h3>
<div class="ecosystem__submodule__description">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>Lighthouse is a lightning-fast advanced search engine API for publications on the lbrycrd with autocomplete capabilities.</p>
<div class="ecosystem__submodule__markdown">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>Lighthouse is a lightning-fast advanced search engine API for publications on the lbrycrd with autocomplete capabilities.</p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
</ul>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/lighthouse" title="lighthouse source code">https://github.com/lbryio/lighthouse</a></li>
</ul>
</div>
<ul class="__parents">
<li class="__parent green" data-action="open" data-target="applications">Applications</li>

18
app/components/ecosystem/submodule-reflector.js
View file

@ -9,16 +9,18 @@ module.exports = exports = () => `
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="reflector">reflector</h3>
<div class="ecosystem__submodule__description">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>A reflector cluster to accept LBRY content for hosting en masse, rehost the content, and make money on data fees (TODO). This code includes Go implementations of the LBRY peer protocol, reflector protocol, and DHT.</p>
<div class="ecosystem__submodule__markdown">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>A reflector cluster to accept LBRY content for hosting en masse, rehost the content, and make money on data fees (TODO). This code includes Go implementations of the LBRY peer protocol, reflector protocol, and DHT.</p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
</ul>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/reflector.go" title="reflector source code">https://github.com/lbryio/reflector.go</a></li>
</ul>
</div>
<ul class="__parents">
<li class="__parent green" data-action="open" data-target="applications">Applications</li>

18
app/components/ecosystem/submodule-wallet.js
View file

@ -9,16 +9,18 @@ module.exports = exports = () => `
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="wallet">wallet server</h3>
<div class="ecosystem__submodule__description">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>The LBRY app is a graphical browser for the decentralized content marketplace provided by the <a href="https://lbry.io" title="">LBRY</a> protocol. It is essentially the <a href="https://github.com/lbryio/lbry" title="">lbry daemon</a> bundled with an UI using <a href="http://electron.atom.io" title="">Electron</a>.</p>
<div class="ecosystem__submodule__markdown">
<h4 class="ecosystem__submodule__description__title">Overview</h4>
<p>The LBRY app is a graphical browser for the decentralized content marketplace provided by the <a href="https://lbry.io" title="">LBRY</a> protocol. It is essentially the <a href="https://github.com/lbryio/lbry" title="">lbry daemon</a> bundled with an UI using <a href="http://electron.atom.io" title="">Electron</a>.</p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title __connection">Connection to...</h4>
<p class="__connection-details"></p>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/lbry-desktop" title="lbry-desktop source code">https://github.com/lbryio/lbry-desktop</a></li>
</ul>
<h4 class="ecosystem__submodule__description__title">Source</h4>
<ul>
<li><a href="https://github.com/lbryio/lbry-desktop" title="lbry-desktop source code">https://github.com/lbryio/lbry-desktop</a></li>
</ul>
</div>
<ul class="__parents">
<li class="__parent green" data-action="open" data-target="applications">Applications</li>

1
app/sass/bundle.scss
View file

@ -4,6 +4,7 @@
"init/colors",
"init/base",
"init/mixins",
"init/markdown",
"init/extends",
"type/karla",

298
app/sass/init/_markdown.scss Normal file
View file

@ -0,0 +1,298 @@
%markdown {
h1 {
margin-bottom: 0.25rem;
@media (min-width: 901px) {
font-size: 3rem;
}
@media (max-width: 900px) {
font-size: 2rem;
}
+ h2 {
margin-top: 2rem;
}
}
h2 {
@media (min-width: 901px) {
font-size: 2rem;
}
@media (max-width: 900px) {
font-size: 1.5rem;
}
+ h3 {
margin-top: 1rem;
}
}
h3 {
@media (min-width: 901px) {
font-size: 1.5rem;
}
@media (max-width: 900px) {
font-size: 1.25rem;
}
}
h4 {
letter-spacing: 0.05rem;
text-transform: uppercase;
@media (min-width: 901px) {
font-size: 1.25rem;
}
@media (max-width: 900px) {
font-size: 1.15rem;
}
}
h5 {
font-size: 1rem;
}
sup {
@include font-mono;
}
blockquote {
left: 2px;
line-height: 1.5;
margin-bottom: 0.5rem;
position: relative;
@media (min-width: 601px) {
margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
font-size: 1.5rem;
width: 70%;
}
@media (max-width: 600px) {
font-size: 1.25rem;
padding: 0.5rem 0 0.05rem 0;
}
@media (min-width: 376px) and (max-width: 600px) {
margin-left: 5%;
width: 90%;
}
p {
font-size: inherit;
line-height: inherit;
}
&::before {
@include font-serif;
width: 150px; height: 100px;
top: 3rem; left: -2rem;
color: rgba($teal, 0.2);
content: "\201C";
font-size: 20rem;
line-height: 0.5;
position: absolute;
}
}
p,
ol,
ul,
table {
code {
background-color: $black;
border-radius: 3px;
color: $white;
font-size: 60%;
letter-spacing: 0.05rem;
padding: 0.3rem 0.5rem;
vertical-align: middle;
@media (max-width: 900px) {
position: relative;
top: -1px;
}
}
}
p,
ol,
ul {
margin-bottom: 1rem;
position: relative;
@media (min-width: 901px) {
font-size: 1.25rem;
line-height: 1.6;
}
@media (max-width: 900px) {
font-size: 1.05rem;
line-height: 1.55;
}
}
ol,
ul {
padding-top: 0.5rem;
li {
&:not(:last-of-type) {
margin-bottom: 0.25rem;
}
}
+ h2, + h3, + h4, + h5 {
padding-top: 2rem;
}
}
ol {
list-style-type: lower-roman;
padding-left: 1.6rem;
}
ul {
padding-left: 1.25rem;
}
p {
img {
float: right;
}
}
a:not(.__button-black):not(.button):not(.header-anchor):not(.newsletter-standalone__submit):not(.__plain) {
@include underline($teal, $white);
color: $teal;
code {
background-color: $teal;
text-shadow: none;
}
}
pre {
margin-bottom: 2rem; padding: 2rem;
border-radius: 3px;
font-size: 1rem;
line-height: 1.33;
overflow-x: auto;
overflow-y: hidden;
&:not([class]),
&.language-text {
background-color: #27283e;
color: $white;
}
&.language-yaml {
background-color: #27273f;
color: #ffe066;
.atrule {
color: #f083ac;
}
.important {
color: #ffa94d;
}
.punctuation {
color: $white;
}
}
}
h2, h3, h4, h5 {
+ table {
margin-top: 0.5em;
}
}
table {
background-color: $white;
border: 1px solid rgba($gray, 0.3);
border-spacing: 0;
margin-bottom: 2rem;
position: relative;
width: 100%;
@media (max-width: 1030px) {
display: inline-grid;
thead {
display: none;
}
tbody, tr, td {
display: block;
}
tbody tr:last-of-type td:not(:last-of-type) {
border-bottom: 1px solid rgba($gray, 0.3);
}
}
thead {
background-color: $black;
color: $white;
cursor: default;
position: relative;
tr {
position: relative;
z-index: 1;
}
&:not(*:root) {
&::after {
z-index: -1;
}
}
&::after {
width: calc(100% + 2px); height: calc(100% + 2px);
top: -1px; left: -1px;
background-color: $black;
content: "";
position: absolute;
z-index: 0;
}
}
tbody {
line-height: 1.55;
}
tr:nth-of-type(even) {
background-color: rgba($black, 0.025);
}
th, td {
padding: 0.5rem 1rem;
}
th {
font-size: 0.8rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
}
tbody tr:not(:last-of-type) td {
border-bottom: 1px solid rgba($gray, 0.3);
}
td {
font-size: 1rem;
}
}
}

306
app/sass/pages/_page.scss
View file

@ -40,9 +40,8 @@
}
}
.page__content {
background-image: url("/assets/media/images/grid.png");
background-repeat: repeat;
background-size: 32px;
flex: 1;
@ -50,310 +49,13 @@
padding-bottom: 2rem;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
h1 {
margin-bottom: 0.25rem;
@media (min-width: 901px) {
font-size: 3rem;
}
@media (max-width: 900px) {
font-size: 2rem;
}
+ h2 {
margin-top: 2rem;
}
}
h2:not(.__title) {
@media (min-width: 901px) {
font-size: 2rem;
}
@media (max-width: 900px) {
font-size: 1.5rem;
}
+ h3 {
margin-top: 1rem;
}
}
h3:not(.ecosystem__submodule__title) {
@media (min-width: 901px) {
font-size: 1.5rem;
}
@media (max-width: 900px) {
font-size: 1.25rem;
}
+ table {
top: 0.25rem;
}
}
h4:not(.ecosystem__submodule__description__title) {
letter-spacing: 0.05rem;
text-transform: uppercase;
@media (min-width: 901px) {
font-size: 1.25rem;
}
@media (max-width: 900px) {
font-size: 1.15rem;
}
}
h5 {
font-size: 1rem;
}
sup {
@include font-mono;
}
blockquote {
left: 2px;
line-height: 1.5;
margin-bottom: 0.5rem;
position: relative;
@media (min-width: 601px) {
margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
font-size: 1.5rem;
width: 70%;
}
@media (max-width: 600px) {
font-size: 1.25rem;
padding: 0.5rem 0 0.05rem 0;
}
@media (min-width: 376px) and (max-width: 600px) {
margin-left: 5%;
width: 90%;
}
p {
font-size: inherit;
line-height: inherit;
}
&::before {
@include font-serif;
width: 150px; height: 100px;
top: 3rem; left: -2rem;
color: rgba($teal, 0.2);
content: "\201C";
font-size: 20rem;
line-height: 0.5;
position: absolute;
}
}
p,
ol,
ul:not(.overview__ecosystem__module),
table {
code {
background-color: $black;
border-radius: 3px;
color: $white;
font-size: 60%;
letter-spacing: 0.05rem;
padding: 0.3rem 0.5rem;
vertical-align: middle;
@media (max-width: 900px) {
position: relative;
top: -1px;
}
}
}
p,
ol,
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
margin-bottom: 1rem;
position: relative;
@media (min-width: 901px) {
font-size: 1.25rem;
line-height: 1.6;
}
@media (max-width: 900px) {
font-size: 1.05rem;
line-height: 1.55;
}
}
ol,
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
padding-top: 0.5rem;
li {
&:not(:last-of-type) {
margin-bottom: 0.25rem;
}
}
+ h2, + h3, + h4, + h5 {
padding-top: 2rem;
}
}
ol {
list-style-type: lower-roman;
padding-left: 1.6rem;
}
ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
padding-left: 1.25rem;
}
p {
img {
float: right;
}
}
a:not(.__button-black):not(.button):not(.feature-link__title):not(.header-anchor):not(.newsletter-standalone__submit):not(.__plain) {
@include underline($teal, $white);
color: $teal;
code {
background-color: $teal;
text-shadow: none;
}
}
pre {
margin-bottom: 2rem; padding: 2rem;
border-radius: 3px;
font-size: 1rem;
line-height: 1.33;
overflow-x: auto;
overflow-y: hidden;
&:not([class]),
&.language-text {
background-color: #27283e;
color: $white;
}
&.language-yaml {
background-color: #27273f;
color: #ffe066;
.atrule {
color: #f083ac;
}
.important {
color: #ffa94d;
}
.punctuation {
color: $white;
}
}
}
table {
background-color: $white;
border: 1px solid rgba($gray, 0.3);
border-spacing: 0;
margin-bottom: 2rem;
position: relative;
width: 100%;
@media (max-width: 1030px) {
display: inline-grid;
thead {
display: none;
}
tbody, tr, td {
display: block;
}
tbody tr:last-of-type td:not(:last-of-type) {
border-bottom: 1px solid rgba($gray, 0.3);
}
}
thead {
background-color: $black;
color: $white;
cursor: default;
position: relative;
tr {
position: relative;
z-index: 1;
}
&:not(*:root) {
&::after {
z-index: -1;
}
}
&::after {
width: calc(100% + 2px); height: calc(100% + 2px);
top: -1px; left: -1px;
background-color: $black;
content: "";
position: absolute;
z-index: 0;
}
}
tbody {
line-height: 1.55;
}
tr:nth-of-type(even) {
background-color: rgba($black, 0.025);
}
th, td {
padding: 0.5rem 1rem;
}
th {
font-size: 0.8rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
}
tbody tr:not(:last-of-type) td {
border-bottom: 1px solid rgba($gray, 0.3);
}
td {
font-size: 1rem;
}
}
}
.page__markup {
@extend %markdown;
}
.page__header {
// background-image: url("/assets/media/images/background-a.jpg");
background-color: $black;
}
.page__content {
background-image: url("/assets/media/images/grid.png");
}

4
app/sass/partials/_ecosystem.scss
View file

@ -253,6 +253,10 @@
}
}
.ecosystem__module__details, .ecosystem__submodule__markdown {
@extend %markdown;
}
.ecosystem__module__piece {
background-color: $white;
left: 10%;

10
app/views/redirect.js
View file

@ -66,7 +66,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
</div>
</header>
<section class="page__content" itemprop="articleBody">
<section class="page__content page__markup" itemprop="articleBody">
<div class="inner-wrap">
<p>The page you are looking for does not exist.</p>
</div>
@ -99,7 +99,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
<section class="page__content" itemprop="articleBody">
<div class="inner-wrap">
${raw(updatedMarkdown)}
<div class="page__markup">${raw(updatedMarkdown)}</div>
${raw(pageScript)}
${newMetadata.length ? raw(updateMetadata(newMetadata)) : ""}
</div>
@ -145,10 +145,8 @@ function partialFinder(markdownBody) {
if (fileExistsTest) {
const partialFunction = require(path.join(__dirname, "..", `./components/${filename}.js`));
if (filename === "glossary-toc") markdownBody = markdownBody.replace(partial, partialFunction);
else markdownBody = markdownBody.replace(partial, partialFunction.default());
const markdownHtml = filename === "glossary-toc" ? partialFunction : partialFunction.default(); //kill special case
markdownBody = markdownBody.replace(partial, '</div>' + markdownHtml + '<div class="page__markup">');
}
}