LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-07 21:07:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

cards rotate

Browse Source
This commit is contained in:
tglide
2023-10-13 19:58:48 +01:00
parent ad5d33dc86
commit a2c28ba021
4 changed files with 183 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/animations/Products/Products.svelte
View File

@@ -355,7 +355,7 @@
display: none; display: none;
} }
@media (min-width: 1440px) { @media (min-width: 1400px) {
#products { #products {
display: block; display: block;
} }

322
src/lib/animations/Products/ProductsMobile.svelte
View File

@@ -1,200 +1,202 @@
<script> <script>
import { objectKeys } from '$lib/utils/object'; import { objectKeys } from '$lib/utils/object';
import { infos } from './Products.svelte'; import { infos } from './Products.svelte';
</script> </script>
<div class="wrapper"> <div class="wrapper">
<span class="aw-badges aw-eyebrow">Products_</span> <span class="aw-badges aw-eyebrow">Products_</span>
<h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16"> <h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16">
Your backend, minus the hassle Your backend, minus the hassle
</h2> </h2>
<p class="aw-description u-margin-block-start-16"> <p class="aw-description u-margin-block-start-16">
Build secure and scalable applications with less code. Add authentication, databases, storage, and more using Appwrite's development platform. Build secure and scalable applications with less code. Add authentication, databases,
</p> storage, and more using Appwrite's development platform.
</p>
<div class="infos"> <div class="infos">
{#each objectKeys(infos) as prod} {#each objectKeys(infos) as prod}
{@const info = infos[prod]} {@const info = infos[prod]}
{#if info} {#if info}
<div class="info"> <div class="info">
<h3> <h3>
<img src={info.icon.active} alt="" /> <img src={info.icon.active} alt="" />
<span class="aw-label aw-u-color-text-primary">{info.title}</span> <span class="aw-label aw-u-color-text-primary">{info.title}</span>
</h3> </h3>
<h4 class="aw-title">{info.subtitle}</h4> <h4 class="aw-title">{info.subtitle}</h4>
<p> <p>
{info.description} {info.description}
</p> </p>
<ul class="features"> <ul class="features">
{#each info.features as feature} {#each info.features as feature}
<li>{feature}</li> <li>{feature}</li>
{/each} {/each}
</ul> </ul>
{#if info.shot} {#if info.shot}
<img src={info.shot} alt="" /> <img src={info.shot} alt="" />
{/if} {/if}
</div> </div>
{/if} {/if}
{/each} {/each}
</div> </div>
<div class="post-wrapper"> <div class="post-wrapper">
<img src="/images/products/post.png" alt="" /> <img src="/images/products/post.png" alt="" />
<div class="img-overlay" /> <div class="img-overlay" />
<h2>See your products grow</h2> <h2>See your products grow</h2>
<p> <p>
Keep track of your projects progress on the Appwrite Console and see them grow into products users love and use every day. Keep track of your projects progress on the Appwrite Console and see them grow into
</p> products users love and use every day.
</div> </p>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
.wrapper { .wrapper {
display: none; display: none;
padding-block-start: 5rem; padding-block-start: 5rem;
padding-inline: 1.25rem; padding-inline: 1.25rem;
max-width: 800px; max-width: 800px;
margin-inline: auto; margin-inline: auto;
overflow: visible; overflow: visible;
} }
@media (max-width: 1439px) { @media (max-width: 1399px) {
.wrapper { .wrapper {
display: block; display: block;
} }
} }
.infos { .infos {
margin-block-start: 3rem; margin-block-start: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6rem; gap: 6rem;
.info { .info {
h3 { h3 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
.aw-label { .aw-label {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
} }
} }
h4 { h4 {
color: hsl(var(--aw-color-primary)); color: hsl(var(--aw-color-primary));
margin-block-start: 0.75rem; margin-block-start: 0.75rem;
} }
p { p {
margin-block-start: 1rem; margin-block-start: 1rem;
} }
.features { .features {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
margin-block-start: 2rem; margin-block-start: 2rem;
li { li {
--marker-size: 1.25rem; --marker-size: 1.25rem;
--margin-left: calc(var(--marker-size) + 0.75rem); --margin-left: calc(var(--marker-size) + 0.75rem);
position: relative; position: relative;
margin-inline-start: var(--margin-left); margin-inline-start: var(--margin-left);
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: calc(var(--margin-left) * -1); left: calc(var(--margin-left) * -1);
top: 50%; top: 50%;
width: var(--marker-size); width: var(--marker-size);
height: var(--marker-size); height: var(--marker-size);
transform: translateY(-50%); transform: translateY(-50%);
background: url('/images/icons/colored/check.svg') no-repeat; background: url('/images/icons/colored/check.svg') no-repeat;
} }
} }
} }
> img { > img {
width: 100%; width: 100%;
margin-block-start: 2.5rem; margin-block-start: 2.5rem;
} }
} }
} }
.post-wrapper { .post-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: visible; overflow: visible;
position: relative; position: relative;
width: 100%; width: 100%;
padding-block-start: 35rem; padding-block-start: 35rem;
padding-block-end: 5rem; padding-block-end: 5rem;
.img-overlay { .img-overlay {
content: ''; content: '';
background: linear-gradient(to top, black, transparent); background: linear-gradient(to top, black, transparent);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
height: 30rem; height: 30rem;
z-index: 10; z-index: 10;
} }
img { img {
display: block; display: block;
max-block-size: unset; max-block-size: unset;
max-inline-size: 100%; max-inline-size: 100%;
top: 0rem; top: 0rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 37.5rem; width: 37.5rem;
position: absolute; position: absolute;
} }
h2 { h2 {
color: var(--greyscale-50, #ededf0); color: var(--greyscale-50, #ededf0);
text-align: center; text-align: center;
/* Responsive/Display */ /* Responsive/Display */
font-family: Aeonik Pro; font-family: Aeonik Pro;
font-size: 48px; font-size: 48px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 50px; /* 104.167% */ line-height: 50px; /* 104.167% */
letter-spacing: -0.48px; letter-spacing: -0.48px;
max-width: 20rem; max-width: 20rem;
position: relative; position: relative;
z-index: 100; z-index: 100;
} }
p { p {
color: var(--greyscale-400, #97979b); color: var(--greyscale-400, #97979b);
text-align: center; text-align: center;
font-family: Inter; font-family: Inter;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 22px; /* 137.5% */ line-height: 22px; /* 137.5% */
letter-spacing: -0.072px; letter-spacing: -0.072px;
margin-block-start: 1rem; margin-block-start: 1rem;
max-width: 20rem; max-width: 20rem;
z-index: 100; z-index: 100;
} }
} }
</style> </style>

22
src/routes/community/+page.svelte
View File

@@ -595,14 +595,14 @@
Discover Appwrite's community across platforms and join the fun. Discover Appwrite's community across platforms and join the fun.
</p> </p>
</div> </div>
<ul class="aw-multi-columns-1"> <ul class="aw-multi-columns-1" style:--p-col-gap="-1rem">
<li> <li>
<a <a
href="/discord" href="/discord"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical" class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem" style="--card-padding:2rem;rotate: 6deg"
> >
<div class="u-flex-vertical u-main-space-between u-gap-32"> <div class="u-flex-vertical u-main-space-between u-gap-32">
<span <span
@@ -622,7 +622,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical" class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem" style="--card-padding:2rem; rotate: 2deg"
> >
<div class="u-flex-vertical u-main-space-between u-gap-32"> <div class="u-flex-vertical u-main-space-between u-gap-32">
<span <span
@@ -642,7 +642,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical" class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem" style="--card-padding:2rem; rotate: -10deg"
> >
<div class="u-flex-vertical u-main-space-between u-gap-32"> <div class="u-flex-vertical u-main-space-between u-gap-32">
<span <span
@@ -662,7 +662,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical" class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem" style="--card-padding:2rem; rotate: -6deg"
> >
<div class="u-flex-vertical u-main-space-between u-gap-32"> <div class="u-flex-vertical u-main-space-between u-gap-32">
<span <span
@@ -752,4 +752,16 @@
left: -200px; left: -200px;
bottom: -300px; bottom: -300px;
} }
.aw-multi-columns-1 {
.aw-card {
border: 1px solid hsl(var(--aw-color-offset));
}
@media (max-width: 1235px) {
--p-col-gap: 2rem !important;
.aw-card {
rotate: none !important;
}
}
}
</style> </style>

5
src/scss/9-grids/_multi-columns-1.scss
View File

@@ -1,6 +1,7 @@
@use '../abstract' as *; @use '../abstract' as *;
.#{$p}-multi-columns-1 { .#{$p}-multi-columns-1 {
column-width:pxToRem(340); column-gap:pxToRem(32); --p-col-gap: #{pxToRem(32)};
> * { break-inside:avoid; margin-block-end:pxToRem(32); } column-width:pxToRem(340); column-gap:var(--p-col-gap);
> * { break-inside:avoid; margin-block-end:var(--p-col-gap); }
} }