Final design solidified

This commit is contained in:
ポール ウェッブ 2018-05-01 17:45:31 -05:00
parent 22615fa010
commit e447ebeb26
13 changed files with 819 additions and 64 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" fill="#fcfcfc">
<path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
<path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
<path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
<path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
<path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
<path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
<path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
<path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,92 @@
html,
body {
width: 100%; height: 100%;
}
html {
background-color: $white;
}
body {
min-width: 320px; min-height: 100vh;
color: $black;
display: flex;
flex-direction: column;
@include font-sans;
font-size: 12px;
overflow-x: hidden;
position: relative;
z-index: 0;
}
main {
flex: 1;
padding-top: 4rem !important; // override Vue
}
.inner-wrap {
margin-right: auto;
margin-left: auto;
max-width: 1200px;
@media (min-width: 901px) {
padding-right: 1rem;
padding-left: 1rem;
}
@media (max-width: 900px) {
padding-right: 2rem;
padding-left: 2rem;
}
&::after {
@include clearfix;
}
}
h1, h2, h3, h4, h5 {
.header-anchor {
display: none;
}
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
.__message {
bottom: 4rem; left: 10%;
animation: close-message linear;
animation-delay: 2s;
font-size: 0.8rem;
line-height: 1.33;
padding-bottom: 1rem;
padding-top: 1rem;
position: absolute;
text-align: center;
width: 80%;
z-index: 2;
a {
font-weight: 700;
}
&[type="error"] {
background-color: $red;
color: $white;
}
&[type="warning"] {
background-color: $yellow;
}
}

View file

@ -1,2 +1,2 @@
$primary-color: #155b4a; $primary-color: #155b4a;
$text-color: #222; $text-color: #222;

View file

@ -0,0 +1,151 @@
html {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
margin: 0; padding: 0;
box-sizing: inherit;
outline: 0 !important;
}
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea { // Remove touch delay on supported devices
touch-action: manipulation;
}
a {
color: currentColor;
text-decoration: none;
}
*[readonly] {
cursor: not-allowed;
}
textarea {
&[disabled] {
resize: none;
}
&:not[disabled] {
resize: vertical;
}
}
button {
&:not(:disabled) {
cursor: pointer;
}
&:active {
top: 2px;
}
}
button,
input,
select,
textarea {
border: none;
border-radius: 0;
font-family: inherit;
font-size: inherit;
-moz-appearance: none;
-webkit-appearance: none;
&:focus {
outline: none;
}
}
input,
select,
textarea {
background-color: transparent;
}
input[type=submit] {
cursor: pointer;
}
.left {
float: left;
}
.right {
float: right;
}
iframe {
border: 0;
}
img {
font-size: 0;
&::after {
width: 100%; height: 100%;
top: -100%; left: 0;
background-color: $white;
background-image: url("../media/images/missing.png");
background-size: cover;
box-shadow: 0 0 1px 0 rgba($black, 0.3);
content: "";
display: block;
position: relative;
}
}
@media print {
// Intelligent print styles
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: 0.5cm !important; }
p, h2, h3 { orphans: 3 !important; widows: 3 !important; }
h2, h3 { page-break-after: avoid !important; }
thead { display: table-header-group !important; }
// Faster, more stable printing
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; }
// Show hypertext data for links and abbreviations
p a[href]::after { content: " (" attr(href) ")" !important; }
p abbr[title]::after { content: " (" attr(title) ")" !important; }
p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; }
p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; }
}
input::-moz-focus-inner,
button::-moz-focus-inner {
display: none;
}
// Get rid of yellow autofill background
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px $white inset !important;
&:focus {
outline: none;
}
}

View file

@ -0,0 +1,18 @@
$white: #fcfcfc;
$black: #222;
$gray: #a3b7ad;
$yellow: #dbdb3e;
$lime: #8ddb3e;
$green: #3edb3e;
$teal: #3edb8d;
$cyan: #3edbdb;
$blue: #3e8cdb;
$indigo: #3e3edb;
$violet: #8c3edb;
$fuchsia: #db3edb;
$pink: #db3e8d;
$red: #db3e3e;
$orange: #db8c3e;
// via https://palx.jxnblk.com/3edb8d

View file

@ -0,0 +1,181 @@
// B U T T O N S
.__button-base {
border: 1px solid;
font-size: 1rem;
letter-spacing: 0.025rem;
position: relative;
transition: all 0.2s;
}
.__button-basic {
@extend .__button-base;
@extend .__button-padding-vertical;
background-color: transparent;
border-color: transparent;
&::after {
width: 100%; height: 2px;
bottom: 2px; left: 0;
content: "";
display: block;
transition: background-color 0.2s;
}
&:not(:hover)::after {
background-color: transparent;
}
&:hover::after {
background-color: $black;
}
}
.__button-black {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
&:not(:hover) {
background-color: $black;
border-color: $white;
box-shadow: 2px 2px 0 $white;
color: $white;
}
&:hover {
background-color: $white;
border-color: $black;
box-shadow: 2px 2px 0 $black;
color: inherit;
}
}
.__button-white {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
&:not(:hover) {
background-color: $white;
border-color: transparent;
box-shadow: 2px 2px 0 $black;
color: inherit;
}
&:hover {
background-color: $black;
border-color: $white;
box-shadow: 2px 2px 0 $white;
color: $white;
}
}
.__button-gray {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
background-color: $white;
&:not(:hover) {
border-color: transparent;
box-shadow: 2px 2px 0 $black;
}
&:hover {
border-color: $teal;
box-shadow: 2px 2px 0 $teal;
color: $teal;
}
}
.__button-padding-vertical {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.__button-padding-horizontal {
padding-right: 1rem;
padding-left: 1rem;
}
// G R I D
.__grid {
&:first-of-type {
cursor: default;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
&:not(:first-of-type) {
border-left: 1px solid $gray;
.col {
border-bottom-style: solid;
border-bottom-width: 1px;
&:last-of-type {
border-right-style: solid;
border-right-width: 1px;
}
&:not(.red):not(.orange):not(.yellow):not(.green) {
border-color: $gray;
}
}
}
@media (min-width: 600px) {
display: table;
table-layout: fixed;
width: 100%;
.col {
display: table-cell;
}
}
}
.col {
padding: 0.5rem 1rem;
width: 100%;
&:not(:first-of-type) {
text-align: right;
}
}
// Padded columns
.grid-padded {
@media (min-width: 600px) {
margin-right: -1rem;
margin-left: -1rem;
.grid {
border-spacing: 1rem 0;
}
}
}
// Vertically center grid content
// Requires content within the column to be inline/inline-block
.grid-align-middle .col {
vertical-align: middle;
}
.grid-reverse {
direction: rtl;
.col {
direction: ltr;
}
}

View file

@ -0,0 +1,72 @@
@mixin center {
align-items: center;
display: inline-flex;
justify-content: center;
}
@mixin font-sans {
font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@mixin font-serif {
font-family: Georgia, serif;
}
@mixin font-mono {
font-family: "Courier New", monospace;
}
@mixin clearfix {
clear: both;
content: "";
display: block;
}
@mixin hide-text {
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin selection($background, $foreground) {
::selection {
background-color: $background;
color: $foreground;
}
::-moz-selection {
background-color: $background;
color: $foreground;
}
}
@mixin no-user-select {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.clear {
@include clearfix;
}
.hide-text {
@include hide-text;
}

View file

@ -0,0 +1,105 @@
.home {
h1, h2 {
text-align: center;
}
h1 {
margin-bottom: 1rem;
text-transform: uppercase;
}
h2 {
font-weight: 400;
margin-bottom: 4rem;
}
hr {
width: 100%; height: 1px;
background-color: rgba($black, 0.1);
border: none;
margin-bottom: 4rem;
}
&.hero {
align-items: center;
background-color: $black;
background-image: url("../media/svg/text-logo--white.svg");
background-position: center;
background-repeat: no-repeat;
display: flex;
height: calc(50vh - 4rem);
justify-content: center;
h2 {
background-color: $white;
border: 1px solid rgba($black, 0.1);
box-decoration-break: clone;
display: inline;
line-height: 2;
padding: 0.4rem 1rem;
}
}
&.features {
.home__features {
align-content: center;
border-bottom: 1px solid rgba($black, 0.05);
display: flex;
flex-flow: row wrap;
list-style-type: none;
padding-top: 2rem;
padding-bottom: 2rem;
}
.home__feature {
position: relative;
text-align: center;
vertical-align: top;
width: 50%;
}
.home__feature__title {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.home__feature__description {
font-size: 1rem;
left: 10%;
margin-bottom: 1rem;
position: relative;
width: 80%;
}
.home__feature__cta {
@extend .__button-black;
display: inline-block;
font-size: 1rem;
position: relative;
}
}
&.intro,
&.docs,
&.contribute,
&.develop,
&.community {
padding-top: 3rem;
padding-bottom: 3rem;
h3 {
@extend .inner-wrap;
font-size: 3rem;
}
}
&.intro,
&.docs,
&.contribute,
&.develop {
border-bottom: 1px solid rgba($black, 0.05);
}
}

View file

@ -0,0 +1,55 @@
.navigation {
top: 0; left: 0;
background-color: $white;
box-shadow: 0 1px 5px rgba($black, 0.1);
// color: $white;
position: fixed;
width: 100%;
z-index: 10;
> div:first-of-type {
align-items: stretch;
display: flex;
flex-flow: row wrap;
}
}
.navigation__item {
color: inherit;
font-size: 1rem;
line-height: 4rem;
overflow: hidden;
padding-right: 0.5rem;
padding-left: 0.5rem;
position: relative;
&:first-of-type {
flex: 1;
}
&:not(:first-of-type) {
&::after {
width: 100%; height: 3px;
background-color: $teal;
content: "";
left: 0;
position: absolute;
transition: bottom 0.2s;
}
&:not(:hover) {
&::after {
bottom: -3px;
}
}
&:hover,
&.active {
&::after {
bottom: 0;
}
}
}
}

View file

@ -0,0 +1,22 @@
// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im)
@font-face {
font-family: "Karla";
font-style: normal;
font-weight: 400;
src: local("Karla Regular"), url(//brick.freetls.fastly.net/fonts/karla/400.woff) format("woff");
}
@font-face {
font-family: "Karla";
font-style: italic;
font-weight: 400;
src: local("Karla Italic"), url(//brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff");
}
@font-face {
font-family: "Karla";
font-style: normal;
font-weight: 700;
src: local("Karla Bold"), url(//brick.freetls.fastly.net/fonts/karla/700.woff) format("woff");
}

View file

@ -1,12 +1,14 @@
<template> <template>
<v-app> <v-app>
<v-toolbar clipped-left app scroll-off-screen> <!--/
<v-toolbar>
<v-toolbar-title class="align-center"> <v-toolbar-title class="align-center">
<span class="title"><router-link to="/">LBRY.tech</router-link></span> <span class="title"><router-link to="/">LBRY.tech</router-link></span>
</v-toolbar-title> </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down"> <v-toolbar-items class="hidden-sm-and-down">
<v-btn flat to="/overview.html">Overview</v-btn> <v-btn flat to="/overview.html">Overview</v-btn>
<v-btn flat to="/documentation.html">Documentation</v-btn> <v-btn flat to="/documentation.html">Documentation</v-btn>
@ -14,65 +16,108 @@
<v-btn flat to="/develop.html">How to Develop</v-btn> <v-btn flat to="/develop.html">How to Develop</v-btn>
<v-btn flat to="/resources/">Resources</v-btn> <v-btn flat to="/resources/">Resources</v-btn>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-toolbar>
/-->
<nav class="navigation">
<div class="inner-wrap">
<a class="navigation__item" href="/" title="Go back home">LBRY</a>
<a class="navigation__item" href="/overview.html" title="TBD">Overview</a>
<a class="navigation__item" href="/documentation.html" title="TBD">Documentation</a>
<a class="navigation__item" href="/contribute.html" title="TBD">Contribute</a>
<a class="navigation__item" href="/develop.html" title="TBD">Develop</a>
<a class="navigation__item" href="/resources" title="TBD">Resources</a>
</div>
</nav>
<v-content> <v-content>
<!--/
<v-alert type="error" value="true" id="in-development-alert" class="pt-4 pb-4 ma-0"> <v-alert type="error" value="true" id="in-development-alert">
<strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</v-alert> <strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</v-alert>
</v-alert> </v-alert>
/-->
<template v-if="$page.frontmatter.home"> <template v-if="$page.frontmatter.home">
<section class="home hero">
<!--/ <h1 class="home__heading">LBRY Technology</h1> /-->
<div>
<h2>
LBRY is a free, open, and community-run digital marketplace.<br/>
Build the future of content freedom.
</h2>
</div>
</section>
<hook></hook> <section class="home features">
<ul class="home__features">
<li class="home__feature">
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
<p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
<a class="home__feature__cta" href="">Check it out</a>
</li>
<li class="home__feature">
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
<p class="home__feature__description">Start exploring our API and help make LBRY better</p>
<a class="home__feature__cta" href="">Jump in</a>
</li>
</ul>
</section>
<section class="home intro">
<h3>Intro/Overview</h3>
<p>Text and such</p>
</section>
<section class="home docs">
<h3>Documentation</h3>
<p>Text and such</p>
</section>
<section class="home contribute">
<h3>Contribute</h3>
<p>Text and such</p>
</section>
<section class="home develop">
<h3>Development</h3>
<p>Text and such</p>
</section>
<section class="home community">
<h3>Community</h3>
<p>Text and such</p>
</section>
<!--/ <hook></hook> /-->
<!--/
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-layout row wrap>
<v-flex>
<v-flex xs12 xl6 offset-xl3>
<Content custom></Content> <Content custom></Content>
<edit-link :path="this.$page.path"></edit-link> <edit-link :path="this.$page.path"></edit-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
/-->
</template> </template>
<template v-else-if="$page.path == '/whitepaper.html'"> <template v-else-if="$page.path == '/whitepaper.html'">
<Content custom></Content> <Content custom></Content>
</template> </template>
<template v-else> <template v-else>
<v-container> <v-container>
<v-layout>
<v-layout row wrap> <v-flex>
<v-flex xs12 xl6 offset-xl3>
<Sidebar v-if="$page.headers"></Sidebar> <Sidebar v-if="$page.headers"></Sidebar>
<Content custom></Content> <Content custom></Content>
<edit-link :path="this.$page.path"></edit-link> <edit-link :path="this.$page.path"></edit-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
</template> </template>
</v-content> </v-content>
</v-app> </v-app>
@ -85,12 +130,7 @@ import Vuetify from 'vuetify'
import VueResource from 'vue-resource' import VueResource from 'vue-resource'
import VueHighlightJS from 'vue-highlightjs' import VueHighlightJS from 'vue-highlightjs'
Vue.use(Vuetify, { Vue.use(Vuetify);
theme: {
primary: '#155b4a'
}
});
Vue.use(VueResource) Vue.use(VueResource)
Vue.use(VueHighlightJS) Vue.use(VueHighlightJS)
@ -149,42 +189,49 @@ function updateMetaTags (meta, current) {
} }
</script> </script>
<style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> <!--/ <style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> /-->
<style lang="scss"> <style lang="scss">
@import "../scss/type/karla";
@import "../scss/init/colors";
@import "../scss/init/base";
@import "../scss/init/extends";
@import "../scss/init/mixins";
@import "../scss/layout";
@import "../scss/pages/home";
@import "../scss/partials/navigation";
@import '../scss/fonts'; /*
html {
font-size: 16px;
}
html { pre {
font-size: 16px; text-align: left;
} overflow-x: auto;
}
pre { img {
text-align: left; max-width: 100%;
overflow-x: auto; }
}
img { .content.custom {
max-width: 100%; display: block;
} }
.content.custom { .toolbar__title {
display: block; a {
} text-decoration: none;
&:hover {
.toolbar__title { color: black;
a { }
text-decoration: none;
&:hover {
color: black;
} }
} }
}
#in-development-alert { #in-development-alert {
a { a {
color: white; color: white;
}
} }
} */
</style> </style>