updated all links to new blue

This commit is contained in:
bill bittner 2017-10-25 09:17:47 -07:00
parent 5e1b9daeb1
commit d80869e37a
17 changed files with 78 additions and 83 deletions

View file

@ -124,7 +124,7 @@ p, h3 {
} }
.blue { .blue {
color: dodgerblue; color: #4156C5;
} }
/* TOOL TIPS */ /* TOOL TIPS */
@ -169,6 +169,24 @@ a, a:visited {
text-decoration: none; text-decoration: none;
} }
.link--primary, .link--primary:visited {
color: #4156C5;
}
.link--nav {
color: black;
border-bottom: 2px solid white;
}
.link--nav:hover {
color: #4156C5;
}
.link--nav-active {
color: #4156C5;
border-bottom: 2px solid #4156C5;
}
/* COLUMNS AND ROWS */ /* COLUMNS AND ROWS */
.row { .row {
@ -206,6 +224,10 @@ a, a:visited {
padding-bottom: 0px; padding-bottom: 0px;
} }
.row--no-right {
padding-right: 0px;
}
.column { .column {
display: inline-block; display: inline-block;
padding: 0px; padding: 0px;
@ -347,7 +369,7 @@ option {
} }
.blue-underlined-pointer { .blue-underlined-pointer {
color: dodgerblue; color: #4156C5;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
@ -399,13 +421,13 @@ button {
} }
.button--primary:hover { .button--primary:hover {
border: 1px solid dodgerblue; border: 1px solid #4156C5;
color: white; color: white;
background-color: dodgerblue; background-color: #4156C5;
} }
.button--primary:active{ .button--primary:active{
border: 1px solid dodgerblue; border: 1px solid #4156C5;
color: white; color: white;
background-color: white; background-color: white;
} }
@ -447,23 +469,6 @@ table {
.nav-bar-link { .nav-bar-link {
padding: 1.5rem; padding: 1.5rem;
display: inline-block; display: inline-block;
color: black;
font-weight: normal;
color: black;
border-bottom: 2px solid white;
}
.nav-bar-link--last {
padding-right: 0px;
}
.nav-bar-link:hover {
color: dodgerblue;
}
.nav-bar-link--active {
color: dodgerblue;
border-bottom: 2px solid dodgerblue;
} }
/* PUBLISH FORM */ /* PUBLISH FORM */
@ -475,7 +480,7 @@ table {
} }
.dropzone:hover, .dropzone--drag-over { .dropzone:hover, .dropzone--drag-over {
border: 2px dashed dodgerblue; border: 2px dashed #4156C5;
cursor: pointer; cursor: pointer;
} }
@ -519,43 +524,33 @@ table {
/* item lists */ /* item lists */
.content-list-item {
}
.content-list-item-asset { .content-list-item-asset {
width: 90%; width: 90%;
} }
.content-list-item-link { /* progress bar */
.progress-bar--inactive {
color: lightgrey;
}
.progress-bar--active {
color: #4156C5;
} }
/* other */ /* other */
.toggle-link {
float: right;
}
.wrap-words { .wrap-words {
word-wrap: break-word; word-wrap: break-word;
} }
#new-release-banner { #new-release-banner {
font-size: small; font-size: small;
background-color: dodgerblue; background-color: #4156C5;
color: white; color: white;
text-align: center; text-align: center;
} }
.progress-bar--inactive {
color: lightgrey;
}
.progress-bar--active {
color: dodgerblue;
}
/* ---- grid items ---- */ /* ---- grid items ---- */
.grid-item { .grid-item {

View file

@ -32,7 +32,7 @@
height: 1rem; height: 1rem;
} }
.nav-bar-link { .link--nav {
font-size: small; font-size: small;
padding: 1rem 0.5rem 1rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem;
} }
@ -86,7 +86,7 @@
@media (max-width: 360px) { @media (max-width: 360px) {
.nav-bar-link { .link--nav {
font-size: x-small; font-size: x-small;
} }

View file

@ -2,18 +2,18 @@
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10"> <div class="column column--8 column--med-10">
<p class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p> <p class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
<p><a target="_blank" href="https://twitter.com/spee_ch">TWITTER</a></p> <p><a class="link--primary" target="_blank" href="https://twitter.com/spee_ch">TWITTER</a></p>
<p><a target="_blank" href="https://github.com/lbryio/spee.ch">GITHUB</a></p> <p><a class="link--primary" target="_blank" href="https://github.com/lbryio/spee.ch">GITHUB</a></p>
<p><a target="_blank" href="https://discord.gg/YjYbwhS">DISCORD CHANNEL</a></p> <p><a class="link--primary" target="_blank" href="https://discord.gg/YjYbwhS">DISCORD CHANNEL</a></p>
<p><a target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a></p> <p><a class="link--primary" target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a></p>
</div> </div>
</div><div class="column column--5 column--med-10 align-content-top"> </div><div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10"> <div class="column column--8 column--med-10">
<p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p> <p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="link--primary" href="https://lbry.io">LBRY</a> blockchain.</p>
<p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p> <p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
<h3>Contribute</h3> <h3>Contribute</h3>
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p> <p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a class="link--primary" href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p> <p>If you want to improve spee.ch, join our <a class="link--primary" href="https://discord.gg/YjYbwhS">discord channel</a> or solve one of our <a class="link--primary" href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
</div> </div>
</div> </div>

View file

@ -8,21 +8,21 @@
</div> </div>
<div class="row"> <div class="row">
<div class="column column--3 align-content--left"> <div class="column column--3 align-content--left">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a>
</div><div class="column column--4 align-content-center"> </div><div class="column column--4 align-content-center">
{{#if this.previousPage}} {{#if this.previousPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.previousPage}}">Previous</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.previousPage}}">Previous</a>
{{else}} {{else}}
<a disabled>Previous </a> <a disabled>Previous </a>
{{/if}} {{/if}}
| |
{{#if this.nextPage}} {{#if this.nextPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.nextPage}}">Next</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.nextPage}}">Next</a>
{{else}} {{else}}
<a disabled>Next</a> <a disabled>Next</a>
{{/if}} {{/if}}
</div><div class="column column--3 align-content-right"> </div><div class="column column--3 align-content-right">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,4 +1,4 @@
<div class="row"> <div class="row">
<h3>404: Not Found</h3> <h3>404: Not Found</h3>
<p>That page does not exist. Return <a href="/">home</a>.</p> <p>That page does not exist. Return <a class="link--primary" href="/">home</a>.</p>
</div> </div>

View file

@ -88,10 +88,10 @@
/* socket.io message listeners */ /* socket.io message listeners */
socket.on('publish-update', function(msg){ socket.on('publish-update', function(msg){
updatePublishStatus(`<p>${msg}</p>`); updatePublishStatus(`<p>${msg}</p>`);
updateUploadPercent(`<p>Curious what magic is happening here? <a target="blank" href="https://lbry.io/faq/what-is-lbry">learn more</a></p>`); updateUploadPercent(`<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>`);
}); });
socket.on('publish-failure', function(msg){ socket.on('publish-failure', function(msg){
updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a href="https://lbry.slack.com/" target="_blank">lbry slack</a></strong>'); updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></strong>');
hidePublishProgressBar(); hidePublishProgressBar();
hideUploadPercent(); hideUploadPercent();
}); });
@ -99,7 +99,7 @@
const showUrl = msg.result.claim_id + "/" + msg.name; const showUrl = msg.result.claim_id + "/" + msg.name;
// update status // update status
updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>'); updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
updateUploadPercent('<p><a target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>') updateUploadPercent('<p><a class="link--primary" target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
// redirect the user // redirect the user
window.location.href = showUrl; window.location.href = showUrl;
}); });

View file

@ -1,7 +1,7 @@
<div class="row row--padded"> <div class="row row--padded">
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10"> <div class="column column--8 column--med-10">
<p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p> <p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a class="link--primary" target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div> </div>
</div><div class="column column--5 column--med-10 align-content-top"> </div><div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10"> <div class="column column--8 column--med-10">

View file

@ -1,5 +1,5 @@
<div class="row"> <div class="row">
<h3>No Channel</h3> <h3>No Channel</h3>
<p>There are no published channels matching your url</p> <p>There are no published channels matching your url</p>
<p>If you think this message is an error, contact us in the <a href="https://discord.gg/YjYbwhS" target="_blank">LBRY Discord!</a></p> <p>If you think this message is an error, contact us in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY Discord!</a></p>
</div> </div>

View file

@ -1,5 +1,5 @@
<div class="row"> <div class="row">
<h3>No Claims</h3> <h3>No Claims</h3>
<p>There are no free assets at that claim. You should publish one at <a href="/">spee.ch</a>.</p> <p>There are no free assets at that claim. You should publish one at <a class="link--primary" href="/">spee.ch</a>.</p>
<p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p> <p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p>
</div> </div>

View file

@ -5,7 +5,7 @@
<div class="row row--wide"> <div class="row row--wide">
<div id="show-short-link"> <div id="show-short-link">
<div class="column column--2 column--sml-10"> <div class="column column--2 column--sml-10">
<a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"><span class="label">Link:</span></a> <a class="link--primary" href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"><span class="label">Link:</span></a>
</div><div class="column column--8 column--sml-10"> </div><div class="column column--8 column--sml-10">
<div class="row row--short row--wide"> <div class="row row--short row--wide">
<div class="column column--7"> <div class="column column--7">
@ -43,17 +43,17 @@
<span class="label">Share:</span> <span class="label">Share:</span>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-10">
<div class="row row--short row--wide flex-container flex-container--row flex-container--wrap"> <div class="row row--short row--wide flex-container flex-container--row flex-container--wrap">
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a> <a class="link--primary" target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a> <a class="link--primary" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
<a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a> <a class="link--primary" target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>
<a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a> <a class="link--primary" target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row row--wide"> <div class="row row--wide">
<a class="label" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a> <a class="label link--primary" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a>
</div> </div>
<div id="show-details" class="row row--padded row--wide" hidden="true"> <div id="show-details" class="row row--padded row--wide" hidden="true">

View file

@ -9,7 +9,7 @@
</a> </a>
</div><div class="column column--7 align-content-top"> </div><div class="column column--7 align-content-top">
<p>{{this.title}}</p> <p>{{this.title}}</p>
<a href="{{this.showUrlShort}}">spee.ch{{this.showUrlShort}}</a> <a class="link--primary" href="{{this.showUrlShort}}">spee.ch{{this.showUrlShort}}</a>
</div> </div>
</div> </div>

View file

@ -1,7 +1,7 @@
<a href="{{this.showUrlLong}}"> <a href="{{this.showUrlLong}}">
{{#ifConditional this.contentType '===' 'video/mp4'}} {{#ifConditional this.contentType '===' 'video/mp4'}}
<img class="content-list-item-asset grid-item" src="{{this.thumbnail}}"/> <img class="grid-item" src="{{this.thumbnail}}"/>
{{else}} {{else}}
<img class="content-list-item-asset grid-item" src="{{this.directUrlLong}}" /> <img class="grid-item" src="{{this.directUrlLong}}" />
{{/ifConditional}} {{/ifConditional}}
</a> </a>

View file

@ -24,28 +24,28 @@
<span class="nav-bar-tagline">Open-source, decentralized image and video sharing.</span> <span class="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
</div> </div>
<div class="nav-bar--right"> <div class="nav-bar--right">
<a class="nav-bar-link" href="/">Upload</a> <a class="nav-bar-link link--nav" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a> <a class="nav-bar-link link--nav" href="/popular">Popular</a>
<a class="nav-bar-link" href="/about">About</a> <a class="nav-bar-link link--nav" href="/about">About</a>
<select type="text" id="nav-bar-channel-select" class="select select--arrow nav-bar-link" onchange="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}> <select type="text" id="nav-bar-channel-select" class="select select--arrow link--nav" onchange="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}>
<option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option> <option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option>
<option value="VIEW">View</option> <option value="VIEW">View</option>
<option value="LOGOUT">Logout</option> <option value="LOGOUT">Logout</option>
</select> </select>
<a id="nav-bar-login-link" class="nav-bar-link nav-bar-link--last" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a> <a id="nav-bar-login-link" class="nav-bar-link link--nav" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
// highlight the link for the current page // highlight the link for the current page
const navBarLinks = document.getElementsByClassName('nav-bar-link'); const navBarLinks = document.getElementsByClassName('link--nav');
for (let i = 0; i < navBarLinks.length; i++){ for (let i = 0; i < navBarLinks.length; i++){
const link = navBarLinks[i]; const link = navBarLinks[i];
if (link.href == window.location.href) { if (link.href == window.location.href) {
link.setAttribute('class', 'nav-bar-link nav-bar-link--active'); link.setAttribute('class', 'nav-bar-link link--nav-active');
} else if (`/${link.value}` === window.location.pathname) { } else if (`/${link.value}` === window.location.pathname) {
link.setAttribute('class', 'select select--no-arrow nav-bar-link nav-bar-link--active'); link.setAttribute('class', 'select select--arrow link--nav-active');
} }
} }
</script> </script>

View file

@ -1,6 +1,6 @@
<div class="row row--padded row--no-top row--no-bottom row--wide"> <div class="row row--padded row--no-top row--no-bottom row--wide">
<div class="column column--10"> <div class="column column--10">
<a class="label" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a> <a class="label link--primary" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
</div> </div>
</div> </div>

View file

@ -6,5 +6,5 @@
<button class="button--cancel" onclick="cancelPublish()">Cancel</button> <button class="button--cancel" onclick="cancelPublish()">Cancel</button>
</div> </div>
<div class="row row--short align-content-center"> <div class="row row--short align-content-center">
<p class="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a target="_blank" href="https://lbry.io/learn">[Read more]</a></p> <p class="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a class="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
</div> </div>

View file

@ -1,3 +1,3 @@
<div id="new-release-banner" class="row row--short row--wide"> <div id="new-release-banner" class="row row--short row--wide">
Hi there! You've stumbled upon the new version of spee&#60;h, launching soon! Send us your feedback in <a style="color:white; text-decoration: underline" target="_blank" href="https://slack.lbry.io/">our slack</a> Hi there! You've stumbled upon the new version of spee&#60;h, launching soon! Send us your feedback in <a style="color:white; text-decoration: underline" target="_blank" href="https://discord.gg/YjYbwhS">our discord</a>
</div> </div>

View file

@ -13,7 +13,7 @@
</video> </video>
{{/ifConditional}} {{/ifConditional}}
<br/> <br/>
hosted via <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}">spee&lt;h</a> hosted via <a class="link--primary" href="/{{fileInfo.claimId}}/{{fileInfo.name}}">spee&lt;h</a>
{{else}} {{else}}
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}"> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}">
<img class="show-asset-lite" src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" alt="{{fileInfo.fileName}}"/> <img class="show-asset-lite" src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" alt="{{fileInfo.fileName}}"/>