From f897b809fd30af47b63dd117187a87804486ffd6 Mon Sep 17 00:00:00 2001 From: Nistor Cristian Date: Wed, 15 Jan 2020 00:34:13 +0200 Subject: [PATCH 1/3] Improved UI. Added copy to clipboard. Signed-off-by: Nistor Cristian --- public/css/main.css | 2635 +------------------------------------------ public/js/app.js | 10 + views/index.ejs | 102 +- 3 files changed, 115 insertions(+), 2632 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 4003df5..5e2643b 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,2611 +1,46 @@ -@font-face { - font-family: 'Manrope'; - src: url("../fonts/Manrope-Regular.woff2") format("woff2"), url("../fonts/Manrope-Regular.woff") format("woff"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: 'Manrope'; - src: url("../fonts/Manrope-Medium.woff2") format("woff2"), url("../fonts/Manrope-Medium.woff") format("woff"); - font-weight: 500; - font-style: normal; } - -@font-face { - font-family: 'Manrope'; - src: url("../fonts/Manrope-Semibold.woff2") format("woff2"), url("../fonts/Manrope-Semibold.woff") format("woff"); - font-weight: 600; - font-style: normal; } - -@font-face { - font-family: 'Manrope'; - src: url("../fonts/Manrope-Bold.woff2") format("woff2"), url("../fonts/Manrope-Bold.woff") format("woff"); - font-weight: 800; - font-style: normal; } - -::selection { - background: rgba(67, 96, 223, 0.5); } - -::-moz-selection { - background: rgba(67, 96, 223, 0.5); } - -body { - background: #ffffff; - font-family: "IBM Plex Sans", sans-serif; - font-weight: 400; - font-size: 16px; - line-height: 27px; - color: #3C4049; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - -.container { - max-width: 1420px; - padding-left: 40px; - padding-right: 40px; } - -.text-black { - color: #000000; } - -.text-white { - color: #ffffff; } - -p { - font-size: 16px; - line-height: 27px; } - -.p-large { - line-height: 31px; - font-size: 18px; - color: rgba(0, 0, 0, 0.8); - margin-bottom: 40px; } - -.break-word{ - word-wrap: break-word; +.join-content .btn{ + margin-top: 15px; + width: 100%; + max-width: 280px; + border-radius: 4px; } -.teaser-1, -.teaser-2 { - line-height: 36px; - font-size: 24px; - color: rgba(60, 64, 73, 0.8); - font-family: "Manrope", sans-serif; +.info{ font-weight: 500; - margin-bottom: 50px; } - -.teaser-2 { - line-height: 32px; - font-size: 20px; } - -svg path { - transition: all .3s ease; } - -a { - color: #4360DF; - transition: all .3s ease; } - a:hover { - color: #1C36AA; } - -a:hover, -a:focus { - text-decoration: none; } - -b { - font-weight: 700; } - -blockquote { - line-height: 36px; - font-size: 24px; - color: rgba(60, 64, 73, 0.8); - font-family: "Manrope", sans-serif; - font-weight: 500; - position: relative; - margin-bottom: 30px; } - blockquote:before { - content: ''; - width: 26px; - height: 25px; - background-image: url(../img/quotes.svg); - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: -5px; - left: -15px; } - blockquote p { - line-height: 36px; - font-size: 24px; - color: rgba(60, 64, 73, 0.8); - font-family: "Manrope", sans-serif; - font-weight: 500; } - -pre { - overflow-x: auto; - margin: 30px 0; - padding: 15px 20px; - max-width: 100%; - border: 1px solid #000000; - color: #ffffff; - background: #000000; - border-radius: 5px; } - pre .hljs { - background: #000000; - padding: 0; } - pre code { - background: transparent; - color: #ffffff; } - -code { - background-color: #000000; - padding: 2px 4px; - font-size: 13px; - border-radius: 8px; - color: #ffffff; - font-family: "IBM Plex Mono", monospace; } - -table { - width: 100%; - margin-bottom: 1rem; - color: #090909; } - table tr { - transition: all .3s ease; } - table tr:hover { - background: rgba(234, 236, 239, 0.5); } - table td, table th { - padding: 15px; - vertical-align: top; - border-top: 1px solid #EAECEF; } - table th { - vertical-align: bottom; - border-bottom: 2px solid #EAECEF; } - -hr { - margin: 50px 0; } - -h1, h2, h3, h4, h5, h6 { - color: #000000; - font-family: "Manrope", sans-serif; - font-weight: 400; - margin-bottom: 40px; } - -h1 { - line-height: 68px; - font-size: 58px; - font-weight: 500; } - -h2 { - line-height: 48px; - font-size: 48px; } - -h3 { - line-height: 48px; - font-size: 38px; } - -h4 { - line-height: 38px; - font-size: 28px; } - -.btn { - color: #000000; - border: 1px solid #000000; - border-radius: 0; - line-height: 20px; - font-size: 16px; - letter-spacing: -0.375px; - padding: 11px 16px; - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - border-radius: 2px; - position: relative; - background: transparent; - align-items: center; } - .btn:hover { - color: #ffffff; - background: #000000; } - .btn:hover svg path { - fill: #ffffff; } - .btn:active, .btn:focus { - color: #000000; - background-color: transparent; - outline: 0; - box-shadow: none; } - -.btn-fill { - background: #000000; - color: #ffffff; } - .btn-fill:hover { - color: #000000; - background: #ffffff; - border: 1px solid #000000; } - .btn-fill:hover svg path { - fill: #000000; } - .btn-fill:focus svg path, - .btn-fill:active svg path { - fill: #000000; } - -.btn-purple { - color: #4360DF; - border: 1px solid #4360DF; } - .btn-purple:hover { - color: #ffffff; - background: #4360DF; - border: 1px solid #4360DF; } - .btn-purple:active, .btn-purple:focus { - color: #4360DF; - border: 1px solid #4360DF; - background-color: transparent; } - -.btn-purple-fill { - background-color: #4360DF; - border: 1px solid #4360DF; - color: #ffffff; } - .btn-purple-fill:hover { - background: #1C36AA; } - .btn-purple-fill:active, .btn-purple-fill:focus { - background: #4360DF; - color: #ffffff; - border: 1px solid #4360DF; - box-shadow: 0 0 0 2px rgba(67, 96, 223, 0.25); } - -.btn-white { - color: #ffffff; - border: 1px solid #ffffff; - background: #000000; } - .btn-white:hover { - color: #000000; - border: 1px solid #ffffff; - background: #ffffff; } - .btn-white:active, .btn-white:focus { - color: #ffffff; - border: 1px solid #ffffff; - background: #000000; } - -.btn-white-fill { - background-color: #ffffff; - border: 1px solid #ffffff; - color: #000000; } - .btn-white-fill:hover { - background-color: #000000; - border: 1px solid #ffffff; - color: #ffffff; } - .btn-white-fill:active, .btn-white-fill:focus { - background-color: #ffffff; - border: 1px solid #3C4049; - color: #000000; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); } - .btn-white-fill:active svg path, .btn-white-fill:focus svg path { - fill: #000000; } - -.btn-arrow { - padding-right: 40px; } - .btn-arrow.btn-white:hover:after { - background-image: url("../img/icon-arrow-right-black.svg"); } - .btn-arrow.btn-white:active:hover:after, .btn-arrow.btn-white:focus:hover:after { - background-image: url("../img/icon-arrow-right-white.svg"); } - .btn-arrow.btn-white-fill:active:after, .btn-arrow.btn-white-fill:focus:after { - background-image: url("../img/icon-arrow-right-black.svg"); } - .btn-arrow.btn-purple-fill:active:hover:after, .btn-arrow.btn-purple-fill:focus:hover:after { - background-image: url("../img/icon-arrow-right-white.svg"); } - .btn-arrow.btn-fill:after { - background-image: url("../img/icon-arrow-right-white.svg"); } - .btn-arrow.btn-fill:active:hover:after, .btn-arrow.btn-fill:focus:hover:after, .btn-arrow.btn-fill:focus:after, .btn-arrow.btn-fill:active:after { - background-image: url("../img/icon-arrow-right-black.svg"); } - .btn-arrow:after { - content: ''; - width: 6px; - height: 13px; - background-image: url("../img/icon-arrow-right.svg"); - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 15px; - right: 15px; - transition: all .3s ease; } - .btn-arrow:hover:after { - transform: translateX(3px); - background-image: url("../img/icon-arrow-right-white-hover.svg"); } - .btn-arrow:active:hover:after, .btn-arrow:focus:hover:after { - background-image: url("../img/icon-arrow-right.svg"); } - -.btn-arrow-white:after { - background-image: url("../img/icon-arrow-right-white.svg"); } - -.btn-big { - display: inline-flex; - align-items: center; - padding: 16px 34px; - justify-content: center; } - -.p-t-160 { - padding-top: 160px; } - -.p-b-160 { - padding-bottom: 160px; } - -.m-r-30 { - margin-right: 30px; } - -.m-b-25 { - margin-bottom: 25px; } - -.m-b-100 { - margin-bottom: 100px; } - -.m-t-90 { - margin-top: 90px; } - -.m-t-50 { - margin-top: 50px; } - -.link-arrow { - font-size: 16px; - padding-right: 20px; - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - display: inline-block; - position: relative; } - .link-arrow:after { - content: ''; - width: 6px; - height: 13px; - background-image: url("../img/icon-arrow-right-purple.svg"); - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0; - transition: all .3s ease; } - .link-arrow:hover:after { - transform: translateY(-50%) translateX(3px); } - -.link-arrow-white { - font-size: 15px; - color: #ffffff; } - .link-arrow-white:after { - background-image: url("../img/icon-arrow-right-white.svg"); } - -.link-arrow-black { - font-size: 15px; - color: #000000; } - .link-arrow-black:after { - background-image: url("../img/icon-arrow-right-grey.svg"); } - -.announcement { - color: #3C4049; - font-weight: 500; - font-family: "IBM Plex Mono", monospace; - font-style: normal; - line-height: 17px; - font-size: 13px; - position: relative; - padding-right: 20px; - margin-top: 80px; - display: inline-flex; - align-items: center; - opacity: 1; - transition: all .3s ease; } - .announcement.inactive { - opacity: 0; } - .announcement:after { - content: ''; - width: 6px; - height: 13px; - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0; - transition: all .3s ease; - background-image: url(../img/icon-arrow-right-grey.svg); } - .announcement:hover:after { - transform: translateY(-50%) translateX(3px); } - .announcement span { - background: #090909; - border-radius: 3px; - font-weight: 700; - font-family: "Manrope", sans-serif; - font-size: 10px; - text-align: center; - letter-spacing: 0.416667px; - color: #ffffff; - text-transform: uppercase; - padding: 1px 5px; - margin-right: 15px; } - .announcement b { - font-weight: 400; } - -.inline-links { - margin: 0; - padding: 0; - display: flex; } - .inline-links li { - list-style-type: none; - margin-right: 50px; - display: flex; - align-items: center; - flex-wrap: wrap; } - .inline-links li a { - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - line-height: 19px; - font-size: 15px; - letter-spacing: -0.2px; - display: flex; - align-items: center; } - .inline-links li a img, .inline-links li a svg { - margin-right: 14px; } - .inline-links li:last-child { - margin-right: 0; } - -.col-black, -.col-dark-grey, -.col-grey { - position: relative; } - .col-black:before, - .col-dark-grey:before, - .col-grey:before { - content: ''; - background-color: #090909; - position: absolute; - top: 0; - right: 0; - width: 100vw; - height: 100%; - z-index: -1; } - .col-black:last-child:before, - .col-dark-grey:last-child:before, - .col-grey:last-child:before { - right: auto; - left: 0; } - -.col-grey:before { - background-color: #EAECEF; } - -.col-dark-grey { - background-color: #222325; } - -.col-black { - color: #ffffff; } - .col-black h1, .col-black h2, .col-black h3, .col-black h4, .col-black h5, .col-black h6 { - color: #ffffff; } - .col-black .teaser-2 { - color: rgba(255, 255, 255, 0.6); } - .col-black .p-large { - color: rgba(255, 255, 255, 0.8); } - -.col-offset-top { - margin-top: -40px; - z-index: 2; } - -.col-offset-bottom { - margin-bottom: -40px; - z-index: 2; } - -.main-container { - overflow: hidden; } - -header { - padding: 30px 25px; - display: flex; - justify-content: space-between; - position: relative; - font-family: "Manrope", sans-serif; - position: relative; - z-index: 990; } - header nav { - margin-top: -30px; - margin-bottom: -30px; - display: flex; - align-items: center; } - header nav ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - height: 100%; - align-items: center; } - header nav ul li { - height: 100%; - display: flex; } - header nav ul li.active a { - color: #4360DF; } - header nav ul li.has-submenu a { - position: relative; } - header nav ul li.has-submenu a:before { - content: ''; - width: calc(100% + 50px); - height: 100%; - position: absolute; - left: 0; - top: 0; - transform: translateX(-25px); - display: none; } - header nav ul li.has-submenu:hover a:before { - display: block; } - header nav ul li.has-submenu:hover .submenu { - opacity: 1; - visibility: visible; - pointer-events: all; } - header nav ul li.has-submenu:hover .submenu a:before { - display: none; } - header nav ul li.has-submenu .submenu { - background: #FFFFFF; - position: absolute; - top: 100%; - left: 0; - width: 100%; - z-index: 2; - padding: 40px 0; - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: all .3s ease; } - header nav ul li.has-submenu .submenu::before { - content: ''; - width: 100%; - height: 30px; - box-shadow: 0px 2px 14px rgba(158, 158, 158, 0.3); - bottom: 0; - left: 0; - position: absolute; - z-index: -2; } - header nav ul li.has-submenu .submenu::after { - content: ''; - width: 100%; - height: 100%; - background: #fff; - bottom: 0; - left: 0; - position: absolute; - z-index: -1; - border-top: 1px solid #ebebeb; } - header nav ul li.has-submenu .submenu h4 { - font-size: 24px; - font-weight: 600; - margin-bottom: 15px; } - header nav ul li.has-submenu .submenu p { - margin-bottom: 10px; } - header nav ul li.has-submenu .submenu ul { - display: flex; - flex-wrap: wrap; - height: auto; } - header nav ul li.has-submenu .submenu ul li { - height: auto; - width: 50%; } - header nav ul li.has-submenu .submenu ul li a { - padding: 10px 20px 10px 0; - color: #3C4049; - font-family: "Manrope", sans-serif; - font-weight: 600; } - header nav ul li.has-submenu .submenu ul li a:before { - display: none; } - header nav ul li.has-submenu .submenu ul li a:after { - background-image: url(../img/icon-arrow-right.svg); } - header nav ul li.has-submenu .submenu ul li a.external:after { - content: ''; - width: 11px; - height: 11px; - background-image: url("../img/icon-external.svg"); } - header nav ul li.has-submenu .submenu .social-links { - flex-wrap: nowrap; } - header nav ul li.has-submenu .submenu .social-links li { - margin-right: 10px; - width: auto; } - header nav ul li.has-submenu .submenu .social-links li a:hover svg path { - opacity: 1; } - header nav ul li a { - padding: 10px 30px; - font-size: 16px; - color: #3C4049; - font-weight: 600; - display: flex; - align-items: center; } - header nav ul li a.link-arrow { - font-family: "Manrope", sans-serif; - font-weight: 700; } - header nav ul li a .arrow { - width: 9px; - height: 5px; - background-image: url("../img/icon-arrow-down.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - display: inline-block; - margin-left: 10px; - transition: all .3s ease; } - header nav ul li:hover a { - color: #4360DF; } - header nav ul li:hover a .arrow { - transform: rotate(180deg); } - header .btn { - margin-left: 30px; - padding-right: 16px; } - header .btn:after { - display: none; } - header .mobile-nav-trigger { - padding: 0 15px; - display: none; - align-items: center; - justify-content: center; } - header .mobile-nav { - background: #ffffff; - box-shadow: 0px 2px 14px rgba(9, 9, 9, 0.25); - border-radius: 4px; - position: fixed; - z-index: 9; - left: 10px; - top: 10px; - width: calc(100% - 20px); - padding: 15px 20px 20px 20px; - flex-direction: column; - opacity: 0; - transform: translate3d(0, 15px, 0) scale(0.96); - visibility: hidden; - transition: all .3s ease; - pointer-events: none; } - header .mobile-nav nav { - margin: 15px 0 0 0; } - header .mobile-nav nav ul { - flex-direction: column; - width: 100%; } - header .mobile-nav nav ul li { - width: 100%; } - header .mobile-nav nav ul li a { - font-size: 14px; - padding: 8px 0; - display: block; - width: 100%; - border-bottom: 1px solid #EBEBEB; } - header .mobile-nav nav ul li a .arrow { - display: none; } - header .mobile-nav nav ul li .submenu { - display: none; } - header .mobile-nav .btns { - padding: 30px 0 0 0; } - header .mobile-nav .btns a { - display: none; } - header .mobile-nav .btns .btn { - display: flex; - margin: 0; } - header .mobile-nav .mobile-nav-header { - display: flex; - align-items: center; - justify-content: space-between; } - header .mobile-nav .mobile-nav-header .mobile-nav-trigger-close { - display: flex; - padding: 17px; - margin: -17px; } - header .backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(180deg, rgba(9, 9, 9, 0.4) 0%, rgba(9, 9, 9, 0.1) 100%); - visibility: hidden; - transition: all .3s ease; - opacity: 0; - pointer-events: none; } - -footer { - background: #000000; - color: #ffffff; - padding: 0 25px; } - footer a { - color: #ffffff; } - footer a svg g { - transition: all .3s ease; } - footer a:hover svg g { - opacity: 1; } - footer h5 { - margin: 0; - color: #ffffff; - font-weight: 500; - line-height: 17px; - font-size: 13px; - letter-spacing: 1.08333px; - text-transform: uppercase; - font-family: "IBM Plex Mono", monospace; } - footer h5 a { - color: rgba(255, 255, 255, 0.5); - pointer-events: none; } - footer ul { - list-style-type: none; - margin: 0; - padding: 0; } - footer .get-started { - padding: 90px 0; } - footer .get-started h3 { - margin: 0; - color: #ffffff; - font-weight: 400; } - footer .get-started .inline { - align-items: flex-start; - justify-content: flex-end; - height: 100%; - display: flex; } - footer .get-started .inline .btn { - margin-left: 30px; - padding-right: 91px; } - footer .navigation h5 { - border-top: 1px solid rgba(255, 255, 255, 0.2); - padding-top: 30px; - margin-bottom: 10px; } - footer .navigation ul li a { - color: rgba(255, 255, 255, 0.8); - line-height: 34px; - font-size: 14px; - font-weight: 400; } - footer .navigation ul li a:hover { - color: #ffffff; } - footer .connect h5 { - margin: 80px 0 25px; } - footer .connect ul { - display: flex; } - footer .connect ul li { - width: 26px; - height: 26px; - margin-right: 18px; } - footer .copyright { - padding: 100px 0; } - footer .copyright .inline a { - font-size: 13px; - color: rgba(255, 255, 255, 0.6); - margin-right: 40px; - font-family: "Manrope", sans-serif; - font-weight: 500; } - footer .copyright .inline a:hover { - color: #ffffff; } - footer .copyright p { - font-size: 12px; - color: rgba(255, 255, 255, 0.3); - margin: 10px 0 0 0; - line-height: 17px; - font-family: "Manrope", sans-serif; - font-weight: 500; } - -/*-----HOME-----*/ -.home-intro .inner { - padding: 30px 0; } - -.home-intro img { - margin: -2px 0 0 -110px; } - -.home-decentralized .inner { - padding: 100px 0; } - .home-decentralized .inner .teaser-2 { - margin-bottom: 20px; } - .home-decentralized .inner img { - margin-bottom: 70px; } - -.home-private .inner { - padding: 120px 0 90px 90px; } - .home-private .inner .teaser-2 { - margin-bottom: 20px; } - .home-private .inner img { - margin-top: 60px; } - -.home-wallet .inner { - padding-top: 130px; } - .home-wallet .inner:after { - content: ''; - width: 100%; - height: 160px; - bottom: 0; - left: 0; - background: linear-gradient(180deg, rgba(9, 9, 9, 0.0001) 0%, rgba(9, 9, 9, 0.5) 100%); - position: absolute; } - .home-wallet .inner .teaser-2 { - margin-bottom: 20px; } - .home-wallet .inner img { - margin-top: 100px; } - -.home-browser .inner { - padding: 90px 0 90px 90px; } - .home-browser .inner .teaser-2 { - margin-bottom: 20px; } - .home-browser .inner img { - margin-bottom: 70px; - margin-left: -5px; } - -.home-security .img-holder { - margin: 40px 0 30px; } - -/*------FEATURES-----*/ -.features-chat .inner { - padding: 135px 0 200px 0; } - .features-chat .inner p { - max-width: 540px; - color: rgba(255, 255, 255, 0.8); } - -.features-chat .img-holder img { - margin-top: -110px; - max-width: 100%; } - -.features-wallet .inner { - padding-right: 30px; - margin-bottom: 100px; } - .features-wallet .inner p { - color: rgba(255, 255, 255, 0.8); } - -.features-wallet img { - max-width: 100%; } - -.features-browser { - background-color: #EAECEF; } - .features-browser h2 { - font-weight: 500; } - .features-browser .inner { - padding-right: 30px; - margin-bottom: 100px; } - .features-browser img { - max-width: 100%; } - -.features-desktop { - background: linear-gradient(166.71deg, #FFFFFF 12.37%, #EBECF0 68.96%); } - .features-desktop .inner { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - height: 100%; } - .features-desktop .img-holder { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; } - .features-desktop .announcement { - font-family: "Manrope", sans-serif; - margin-top: 40px; - max-width: 300px; - display: block; - font-size: 12px; - padding: 0; - color: rgba(60, 64, 73, 0.6); } - .features-desktop .announcement:after { - display: none; } - .features-desktop .announcement a { - color: rgba(60, 64, 73, 0.9); } - -.get-status { - background-color: #4360DF; - padding: 50px; } - .get-status h3 { - color: #ffffff; } - .get-status p { - color: rgba(255, 255, 255, 0.6); } - .get-status .btn-purple-fill { - border: 1px solid #fff; } - -/*------SECURITY-----*/ -.security-inner { - padding-top: 130px; } - .security-inner h2 { - font-weight: 500; } - .security-inner .security-content h3 { - margin-top: 60px; } - .security-inner .security-content h3:first-child { - margin-top: 0; } - .security-inner .col-lg-4 { - padding-right: 40px; } - .security-inner .p-large::last-child { - margin-bottom: 0; } - -/*-------ABOUT-PAGE------*/ -.about-mission .inner { - text-align: center; } - .about-mission .inner .inline-links { - justify-content: center; } - .about-mission .inner .inline-links li { - margin: 0 25px; - width: auto; } - .about-mission .inner .inline-links li a { - font-family: "Manrope", sans-serif; - font-weight: 700; - font-size: 16px; } - .about-mission .inner .teaser-1 { - max-width: 780px; - margin: 100px auto 0; } - .about-mission .inner .teaser-1 span { - font-family: "Manrope", sans-serif; - line-height: 22px; - color: #000000; } - -.about-gallery img { - max-width: 100%; } - -.about-principles .teaser-2 { - max-width: 650px; - margin-bottom: 120px; } - -.about-principles .roman-list h4 { - padding: 0 60px; - position: relative; } - .about-principles .roman-list h4:before { - content: attr(data-roman); - color: rgba(60, 64, 73, 0.3); - position: absolute; - top: 0; - left: 0; - font-weight: 500; } - -.about-principles .roman-list p { - padding: 0 60px; } - -.about-chat { - background-color: #EAECEF; } - .about-chat .link-arrow-black { - line-height: 21px; - font-family: "Manrope", sans-serif; - font-weight: 700; - display: flex; - align-items: center; } - .about-chat .link-arrow-black img { - margin-right: 15px; } - .about-chat .inline { - display: flex; - align-items: baseline; - justify-content: space-between; } - .about-chat .inline-links { - margin: 80px 0 0; - flex-wrap: wrap; } - .about-chat .inline-links li { - width: auto; - margin: 0 80px 20px 0; - font-size: 18px; } - .about-chat .inline-links li .img-holder { - width: 50px; - height: 50px; - border-radius: 50%; - background-color: #000000; - display: flex; - align-items: center; - justify-content: center; - margin-right: 20px; } - .about-chat .inline-links li a { - font-size: 18px; - font-family: "Manrope", sans-serif; - font-weight: 400; - color: #000000; } - .about-chat .inline-links li:last-child { - margin-right: 0; } - .about-chat .inner { - background-color: #ffffff; - padding: 25px; - margin-bottom: 30px; - position: relative; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); - transition: all .3s ease; - height: calc(100% - 30px); - display: flex; - flex-direction: column; } - .about-chat .inner:before { - content: ''; - width: 13px; - height: 13px; - background-image: url(../img/icon-external.svg); - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 20px; - right: 20px; - transition: all .3s ease; - opacity: 0; } - .about-chat .inner:hover { - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - transform: translateY(-5px); } - .about-chat .inner:hover:before { - opacity: 1; } - .about-chat .inner .title { - margin-bottom: 0; - line-height: 22px; - font-family: "Manrope", sans-serif; - font-weight: 500; - color: #000000; - display: block; - margin-bottom: 10px; } - .about-chat .inner .title:before { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; } - .about-chat .inner .swarm-meta { - color: #4360DF; - font-size: 13px; - line-height: 17px; - font-weight: 500; } - .about-chat .inner .swarm-meta .number { - font-family: "IBM Plex Mono", monospace; - font-size: 13px; - color: #9299A3; - margin-left: 12px; } - .about-chat .inner .authors { - margin-top: 20px; - display: flex; - margin: 30px 0 0 0; - padding: 0; - list-style-type: none; - flex-wrap: wrap; } - .about-chat .inner .authors li { - margin-right: -7px; - margin-top: -7px; - display: flex; } - .about-chat .inner .authors li a { - position: relative; - z-index: 2; - border-radius: 50%; - border: 2px solid #ffffff; - overflow: hidden; } - -.contributors { - display: flex; - flex-wrap: wrap; - padding: 0; } - .contributors .contributor { - list-style-type: none; - width: 70px; - height: 70px; - position: relative; - margin: 0 0 40px 0; } - .contributors .contributor:nth-child(12n) { - margin-right: 0; } - .contributors .contributor:hover .contributor-info { - visibility: visible; - opacity: 1; } - .contributors .contributor img { - width: 70px; - height: 70px; - border-radius: 50%; } - .contributors .contributor .contributor-info { - width: 190px; - height: 240px; - background: #ffffff; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - border-radius: 2px; - position: absolute; - top: -30px; - left: -45px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - transition: all .3s ease; - opacity: 0; - visibility: hidden; - z-index: 9; } - .contributors .contributor .contributor-info b { - font-weight: 700; - margin: 15px 0 8px; - line-height: 19px; - font-size: 14px; } - .contributors .contributor .contributor-info span { - font-family: "IBM Plex Mono", monospace; - line-height: 15px; - font-size: 12px; - color: #9299A3; - text-align: center; - padding: 0 10px; - height: 15px; } - .contributors .contributor .contributor-info ul { - list-style-type: none; - display: flex; - margin: 25px 0 0 0; - padding: 0; } - .contributors .contributor .contributor-info ul li a { - margin: 0 10px; } - .contributors .contributor .contributor-info ul li a img { - width: 26px; - height: 26px; } - -/*----- APPS-PAGE -----*/ -.apps-content .col-black { - padding-top: 90px; - transform: translateY(40px); } - .apps-content .col-black:before { - background: #222325; } - -.apps-content .p-large { - max-width: 420px; } - -.apps-content .buttons { - padding: 0; - display: flex; - margin-bottom: 130px; - flex-wrap: wrap; } - .apps-content .buttons li { - list-style-type: none; - margin: 0 20px 10px 0; } - .apps-content .buttons li a { - display: flex; } - .apps-content .buttons li a img, .apps-content .buttons li a svg { - margin-right: 15px; } - .apps-content .buttons li:last-child { - margin-right: 0; } - -.apps-content .apps-mobile .inner { - padding-top: 130px; } - -.apps-content .apps-mac-windows-or-linux .inner { - padding-left: 90px; } - .apps-content .apps-mac-windows-or-linux .inner .buttons { - margin-bottom: 45px; - flex-wrap: wrap; } - -.apps-content .apps-mac-windows-or-linux .announcement { - margin: 0 0 95px; - color: rgba(255, 255, 255, 0.5); - font-style: italic; - line-height: 20px; - font-size: 14px; - font-weight: 400; - font-family: "IBM Plex Sans", sans-serif; } - -.apps-content .apps-mac-windows-or-linux .img-holder { - margin-top: auto; - display: flex; - align-items: flex-start; - height: 352px; - overflow: hidden; } - .apps-content .apps-mac-windows-or-linux .img-holder img { - margin-left: -151px; } - -.docs-content { - margin-top: 80px; } - .docs-content .section-title { - font-weight: 500; } - .docs-content p { - margin: 15px 0 70px 0; - color: #3C4049; } - .docs-content ul { - padding: 0; } - .docs-content ul li { - list-style-type: none; } - .docs-content .categories .col-xl-4 { - margin-bottom: 20px; } - .docs-content .categories .inner { - font-family: "Manrope", sans-serif; } - .docs-content .categories .inner a { - font-weight: 600; } - .docs-content .pinned-repos .col-xl-4 { - margin-bottom: 20px; } - .docs-content .pinned-repos a { - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - color: #000000; - font-size: 15px; } - .docs-content .inner { - background: #ffffff; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); - padding: 25px; - position: relative; - transition: all .3s ease; - height: 100%; } - .docs-content .inner:hover { - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - transform: translateY(-5px); } - .docs-content .inner a { - display: block; - font-size: 15px; } - .docs-content .inner a:before { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; } - .docs-content .inner span { - color: #63666D; - font-size: 14px; - line-height: 22px; - font-family: "Manrope", sans-serif; - font-weight: 500; - display: block; - margin-top: 10px; } - .docs-content .repositories { - margin-top: 40px; } - .docs-content .repositories a { - color: #090909; - font-size: 15px; - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - line-height: 19px; } - .docs-content .repositories a img { - margin-right: 10px; } - .docs-content .support li { - margin-bottom: 15px; } - .docs-content .support li a { - color: #090909; - font-size: 15px; - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - line-height: 19px; } - .docs-content .support li a img { - margin-right: 10px; } - .docs-content .support li:last-child { - margin-bottom: 0; } - .docs-content .recently-updated { - margin: 50px 0 100px 0; } - .docs-content .recently-updated li { - margin-bottom: 25px; } - .docs-content .recently-updated li a { - font-family: "Manrope", sans-serif; - font-weight: 600; - font-size: 18px; - line-height: 25px; } - .docs-content .recently-updated li:last-child { - margin-bottom: 0; } - -.docs-content-intro { - background: #EAECEF; - margin-top: 0; - padding: 60px 0 40px; } - .docs-content-intro h1 { - line-height: 44px; - font-size: 38px; - margin: 0 0 10px; } - .docs-content-intro p { - margin: 0; } - .docs-content-intro .categories { - margin-top: 30px; } - -.stripe { - background: #000000; - display: flex; - align-items: center; - padding: 0 40px; } - .stripe b { - color: #ffffff; - font-weight: 400; - font-size: 18px; } - .stripe #search-form { - margin-left: auto; - position: relative; - height: 60px; - z-index: 9; } - .stripe #search-form #search-input { - border: none; - background: transparent; - color: #ffffff; - font-size: 14px; - line-height: 19px; - padding: 20px 0 20px 40px; - outline: none; - background-image: url("../img/search.svg"); - background-position: center left; - background-repeat: no-repeat; - width: 200px; - height: 100%; } - .stripe #search-form #search-input::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.6); } - .stripe #search-form #search-input:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.6); } - .stripe #search-form #search-input::placeholder { - color: rgba(255, 255, 255, 0.6); } - .stripe #search-form.inactive #search-results { - display: none; } - .stripe #search-form #search-results { - position: absolute; - top: calc(100% + 1px); - right: 0; - background: #ffffff; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); - width: 320px; - border-radius: 4px; - max-height: 70vh; - overflow: auto; } - .stripe #search-form #search-results a { - color: #000000; - display: block; - line-height: 18px; - font-size: 14px; - padding: 10px; - border-top: 1px solid #EBEBEB; - font-weight: 500; } - .stripe #search-form #search-results a:hover { - color: #4360DF; } - .stripe #search-form #search-results a:first-child { - border: none; } - -.sidebar { - margin: 0 0 30px; } - .sidebar .mobile-sidebar-header { - display: none; } - .sidebar .sidebar-mobile-trigger { - display: none; } - .sidebar .sidebar-menu { - list-style-type: none; - margin: 0; - padding: 0; } - .sidebar .sidebar-menu li { - margin-bottom: 20px; } - .sidebar .sidebar-menu li.active a { - color: #4360DF; } - .sidebar .sidebar-menu li.active .sidebar-submenu { - display: block; } - .sidebar .sidebar-menu li a { - color: #000000; - font-weight: 500; } - .sidebar .sidebar-menu li a img { - margin-left: 10px; } - .sidebar .sidebar-menu li .sidebar-submenu { - list-style-type: none; - margin-top: 20px; - padding-left: 20px; - display: none; } - .sidebar .sidebar-menu li .sidebar-submenu li { - margin-bottom: 10px; } - .sidebar .sidebar-menu li .sidebar-submenu li.active a { - color: #4360DF; - font-weight: 500; } - .sidebar .sidebar-menu li .sidebar-submenu li a { - font-size: 15px; - font-weight: 400; - color: #000000; } - .sidebar .sidebar-menu li .sidebar-submenu li a img { - margin-left: 15px; } - -.single-docs-content { - margin: 100px 0; - padding: 0 25px; } - .single-docs-content .page-title { - margin-top: 0; - line-height: 44px; - font-size: 38px; } - .single-docs-content .editor-content { - position: relative; } - .single-docs-content .editor-content figure { - margin: 30px 0; } - .single-docs-content .editor-content h1, .single-docs-content .editor-content h2, .single-docs-content .editor-content h3, .single-docs-content .editor-content h4, .single-docs-content .editor-content h5, .single-docs-content .editor-content h6 { - margin-bottom: 20px; - margin-top: 60px; } - .single-docs-content .editor-content h1 { - line-height: 44px; - font-size: 38px; } - .single-docs-content .editor-content h2 { - line-height: 31px; - font-size: 31px; } - .single-docs-content .editor-content h3 { - line-height: 38px; - font-size: 25px; } - .single-docs-content .editor-content h4 { - line-height: 28px; - font-size: 18px; } - .single-docs-content .editor-content p { - line-height: 24px; - font-size: 16px; - color: #090909; - margin-bottom: 30px; } - .single-docs-content .editor-content h1:first-of-type { - margin-top: 0; } - .single-docs-content .editor-content ul, .single-docs-content .editor-content ol { - margin-bottom: 30px; - padding-left: 20px; } - .single-docs-content .editor-content ul li, .single-docs-content .editor-content ol li { - line-height: 24px; - font-size: 16px; - color: #090909; - margin-bottom: 10px; } - .single-docs-content .editor-content .share ul { - margin-bottom: 0; - padding: 0; } - .single-docs-content .editor-content a { - color: #4360DF; - font-weight: 500; - text-decoration: underline; } - .single-docs-content .editor-content a:hover { - color: #1C36AA; } - .single-docs-content .editor-content strong, .single-docs-content .editor-content b { - font-weight: 700; } - .single-docs-content .editor-content img { - display: block; - margin: 30px auto; - max-width: 100%; - height: auto; } - -.right-sub-navigation ul { - list-style-type: none; - margin: 40px 0 0 0; - padding: 0 0 30px; } - .right-sub-navigation ul li { - margin-bottom: 20px; } - .right-sub-navigation ul li.li-h2 { - margin-left: 20px; } - .right-sub-navigation ul li.li-h3 { - margin-left: 40px; } - .right-sub-navigation ul li a { - font-size: 14px; - line-height: 18px; - color: rgba(0, 0, 0, 0.6); - display: block; } - .right-sub-navigation ul li a:hover { - color: #000000; } - -.docs-footer { - font-family: "IBM Plex Mono", monospace; font-size: 14px; line-height: 18px; - letter-spacing: -0.186667px; - text-align: center; - color: rgba(99, 102, 109, 0.8); - padding: 30px; - border-top: 1px solid #D7DADE; - margin-top: 90px; } + color: #939BA1; + margin-top: 15px; +} -.page-content p + h1, -.page-content p + h2, -.page-content p + h3, -.page-content p + h4 { - margin-top: 100px; } - -.page-content p + .teaser-1, -.page-content p + .teaser-2 { - margin-top: 100px; } - -.page-content p { - margin-bottom: 30px; } - -.page-content a { - text-decoration: underline; } - -.page-content ul, -.page-content ol { - padding-left: 20px; - margin-bottom: 30px; } - -.single-docs-play #errors { - margin-top: 30px; } - .single-docs-play #errors ul { - list-style-type: none; - margin: 0; - padding: 0; } - -.single-docs-play #side-column canvas { - margin-left: -13px; - margin-top: 15px; } - -.single-docs-play #docs { - background: #EAECEF; - margin-top: 20px; - padding: 20px; - height: 300px; - overflow: auto; } - .single-docs-play #docs h6 { - font-weight: bold; - padding: 20px; - background: #4360DF; - color: #ffffff; - margin: 40px -20px 20px; } - .single-docs-play #docs h6:first-child { - margin-top: -20px; } - .single-docs-play #docs ul { - list-style-type: none; - margin: 0; - padding: 0; } - .single-docs-play #docs ul li pre { - margin: 5px 0 30px 0; - white-space: pre-line; } - -.template-join header .btn-purple { - display: none; } - -.template-join .join-download .teaser-2 { - margin-bottom: 20px; } - -.template-join .join-download .buttons { - padding: 0; - display: flex; - flex-wrap: wrap; } - .template-join .join-download .buttons li { - list-style-type: none; - margin: 0 20px 10px 0; } - -.template-join footer { - background: #EAECEF; } - .template-join footer .get-started, - .template-join footer .navigation, - .template-join footer .connect { - display: none; } - .template-join footer .copyright p { - color: rgba(9, 9, 9, 0.3); } - .template-join footer .copyright .inline a { - color: rgba(9, 9, 9, 0.6); } - .template-join footer .copyright .inline a:hover { - color: #000000; } - -/*======= GET-INVOLVED ======*/ -.get-involved-intro { - position: relative; } - .get-involved-intro:before { - content: ''; - width: 508px; - height: 662px; - position: absolute; - top: -105px; - right: 0; - background-image: url("../img/open-source-illustration.svg"); - background-repeat: no-repeat; - background-position: top right; - background-size: cover; } - .get-involved-intro .open-source-illustration-horz { - display: none; } - .get-involved-intro .open-source-illustration-horz img { - width: 100%; - margin: 30px 0 0 -20px; } - .get-involved-intro h4 { - margin-bottom: 10px; - color: rgba(60, 64, 73, 0.8); } - -.get-involved-box-links .box-link { - background-color: #090909; - padding: 30px 40px; - color: #ffffff; - position: relative; - transition: all .3s ease; - height: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; } - .get-involved-box-links .box-link:hover { - background-color: #4360DF; } - .get-involved-box-links .box-link .title { - font-size: 24px; - line-height: 38px; - margin-bottom: 50px; - display: flex; - min-height: 40px; - align-items: center; } - .get-involved-box-links .box-link .title a { - color: #ffffff; } - .get-involved-box-links .box-link .title a:before { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; } - .get-involved-box-links .box-link .title img { - margin-right: 25px; } - .get-involved-box-links .box-link p { - color: rgba(255, 255, 255, 0.8); } - .get-involved-box-links .box-link p:last-of-type { - margin-bottom: 40px; } - .get-involved-box-links .box-link .link-arrow { - margin-top: auto; } - -.top-contributors .contributors { - margin-top: 70px; - margin-bottom: 40px; } - -/*======= GET-INVOLVED-DEVELOPMENT ======*/ -.quick-nav { - background-color: #090909; - position: absolute; - top: 0; - left: 0; +.qr-code{ + border: 1px solid #EEF2F5; + border-radius: 3px; width: 100%; - z-index: 12; } - .quick-nav.fixed { - position: fixed; } - .quick-nav ul { - padding: 0; - display: flex; - margin-bottom: 0; } - .quick-nav ul li { - margin-bottom: 0; - list-style-type: none; - margin-right: 20px; } - .quick-nav ul li a { - padding: 11px 20px; - color: #ffffff; - font-size: 18px; - font-family: "Manrope", sans-serif; - font-weight: 500; - line-height: 38px; - display: flex; - align-items: center; } - .quick-nav ul li a img { - margin-right: 20px; } - .quick-nav ul li a:hover { - background-color: rgba(99, 102, 109, 0.5); } - .quick-nav ul li a.active { - background-color: #63666D; } - .quick-nav ul li:last-child { - margin-right: 0; } + max-width: 280px; + margin-bottom: 15px; +} -.quick-nav-sub { - background-color: #63666D; - position: absolute; - top: 60px; - left: 0; +.copy{ + display: flex; width: 100%; - z-index: 12; } - .quick-nav-sub.fixed { - position: fixed; } - .quick-nav-sub .col-md-12 { - display: flex; - justify-content: space-between; - align-items: center; } - .quick-nav-sub .col-md-12 ul { - padding: 0; - display: flex; - margin-bottom: 0; } - .quick-nav-sub .col-md-12 ul li { - margin-bottom: 0; - list-style-type: none; - margin-right: 20px; } - .quick-nav-sub .col-md-12 ul li a { - font-size: 14px; - display: flex; - padding: 7px 20px; - color: rgba(255, 255, 255, 0.7); } - .quick-nav-sub .col-md-12 ul li a:hover { - color: #ffffff; } - .quick-nav-sub .col-md-12 a { - font-size: 14px; - color: rgba(255, 255, 255, 0.7); } - .quick-nav-sub .col-md-12 a:hover { - color: #ffffff; } - .quick-nav-sub .col-md-12 a img { - margin-right: 10px; } + max-width: 280px; + margin: 0 auto; + border: 1px solid #EEF2F5; + border-radius: 3px; + padding: 10px 16px; +} -.development-contribute-to-status { - background-color: #EAECEF; } - .development-contribute-to-status .quick-start-guide { - font-size: 20px; - font-family: "Manrope", sans-serif; - font-weight: 500; - line-height: 32px; } +.copy a{ + margin-left: auto; + font-weight: 500; + font-size: 15px; + line-height: 26px; +} -.box-with-icon { - display: flex; - align-items: flex-start; - padding-right: 60px; } - .box-with-icon img { - margin-right: 35px; } - .box-with-icon p { - color: rgba(0, 0, 0, 0.8); } - -.open-issues { - margin-bottom: 70px; } - .open-issues ul { - list-style-type: none; - margin: 90px 0 0; - padding: 0; } - .open-issues ul li { - display: flex; - padding-bottom: 25px; - margin-bottom: 20px; - border-bottom: 1px solid rgba(99, 102, 109, 0.2); } - .open-issues ul li:last-child { - margin: 0; } - .open-issues ul li .number { - font-size: 16px; - line-height: 20px; - color: rgba(99, 102, 109, 0.8); - font-family: "IBM Plex Mono", monospace; - width: 50px; - margin-right: 20px; } - .open-issues ul li .details { - flex: 1; } - .open-issues ul li .details b { - display: block; - font-size: 16px; - line-height: 22px; - font-family: "Manrope", sans-serif; - font-weight: 500; - margin-bottom: 13px; } - .open-issues ul li .details b a { - color: #000000; } - .open-issues ul li .details b a:hover { - color: #4360DF; } - .open-issues ul li .details .tags { - display: flex; } - .open-issues ul li .details .tags .tag { - font-family: "IBM Plex Mono", monospace; - font-weight: 500; - color: #ffffff; - font-size: 13px; - line-height: 17px; - padding: 5px 7px; - background: #222325; - border-radius: 2px; - margin-right: 8px; } - .open-issues ul li .opened, - .open-issues ul li .activity { - display: flex; - align-items: flex-start; - font-size: 13px; - line-height: 19px; - color: rgba(99, 102, 109, 0.7); - min-width: 220px; - justify-content: flex-start; - font-family: "Manrope", sans-serif; - font-weight: 500; } - .open-issues ul li .opened time, - .open-issues ul li .activity time { - color: #3C4049; - margin-left: 5px; } - .open-issues ul li .opened { - margin-top: 15px; } - .open-issues .link-arrow { - display: block; - padding: 11px 0; - text-align: center; - border-bottom: 1px solid rgba(99, 102, 109, 0.2); } - .open-issues .link-arrow:after { - display: none; } - -.development-dapp ul { - padding: 0; } - .development-dapp ul li { - list-style-type: none; - margin-bottom: 20px; } - -.development-dapp .development-build-dapp { - padding: 120px 15px; } - -.development-extend-dapp .inner { - padding: 120px 0 90px 90px; } - -.development-resources .inner ul { - padding: 0; } - .development-resources .inner ul li { - list-style-type: none; - margin-bottom: 40px; } - .development-resources .inner ul li p { - color: rgba(255, 255, 255, 0.8); - margin-bottom: 0; } - .development-resources .inner ul li:last-child { - margin-bottom: 0; } - -.development-resources .developer-resources ul li { - margin-bottom: 20px; } - -.development-get-in-touch .inner { - padding-right: 50px; } - .development-get-in-touch .inner a { - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - font-size: 16px; - line-height: 20px; } - .development-get-in-touch .inner a img { - margin-right: 10px; } - .development-get-in-touch .inner p { - margin-top: 15px; } - -/*====== EDUCATE-PAGE ======*/ -.educate-contribute { - background-color: #EAECEF; } - .educate-contribute .inner ul { - padding: 0; } - .educate-contribute .inner ul li { - list-style-type: none; - margin-bottom: 45px; } - .educate-contribute .inner ul li p { - color: rgba(0, 0, 0, 0.8); - margin: 15px 0 0 0; } - .educate-contribute .inner ul li:last-child { - margin-bottom: 0; } - -.educate-translate .inner { - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; } - -.educate-translate .inner-img img { - max-width: 100%; } - -.educate-translate ul { - padding: 0; - display: flex; - flex-wrap: wrap; } - .educate-translate ul li { - list-style-type: none; - margin-bottom: 20px; - width: 50%; } - -.educator-resources .inner ul { - padding: 0; } - .educator-resources .inner ul li { - list-style-type: none; - margin-bottom: 40px; } - .educator-resources .inner ul li:last-child { - margin-bottom: 0; } - -.educator-resources .educate-join ul li:nth-child(n+3) { - margin-bottom: 20px; } - -/*===== COMMUNITY-GROUPS-PAGE =====*/ -.account-creation { - background-color: #F4F5F7; - padding: 30px 40px; - text-align: center; - position: relative; - display: flex; - flex-direction: column; } - .account-creation img { - margin-bottom: 25px; } - .account-creation a { - font-family: "IBM Plex Mono", monospace; - font-weight: 600; - font-size: 16px; - line-height: 20px; - display: block; } - .account-creation a::before { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; } - .account-creation p { - font-family: "Manrope", sans-serif; - font-weight: 500; - font-size: 14px; - line-height: 21px; - color: #666D76; - margin: 20px 0 30px 0; } - .account-creation .occupation { - font-family: "Manrope", sans-serif; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: rgba(60, 64, 73, 0.8); - padding-right: 20px; } - .account-creation .name { - font-family: "Manrope", sans-serif; - font-weight: 600; - color: #000000; - font-size: 14px; } - .account-creation .meta { - margin-top: auto; } - -.block-account-creation .account-creation { - height: 100%; } - -.block-account-creation .row .col-xl-4 { - margin-bottom: 30px; } - -.community-nav { - background: #ffffff; - box-shadow: 0px 2px 14px rgba(9, 9, 9, 0.25); - border-radius: 4px; - position: fixed; - z-index: 999; - left: 10px; - top: 100px; - width: calc(100% - 20px); - padding: 15px 20px 20px 20px; - flex-direction: column; - opacity: 0; - transform: translate3d(0, 15px, 0) scale(0.96); - visibility: hidden; - transition: all .3s ease; - pointer-events: none; - font-family: "Manrope", sans-serif; } - .community-nav nav ul { - flex-direction: column; - width: 100%; - margin: 0; - padding: 0; - list-style-type: none; } - .community-nav nav ul li { - width: 100%; } - .community-nav nav ul li:last-child a { - border: none; - padding-bottom: 0; } - .community-nav nav ul li a { - font-size: 14px; - padding: 8px 0; - display: block; - width: 100%; - border-bottom: 1px solid #EBEBEB; - color: #3C4049; - font-weight: 600; } - .community-nav nav ul li a .arrow { - display: none; } - .community-nav .community-nav-trigger-close { - display: flex; - position: absolute; - top: 0; - right: 0; - margin: 0; - padding: 17px; } - -.backdrop-community-nav { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(180deg, rgba(9, 9, 9, 0.4) 0%, rgba(9, 9, 9, 0.1) 100%); - visibility: hidden; - transition: all .3s ease; - opacity: 0; - pointer-events: none; - z-index: 998; } - -.community-nav-active .community-nav { - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0) scale(1); - pointer-events: all; } - -.community-nav-active .backdrop-community-nav { - visibility: visible; - opacity: 1; - pointer-events: all; } - -.community-nav-trigger { - pointer-events: none; } - -.position-relative { - height: 100px; } - -.template-community .position-relative { - height: 60px; } - -.download-apps ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; } - .download-apps ul li { - list-style-type: none; - margin: 0 20px 10px 0; } - .download-apps ul li img { - display: block; - margin: 20px auto; } - -@media (max-width: 1499px) { - .container { - max-width: 1170px; } - p { - line-height: 24px; - font-size: 14px; } - h1, h2, h3, h4, h5, h6 { - margin-bottom: 20px; } - h1 { - line-height: 54px; - font-size: 48px; } - h2 { - line-height: 46px; - font-size: 36px; } - h3 { - line-height: 42px; - font-size: 32px; } - h4 { - line-height: 32px; - font-size: 22px; } - .teaser-1 { - line-height: 26px; - font-size: 16px; - margin-bottom: 30px; } - .teaser-2 { - line-height: 22px; - font-size: 14px; - margin-bottom: 30px; } - .p-large { - line-height: 24px; - font-size: 14px; } - .btn { - line-height: 18px; - font-size: 14px; } - .btn:after { - top: 14px; } - .link-arrow { - font-size: 15px; - line-height: 19px; } - .p-b-160 { - padding-bottom: 100px; } - .p-t-160 { - padding-top: 100px; } - .m-b-100 { - margin-bottom: 70px; } - .m-t-90 { - margin-top: 50px; } - .inline-links li a { - font-size: 14px; } - .link-arrow { - font-size: 14px; } - header nav ul li a { - padding: 10px 20px; - font-size: 15px; } - .home-intro img { - width: 100%; - margin-left: -80px; } - .home-private .inner { - padding: 40px 0 50px 40px; } - .home-private .inner .teaser-2 { - margin: 0 0 10px; } - .home-private .inner img { - width: 80%; } - .home-decentralized .inner { - padding: 50px 0; } - .home-decentralized .inner img { - margin-bottom: 50px; - width: 80%; } - .home-wallet .inner { - padding-top: 50px; } - .home-wallet .inner img { - width: 80%; - margin-top: 50px; } - .home-wallet .inner .teaser-2 { - margin-bottom: 10px; } - .home-browser .inner { - padding: 50px 20px 50px 40px; } - .home-browser .inner img { - margin-bottom: 50px; - width: 80%; } - .home-browser .inner .teaser-2 { - margin-bottom: 10px; } - .features-chat { - margin-top: 50px; } - .features-chat .inner { - padding-top: 100px; - padding-bottom: 100px; } - .features-chat .img-holder img { - max-width: 80%; - margin: -100px auto 0 auto; - display: block; } - .features-wallet img { - max-width: 80%; } - .features-wallet .inner { - margin-bottom: 30px; } - .features-desktop img { - max-width: 150%; } - .features-browser img { - max-width: 80%; } - .features-browser .inner { - margin-bottom: 30px; } - .security-inner { - padding-top: 100px; } - .about-chat .inline-links li { - font-size: 15px; } - .about-principles .roman-list h4 { - padding: 0 45px; } - .about-principles .roman-list p { - padding: 0 45px; } - .about-mission .inner .teaser-1 { - margin-top: 50px; } - .contributors .contributor .contributor-info { - top: -40px; - left: -55px; } - .contributors .contributor img { - width: 50px; - height: 50px; } - .apps-content .apps-mobile .inner { - padding-top: 90px; } - .apps-content .apps-mobile .inner .row { - height: 100%; } - .apps-content .apps-mobile .inner .row .col-md-10 { - display: flex; - flex-direction: column; } - .apps-content .apps-mobile img { - max-width: 100%; - margin-top: auto; } - .apps-content .buttons { - margin-bottom: 60px; } - .apps-content .apps-mac-windows-or-linux { - transform: translateY(0); } - .apps-content .apps-mac-windows-or-linux .inner { - padding-left: 40px; } - .apps-content .apps-mac-windows-or-linux .inner .p-large { - max-width: 320px; } - .apps-content .apps-mac-windows-or-linux .inner .buttons { - margin-bottom: 10px; } - .apps-content .apps-mac-windows-or-linux .announcement { - margin-bottom: 40px; - font-size: 12px; - line-height: 18px; } - footer .get-started { - padding: 50px 0; } - footer .connect h5 { - margin: 40px 0 25px; } - footer .copyright { - padding: 50px 0; } - .get-involved-intro:before { - width: 360px; - height: 470px; } - .get-involved-box-links .box-link .title { - font-size: 20px; - margin-bottom: 30px; } - .quick-nav ul li a { - font-size: 16px; } - .development-contribute-to-status .quick-start-guide { - line-height: 22px; - font-size: 14px; } - .development-extend-dapp .inner { - padding: 40px 0 50px 40px; } - .development-get-in-touch .inner { - padding-right: 0; } } - -@media screen and (max-width: 1300px) { - header nav ul li a { - padding: 0 25px; } } - -@media screen and (max-width: 1199px) { - h1 { - line-height: 44px; - font-size: 38px; } - h2 { - line-height: 31px; - font-size: 31px; } - h3 { - line-height: 38px; - font-size: 25px; } - h4 { - line-height: 28px; - font-size: 18px; } - .p-large { - margin-bottom: 20px; } - .container { - padding-left: 20px; - padding-right: 20px; } - header { - padding: 15px 5px; } - header .logo img { - height: 30px; } - header nav { - display: none; } - header .btns { - display: none; } - header .mobile-nav-trigger { - display: flex; } - header .mobile-nav nav { - display: flex; } - header .mobile-nav nav ul li.has-submenu:hover a::before { - display: none; } - header .mobile-nav .btns { - display: block; } - header .mobile-nav .btns .btn { - padding-right: 40px; } - header .mobile-nav .btns .btn:after { - display: block; } - .inline-links { - flex-wrap: wrap; } - .inline-links li { - margin: 0 0 20px 0; - width: 100%; } - .inline-links li::last-child { - margin-bottom: 0; } - .nav-active .mobile-nav { - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0) scale(1); - pointer-events: all; } - .nav-active .backdrop { - visibility: visible; - opacity: 1; - pointer-events: all; } - .stripe { - padding: 0 20px; } - .get-involved-box-links { - margin: 0 -20px; } - .get-involved-box-links .col-xl-4 { - margin-bottom: 10px; } - .home-decentralized .inner img, - .home-private .inner img, - .home-browser .inner img, - .home-wallet .inner img { - width: 100%; } - .features-wallet img, - .features-browser img { - max-width: 100%; } - .get-involved-box-links .box-link { - padding: 30px 20px; } - .features-desktop img { - max-width: 100%; } } - -@media screen and (max-width: 991px) { - br { - display: none; } - .editor-content br { - display: block; } - .home-intro img { - width: 200%; - margin-left: -160px; } - .home-browser .inner { - padding-right: 0; } - .features-desktop { - padding-top: 60px; } - .security-inner .col-lg-4 { - padding-right: 40px; - margin-bottom: 30px; } - .security-inner .col-lg-4 h4 br { - display: none; } - .contributors .contributor { - margin: 0; } - footer .get-started h3 { - margin-bottom: 20px; } - footer .get-started .inline { - justify-content: flex-start; } - footer .get-started .inline .btn:first-child { - margin-left: 0; } - .position-relative { - display: none; } - .development-contribute-to-status { - margin: 0; } - .box-with-icon { - padding: 0; } - .apps-content .apps-mac-windows-or-linux .img-holder { - height: 240px; - width: calc(50vw - 55px); } - .open-issues ul { - margin-top: 30px; } - .open-issues ul li { - align-items: flex-start; - flex-wrap: wrap; } - .open-issues ul li .number { - display: none; } - .open-issues ul li .details { - width: 100%; - flex: auto; } - .open-issues ul li .details b { - font-size: 14px; - line-height: 19px; - margin-bottom: 10px; } - .open-issues ul li .details .tags { - display: none; } - .open-issues ul li .opened, - .open-issues ul li .activity { - min-width: 50px; - font-size: 12px; - line-height: 19px; } - .open-issues ul li .opened { - margin-right: 30px; } - .community-nav-trigger { - background: rgba(9, 9, 9, 0.1); - border-radius: 5px; - padding: 8px 55px 8px 10px; - display: inline-block; - background-image: url("../img/arrow-bold.svg"); - background-position: center right 20px; - background-repeat: no-repeat; - pointer-events: all; } - .block-account-creation { - padding-top: 0; } - .block-account-creation .row .col-xl-4 { - margin-bottom: 10px; } - .block-account-creation .account-creation { - margin: 0 -20px; } } - -@media screen and (max-width: 767px) { - .home-intro .announcement { - display: none; } - .container { - padding-right: 20px; - padding-left: 20px; } - .m-b-25 { - margin-bottom: 10px; } - .m-r-30 { - margin-right: 15px; } - .p-t-160 { - padding-top: 50px; } - .p-b-160 { - padding-bottom: 50px; } - .m-b-100 { - margin-bottom: 50px; } - .m-t-90 { - margin-top: 50px; } - .m-t-50 { - margin-top: 0; } - .btn { - text-align: left; - width: 100%; } - .btn-arrow { - padding-right: 30px; } - .col-offset-top { - margin-top: 0; } - .col-black:last-child:before, - .col-dark-grey:last-child:before, - .col-grey:last-child:before { - left: -100vw; - width: 200vw; } - .col-black:before, - .col-dark-grey:before, - .col-grey:before { - right: -100vw; - width: 200vw; } - .home-intro .col-black { - margin-top: 60px; } - .home-intro .col-black img { - width: calc(100% + 40px); - margin: -70px -20px auto; - display: block; } - .home-about .inline-links { - margin-bottom: 40px; } - .home-private .inner { - padding: 0px 0 50px 0px; } - .home-private .inner img { - order: -1; - margin: 20px 0 40px; } - .home-browser { - order: -1; } - .home-browser .inner { - padding: 50px 0; } - .features-intro { - padding-top: 30px; } - .features-intro .inline-links { - display: none; } - .features-wallet .inner { - padding-right: 0; } - .features-chat .inner { - padding: 30px 0 50px 0; } - .features-chat .col-md-6:last-child { - order: -1; } - .features-chat .col-md-6:last-child .img-holder img { - margin-top: -54px; - max-width: calc(100% + 40px); - margin: -54px -20px 0; - display: block; } - .features-browser .inner { - padding-right: 0; } - .features-desktop .inner { - padding-bottom: 15px; } - .features-desktop .announcement { - margin-top: 20px; } - .features-open-source { - padding-bottom: 0; } - .get-status { - padding: 50px 20px; - margin: 30px -20px 0; } - .security-inner { - padding-top: 30px; } - .security-inner .m-b-100 { - margin-bottom: 20px; } - .security-inner h2 br { - display: none; } - .security-inner .security-content h3 { - margin-top: 50px; } - .security-inner .col-lg-4 { - margin-bottom: 20px; - padding-right: 15px; } - .security-inner .container:last-child { - padding-bottom: 0; } - .about-mission { - padding-top: 30px; } - .about-mission .inner { - text-align: left; } - .about-mission .inner .teaser-1 { - display: none; } - .about-mission .inner .inline-links { - display: none; - justify-content: flex-start; } - .about-mission .inner .inline-links li { - margin: 0 0 10px 0; - width: 100%; } - .about-gallery { - margin-top: 20px; } - .about-principles .teaser-2 { - margin-bottom: 0; } - .about-principles .roman-list h4 { - margin-top: 40px; - padding: 0; } - .about-principles .roman-list h4:before { - position: relative; - margin-right: 15px; } - .about-principles .roman-list p { - padding: 0; - margin-bottom: 0; } - .about-chat .inline { - margin-top: 30px; } - .about-chat .inline-links { - margin-top: 50px; } - .about-chat .inline-links li { - font-size: 16px; } - .about-chat .inline-links li .img-holder { - width: 40px; - height: 40px; - margin-right: 10px; } - .about-chat .inline-links li .img-holder img { - max-width: 20px; } - .about-chat .link-arrow-black { - display: none; } - .about-chat .inner { - margin: 0 -10px 10px -10px; } - .apps-content .apps-mobile .inner { - padding-top: 50px; } - .apps-content .apps-mobile .inner .buttons { - margin-bottom: 50px; } - .apps-content .buttons { - width: 100%; - margin-top: 40px; } - .apps-content .buttons li { - width: 100%; - margin: 0 0 10px 0; } - .apps-content .buttons li a { - justify-content: center; } - .apps-content .p-large { - max-width: 100%; } - .apps-content .apps-mac-windows-or-linux { - transform: none; } - .apps-content .apps-mac-windows-or-linux .inner { - padding: 0; } - .apps-content .apps-mac-windows-or-linux .inner .p-large { - max-width: 100%; } - .apps-content .apps-mac-windows-or-linux .inner .buttons { - margin-top: 20px; } - .apps-content .apps-mac-windows-or-linux .img-holder { - width: 100%; - margin: 0; - height: auto; } - .apps-content .apps-mac-windows-or-linux .img-holder img { - margin: 0; - width: 100%; } - footer { - padding: 0; } - footer .get-started .inline .btn { - padding-right: 30px; - width: auto; - flex: 1; - margin-left: 15px; } - footer .navigation h5 { - margin: 0; - padding: 0; } - footer .navigation h5 a { - pointer-events: all; - font-size: 14px; - line-height: 18px; - display: block; - padding: 15px 0; - color: #ffffff; - position: relative; } - footer .navigation h5 a.collapsed { - color: rgba(255, 255, 255, 0.7); } - footer .navigation h5 a.collapsed:after { - transform: rotate(0deg); } - footer .navigation h5 a:after { - content: ''; - width: 6px; - height: 13px; - background-image: url(../img/icon-arrow-right-white.svg); - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 18px; - right: 5px; - transition: all .3s ease; - transform: rotate(90deg); } - footer .navigation ul { - margin: 0 0 15px; } - footer .navigation ul li a { - line-height: 1; - padding: 10px 0; - display: block; } - footer .navigation .collapse:not(.show) { - display: none; } - .docs-content { - margin-top: 30px; } - .docs-content p { - margin-bottom: 30px; } - .single-docs-content { - margin: 30px 0; } - .docs-footer { - margin-top: 30px; } - .sidebar .sidebar-mobile-trigger { - display: flex; } - .sidebar .sidebar-container { - background: #ffffff; - box-shadow: 0px 2px 14px rgba(9, 9, 9, 0.25); - border-radius: 4px; - position: fixed; - z-index: 999; - left: 10px; - top: 10px; - width: calc(100% - 20px); - padding: 15px 20px 20px 20px; - flex-direction: column; - opacity: 0; - transform: translate3d(0, 15px, 0) scale(0.96); - visibility: hidden; - transition: all .3s ease; - pointer-events: none; - overflow: auto; - max-height: calc(100% - 20px); } - .sidebar .sidebar-container .logo img { - height: 30px; } - .sidebar .sidebar-container .mobile-sidebar-header { - display: flex; - align-items: center; - justify-content: space-between; } - .sidebar .sidebar-container ul { - list-style-type: none; - margin: 15px 0 0 0; - padding: 0; - display: flex; - height: 100%; - align-items: center; - flex-direction: column; } - .sidebar .sidebar-container ul li { - height: 100%; - display: flex; - width: 100%; - margin: 0; - flex-direction: column; } - .sidebar .sidebar-container ul li .sidebar-submenu { - margin: 0; } - .sidebar .sidebar-container ul li .sidebar-submenu li { - margin: 0; } - .sidebar .sidebar-container ul li a { - align-items: center; - color: #3C4049; - font-weight: 600; - font-size: 14px; - padding: 8px 0; - display: block; - width: 100%; - border-bottom: 1px solid #EBEBEB; } - .sidebar .backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(180deg, rgba(9, 9, 9, 0.4) 0%, rgba(9, 9, 9, 0.1) 100%); - visibility: hidden; - transition: all .3s ease; - opacity: 0; - pointer-events: none; } - .sidebar-active .sidebar-container { - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0) scale(1); - pointer-events: all; } - .sidebar-active .backdrop { - visibility: visible; - opacity: 1; - pointer-events: all; } - .stripe b { - font-size: 0; } - .stripe b:before { - content: 'Status Docs'; - font-size: 16px; - line-height: 36px; } - .get-involved-intro:before { - display: none; } - .get-involved-intro .open-source-illustration-horz { - display: block; } - .development-contribute-to-status .teaser-2 { - margin: 0; } - .box-with-icon { - flex-direction: column; - margin-top: 50px; } - .box-with-icon img { - margin-bottom: 20px; - margin-right: 15px; - max-width: 30px; } - .box-with-icon .link-arrow { - font-size: 14px; } - .open-issues { - margin-bottom: 20px; } - .development-dapp .development-build-dapp { - padding: 70px 15px 50px; } - .development-extend-dapp .inner { - padding: 70px 0 30px 0; } - .contribute-support { - margin-bottom: 50px; } - .educate-translate .inner-img { - display: none; } - .educate-translate ul { - flex-wrap: wrap; - margin: 0; } - .educate-translate ul li { - width: 100%; } - .educate-translate ul li:last-child { - margin: 0; } - .educate-contribute .how-to-get-started { - margin-bottom: 50px; } - .educator-resources .inner ul li:last-child { - margin-bottom: 40px; } - .development-get-in-touch .inner p { - margin-bottom: 30px; } - .block-account-creation { - padding-top: 0; } - .open-issues .col-md-6:first-child { - margin-bottom: 50px; } } +.copy .inner{ + font-size: 15px; + width: 180px; + overflow: hidden; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index 6ad5736..dc508ff 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -35,4 +35,14 @@ appStoreLink.attr('href', webURL()); } }); + + var clipboard = new ClipboardJS('.copy a'); + + clipboard.on('success', function(e) { + $('.copy a').text('Copied'); + setTimeout(function() { + $('.copy a').text('Copy'); + }, 5000); + }); + }()); diff --git a/views/index.ejs b/views/index.ejs index 8950ccf..ba5a9af 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -14,16 +14,17 @@ +
- +
- + Get Status
- +
- + - + @@ -147,16 +158,26 @@
-
+
-

<%= title %>

<%if (locals.qrCodeDataUri) { %> <% } %> - Open in Status +
+
+
+
<%= title %>
+ Copy +
+ Open in Status +
+ Chat and transact in Status. +
+
+
@@ -198,6 +219,7 @@
  • About
  • Jobs
  • Blog
    • +
  • White Paper
    • @@ -206,7 +228,7 @@ @@ -235,7 +257,7 @@
    • - + @@ -243,9 +265,23 @@
      • +
    • + + + + + + + + + +
    • - + @@ -255,7 +291,7 @@
    • - + @@ -265,7 +301,7 @@
    • - + @@ -275,7 +311,7 @@
    • - + @@ -285,7 +321,7 @@
    • - + @@ -295,7 +331,7 @@
    • - + @@ -314,19 +350,21 @@
      Privacy Policy + Site Analytics

      Status Research & Development GmbH, Baarerstrasse 10, Zug, Switzerland

      - + + From eb72daab81182ed134dfd32b551cff2b2e159eec Mon Sep 17 00:00:00 2001 From: Nistor Cristian Date: Wed, 15 Jan 2020 00:41:14 +0200 Subject: [PATCH 2/3] Added title back. Signed-off-by: Nistor Cristian --- views/index.ejs | 1 + 1 file changed, 1 insertion(+) diff --git a/views/index.ejs b/views/index.ejs index ba5a9af..35692b3 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -163,6 +163,7 @@
      +

      <%= title %>

      <%if (locals.qrCodeDataUri) { %> <% } %> From c5ad9097684396dc995d7419b9c293bd16054458 Mon Sep 17 00:00:00 2001 From: Nistor Cristian Date: Mon, 3 Feb 2020 22:03:43 +0200 Subject: [PATCH 3/3] Fix styles on desktop Signed-off-by: Nistor Cristian --- public/css/main.css | 22 +++++++++++++++++++++- views/index.ejs | 4 ++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 5e2643b..252e180 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -11,14 +11,26 @@ line-height: 18px; color: #939BA1; margin-top: 15px; + display: flex; + align-items: center; + justify-content: center; } -.qr-code{ +.info span{ + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + max-width: 70px; + margin: 0 2px 0 4px; +} + +img.qr-code{ border: 1px solid #EEF2F5; border-radius: 3px; width: 100%; max-width: 280px; margin-bottom: 15px; + height: 280px; } .copy{ @@ -43,4 +55,12 @@ width: 180px; overflow: hidden; text-overflow: ellipsis; +} + +.break-word{ + overflow: hidden; + text-overflow: ellipsis; + max-width: 280px; + margin: 0 auto 20px; + font-size: 24px; } \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 35692b3..9acbf27 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -173,9 +173,9 @@
      <%= title %>
      Copy
      - Open in Status + Download Status
      - Chat and transact in Status. + Chat and transact with <%= title %> in Status.