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 efebe03 commit 7767338
Show file tree
Hide file tree
Showing 2 changed files with 181 additions and 2 deletions.
178 changes: 177 additions & 1 deletion src/routes/integration/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
</section>
</aside>
<section>
<div>
<div class="u-flex-vertical u-gap-80">
<section class="u-flex-vertical u-gap-32">
<header class="u-flex-vertical u-gap-4">
<h2 class="web-label web-u-color-text-primary">Featured</h2>
Expand Down Expand Up @@ -156,6 +156,168 @@
</ul>
</div>
</section>

<section class="u-flex-vertical u-gap-32">
<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="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>
</ul>
</div>
</section>

<section class="u-flex-vertical u-gap-32">
<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="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>
</ul>
</div>
</section>
</div>
</section>
</div>
Expand All @@ -170,6 +332,20 @@

<style lang="scss">
@use '$scss/abstract' as *;
.l-max-size-read-more-container {
container-type: size;
container-name: list-items;
}
@container list-items (min-height: 600px) {
.card { /*styles*/ }
.card h3 { /*styles*/ }
}
.l-grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: pxToRem(32);
}
.l-integrations-grid {
@media #{$break1} {}
@media #{$break2open} {
Expand Down
5 changes: 4 additions & 1 deletion src/scss/7-components/_user-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
display:grid; column-gap:pxToRem(16); grid-template-columns:auto 1fr;
font-size:pxToRem(18); line-height:pxToRem(24);

&-image { grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); border-radius:50%; }
&-image {
grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); border-radius:50%;
&.is-32px { inline-size:pxToRem(32); block-size:pxToRem(32); }
}
&-name { color:hsl(var(--web-color-greyscale-700)); }
&-username { color:hsl(var(--web-color-greyscale-600)); }
}

0 comments on commit 7767338

Please sign in to comment.