Final design solidified
This commit is contained in:
ポール ウェッブ
parent
22615fa010
commit
e447ebeb26
13 changed files with 819 additions and 64 deletions
BIN
.vuepress/media/images/missing.png
Normal file
BIN
.vuepress/media/images/missing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
6
.vuepress/media/svg/text-logo--white.svg
Normal file
6
.vuepress/media/svg/text-logo--white.svg
Normal 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 |
6
.vuepress/media/svg/text-logo.svg
Normal file
6
.vuepress/media/svg/text-logo.svg
Normal 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 |
92
.vuepress/scss/_layout.scss
Normal file
92
.vuepress/scss/_layout.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
$primary-color: #155b4a;
|
||||
$text-color: #222;
|
||||
$text-color: #222;
|
||||
|
|
|
|||
151
.vuepress/scss/init/_base.scss
Normal file
151
.vuepress/scss/init/_base.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
18
.vuepress/scss/init/_colors.scss
Normal file
18
.vuepress/scss/init/_colors.scss
Normal 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
|
||||
181
.vuepress/scss/init/_extends.scss
Normal file
181
.vuepress/scss/init/_extends.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
72
.vuepress/scss/init/_mixins.scss
Normal file
72
.vuepress/scss/init/_mixins.scss
Normal 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;
|
||||
}
|
||||
105
.vuepress/scss/pages/_home.scss
Normal file
105
.vuepress/scss/pages/_home.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
55
.vuepress/scss/partials/_navigation.scss
Normal file
55
.vuepress/scss/partials/_navigation.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
.vuepress/scss/type/_karla.scss
Normal file
22
.vuepress/scss/type/_karla.scss
Normal 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");
|
||||
}
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<v-app>
|
||||
|
||||
<v-toolbar clipped-left app scroll-off-screen>
|
||||
|
||||
<!--/
|
||||
<v-toolbar>
|
||||
<v-toolbar-title class="align-center">
|
||||
<span class="title"><router-link to="/">LBRY.tech</router-link></span>
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-toolbar-items class="hidden-sm-and-down">
|
||||
<v-btn flat to="/overview.html">Overview</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="/resources/">Resources</v-btn>
|
||||
</v-toolbar-items>
|
||||
|
||||
</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-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>
|
||||
</v-alert>
|
||||
/-->
|
||||
|
||||
<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-layout row wrap>
|
||||
|
||||
<v-flex xs12 xl6 offset-xl3>
|
||||
|
||||
<v-flex>
|
||||
<Content custom></Content>
|
||||
|
||||
<edit-link :path="this.$page.path"></edit-link>
|
||||
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
|
||||
/-->
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path == '/whitepaper.html'">
|
||||
|
||||
<Content custom></Content>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
|
||||
<v-container>
|
||||
|
||||
<v-layout row wrap>
|
||||
|
||||
<v-flex xs12 xl6 offset-xl3>
|
||||
|
||||
<v-layout>
|
||||
<v-flex>
|
||||
<Sidebar v-if="$page.headers"></Sidebar>
|
||||
|
||||
<Content custom></Content>
|
||||
|
||||
<edit-link :path="this.$page.path"></edit-link>
|
||||
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
|
||||
</template>
|
||||
|
||||
</v-content>
|
||||
|
||||
</v-app>
|
||||
|
|
@ -85,12 +130,7 @@ import Vuetify from 'vuetify'
|
|||
import VueResource from 'vue-resource'
|
||||
import VueHighlightJS from 'vue-highlightjs'
|
||||
|
||||
Vue.use(Vuetify, {
|
||||
theme: {
|
||||
primary: '#155b4a'
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(Vuetify);
|
||||
Vue.use(VueResource)
|
||||
Vue.use(VueHighlightJS)
|
||||
|
||||
|
|
@ -149,42 +189,49 @@ function updateMetaTags (meta, current) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style src="../../node_modules/vuetify/dist/vuetify.min.css"></style>
|
||||
<!--/ <style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> /-->
|
||||
|
||||
<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 {
|
||||
font-size: 16px;
|
||||
}
|
||||
pre {
|
||||
text-align: left;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
text-align: left;
|
||||
overflow-x: auto;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.content.custom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content.custom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toolbar__title {
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: black;
|
||||
.toolbar__title {
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#in-development-alert {
|
||||
a {
|
||||
color: white;
|
||||
#in-development-alert {
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue