bank landing: platform SVGs (gold Android, blue iOS, browsers)
Replace Android/iOS text with site-styled icons; hub row is browser platforms (experimental) with gold/blue recrafted marks.
This commit is contained in:
Hernâni Marques
parent
76cd36dcfc
commit
6e886bbaca
1 changed files with 63 additions and 10 deletions
|
|
@ -218,7 +218,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.4rem;
|
gap: 0.45rem;
|
||||||
min-width: 9.5rem;
|
min-width: 9.5rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -240,7 +240,43 @@
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.app-ico {
|
||||||
|
width: 1.15rem;
|
||||||
|
height: 1.15rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.app-ico path, .app-ico circle, .app-ico rect { fill: currentColor; }
|
||||||
|
.app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 1.6;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
.app-ico.gold { color: #f0c86a; }
|
||||||
|
.app-ico.blue { color: #3ecfbf; }
|
||||||
|
.app-btn .app-ico.gold { color: #f0c86a; }
|
||||||
|
.app-btn .app-ico.blue { color: #5eead4; }
|
||||||
|
.app-btn.ios .app-ico { color: #5eead4; }
|
||||||
|
.app-btn:not(.ios):not(.hub) .app-ico { color: #f0c86a; }
|
||||||
|
.hub-icons {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
.hub-icons .app-ico { width: 1.05rem; height: 1.05rem; }
|
||||||
|
.step-tagline .app-ico {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
margin: 0 0.12em;
|
||||||
|
}
|
||||||
|
.step-tagline .app-ico.ios { color: #5eead4; }
|
||||||
|
.step-tagline .app-ico.android { color: #f0c86a; }
|
||||||
|
|
||||||
.more-section {
|
.more-section {
|
||||||
margin-top: 2.75rem;
|
margin-top: 2.75rem;
|
||||||
|
|
@ -511,28 +547,45 @@
|
||||||
<!-- ========== STEP 1: install apps ========== -->
|
<!-- ========== STEP 1: install apps ========== -->
|
||||||
<section class="step-card" aria-labelledby="step1-title">
|
<section class="step-card" aria-labelledby="step1-title">
|
||||||
<h2 id="step1-title"><span class="step-num">1</span> Get the wallet</h2>
|
<h2 id="step1-title"><span class="step-num">1</span> Get the wallet</h2>
|
||||||
<p class="step-tagline">Android or iOS</p>
|
<p class="step-tagline">
|
||||||
|
<svg class="app-ico android" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
||||||
|
or
|
||||||
|
<svg class="app-ico ios" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
|
||||||
|
</p>
|
||||||
<div class="step-body">
|
<div class="step-body">
|
||||||
<div class="app-links">
|
<div class="app-links">
|
||||||
<a class="app-btn"
|
<a class="app-btn"
|
||||||
href="https://play.google.com/store/apps/details?id=net.taler.wallet"
|
href="https://play.google.com/store/apps/details?id=net.taler.wallet"
|
||||||
target="_blank" rel="noopener noreferrer">
|
target="_blank" rel="noopener noreferrer"
|
||||||
Android · Play Store
|
aria-label="Android Play Store">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
||||||
|
Play Store
|
||||||
</a>
|
</a>
|
||||||
<a class="app-btn"
|
<a class="app-btn"
|
||||||
href="https://f-droid.org/en/packages/net.taler.wallet.fdroid/"
|
href="https://f-droid.org/en/packages/net.taler.wallet.fdroid/"
|
||||||
target="_blank" rel="noopener noreferrer">
|
target="_blank" rel="noopener noreferrer"
|
||||||
Android · F-Droid
|
aria-label="Android F-Droid">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
||||||
|
F-Droid
|
||||||
</a>
|
</a>
|
||||||
<a class="app-btn ios"
|
<a class="app-btn ios"
|
||||||
href="https://apps.apple.com/app/taler-wallet/id6463440117"
|
href="https://apps.apple.com/app/taler-wallet/id6463440117"
|
||||||
target="_blank" rel="noopener noreferrer">
|
target="_blank" rel="noopener noreferrer"
|
||||||
iOS · App Store
|
aria-label="iOS App Store">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
|
||||||
|
App Store
|
||||||
</a>
|
</a>
|
||||||
<a class="app-btn hub"
|
<a class="app-btn hub"
|
||||||
href="https://wallet.taler.net/"
|
href="https://wallet.taler.net/"
|
||||||
target="_blank" rel="noopener noreferrer">
|
target="_blank" rel="noopener noreferrer"
|
||||||
All platforms · wallet.taler.net
|
aria-label="Browser platforms (experimental)">
|
||||||
|
<span class="hub-icons" aria-hidden="true">
|
||||||
|
<!-- recrafted browser marks: gold / blue alternating -->
|
||||||
|
<svg class="app-ico gold stroke-ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 8h18M8 18v2M16 18v2M10 20h4"/></svg>
|
||||||
|
<svg class="app-ico blue" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.2"/><path d="M12 3v5.5M12 15.5V21M3 12h5.5M15.5 12H21" opacity="0.85"/></svg>
|
||||||
|
<svg class="app-ico gold" viewBox="0 0 24 24"><path d="M12 3l7.5 4.2v9.6L12 21l-7.5-4.2V7.2L12 3z"/><path d="M12 8.2l3.8 2.1v4.3L12 16.7l-3.8-2.1v-4.3L12 8.2z" opacity="0.55"/></svg>
|
||||||
|
</span>
|
||||||
|
Browser platforms (experimental)
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue