Skip to content

Commit

Permalink
Merge pull request #61 from appwrite/elad-style-4
Browse files Browse the repository at this point in the history 
Elad style 4
  • Loading branch information
@TorstenDittmann
TorstenDittmann authored Sep 26, 2023
2 parents f3d1fae + 7c291f8 commit 7b254ab
Show file tree
Hide file tree
Showing 16 changed files with 213 additions and 78 deletions.
2 changes: 1 addition & 1 deletion src/lib/layouts/DocsArticle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
<span class="icon-arrow-up" aria-hidden="true" />
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/layouts/DocsTutorial.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
<span class="icon-arrow-up" aria-hidden="true" />
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
</div>
Expand Down
127 changes: 77 additions & 50 deletions src/routes/brand-launch/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,39 @@
import { Main } from '$lib/layouts';
</script>

<div class="u-position-absolute">
<div class="u-position-absolute aw-is-only-mobile u-inset-inline-0">
<svg class="u-width-full-line"
xmlns="http://www.w3.org/2000/svg" width="360" height="661" viewBox="0 0 360 661" fill="none">
<g opacity="0.24" filter="url(#filter0_f_3260_129410)">
<ellipse cx="180" cy="80" rx="999" ry="325" fill="#FD366E"/>
</g>
<defs>
<filter id="filter0_f_3260_129410" x="-1074.02" y="-500.022" width="2508.04" height="1160.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="127.511" result="effect1_foregroundBlur_3260_129410"/>
</filter>
</defs>
</svg>
</div>

<div class="u-position-absolute" style="inline-size:100rem; inset-block-start:calc(50% - 250px); inset-inline-start:50%; transform:translateX(-50%);">
<div class="u-position-absolute u-inset-inline-start-0 aw-u-inset-block-start-100 aw-is-not-mobile">
<img src="/images/pages/brand-lunch/left-side-top-brand.png" alt width="800" style="transform:translateX(-35%)">
</div>
<div class="u-position-absolute u-inset-inline-end-0 aw-u-inset-block-start-100 aw-is-not-mobile">
<img src="/images/pages/brand-lunch/right-side-top-brand.png" alt width="800" style="transform:translateX(35%)">
</div>
</div>

<div class="u-position-absolute u-width-full-line aw-is-not-mobile">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1728"
height="617"
viewBox="0 0 1728 617"
fill="none"
class="u-max-width-100-percent"
class="u-width-full-line"
>
<g opacity="0.24" filter="url(#filter0_f_3260_127073)">
<ellipse cx="864" cy="36" rx="999" ry="325" fill="#FD366E" />
Expand All @@ -36,43 +61,61 @@
<Main>
<div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1">
<div class="aw-container">
<div class="aw-big-padding-section-level-2 aw-u-max-width-800 u-margin-inline-auto">
<div class="aw-container u-position-relative">
<div class="aw-big-padding-section-level-2 aw-u-max-width-800 u-flex u-main-center u-cross-center u-margin-inline-auto aw-u-margin-block-0 "
style="block-size:calc(100vh - 6.375rem)">

<div class="aw-hero aw-u-gap-20">
<h1 class="aw-headline aw-u-color-text-primary">Brand new Appwrite</h1>
<p class="aw-description">
<p class="aw-description aw-u-color-text-primary aw-u-opacity-64">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae diam augue.
Praesent sagittis eget ipsum vitae eleifend.
</p>
</div>

</div>

<div class="aw-big-padding-section-level-2 aw-u-max-width-480">
<div class="aw-hero is-align-start">
<h2 class="aw-title aw-u-color-text-primary">All the tools that developers need</h2>
<p class="aw-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae diam augue.
Praesent sagittis eget ipsum vitae eleifend.
</p>

<div class="aw-big-padding-section-level-2 aw-u-sep-block-start">
<div class="u-stretch u-flex aw-u-flex-vertical-mobile">
<div class="aw-hero is-align-start aw-u-max-width-480 aw-u-padding-block-start-48">
<h2 class="aw-title aw-u-color-text-primary">All the tools that developers need</h2>
<p class="aw-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae diam augue.
Praesent sagittis eget ipsum vitae eleifend.
</p>
</div>
<div class="u-stretch u-flex aw-u-margin-inline-auto-mobile aw-u-margin-block-start-40-mobile">
<img style="margin-block-start:-0.5rem"
class="u-margin-inline-start-auto u-width-full-line u-max-width-500" src="/images/pages/brand-lunch/box.png" alt>
</div>
</div>
</div>

<div class="aw-big-padding-section-level-2">
<div class="aw-grid-1-1-opt-2 aw-u-column-gap-96">
<div class="aw-hero is-align-start">

<div class="aw-big-padding-section-level-2 aw-u-sep-block-start">
<div class="aw-grid-1-1-opt-2">
<div class="aw-hero is-align-start aw-u-padding-block-start-40">
<h2 class="aw-title aw-u-color-text-primary">Eliminating complexity</h2>
<p class="aw-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae diam augue.
</p>
<div class="u-margin-block-start-48">
<img class="u-max-width-100-percent" src="/images/pages/brand-lunch/box-1.png" alt>
</div>
</div>
<div class="aw-hero is-align-start">
<div class="aw-hero is-align-start
aw-u-padding-block-start-40 aw-u-sep-inline-start-not-break1 aw-u-padding-inline-start-48-not-break1">
<h2 class="aw-title aw-u-color-text-primary">
Allowing you to innovate without limits
</h2>
<p class="aw-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae diam augue.
Praesent sagittis eget ipsum vitae eleifend.
</p>
<div class="u-margin-block-start-48">
<img class="u-max-width-100-percent" src="/images/pages/brand-lunch/box-2.png" alt>
</div>
</div>
</div>
</div>
Expand All @@ -83,6 +126,7 @@
>
<div class="u-position-absolute u-inset-inline-start-0">
<svg
class="aw-u-opacity-40-mobile"
xmlns="http://www.w3.org/2000/svg"
width="698"
height="900"
Expand Down Expand Up @@ -200,6 +244,7 @@
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<svg
class="aw-u-opacity-40-mobile"
xmlns="http://www.w3.org/2000/svg"
width="874"
height="900"
Expand Down Expand Up @@ -326,6 +371,7 @@
>
<div class="u-position-absolute u-inset-inline-start-0">
<svg
class="aw-u-opacity-40-mobile"
xmlns="http://www.w3.org/2000/svg"
width="698"
height="900"
Expand Down Expand Up @@ -443,6 +489,7 @@
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<svg
class="aw-u-opacity-40-mobile"
xmlns="http://www.w3.org/2000/svg"
width="874"
height="900"
Expand Down Expand Up @@ -1225,46 +1272,26 @@
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="aw-hero">
<h4 class="aw-title aw-u-color-text-primary">Be a part of #Teamof100</h4>
<p class="aw-main-body-500 u-margin-block-start-4">
Join our rebrand celebration by sharing #teamof100 in your socials for a chance to win
brand-new Appwrite swag.
</p>
<button class="aw-button is-transparent u-cross-child-center u-margin-block-start-16">
<span class="aw-icon-star" aria-hidden="true" />
<span>Share</span>
</button>
</div>
</div>
</div>
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="u-flex u-gap-32">
<div class="aw-media-container u-flex-basis-250 u-stretch">
<img
src="/images/brand/new-brand-grid-mobile.png"
alt="brand visual stuff"
width="100%"
/>
</div>
<div class="aw-media-container u-flex-basis-250 u-stretch">
<img
src="/images/brand/new-brand-grid-mobile.png"
alt="brand visual stuff"
width="100%"
/>
<div class="aw-grid-1-1-opt-2 u-gap-32 u-main-space-between">
<div class="aw-hero is-align-start aw-u-max-width-480">
<h4 class="aw-title aw-u-color-text-primary">Be a part of #Teamof100</h4>
<p class="aw-main-body-500 u-margin-block-start-4 aw-u-color-text-primary aw-u-opacity-64">
Join our rebrand celebration by sharing #teamof100 in your socials for a chance to win
brand-new Appwrite swag.
</p>
<button class="aw-button is-transparent u-margin-block-start-16 is-full-width-mobile">
<span class="aw-icon-star" aria-hidden="true" />
<span>Share</span>
</button>
</div>
<div class="aw-media-container u-flex-basis-250 u-stretch">
<img
src="/images/brand/new-brand-grid-mobile.png"
alt="brand visual stuff"
width="100%"
src="/images/brand/t-shirts.png"
alt="brand visual stuff"
width="100%"
/>
</div>
</div>
<FooterNav />
<MainFooter />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@
</ul>
<div class="u-sep-block-start aw-u-padding-block-20">
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
<span class="icon-arrow-up" aria-hidden="true" />
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
</div>
Expand Down
107 changes: 107 additions & 0 deletions src/routes/search/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte';
</script>

<Main>
<div class="u-position-fixed u-padding-0 u-inset-0 u-z-index-20 u-flex u-main-center u-cross-center"
style="background:hsl(var(--aw-color-black) / 0.3); backdrop-filter:blur(15px);">

<div class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20">
<span class="icon-search u-z-index-5" aria-hidden="true" style="" />
<input class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1" type="search" placeholder="Search"
style="border-end-start-radius:0; border-end-end-radius:0;">
<div class="aw-card is-normal u-overflow-y-auto"
style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem; margin-block-start:-0.0625rem; max-block-size: min(18.75rem, calc(100vh - 5.5rem)); border-block-start-width:0;">

<div class="u-flex-vertical u-gap-24">
<p class="aw-caption-400">No results found for abcdefg </p>
<section>
<h6 class="aw-eyebrow">Recommended</h6>
<ul class="u-margin-block-start-8">
<li>
<a href="/" class="aw-button aw-caption-400 is-text aw-u-trim-1 u-max-width-100-percent aw-u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-max-width-100-percent aw-u-padding-block-4">
<div class="aw-u-trim-1"><span class="aw-u-color-text-secondary">Quick start /</span><span class="aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</div>
<div class="u-inline aw-u-color-text-secondary aw-u-trim-1">Quick start start start start start start start start start start start start start start start start with Flutter</div>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
<li>
<a href="/" class="aw-button is-text aw-u-trim-1 u-max-width-100-percent u-line-height-2 aw-u-padding-block-4">
<span class="u-inline aw-u-color-text-secondary">Quick start /</span>
<span class="u-inline aw-u-color-text-primary">Quick start start start start start start start start start start start start start start with Flutter</span>
</a>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>



<div class="aw-container">



<FooterNav />
<MainFooter />
</div>
</Main>
27 changes: 3 additions & 24 deletions src/scss/6-elements/_media-container.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@use '../abstract' as *;

.#{$p}-media-container {
--p-media-container-border-padding:#{pxToRem(2)};
--p-media-container-border-radius:#{pxToRem(7)};
--p-media-container-border-padding:#{pxToRem(7)};
--p-media-container-border-radius:#{pxToRem(20)};

--p-media-border-radius: #{pxToRem(5)};
--p-media-border-radius: #{pxToRem(16)};

padding: var(--p-media-container-border-padding);
border-radius: var(--p-media-container-border-radius);
Expand All @@ -15,25 +15,4 @@
backdrop-filter: blur(pxToRem(25));

> * { display:block; border-radius:var(--p-media-border-radius); overflow:hidden; }

@media #{$break2} {
--p-media-container-border-padding:#{pxToRem(5)};
--p-media-container-border-radius:#{pxToRem(18)};

--p-media-border-radius: #{pxToRem(15)};
}

@media #{$break3} {
--p-media-container-border-padding:#{pxToRem(6)};
--p-media-container-border-radius:#{pxToRem(22)};

--p-media-border-radius: #{pxToRem(19)};
}

@media #{$break4open} {
--p-media-container-border-padding:#{pxToRem(8)};
--p-media-container-border-radius:#{pxToRem(24)};

--p-media-border-radius: #{pxToRem(20)};
}
}
2 changes: 2 additions & 0 deletions src/scss/9-grids/_grid-side-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
@media #{$break1} {
&.#{$p}-container { padding-inline:pxToRem(20); }
.#{$p}-side-nav { display:none; max-inline-size:none; margin-inline:pxToRem(-20); }
.#{$p}-main-section { padding-inline:pxToRem(20); padding-block-start:pxToRem(32); }

&.is-open {
background:hsl(var(--aw-color-background));
> *:not(.#{$p}-mobile-header, .#{$p}-side-nav) { display:none!important; }
Expand Down
Loading

0 comments on commit 7b254ab

Please sign in to comment.