mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Update login and sign up pages
This commit is contained in:
Steven Nguyen
@@ -0,0 +1,13 @@
|
||||
<svg width="160" height="29" viewBox="0 0 160 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M46.7348 23.5568C49.3517 23.5568 50.6746 22.2116 51.2497 21.2957H51.5085C51.6236 22.2688 52.3137 23.1847 53.6653 23.1847H56.2247V20.3226H55.5633C55.1032 20.3226 54.8731 20.0651 54.8731 19.6644V8.18757H51.4798V10.0193H51.221C50.5595 9.10343 49.1792 7.8155 46.6486 7.8155C42.6226 7.8155 39.6318 11.1355 39.6318 15.6861C39.6318 20.2368 42.6801 23.5568 46.7348 23.5568ZM47.3387 20.294C44.9519 20.294 43.0827 18.5482 43.0827 15.7148C43.0827 12.9386 44.8944 11.0496 47.31 11.0496C49.6106 11.0496 51.5373 12.7382 51.5373 15.7148C51.5373 18.262 49.8981 20.294 47.3387 20.294Z" fill="#EDEDF0"/>
|
||||
<path d="M58.2281 29H61.6215V21.2957H61.8803C62.513 22.2116 63.8645 23.5568 66.539 23.5568C70.565 23.5568 73.4982 20.1796 73.4982 15.6861C73.4982 11.1641 70.3637 7.8155 66.3089 7.8155C63.7208 7.8155 62.4554 9.21791 61.8515 9.99066H61.5927V8.18757H58.2281V29ZM65.82 20.3799C63.4907 20.3799 61.564 18.6627 61.564 15.6861C61.564 13.1389 63.2031 10.9924 65.7625 10.9924C68.1494 10.9924 70.0186 12.8527 70.0186 15.6861C70.0186 18.4623 68.2069 20.3799 65.82 20.3799Z" fill="#EDEDF0"/>
|
||||
<path d="M75.2492 29H78.6425V21.2957H78.9013C79.534 22.2116 80.8856 23.5568 83.56 23.5568C87.586 23.5568 90.2396 20.1796 90.2396 15.6861C90.2396 11.1641 87.3847 7.8155 83.3299 7.8155C80.7418 7.8155 79.4765 9.21791 78.8726 9.99066H78.6137V8.18757H75.2492V29ZM82.841 20.3799C80.5117 20.3799 78.585 18.6627 78.585 15.6861C78.585 13.1389 80.2242 10.9924 82.7835 10.9924C85.1704 10.9924 87.0396 12.8527 87.0396 15.6861C87.0396 18.4623 85.2279 20.3799 82.841 20.3799Z" fill="#EDEDF0"/>
|
||||
<path d="M94.7253 23.5329H99.5277L102.26 11.7699H102.432L105.164 23.5329H109.938L113.76 8.53582H110.34L107.608 20.3275H107.35L104.618 8.53582H100.103L97.3422 20.3275H97.0834L94.3802 8.53582H90.7568L94.7253 23.5329Z" fill="#EDEDF0"/>
|
||||
<path d="M115.48 23.5329H118.873V16.1202C118.873 13.2868 120.196 11.541 122.669 11.541H124.164V8.16376H123.043C121.116 8.16376 119.649 9.4803 119.074 10.7396H118.844V8.53582H115.48V23.5329Z" fill="#EDEDF0"/>
|
||||
<path d="M141.004 23.5329H143.649V20.5278H141.032C139.997 20.5278 139.566 20.0699 139.566 19.0109V11.5124H143.822V8.53582H139.566V4.32861H136.345V8.53582H133.527V11.5124H136.144V19.0395C136.144 22.2164 138.07 23.5329 141.004 23.5329Z" fill="#EDEDF0"/>
|
||||
<path d="M152.753 23.5568C155.888 23.5568 158.648 22.0113 159.626 18.8916L156.52 18.1475C155.974 19.8075 154.392 20.6661 152.724 20.6661C150.251 20.6661 148.612 19.0634 148.583 16.5447H160V15.6003C160 11.1355 157.21 7.8155 152.609 7.8155C148.555 7.8155 145.075 10.9924 145.075 15.7148C145.075 20.294 148.152 23.5568 152.753 23.5568ZM148.612 14.0834C148.813 12.2803 150.452 10.7634 152.609 10.7634C154.68 10.7634 156.376 12.0513 156.549 14.0834H148.612Z" fill="#EDEDF0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.018 23.5329H128.625V11.5124H125.979V8.53582H132.018V23.5329Z" fill="#EDEDF0"/>
|
||||
<path d="M130.069 6.45465C131.306 6.45465 132.226 5.53879 132.226 4.33673C132.226 3.16329 131.306 2.24744 130.069 2.24744C128.833 2.24744 127.912 3.16329 127.912 4.33673C127.912 5.53879 128.833 6.45465 130.069 6.45465Z" fill="#EDEDF0"/>
|
||||
<path d="M29.6277 19.8556V26.4741H13.0326C8.19779 26.4741 3.97629 23.8122 1.71769 19.8556C1.38936 19.2803 1.10198 18.6769 0.860926 18.0505C0.387713 16.8231 0.0902487 15.506 0 14.1317V12.3423C0.0195935 12.0361 0.050468 11.7322 0.0908425 11.432C0.173373 10.8159 0.298058 10.213 0.461931 9.62693C2.01219 4.07098 7.05306 0 13.0326 0C19.0122 0 24.0525 4.07098 25.6027 9.62693H18.5069C17.342 7.81586 15.3257 6.61852 13.0326 6.61852C10.7396 6.61852 8.72325 7.81586 7.55833 9.62693C7.20328 10.1775 6.92778 10.7846 6.74728 11.432C6.58697 12.006 6.50147 12.6113 6.50147 13.237C6.50147 15.1341 7.28877 16.8441 8.55107 18.0505C9.72074 19.1702 11.2977 19.8556 13.0326 19.8556H29.6277Z" fill="#FD366E"/>
|
||||
<path d="M29.6277 11.432V18.0505H17.5142C18.7765 16.8442 19.5638 15.1342 19.5638 13.2371C19.5638 12.6113 19.4783 12.006 19.3179 11.432H29.6277Z" fill="#FD366E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,13 @@
|
||||
<svg width="160" height="29" viewBox="0 0 160 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M46.7351 23.5567C49.352 23.5567 50.6748 22.2115 51.25 21.2957H51.5088C51.6238 22.2688 52.314 23.1846 53.6656 23.1846H56.2249V20.3226H55.5635C55.1034 20.3226 54.8734 20.065 54.8734 19.6643V8.18751H51.48V10.0192H51.2212C50.5598 9.10336 49.1794 7.81544 46.6488 7.81544C42.6228 7.81544 39.6321 11.1354 39.6321 15.6861C39.6321 20.2367 42.6803 23.5567 46.7351 23.5567ZM47.339 20.294C44.9522 20.294 43.0829 18.5481 43.0829 15.7147C43.0829 12.9385 44.8946 11.0496 47.3102 11.0496C49.6108 11.0496 51.5375 12.7382 51.5375 15.7147C51.5375 18.2619 49.8984 20.294 47.339 20.294Z" fill="#19191D"/>
|
||||
<path d="M58.2284 29H61.6217V21.2957H61.8805C62.5132 22.2115 63.8648 23.5567 66.5392 23.5567C70.5652 23.5567 73.4984 20.1795 73.4984 15.6861C73.4984 11.164 70.3639 7.81544 66.3091 7.81544C63.721 7.81544 62.4557 9.21785 61.8518 9.9906H61.593V8.18751H58.2284V29ZM65.8203 20.3798C63.4909 20.3798 61.5642 18.6626 61.5642 15.6861C61.5642 13.1389 63.2034 10.9923 65.7628 10.9923C68.1496 10.9923 70.0188 12.8526 70.0188 15.6861C70.0188 18.4623 68.2071 20.3798 65.8203 20.3798Z" fill="#19191D"/>
|
||||
<path d="M75.2494 29H78.6428V21.2957H78.9016C79.5342 22.2115 80.8858 23.5567 83.5602 23.5567C87.5862 23.5567 90.2399 20.1795 90.2399 15.6861C90.2399 11.164 87.3849 7.81544 83.3302 7.81544C80.742 7.81544 79.4767 9.21785 78.8728 9.9906H78.614V8.18751H75.2494V29ZM82.8413 20.3798C80.512 20.3798 78.5852 18.6626 78.5852 15.6861C78.5852 13.1389 80.2244 10.9923 82.7838 10.9923C85.1706 10.9923 87.0398 12.8526 87.0398 15.6861C87.0398 18.4623 85.2281 20.3798 82.8413 20.3798Z" fill="#19191D"/>
|
||||
<path d="M94.7255 23.5329H99.528L102.26 11.7699H102.432L105.164 23.5329H109.938L113.761 8.53576H110.341L107.609 20.3274H107.35L104.618 8.53576H100.103L97.3424 20.3274H97.0836L94.3804 8.53576H90.757L94.7255 23.5329Z" fill="#19191D"/>
|
||||
<path d="M115.48 23.5329H118.873V16.1202C118.873 13.2868 120.196 11.5409 122.669 11.5409H124.164V8.1637H123.043C121.116 8.1637 119.65 9.48024 119.074 10.7395H118.844V8.53576H115.48V23.5329Z" fill="#19191D"/>
|
||||
<path d="M141.004 23.5329H143.65V20.5277H141.033C139.997 20.5277 139.566 20.0698 139.566 19.0109V11.5123H143.822V8.53576H139.566V4.32855H136.345V8.53576H133.527V11.5123H136.144V19.0395C136.144 22.2164 138.071 23.5329 141.004 23.5329Z" fill="#19191D"/>
|
||||
<path d="M152.753 23.5567C155.888 23.5567 158.649 22.0112 159.626 18.8916L156.521 18.1474C155.974 19.8074 154.392 20.666 152.725 20.666C150.251 20.666 148.612 19.0633 148.584 16.5447H160V15.6002C160 11.1354 157.211 7.81544 152.61 7.81544C148.555 7.81544 145.075 10.9923 145.075 15.7147C145.075 20.294 148.152 23.5567 152.753 23.5567ZM148.612 14.0833C148.814 12.2802 150.453 10.7634 152.61 10.7634C154.68 10.7634 156.377 12.0513 156.549 14.0833H148.612Z" fill="#19191D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.018 23.5329H128.625V11.5123H125.979V8.53576H132.018V23.5329Z" fill="#19191D"/>
|
||||
<path d="M130.069 6.45459C131.306 6.45459 132.226 5.53873 132.226 4.33667C132.226 3.16323 131.306 2.24738 130.069 2.24738C128.833 2.24738 127.912 3.16323 127.912 4.33667C127.912 5.53873 128.833 6.45459 130.069 6.45459Z" fill="#19191D"/>
|
||||
<path d="M29.6277 19.8556V26.4741H13.0326C8.19779 26.4741 3.97629 23.8122 1.71769 19.8556C1.38936 19.2803 1.10198 18.6769 0.860926 18.0505C0.387713 16.8231 0.0902487 15.506 0 14.1317V12.3423C0.0195935 12.0361 0.050468 11.7322 0.0908425 11.432C0.173373 10.8159 0.298058 10.213 0.461931 9.62693C2.01219 4.07099 7.05306 0 13.0326 0C19.0122 0 24.0525 4.07099 25.6027 9.62693H18.5069C17.342 7.81587 15.3257 6.61852 13.0326 6.61852C10.7396 6.61852 8.72326 7.81587 7.55833 9.62693C7.20328 10.1775 6.92778 10.7846 6.74728 11.432C6.58697 12.006 6.50147 12.6113 6.50147 13.237C6.50147 15.1341 7.28877 16.8441 8.55107 18.0505C9.72074 19.1702 11.2977 19.8556 13.0326 19.8556H29.6277Z" fill="#FD366E"/>
|
||||
<path d="M29.6277 11.432V18.0505H17.5142C18.7765 16.8442 19.5638 15.1342 19.5638 13.2371C19.5638 12.6113 19.4783 12.006 19.3179 11.432H29.6277Z" fill="#FD366E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
@@ -1,40 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
|
||||
import AppwriteLogo from '$lib/images/appwrite.svg';
|
||||
import Cloud1 from '$lib/images/login/cloud-1.svg';
|
||||
import Cloud2 from '$lib/images/login/cloud-2.svg';
|
||||
import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
|
||||
import AppwriteCloudBgMobile from '$lib/images/login/cloud-bg-mobile.svg';
|
||||
import LoginDark from '$lib/images/login/login-dark-mode.svg';
|
||||
import LoginLight from '$lib/images/login/login-light-mode.svg';
|
||||
import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
|
||||
import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
|
||||
import LoginDark from '$lib/images/login/login-dark-mode.png';
|
||||
import LoginLight from '$lib/images/login/login-light-mode.png';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { isCloud } from '$lib/system';
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
export let imgLight = LoginLight;
|
||||
export let imgDark = LoginDark;
|
||||
|
||||
const technologies = [
|
||||
'js',
|
||||
'flutter',
|
||||
'apple',
|
||||
'android',
|
||||
'node',
|
||||
'php',
|
||||
'python',
|
||||
'ruby',
|
||||
'dart',
|
||||
'kotlin',
|
||||
'swift'
|
||||
];
|
||||
|
||||
let innerWidth = 0;
|
||||
$: isMobile = innerWidth < 768;
|
||||
|
||||
const prevTheme = $app.theme;
|
||||
$: if (isMobile && isCloud) {
|
||||
$: if (isMobile) {
|
||||
$app.theme = 'dark';
|
||||
} else {
|
||||
$app.theme = prevTheme;
|
||||
@@ -47,129 +27,38 @@
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<main class="grid-1-1 is-full-page" class:main-cloud={isCloud} id="main">
|
||||
{#if isCloud}
|
||||
<section
|
||||
class="cloud-section grid-1-1-col-1 u-flex u-flex-vertical u-overflow-hidden"
|
||||
style:--url={`url(${AppwriteCloudBg})`}>
|
||||
<a class="logo" href={user ? '/console' : '/'}>
|
||||
<img
|
||||
src={AppwriteCloudLogo}
|
||||
width="196"
|
||||
height="47"
|
||||
class="u-block"
|
||||
alt="Appwrite" />
|
||||
</a>
|
||||
|
||||
<div class="header">
|
||||
<p>Cloud is Live</p>
|
||||
<img src={Cloud1} alt="" class="cloud-1" />
|
||||
<img src={Cloud2} alt="" class="cloud-2" />
|
||||
</div>
|
||||
|
||||
<p class="beta">Now in public <span>beta</span></p>
|
||||
|
||||
<div class="u-margin-block-start-auto is-no-mobile" />
|
||||
|
||||
<div
|
||||
class="container u-text-color-light-gray is-no-mobile"
|
||||
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
|
||||
<p>Integrate with your favourite technologies</p>
|
||||
<ul
|
||||
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
|
||||
{#each technologies as tech}
|
||||
<li>
|
||||
<img
|
||||
src={`${base}/icons/dark/grayscale/${tech}.svg`}
|
||||
alt={tech}
|
||||
aria-hidden="true"
|
||||
aria-label={tech} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</section>
|
||||
{:else}
|
||||
<section class="grid-1-1-col-1 u-flex u-flex-vertical">
|
||||
<div
|
||||
class="container u-margin-block-start-20"
|
||||
style="--p-container-max-size: var(--container-size-medium);">
|
||||
<a href={user ? '/console' : '/'}>
|
||||
<img
|
||||
src={AppwriteLogo}
|
||||
width="196"
|
||||
height="47"
|
||||
class="u-block"
|
||||
alt="Appwrite" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div class="u-margin-block-start-auto is-no-mobile" />
|
||||
<div
|
||||
class="container u-margin-block-start-20 is-no-mobile u-flex u-main-center"
|
||||
style="--p-container-max-size: var(--container-size-large);">
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img src={imgDark} alt="" class="u-only-dark" />
|
||||
{:else}
|
||||
<img src={imgLight} alt="" class="u-only-light" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div class="u-margin-block-start-auto is-no-mobile" />
|
||||
<div
|
||||
class="container u-text-color-light-gray is-no-mobile"
|
||||
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
|
||||
<p>Integrate with your favourite technologies</p>
|
||||
<ul
|
||||
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
|
||||
{#each technologies as tech}
|
||||
<li>
|
||||
<img
|
||||
src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
|
||||
alt={tech}
|
||||
aria-hidden="true"
|
||||
aria-label={tech} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</section>
|
||||
{/if}
|
||||
<main class="grid-1-1 is-full-page" id="main">
|
||||
<section
|
||||
class="grid-1-1-col-2 u-flex u-main-center u-cross-center"
|
||||
class:is-cloud={isCloud}
|
||||
style:--url={`url(${AppwriteCloudBg})`}
|
||||
style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
|
||||
<div
|
||||
class="container u-flex u-flex-vertical u-cross-center u-main-center"
|
||||
class:cloud-contents={isCloud}>
|
||||
{#if isCloud}
|
||||
<a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
|
||||
class="u-flex u-flex-vertical"
|
||||
style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
|
||||
<div class="logo">
|
||||
<a href={user ? '/console' : '/'}>
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img
|
||||
src={AppwriteCloudLogo}
|
||||
width="196"
|
||||
height="47"
|
||||
class="u-block"
|
||||
alt="Appwrite" />
|
||||
</a>
|
||||
src={AppwriteLogoDark}
|
||||
width="160"
|
||||
class="u-block u-only-dark"
|
||||
alt="Appwrite Logo" />
|
||||
{:else}
|
||||
<img
|
||||
src={AppwriteLogoLight}
|
||||
width="160"
|
||||
class="u-block u-only-light"
|
||||
alt="Appwrite Logo" />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="is-only-mobile theme-dark">
|
||||
<div class="mobile-beta">Public <span>beta</span></div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="u-flex u-stretch" />
|
||||
|
||||
<div class="tag-line is-not-mobile">
|
||||
<p>Build like a team of hundreds<span class="underscore">_</span></p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
|
||||
<div class="container u-flex u-flex-vertical u-cross-center u-main-center">
|
||||
<div class="u-max-width-500 u-width-full-line">
|
||||
<h1 class="heading-level-2 u-margin-block-start-auto">
|
||||
{#if isCloud}
|
||||
<img src={Cloud1} alt="" class="cloud-1" />
|
||||
<img src={Cloud2} alt="" class="cloud-2" />
|
||||
{/if}
|
||||
<slot name="title" />
|
||||
</h1>
|
||||
<div class="u-margin-block-start-24">
|
||||
@@ -185,176 +74,74 @@
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
main * {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
@import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translatey(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
100% {
|
||||
transform: translatey(0px);
|
||||
}
|
||||
}
|
||||
/* Default (including mobile) */
|
||||
#main section:first-child {
|
||||
padding-block-start: 2.25rem;
|
||||
padding-block-end: 2rem;
|
||||
|
||||
.cloud-section {
|
||||
background: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: hsl(var(--color-neutral-5));
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
align-self: center;
|
||||
margin-block-start: 32.5vh;
|
||||
margin-block-start: 32.5lvh;
|
||||
div {
|
||||
padding-inline-start: 1rem;
|
||||
padding-inline-end: 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-family: 'Poppins';
|
||||
font-size: clamp(3.5rem, 7vw, 5.25rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cloud-1 {
|
||||
position: absolute;
|
||||
top: 95%;
|
||||
left: 0;
|
||||
translate: 15% -50%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cloud-2 {
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
right: 0;
|
||||
translate: 20% -50%;
|
||||
animation: float 7s ease-in-out infinite;
|
||||
animation-delay: 3s;
|
||||
.tag-line {
|
||||
font-family: 'Aeonik Pro';
|
||||
font-size: 4rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 80px */
|
||||
letter-spacing: -1.6px;
|
||||
backdrop-filter: blur(8px);
|
||||
.underscore {
|
||||
-webkit-text-fill-color: #f02e65;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.beta,
|
||||
.mobile-beta {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
font-family: 'Poppins';
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 130%;
|
||||
letter-spacing: 0.25em;
|
||||
|
||||
color: hsl(var(--color-neutral-0));
|
||||
|
||||
> span {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(252, 252, 255, 0.5) 0%,
|
||||
rgba(252, 252, 255, 0.25) 100%
|
||||
);
|
||||
border-radius: 5.38636px;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.beta {
|
||||
margin-block-start: 4rem;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
margin-block-start: 1rem;
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-beta {
|
||||
font-size: 0.75rem;
|
||||
margin-block-end: 6rem;
|
||||
|
||||
> span {
|
||||
background: hsl(var(--color-neutral-120));
|
||||
padding: 0.25rem 0.375rem 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cloud-contents {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.heading-level-2 {
|
||||
.cloud-1,
|
||||
.cloud-2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.heading-level-2 {
|
||||
position: relative;
|
||||
.cloud-1,
|
||||
.cloud-2 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cloud-1 {
|
||||
left: 32px;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.cloud-2 {
|
||||
right: 0;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.main-cloud {
|
||||
background-color: hsl(var(--color-neutral-500));
|
||||
}
|
||||
|
||||
.cloud-contents {
|
||||
justify-content: initial;
|
||||
}
|
||||
|
||||
.is-cloud {
|
||||
background: var(--url-mobile);
|
||||
background-position: 0px calc(30px - 5vw);
|
||||
background-size: 100vw;
|
||||
|
||||
/* for smaller screens */
|
||||
@media #{$break2open} {
|
||||
#main section:first-child {
|
||||
background: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
|
||||
.cloud-section {
|
||||
display: none;
|
||||
}
|
||||
padding-block-start: 6.25rem;
|
||||
padding-block-end: 6.875rem;
|
||||
|
||||
section:last-child {
|
||||
padding-block-end: 32px;
|
||||
div {
|
||||
padding-inline-start: 2.625rem;
|
||||
padding-inline-end: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 530px) and (max-width: 767px) {
|
||||
.heading-level-2 {
|
||||
.cloud-1 {
|
||||
display: none;
|
||||
/* for larger screens */
|
||||
@media #{$break3open} {
|
||||
#main section:first-child {
|
||||
div {
|
||||
padding-inline-start: 5.625rem;
|
||||
padding-inline-end: 5rem;
|
||||
}
|
||||
.tag-line {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-cloud {
|
||||
background-position: 0px calc(30px - 15vw);
|
||||
}
|
||||
:global(.theme-dark) .tag-line {
|
||||
background: linear-gradient(45deg, white, white 60%, #fd376f);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
:global(.theme-light) .tag-line {
|
||||
background: linear-gradient(45deg, #19191d, #19191d 60%, #fd376f);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user