Amit Saini
257 lines
8.7 KiB
HTML
257 lines
8.7 KiB
HTML
<style>
|
|
.modern-header {
|
|
position: sticky;
|
|
top: 0;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
z-index: 3;
|
|
background-color: white;
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
header.modern-header {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.nav-container {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.nav-container__menu-container {
|
|
position: relative;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
z-index: 20;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-container__homepage-link-container {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 9999;
|
|
height: auto;
|
|
margin: 0 7rem 0 0;
|
|
padding: 1rem 0;
|
|
background: none;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
width: 25%;
|
|
}
|
|
|
|
.nav-container__homepage-link-container > span {
|
|
color: #3ED0A6;
|
|
display: inline-block;
|
|
margin-bottom: 5px;
|
|
font-size: 18px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.nav-container__docs-link:hover {
|
|
color: #28ad86;
|
|
}
|
|
|
|
.nav-container__right-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 25%;
|
|
}
|
|
|
|
header .header-get-tiny-button {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: inline-block;
|
|
outline: currentcolor none medium;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgb(25, 118, 210);
|
|
border-radius: 0.1875rem;
|
|
padding: 0.5rem 3rem;
|
|
line-height: 1.4;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-rendering: auto;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(25, 118, 210);
|
|
transition: color 0.1s ease 0s, background-color 0.1s ease 0s, border-color 0.1s ease 0s;
|
|
}
|
|
|
|
header .header-get-tiny-button.narrow {
|
|
padding: 0.5rem 2rem;
|
|
}
|
|
|
|
.header-my-account-button {
|
|
display: none;
|
|
font-weight: 900;
|
|
color: rgb(74, 74, 74);
|
|
font-size: 16px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.menu-mobile .menu-nav > .header-my-account-button-mobile {
|
|
display: none;
|
|
}
|
|
|
|
.header-my-account-button:hover {
|
|
color: rgb(25, 118, 210) !important;
|
|
}
|
|
|
|
|
|
.header-my-account-button:hover g {
|
|
stroke: rgb(25, 118, 210) !important;
|
|
}
|
|
|
|
.header-my-account-button__icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 9px;
|
|
}
|
|
|
|
.header-my-account-button__icon svg {
|
|
width: 24px;
|
|
height: 26px;
|
|
}
|
|
|
|
.header-my-account-button__icon g {
|
|
stroke: rgba(74, 74, 74, 0.75);
|
|
}
|
|
|
|
|
|
.modern-menu-mobile {
|
|
position: absolute;
|
|
background: transparent;
|
|
z-index: 21;
|
|
}
|
|
|
|
.modern-menu-mobile .menu-bar {
|
|
border: none;
|
|
}
|
|
|
|
.modern-menu-mobile .menu-nav {
|
|
box-shadow: 0 9px 10px -5px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.modern-menu-mobile .menu-nav.open {
|
|
top: 68px;
|
|
}
|
|
|
|
.modern-menu-mobile__btn-open {
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQwIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjMgKDEyMDcyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5idG4tbWVudTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJhc3NldHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIzLjAwMDAwMCwgLTY2NTYuMDAwMDAwKSIgaWQ9ImJ0bi1tZW51IiBmaWxsPSIjNTk1OTU5Ij4KICAgICAgICAgICAgPGcgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAyMy4wMDAwMDAsIDY2NTYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iUmVjdGFuZ2xlLTIyNCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMTQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjI4IiB3aWR0aD0iNDAiIGhlaWdodD0iNCIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
background-size: 24px 24px;
|
|
right: 20px;
|
|
position: absolute;
|
|
top: 20px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.modern-menu-mobile__btn-open.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.menu-mobile .menu-nav .link-menu.store-button-mobile {
|
|
visibility: hidden;
|
|
height: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 1126px) {
|
|
.nav-container__right-container {
|
|
display: none;
|
|
}
|
|
|
|
.menu-mobile {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<header class="modern-header">
|
|
{% include template/notification.html %}
|
|
<div class="nav-container">
|
|
<div class="nav-container__menu-container">
|
|
<div class="nav-container__homepage-link-container">
|
|
<a data-marketing="link" type="primary" href="/docs-4x">
|
|
<img src="{{site.baseurl}}/images/for-base/logo-spaces-docs-for-base.png" srcset="
|
|
{{site.baseurl}}/images/for-base/logo-spaces-docs-for-base.png 1x,
|
|
{{site.baseurl}}/images/for-base/logo-spaces-docs-for-base@2x.png 2x,
|
|
{{site.baseurl}}/images/for-base/logo-spaces-docs-for-base@3x.png 3x
|
|
" alt="Tiny logo" height="29px" />
|
|
</a>
|
|
</div>
|
|
|
|
{% include template/search.html %}
|
|
|
|
<div class="nav-container__right-container">
|
|
|
|
<a href="https://apps.tiny.cloud/?add-to-cart=197933"
|
|
class="header-get-tiny-button narrow"
|
|
data-marketing="docs-header-get-started">Get Free API Key</a>
|
|
|
|
<a href="https://apps.tiny.cloud/my-account/"
|
|
class="header-my-account-button"
|
|
data-marketing="docs-header-my-account">
|
|
|
|
<i class="header-my-account-button__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g transform="translate(.75 .75)" stroke-width="1.5" fill="none" fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="11.25" cy="9" r="5.25"></circle>
|
|
<path d="M18.163 20.126a9.746 9.746 0 0 0-13.826 0"></path>
|
|
<circle cx="11.25" cy="11.25" r="11.25"></circle>
|
|
</g>
|
|
</svg>
|
|
</i>
|
|
My Account
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-mobile modern-menu-mobile">
|
|
<a class="modern-menu-mobile__btn-open btn-open" href="#" title="Toggle menus"></a>
|
|
<nav class="menu-nav">
|
|
<a class="link-menu header-get-tiny-button-mobile"
|
|
href="https://apps.tiny.cloud/?add-to-cart=197933"
|
|
data-marketing="docs-header-get-started">Get Started</a>
|
|
|
|
<a href="https://apps.tiny.cloud/my-account/"
|
|
class="link-menu header-my-account-button-mobile"
|
|
data-marketing="docs-header-my-account">My Account</a>
|
|
|
|
<a class="link-menu store-button-mobile"
|
|
href="https://apps.tiny.cloud/cart/"
|
|
data-marketing="tiny-news-cart-link">Cart</a>
|
|
|
|
<a class="link-menu store-button-mobile"
|
|
href="https://apps.tiny.cloud/signup/"
|
|
data-marketing="tiny-docs-news-back-home">Checkout</a>
|
|
|
|
<a class="link-menu" href="/" data-marketing="docs-header-back-home">
|
|
Return to Tiny.cloud
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|