Skip to content

Commit

Permalink
Work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@elad2412
elad2412 committed Jun 6, 2024
1 parent 6410a4f commit 31f5764
Showing 1 changed file with 137 additions and 12 deletions.
149 changes: 137 additions & 12 deletions src/routes/integration/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,12 @@
</div>
</section>

<section class="u-flex-vertical u-gap-32" id="ai" tabindex="0">
<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="ai">
<header class="u-flex-vertical u-gap-4">
<h2 class="web-label web-u-color-text-primary">AI</h2>
<p class="web-description">Artificial intelligence tools</p>
</header>
<div class="l-max-size-more-than-9 u-flex-vertical u-gap-32">
<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
<ul class="l-grid-1">
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
Expand Down Expand Up @@ -215,15 +215,18 @@
</a>
</li>
</ul>
<a href="#ai" class="l-float-button web-button is-text">
<span>Show more</span>
</a>
</div>
</section>

<section class="u-flex-vertical u-gap-32" id="auto" tabindex="0">
<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="auto">
<header class="u-flex-vertical u-gap-4">
<h2 class="web-label web-u-color-text-primary">Auth</h2>
<p class="web-description">Authentication and security</p>
</header>
<div class="l-max-size-more-than-9 u-flex-vertical u-gap-32">
<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
<ul class="l-grid-1">
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
Expand Down Expand Up @@ -331,6 +334,120 @@
</a>
</div>
</section>

<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="databases">
<header class="u-flex-vertical u-gap-4">
<h2 class="web-label web-u-color-text-primary">Databases</h2>
<p class="web-description">Data storage solutions</p>
</header>
<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
<ul class="l-grid-1">
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
<li>
<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
</div>
<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</li>
</ul>
<a href="#databases" class="l-float-button web-button is-text">
<span>Show more</span>
</a>
</div>
</section>
</div>
</section>
</div>
Expand All @@ -347,25 +464,33 @@
@use '$scss/abstract' as *;
.l-float-button { display:none; }
/* more tha 9 items */
.l-max-size-more-than-9 {
&:has(>ul>li:nth-child(10)) {
.l-max-size-list-cards-section {
scroll-snap-align: start;
scroll-margin-top: pxToRem(120);
}
.l-max-size-list-cards {
&:where(:has(>ul>li:nth-child(10))) {
position:relative; max-block-size:pxToRem(460); overflow:hidden;
&::before {
position:absolute; inset:0;
content:""; display:block;
background: linear-gradient(180deg, rgba(25, 25, 28, 0.00) 0%, rgba(25, 25, 28, 0.92) 90%, #19191C 100%);;
background: linear-gradient(180deg, rgba(25, 25, 28, 0.00) 0%, rgba(25, 25, 28, 0.92) 90%, #19191C 100%);
transition: var(--transition);
}
.l-float-button {
position: absolute; inset-inline:0; inset-block-end:pxToRem(20); margin-inline:auto;
display:flex;
}
}
}
//*:target { background-color:red; }
//*:target .l-max-size-more-than-9 {
// overflow:visible; max-block-size:none;
// &::before { display:none; }
//}
:where(:target, :focus-within) {
.l-max-size-list-cards {
overflow:visible; max-block-size:none;
&::before { opacity:0; pointer-events:none; }
.l-float-button { display:none; }
}
}
.l-grid-1 {
display: grid;
Expand Down

0 comments on commit 31f5764

Please sign in to comment.