diff --git a/_includes/header.html b/_includes/header.html index 366e9dd..b13f2d5 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,15 +7,132 @@ @@ -29,18 +146,95 @@ diff --git a/css/style.css b/css/style.css index 92b58d8..bf99997 100644 --- a/css/style.css +++ b/css/style.css @@ -367,8 +367,8 @@ h1, h2, h3 { display: inline-block; position: relative; padding: 1rem 0; - margin-left: 1rem; - margin-right: 1rem; + margin-left: 1.8rem; + margin-right: 1.8rem; } .main-menu li.nav-item a { @@ -432,7 +432,7 @@ h1, h2, h3 { background: #F7F7F7; visibility: hidden; opacity: 0; - min-width: 15rem; + width: 30rem; position: absolute; transition: all 0.5s ease; margin-top: 1rem; @@ -445,29 +445,78 @@ h1, h2, h3 { -moz-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); border-radius: 8px; + padding: 1rem; +} + +.main-menu li.nav-item ul.dropdown .row { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.main-menu li.nav-item ul.dropdown .row:last-child { + margin-bottom: 0; +} + +.main-menu li.nav-item ul.dropdown .col { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + padding: 0; } .main-menu li.nav-item ul.dropdown li { width: 100%; } +.main-menu li.nav-item ul.dropdown .systemlink a { + padding: 1rem 1rem 1rem 3rem; + position: relative; + border-radius: 8px; +} + +.main-menu li.nav-item ul.dropdown .systemlink a svg, .main-menu li.nav-item ul.dropdown .systemlink a img { + width: 1.5rem; + position: absolute; + top: 1rem; + left: 1rem; +} + +.main-menu li.nav-item ul.dropdown .systemlink a .systext p.system-title { + font-size: 1rem; + border-bottom: 2px solid rgba(0,0,0,0); + display: inline-block; + line-height: 1.3; +} + +.main-menu li.nav-item ul.dropdown .systemlink .systext p.system-about { + font-weight: 400; + font-size: 0.75rem; + margin-top: 0.25rem; + line-height: 1.5; +} + +.main-menu li.nav-item ul.dropdown .droptitle { + font-weight: 700; + font-size: 0.9rem; + margin-bottom: 0.5rem; + margin-top:0.5rem; + color: #232323; +} + .main-menu li.nav-item ul.dropdown li a { - display: block; + display: flex; padding: 1rem; font-size: 1rem; -webkit-transition: background-color ease-out .3s; -moz-transition: background-color ease-out .3s; -o-transition: background-color ease-out .3s; transition: background-color ease-out .3s; - vertical-align: middle; -} - -.main-menu li.nav-item ul.dropdown li:nth-of-type(1) a { - border-radius: 8px 8px 0 0; -} - -.main-menu li.nav-item ul.dropdown li:nth-of-type(3) a { - border-radius: 0 0 8px 8px; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } .main-menu li.nav-item ul.dropdown li a:hover, .main-menu li.nav-item ul.dropdown li a:active, .main-menu li.nav-item ul.dropdown li a:focus { @@ -480,6 +529,12 @@ h1, h2, h3 { display: block; } +.main-menu li.nav-item ul.dropdown .systemlink a:hover .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:active .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:focus .systext p.system-title { + border-bottom: 2px solid #232323; + color: #232323; + transition: border-bottom-color .1s ease-in-out; +} + .main-menu li.nav-item ul.dropdown li a span { vertical-align: middle; } @@ -628,7 +683,6 @@ header .container { } */ .slide-nav { - text-align: center; position: absolute; top: 99%; width: 100%; @@ -643,6 +697,7 @@ header .container { opacity: -1; z-index: 100; box-shadow: 0 4px 5px rgba(0,0,0,0.25); + padding: 1rem 0; } .slide-nav::-webkit-scrollbar { @@ -670,16 +725,20 @@ header .container { } #list1:checked ~ .dropdown-content, #list2:checked ~ .dropdown-content, #list3:checked ~ .dropdown-content, #list4:checked ~ .dropdown-content { - display: block; + display: flex; position: inherit; opacity: 1; visibility: visible; box-shadow: none; } + + .slide-nav .mob-item { + padding: 0 1.5rem; + } .slide-nav .mob-item > a, .slide-nav .mob-item > label { font-weight: 700; - font-size: 1.2rem; + font-size: 1rem; display: block; padding: 1rem 0; text-decoration: none; @@ -687,7 +746,7 @@ header .container { -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; - text-align: center; + border-top: 1px solid #CFCFCF; } .slide-nav .mob-item label { @@ -700,7 +759,7 @@ header .container { display: inline-block; position: absolute; top: 1.5rem; - left: 2rem; + right: 1rem; width: 3px; height: 1rem; background-color: #232323; @@ -717,10 +776,10 @@ header .container { } .slide-nav .mob-item input:checked + label:after { - background-color: #0056D2; + background-color: #232323; } - .slide-nav .mob-item .dropdown-content li a { + /*.slide-nav .mob-item .dropdown-content li a { font-weight: 700; font-size: 1rem; display: block; @@ -733,10 +792,67 @@ header .container { text-align: left; padding-left: 6rem; border-bottom: 1px solid #fff; - } + }*/ .slide-nav .mob-item > a:hover, .slide-nav .mob-item > a:focus, .slide-nav .mob-item > a:active, .slide-nav .mob-item > label:hover, .slide-nav .mob-item > label:focus, .slide-nav .mob-item > label:active, .slide-nav .mob-item > input:checked + label, .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:focus, .slide-nav .mob-item .dropdown-content li a:active { - color: #0056D2; + color: #232323; + } + + .slide-nav .mob-item .dropdown-content.row { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin-bottom: 1rem; + } + + .slide-nav .mob-item .dropdown-content li.systemlink { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + padding: 0; + } + + .slide-nav .mob-item .dropdown-content li a { + padding: 1rem 1rem 1rem 3rem; + border-radius: 8px; + position: relative; + display: flex; + font-size: 1rem; + -webkit-transition: background-color ease-out .3s; + -moz-transition: background-color ease-out .3s; + -o-transition: background-color ease-out .3s; + transition: background-color ease-out .3s; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + text-decoration: none; + } + + .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:active, .slide-nav .mob-item .dropdown-content li a:focus { + background-color: rgba(35,35,35,.05); + } + + .slide-nav .mob-item .dropdown-content li a svg, .slide-nav .mob-item .dropdown-content li a img { + width: 1.5rem; + position: absolute; + top: 1rem; + left: 1rem; + } + + .slide-nav .mob-item .dropdown-content li a .systext p.system-title { + font-size: 1rem; + border-bottom: 2px solid rgba(0,0,0,0); + display: inline-block; + line-height: 1.3; + font-weight: 700; + } + + .slide-nav .mob-item .dropdown-content li .systext p.system-about { + font-weight: 400; + font-size: 0.8rem; + margin-top: 0.25rem; + line-height: 1.5; } .logo-mobile img { @@ -753,6 +869,17 @@ header .container { } +@media only screen and (max-width: 32rem) { + + .slide-nav .mob-item .dropdown-content li.systemlink { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + padding: 0; + } + +} + /*intro*/ @@ -795,15 +922,37 @@ header .container { line-height: 1.5; } -#intro .download-btn { - margin-top: 1rem; - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: start; +#intro .download-btn a { + display: inline-block; + text-decoration: none; + font-size: 1rem; + font-weight: 700; + color: #ffffff; + background-color: #232323; + border-radius: 4rem; + padding: 1rem 2rem; + line-height: 1.5; + margin-top: 2rem; + letter-spacing: 0.5px; + -webkit-transition: all ease-out .3s; + -moz-transition: all ease-out .3s; + -o-transition: all ease-out .3s; + transition: all ease-out .3s; +} + +#intro .download-btn a svg { + vertical-align: middle; + margin-left: 1rem; +} + +#intro .download-btn a + +#intro .download-btn a:hover, #intro .download-btn a:active, #intro .download-btn a:focus { + background-color: #383838; } -#intro .download-badge { +.download-badge { width: 12rem; height: 4rem; display: block; @@ -811,25 +960,25 @@ header .container { margin-right: 1rem; } -#intro .download-ios { +.download-ios { background: url(../img/app-store-badge.svg); background-size: contain; background-repeat: no-repeat; } -#intro .download-playstore { +.download-playstore { background: url(../img/google-play-badge.svg); background-size: contain; background-repeat: no-repeat; } -#intro .download-android { +.download-android { background: url(../img/android-apk-badge.svg); background-size: contain; background-repeat: no-repeat; } -#intro .download-fdroid { +.download-fdroid { background: url(../img/fdroid-badge.svg); background-size: contain; background-repeat: no-repeat; @@ -956,7 +1105,7 @@ header .container { } #intro .download-btn a { - margin: 0.5rem 3rem 0 3rem; + margin: 2rem 3rem 0 3rem; display: inline-block; } @@ -981,9 +1130,166 @@ header .container { min-height: 60vh; padding: 3rem 0; } + +#intro .download-btn a span { + display: none; +} } +/*downloads*/ + +#download .container { + position: relative; + padding-top: 10rem; + padding-bottom: 6rem; +} + +#download .container:before { + content: 'download'; + display; block; + color: gainsboro; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + font-size: 10rem; + position: absolute; + top: 0; + left: -12rem; + z-index: -1; + line-height: 1; + opacity: 0.5; +} + +#download .row.system-cards { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + margin-top: 3rem; +} + +#download .row.system-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 22.5rem; + margin-bottom: 1.75rem; + background: #ffffff; + border-radius: 32px; + padding: 2rem; +} + +@media only screen and (max-width: 75rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 19.33rem; + margin-bottom: 1.5rem; + } + + #download .card h3 { + font-size: 1.3rem; + } + + #download .card p { + height: 6rem; + } +} + +@media only screen and (max-width: 62rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 48%; + flex-basis: 48%; + max-width: 48%; + margin-bottom: 1.5rem; + } +} + +@media only screen and (max-width: 40rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + margin-bottom: 1.5rem; + } +} + +#download .card.feature-icon img, #download .card.feature-icon svg { + width: 3rem; + margin-bottom: 2rem; +} + +#download .card h3, #download .card-long h3 { + font-size: 1.5rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + line-height: 1.2; +} + +#download .card p { + font-size: 1rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 400; + margin-top: 0.75rem; + line-height: 1.6; +} + +#download .card a { + text-decoration: none; + color: #3030D0; + font-weight: 700; + margin-top: 2rem; + display: inline-block; + line-height: 1.3; + -webkit-transition: all ease-out .3s; + -moz-transition: all ease-out .3s; + -o-transition: all ease-out .3s; + transition: all ease-out .3s; +} + +#download .card.feature-icon a svg { + margin: 0 0 0 0.25rem; + width: 1.125rem; + vertical-align: middle; +} + +#download .card a:hover, #download .card a:active, #download .card a:focus { + color: #5959d9; +} + +@media only screen and (max-width: 75rem) { + + #download .card h3 { + font-size: 1.3rem; + } + + #download .card p { + height: 4rem; + } + + #download .card a { + margin-top: 1rem; + } +} + +@media only screen and (max-width: 48rem) { + + #download .card h3 { + font-size: 1.2rem; + } + + #download .card p { + height: 5rem; + } +} + +@media only screen and (max-width: 40rem) { + + #download .card p { + height: auto; + } + +} + + /*features*/ #features .container { @@ -1008,27 +1314,12 @@ header .container { #feature .container { position: relative; - padding-top: 13rem; -} - -#feature .container:before { - content: 'features'; - display; block; - color: gainsboro; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - font-size: 10rem; - position: absolute; - top: 0; - right: -12rem; - z-index: -1; - line-height: 1; - opacity: 0.5; + padding-top: 8rem; } @media only screen and (max-width: 100rem) { - #features .container:before { + #features .container:before, #download .container:before { left: -2rem; } @@ -1044,11 +1335,11 @@ header .container { display: none; } - #features .container:before { + #features .container:before, #download .container:before { font-size: 8rem; } - #features .container { + #features .container, #download .container { padding-top: 8rem; } @@ -1059,12 +1350,12 @@ header .container { @media only screen and (max-width: 48rem) { - #features .container:before { + #features .container:before, #download .container:before { font-size: 8rem; left: 1.5rem; } - #features .container { + #features .container, .download .container { padding-top: 8rem; } @@ -1075,12 +1366,12 @@ header .container { @media only screen and (max-width: 37rem) { - #features .container:before { + #features .container:before, #download .container:before { font-size: 4rem; right: 1.5rem; } - #features .container { + #features .container, #download .container { padding-top: 4rem; } diff --git a/img/android-sys.svg b/img/android-sys.svg new file mode 100644 index 0000000..56caa8d --- /dev/null +++ b/img/android-sys.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/apple-sys.svg b/img/apple-sys.svg new file mode 100644 index 0000000..c894dfa --- /dev/null +++ b/img/apple-sys.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/fdroid-sys.png b/img/fdroid-sys.png new file mode 100644 index 0000000..97f45fc Binary files /dev/null and b/img/fdroid-sys.png differ diff --git a/img/google-sys.png b/img/google-sys.png new file mode 100644 index 0000000..e2c024a Binary files /dev/null and b/img/google-sys.png differ diff --git a/img/linux-sys.svg b/img/linux-sys.svg new file mode 100644 index 0000000..b839a91 --- /dev/null +++ b/img/linux-sys.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/windows-sys.svg b/img/windows-sys.svg new file mode 100644 index 0000000..b7456f8 --- /dev/null +++ b/img/windows-sys.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index 72dea42..565de10 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,21 @@ permalink: /index.html

Stack Wallet

The first open-source, non-custodial, privacy-preserving cryptocurrency wallet for all crypto fans

-
- - - - +
+ + Download Stack Wallet + + + + + + + + + + + +
@@ -24,6 +34,104 @@ permalink: /index.html
+
+
+
+
+ +

Stack on Google Play

+

Stack Wallet is available on Google Play for Android smartphones.

+ + Download Stack + + + + + + +
+
+ +

Stack on App Store

+

Get the mobile app for your iPhone or iPad.

+ + Download Stack + + + + + + +
+
+ +

Stack on Android APK

+

For advanced users, Stack Wallet is available on Android APK.

+ + Download Stack + + + + + + +
+
+ +

Stack on F-Droid

+

Download Stack from F-Droid.

+ + Download Stack + + + + + + +
+
+ +

Stack on Windows

+

Stack Wallet is available on Windows.

+ + Download Stack + + + + + + +
+
+ +

Stack on Linux

+

Start using Stack Wallet on Linux.

+ + Download Stack + + + + + + +
+
+ +

Stack on macOS

+

Download Stack Wallet on macOS.

+ + Download Stack + + + + + + +
+
+
+
+