decouple markdown and page content, simplify css

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

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>
<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 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>
</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>

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>
<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>
<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">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>

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>
<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>
<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">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>

View file

@ -9,17 +9,19 @@ 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>
<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>
<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">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>
<li class="__parent red" data-action="open" data-target="lbrycrd">Blockchain</li>

View file

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

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;
}
}
}

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");
}

View file

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

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">');
}
}