laconicd-deprecated/docs/.vuepress/components/Home.vue
Federico Kunze d4fe9b234c
docs: vuepress setup and section titles (#311)
* vuepress

* docs: vuepress setup and TODOs

* doc scripts

* update Makefile and gitignore

* more docs updates

* gitignore

* metamask instructions

* update image

* updates

* updates from call

* docs: vuepress config and home.vue (#350)

* update uncles return (#337)

* x/evm: fix EndBlock consensus failure (#334)

* add test for sending tx w/ 21000 gas

* improve rpc transfer test

* use ctx in EndBlock

* UpdateAccounts and ClearStateObjects with passed in context

* log ethereum address on error

Co-authored-by: Federico Kunze <31522760+fedekunze@users.noreply.github.com>
Co-authored-by: Federico Kunze <federico.kunze94@gmail.com>

* update Ethermint color variables

* add header and footer logo

* tweak config.js

* WIP custom homepage.vue

* add layout to docs/README

* update color variables

* add eth logo black and white

* tweak docs/README

* update logo and logo-bw svg

* bump 1.0.167

* homepage → home

* add icon-code, icon-rocket

* layout: home, remove configurable frontmatter: label, read, use

* clean up config.js

* bump 1.0.168

* fix missing comma from resolving conflicts

* update sidebar, config nav, path

* remove left whitespace on the header and footer logos

* clean up home.vue, docs/README

* update ethermint forum url in footer.links

* comment out custom true to enable searchbar in subpages

* remove external link icon for Guides

* comments, revert custom true

* clean up config.js, add specifications icon

Co-authored-by: noot <36753753+noot@users.noreply.github.com>
Co-authored-by: Federico Kunze <31522760+fedekunze@users.noreply.github.com>
Co-authored-by: Federico Kunze <federico.kunze94@gmail.com>

* final touches

Co-authored-by: Cyrus Goh <hello@lovincyrus.com>
Co-authored-by: noot <36753753+noot@users.noreply.github.com>
2020-07-02 04:22:45 -04:00

440 lines
11 KiB
Vue

<template lang="pug">
div
.search__container
.search(@click="$emit('search', true)")
.search__icon
icon-search
.search__text Search
.h1 {{$frontmatter.title}}
.intro
.p {{$frontmatter.description}}
.h2 Getting Started
.p__alt Read all about Ethermint or dive straight into the code with guides.
.features
router-link(to="/quick-start").features__item.features__item__light
.features__item__image
icon-rocket.features__item__image__img
.features__item__text
.features__item__text__h2 read
.features__item__text__h1 Quick start
.features__item__text__p Deploy your own node, setup your testnet and more.
router-link(to="/guides").features__item.features__item__dark
.features__item__image
icon-code.features__item__image__img
.features__item__text
.features__item__text__h2 use
.features__item__text__h1 Guides
.features__item__text__p Follow guides to using polular Ethereum tools with Ethermint.
.sections__wrapper
.h2 Explore Ethermint
.p__alt Get familiar with Ethermint and explore its main concepts.
.sections
router-link.sections__item(tag="a" :to="section.url" v-for="section in $frontmatter.sections")
component(:is="`tm-icon-${section.icon}`").sections__item__icon
.sections__item__wrapper
.sections__item__title {{section.title}}
.sections__item__desc {{section.desc}}
.h2 Explore the stack
.p__alt Check out the docs for the various parts of the Ethermint stack.
.stack
a.stack__item(:href="item.url" v-for="item in $frontmatter.stack" :style="{'--accent': item.color, '--opacity': '5%'}")
.stack__item__wrapper
component(:is="`tm-logo-${item.label}`" :color="item.color" height="100px").stack__item__logo
svg(width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg").stack__item__icon
path(d="M1.07239 14.4697C0.779499 14.7626 0.779499 15.2374 1.07239 15.5303C1.36529 15.8232 1.84016 15.8232 2.13305 15.5303L1.07239 14.4697ZM15.7088 1.95457C16.0017 1.66168 16.0017 1.18681 15.7088 0.893912C15.4159 0.601019 14.941 0.601019 14.6482 0.893912L15.7088 1.95457ZM15.6027 1H16.3527C16.3527 0.585786 16.0169 0.25 15.6027 0.25V1ZM5.4209 0.25C5.00669 0.25 4.6709 0.585786 4.6709 1C4.6709 1.41421 5.00669 1.75 5.4209 1.75V0.25ZM14.8527 11.1818C14.8527 11.596 15.1885 11.9318 15.6027 11.9318C16.0169 11.9318 16.3527 11.596 16.3527 11.1818H14.8527ZM2.13305 15.5303L15.7088 1.95457L14.6482 0.893912L1.07239 14.4697L2.13305 15.5303ZM15.6027 0.25H5.4209V1.75H15.6027V0.25ZM16.3527 11.1818V1H14.8527V11.1818H16.3527Z" fill="#DADCE6")
div
.stack__item__h1 {{item.title}}
.stack__item__p {{item.desc}}
tm-help-support
</template>
<style lang="stylus" scoped>
/deep/
.container h1
margin-bottom 1.5rem
.search
display flex
align-items center
color rgba(22, 25, 49, 0.65)
padding-top 1rem
width calc(var(--aside-width) - 6rem)
cursor pointer
transition color .15s ease-out
&:hover
color var(--color-text, black)
&__container
display flex
justify-content flex-end
margin-top 1rem
margin-bottom 1rem
&__icon
width 1.5rem
height 1.5rem
fill #aaa
margin-right 0.5rem
transition fill .15s ease-out
&:hover &__icon
fill var(--color-text, black)
.intro
width 100%
max-width 800px
.h1
font-size 3rem
font-weight 700
margin-bottom 1.5rem
line-height 3.25rem
letter-spacing -0.02em
padding-top 2.5rem
.h2
font-size 2rem
font-weight 700
margin-top 4.5rem
margin-bottom 1rem
line-height 2.25rem
letter-spacing -0.01em
.p
font-size 1.5rem
line-height 2.25rem
&__alt
margin-top 0.75rem
margin-bottom 2rem
font-size 1.25rem
line-height 1.75rem
.features
display grid
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
gap 1.5rem
margin-bottom 5rem
margin-top 2.25rem
&__item
cursor pointer
display grid
grid-auto-flow column
grid-template-columns minmax(6rem, 1fr) 2fr
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05)
position relative
border-radius .5rem
background linear-gradient(302.07deg, #FFFFFF 48.96%, #EBEDFF 100%)
outline none
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out
&:hover:not(:active),
&:focus
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05)
transform translateY(-2px)
transition-duration 0.1s
&:active
opacity 0.7
transition-duration 0s
&__dark
background linear-gradient(112.22deg, #161831 0%, #2E3148 100%)
&__dark &__text__h2
color white
opacity .5
&__dark &__text__h1
color white
&__dark &__text__p
color white
opacity .8
&__icon
position absolute
top 0
right 0
padding .75rem
width 1rem
height 1rem
fill white
opacity .35
&:hover &__icon
opacity .6
&__image
display flex
align-items center
justify-content center
align-self center
max-height 10rem
transition transform 0.2s ease-out
&__img
max-height 14rem
max-width 10rem
min-width 8rem
&:hover:not(:active) &__image
transform translateY(-0.25rem) scale(1.02)
transition-duration 0.1s
&__text
padding 1.75rem 2rem 2rem
display flex
flex-direction column
&__h2
font-size .75rem
letter-spacing 0.2em
text-transform uppercase
color var(--color-text-dim, inherit)
margin-bottom .25rem
&__h1
font-size 1.25rem
color var(--color-text, black)
line-height 1.75rem
letter-spacing .01em
font-weight 600
margin-top .25rem
margin-bottom .75rem
&__p
color var(--color-text-dim, inherit)
font-size .875rem
letter-spacing 0.03em
line-height 1.25rem
margin-bottom 1.5rem
.sections
display grid
margin-top 3rem
margin-bottom 5rem
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
gap 1.5rem
&__item
position relative
color initial
border-radius 0.5rem
padding 1.5rem 1.5rem 1.5rem 5.5rem
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05)
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out
&:hover:not(:active)
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05)
transform translateY(-2px)
transition-duration 0.1s
&:active
transition-duration 0s
opacity 0.7
&__icon
position absolute
top 1rem
left 1.25rem
font-size 1.5rem
display flex
align-items center
justify-content center
width 3rem
height 3rem
&__title
font-weight 600
margin-bottom 0.5rem
&__desc
font-size 0.875rem
line-height 1.25rem
color var(--color-text-dim, inherit)
.stack
display grid
gap 1.5rem
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
margin-bottom 4rem
&__item
position relative
min-height 120px
display flex
align-items center
padding 2rem 1.25rem
border-radius 0.5rem
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05)
color var(--color-text, black)
background white
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out
&:hover:not(:active)
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05)
transform translateY(-2px)
transition-duration 0.1s
&:active
opacity 0.7
transition-duration 0s
&__icon
position absolute
top 0
right 0
padding 1rem
opacity .35
&:hover &__icon
opacity .6
&__h1
font-size 1.25rem
line-height 1.5rem
margin-bottom 0.75rem
font-weight 600
&__p
font-size 0.875rem
color rgba(22, 25, 49, 0.65)
line-height 1.25rem
&__wrapper
display grid
grid-auto-flow column
grid-template-columns 30% 1fr
gap 1.25rem
&:before
position absolute
top 0
left 0
content ''
width 50%
height 100%
background linear-gradient(to right, var(--accent), rgba(255, 255, 255, 0))
border-radius 0.5rem
opacity 0.1
&__logo
height 72px
width auto
@media screen and (max-width: 1136px)
.p
font-size 1.25rem
line-height 1.75rem
@media screen and (max-width: 832px)
.h1
padding-top 3.5rem
.search__container
display none
@media screen and (max-width: 752px)
.search
display none
@media screen and (max-width: 500px)
.h1
font-size 2rem
line-height 2.25rem
margin-bottom 1rem
.h2
font-size 1.5rem
line-height 2rem
margin-top 3rem
margin-bottom 0.75rem
.p__alt
font-size 1rem
line-height 1.5rem
.features
margin-bottom 1.5rem
grid-template-columns repeat(auto-fit, minmax(240px, 1fr))
&__item
display block
&:not(:active)
box-shadow 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05)
&__image
max-height 9rem
padding-top 1rem
&__text
padding 1.5rem
.sections
gap 0
margin-bottom 0
margin-top 2rem
grid-template-columns repeat(auto-fit, minmax(240px, 1fr))
margin-left -1rem
margin-right -1rem
&__item
margin-bottom 0
padding 1.25rem 1rem 0 5.5rem
&,
&:hover:not(:active)
box-shadow none
&__icon
top 1rem
left 1.25rem
&__wrapper
padding-bottom 1.25rem
border-bottom 1px solid rgba(140, 145, 177, 0.32)
&:last-child .sections__item__wrapper
border-bottom none
&__wrapper
position relative
padding 0.1px 1rem 1rem
background white
border-radius 0.5rem
&:before
position absolute
content ''
top 0
left 0
right 0
bottom 0
border-radius 0.5rem
box-shadow 0px 24px 40px rgba(0, 0, 0, 0.1), 0px 10px 16px rgba(0, 0, 0, 0.08), 0px 1px 0px rgba(0, 0, 0, 0.05)
.stack
gap 0.75rem
grid-template-columns repeat(auto-fill, minmax(240px, 1fr))
margin-bottom 3rem
&__item
padding 1.25rem
&:not(:active)
box-shadow 0px 24px 40px rgba(22, 25, 49, 0.1), 0px 10px 16px rgba(22, 25, 49, 0.08), 0px 1px 0px rgba(22, 25, 49, 0.05)
&__wrapper
grid-template-columns 3rem 1fr
&__h1
font-size inherit
line-height inherit
margin-bottom 0.5rem
</style>