Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved landing page mobile #972

Merged
merged 1 commit into from
Feb 7, 2024
Merged

Improved landing page mobile #972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion web/landing/assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import '@fontsource-variable/cabin/index.min.css';
import '@oddbird/popover-polyfill';
import './bootstrap.js';
import 'htmx.org'
21 changes: 13 additions & 8 deletions web/landing/templates/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<link rel="preload" fetchpriority="high" href="{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-wght-normal.woff2') }}" as="font" crossorigin>

{% block stylesheets %}
<style>@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-vietnamese-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-ext-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style>
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

Expand All @@ -38,14 +39,14 @@
</a>

<button popovertarget="main-nav" popovertargetaction="show" class="sm:hidden">
<img src="{{ asset('images/icons/menu.svg') }}" alt="menu">
<img src="{{ asset('images/icons/menu.svg') }}" alt="menu" width="32" height="32">
</button>

<nav popover id="main-nav" class="max-sm:absolute border-0 p-0 m-0 max-sm:top-0 max-sm:right-0 sm:relative sm:block text-white bg-blue-200 unset">
<ul class="sm:flex flex-nowrap whitespace-nowrap">
<li class="sm:hidden text-right">
<button popovertarget="main-nav" popovertargetaction="hide" class="sm:hidden h-16 pr-4">
<img src="{{ asset('images/icons/close.svg') }}" alt="close">
<img src="{{ asset('images/icons/close.svg') }}" alt="close" width="32" height="32">
</button>
</li>
<li>
Expand Down Expand Up @@ -86,24 +87,28 @@
</div>

<div class="bg-blue-200">
<div class="mx-auto max-w-screen-xl py-4 flex sm:items-start justify-center text-center max-sm:flex-col lg:pr-[550px]">
<div class="basis-1/3">
<div class="mx-auto max-w-screen-xl max-sm:px-2 py-4 flex flex-wrap sm:flex-nowrap items-start text-center lg:pr-[550px]">
<div class="basis-2/5 sm:basis-1/3">
<img src="{{ asset('images/icons/extract.svg') }}" alt="extract" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Extracts</h2>
<p>Read from various data sources.</p>
</div>

<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">
<span class="basis-1/5 self-center sm:flex-none sm:mx-2">
<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow" width="32" height="32" class="mx-auto">
</span>

<div class="basis-1/3">
<div class="basis-2/5 sm:basis-1/3">
<img src="{{ asset('images/icons/transform.svg') }}" alt="transform" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Transforms</h2>
<p>Shape and optimize for your needs</p>
</div>

<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">
<span class="basis-2/5 self-center ml-auto mt-6 sm:flex-none sm:my-0 sm:mx-2">
<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow" width="32" height="32" class="max-sm:rotate-[135deg]">
</span>

<div class="basis-1/3">
<div class="basis-full sm:basis-1/3">
<img src="{{ asset('images/icons/load.svg') }}" alt="load" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Loads</h2>
<p>Store and secure in one of many available data sinks.</p>
Expand Down
Loading