Merge pull request #156 from lbryio/markdown_refactor
decouple markdown and page content, simplify css
This commit is contained in:
netop:// ウェッブ
GitHub
commit
303caa19a4
9 changed files with 360 additions and 350 deletions
|
|
@ -9,6 +9,7 @@ module.exports = exports = () => `
|
|||
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="chainquery">chainquery</h3>
|
||||
|
||||
<div class="ecosystem__submodule__description">
|
||||
<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>
|
||||
|
||||
|
|
@ -19,7 +20,7 @@ module.exports = exports = () => `
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ module.exports = exports = () => `
|
|||
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="lighthouse">lighthouse</h3>
|
||||
|
||||
<div class="ecosystem__submodule__description">
|
||||
<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>
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ module.exports = exports = () => `
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ module.exports = exports = () => `
|
|||
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="reflector">reflector</h3>
|
||||
|
||||
<div class="ecosystem__submodule__description">
|
||||
<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>
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ module.exports = exports = () => `
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ module.exports = exports = () => `
|
|||
<h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="wallet">wallet server</h3>
|
||||
|
||||
<div class="ecosystem__submodule__description">
|
||||
<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>
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ module.exports = exports = () => `
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"init/colors",
|
||||
"init/base",
|
||||
"init/mixins",
|
||||
"init/markdown",
|
||||
"init/extends",
|
||||
|
||||
"type/karla",
|
||||
|
|
|
|||
298
app/sass/init/_markdown.scss
Normal file
298
app/sass/init/_markdown.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
.page__markup {
|
||||
@extend %markdown;
|
||||
}
|
||||
|
||||
+ 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__header {
|
||||
// background-image: url("/assets/media/images/background-a.jpg");
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
background-image: url("/assets/media/images/grid.png");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -253,6 +253,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ecosystem__module__details, .ecosystem__submodule__markdown {
|
||||
@extend %markdown;
|
||||
}
|
||||
|
||||
.ecosystem__module__piece {
|
||||
background-color: $white;
|
||||
left: 10%;
|
||||
|
|
|
|||
|
|
@ -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">');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue