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;
} }

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

@@ -11,7 +11,8 @@
</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,
storage, and more using Appwrite's development platform.
</p> </p>
<div class="infos"> <div class="infos">
@@ -49,7 +50,8 @@
<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
products users love and use every day.
</p> </p>
</div> </div>
</div> </div>
@@ -65,7 +67,7 @@
overflow: visible; overflow: visible;
} }
@media (max-width: 1439px) { @media (max-width: 1399px) {
.wrapper { .wrapper {
display: block; display: block;
} }

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); }
} }