-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1bd3f02
commit 8ab1779
Showing
5 changed files
with
165 additions
and
86 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <style scope='global'> | ||
| main { | ||
| color: var(--ateneo); | ||
| } | ||
|
|
||
| h1 span:nth-child(2), | ||
| main h2 { | ||
| color: var(--dark-purple); | ||
| } | ||
|
|
||
| .text-container { | ||
| max-inline-size: 42rem; | ||
| } | ||
|
|
||
| #cloud-wide { | ||
| translate: 20% 50%; | ||
| z-index: -1; | ||
| inline-size: max(300px, 60vw); | ||
| opacity: 0.1; | ||
| } | ||
|
|
||
| #cloud-chunky { | ||
| translate: -20% -50%; | ||
| z-index: -1; | ||
| inline-size: max(100px, 40vw); | ||
| opacity: 0.2; | ||
| } | ||
|
|
||
| landing-axol-on-rainbow-and-cloud { | ||
| inline-size: 66%; | ||
| } | ||
|
|
||
| #axol-wink { | ||
| max-inline-size: min(50vw, 12rem); | ||
| } | ||
| </style> | ||
|
|
||
| <docs-symbols></docs-symbols> | ||
|
|
||
| <editorial-header></editorial-header> | ||
|
|
||
| <showcase-white-to-blue> | ||
| <main class='leading3 pi0'> | ||
| <header class='relative z1 mi-auto'> | ||
| <h1 class='text4 text6-lg text7-xl text-center tracking-2 leading1 pb5 pb8-lg'> | ||
| <span class='block'>Why</span> | ||
| <span class='block font-semibold'>Enhance?</span> | ||
| </h1> | ||
|
|
||
| <div class='text-container mi-auto text1 text2-lg'> | ||
| <p> | ||
| Our mission is to enable anyone to build multi-page dynamic web apps while staying as close to the web platform as possible. | ||
| </p> | ||
| <p class='mb4'> | ||
| Enhance fills in the gaps to make building for both the backend and the browser a seamless experience for web authors and consumers. | ||
| </p> | ||
| </div> | ||
|
|
||
| <img id='cloud-wide' class='absolute mb-auto inset-b-0 inset-ie-0' src='/_public/img/landing/cloud-purple-wide.svg' alt='' /> | ||
| <img id='cloud-chunky' class='absolute mb-auto inset-b-0 inset-is-0' src='/_public/img/landing/cloud-purple-medium.svg' alt='' /> | ||
| </header> | ||
|
|
||
| <div class='text-container mi-auto text1-lg flex flex-col gap0 pbe8'> | ||
| <p> | ||
| Modern JavaScript frameworks introduce more problems than they solve by attempting to recreate native web platform features, while at the same time adding unnecessary weight and complexity. This is challenging to unravel, especially when your framework or application dependencies break. | ||
| </p> | ||
| <p> | ||
| Enhance approaches things differently. It provides a dependable foundation built on standards-based web platform features, while offering quality of life improvements for developers and happy paths to delivering exceptional user experience. This allows developers to create web applications that are lightweight, flexible, and future-proof. | ||
| </p> | ||
|
|
||
| <landing-axol-on-rainbow-and-cloud class='mb4 mi-auto'></landing-axol-on-rainbow-and-cloud> | ||
|
|
||
| <h2 class='text2 text4-lg text5-xl tracking-2 leading1 font-medium mb0'> | ||
| Our criteria for success | ||
| </h2> | ||
| <h3 class='text1 text2-lg tracking-1 leading1 font-medium'> | ||
| Author and deliver HTML pages | ||
| </h3> | ||
| <p> | ||
| Enhance should allow developers to write components as pure functions that return HTML. These functions should render on the server to deliver complete HTML, available immediately to the end user. | ||
| </p> | ||
|
|
||
| <h3 class='text1 text2-lg tracking-1 leading1 font-medium mbs0'> | ||
| Use web standards | ||
| </h3> | ||
| <p> | ||
| Enhance should take care of the tedious parts of development, allowing you to use today’s web platform features more efficiently. As new standards and platform features become generally available, Enhance will make way for them. | ||
| </p> | ||
|
|
||
| <h3 class='text1 text2-lg tracking-1 leading1 font-medium mbs0'> | ||
| Progressively enhance working HTML | ||
| </h3> | ||
| <p> | ||
| Enhance should allow for easy progressive enhancement, so that working HTML can be further upgraded to include additional functionality with JavaScript. | ||
| </p> | ||
|
|
||
| <h2 class='text2 text4-lg text5-xl tracking-2 leading1 font-medium mbs4 mbe0'> | ||
| The result | ||
| </h2> | ||
| <p> | ||
| With Enhance, you spend more time adding new features to your projects and less time chasing breaking changes from dependencies. Your app can scale without ever-increasing build times and JavaScript payloads. | ||
| </p> | ||
| <p> | ||
| With direct access to all available browser APIs (like forms, validation, and style encapsulation), there is no need to cobble together libraries and polyfills to develop a complex application. Skeleton screens and spinners be gone! Flashes of unstyled content (FOUC) or layout shifts from delayed JavaScript don’t belong anymore. | ||
| </p> | ||
| <p> | ||
| Using just HTML, CSS, and a sprinkling of JavaScript, Enhance unlocks the delivery of complex dynamic applications in harmony with the web platform. It empowers developers to spend their time on interesting domain problems, leading to more engaging products with less thrash. | ||
| </p> | ||
| <p> | ||
| Experience how joyful web development can be — <a href='/docs/' class='underline font-medium'>get started with Enhance today!</a> | ||
| </p> | ||
|
|
||
| <img id='axol-wink' src='/_public/img/landing/axol-wink.svg' alt='' class='mbs4 mi-auto' /> | ||
| </div> | ||
|
|
||
|
|
||
| </main> | ||
| </showcase-white-to-blue> | ||
|
|
||
| <landing-footer class='pb4'></landing-footer> | ||
|
|