diff --git a/css/Poke-Mobile.jpg b/css/Poke-Mobile.jpg new file mode 100644 index 00000000..aad437a4 Binary files /dev/null and b/css/Poke-Mobile.jpg differ diff --git a/css/landing.css b/css/landing.css index 6d2a8873..29bb81c8 100644 --- a/css/landing.css +++ b/css/landing.css @@ -719,76 +719,12 @@ li > a {cursor: var(--pointer-cursor)} .btn {cursor: var(--pointer-cursor) !important} @font-face { - font-family: "PokeTube Flex"; src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=16683434286881"); + font-family: "PokeTube Flex"; font-style: normal; font-stretch: 1% 800%; font-display: swap; } -blockquote { - background: #f2dda8; - margin: 0; - padding: 6px 12px; - border-radius: 4px; - color: #000; - position: sticky; - top: 12px; - z-index: 5; -} -.header-content { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: 100px; -} -.header-content-start img { - width: 140px; -} -.header-content-end a { - color: #fff; - padding: 10px 12px; - border-radius: 50px; -} -.header-content-end a:hover { - background: #ffffff2e; -} -#fname { - background: #331a22; - border: 2px #612153 solid; - padding: 8px 16px; - border-radius: 24px; - color: #fff; - margin-right: 6px; -} -#fname:focus { - outline: 0; -} -button[type="submit"] { - color: #fff; - background: #331a22; - border: 2px #612153 solid; - border-radius: 24px; - padding: 8px 10px; - cursor: var(--pointer-cursor); -} -button[type="submit"]:hover { - background: #ffffff2e; -} -.footer { - border-top: 1px #ffffff1f solid; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: 100px; - margin-top: auto; -} -.footer a { - color: #fff; - margin-left: 12px; - text-decoration: none; -} @media only screen and (max-width: 1328px) { body { padding: 0 48px !important; @@ -823,20 +759,20 @@ button[type="submit"]:hover { } } .landing { - text-align: center; margin: auto; + position: relative; + margin-top: 240px; + max-width: 1200px; } .landing h1 { font-size: xxx-large; font-family: "PokeTube flex"; font-stretch: ultra-expanded; font-weight: 1000; - text-align: center; } .landing img { - width: 100%; margin-top: 48px; - height: 700px; + height: 503px; object-fit: cover; object-position: top; mask-image: linear-gradient(#5315ff,#0000); @@ -854,7 +790,6 @@ button[type="submit"]:hover { } .features { display: flex; - justify-content: center; } .features p { border-radius: 48px; @@ -870,6 +805,53 @@ button[type="submit"]:hover { border-radius: 24px; margin: -10px 10px -10px -24px; } + +img[src="/static/poke-chan-outfit-a.png"] { + height: 400px; + width: 369px; + mask-image: none; + z-index: 5; + transform: scaleX(1); + float: right; + display: flex; + position: absolute; + right: 10px; + margin: -237px -60px 0px 0px; +} + +.new-feature-set { + display: grid; + margin: 54px 0px 24px 0px; + max-width: 1200px; + grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); + text-align: left; +} +.feature-set { + padding: 32px; +} +.feature-set p { + text-align: left; +} + +.feature-set svg { + width: 32px; + height: 32px; + border-radius: 5rem; + padding: 6px; +} +.feature-set-title { + display: flex; + align-items: center; + gap: 12px; + justify-content: left; +} +.feature-set-title h2 { + font-family: "PokeTube flex"; + font-stretch: ultra-expanded; + font-weight: 1000; + margin: 0px; +} + @media only screen and (max-width: 1420px) { .landing { width: calc(100% - 24px); @@ -911,3 +893,12 @@ video { display: none; } } + + +.adaptive-grid { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); + max-width: 1200px; + margin: auto; + grid-gap: 12px; +} diff --git a/html/landing.ejs b/html/landing.ejs index c91c57fa..b687cfc6 100644 --- a/html/landing.ejs +++ b/html/landing.ejs @@ -2,7 +2,7 @@ This Source Code Form is subject to the terms of the GNU General Public License: - Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube) + Copyright (C) 2021-2024 Poke (https://codeberg.org/Ashley/poke) This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -18,6 +18,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/. ---> + @@ -29,6 +30,7 @@ + @@ -84,28 +86,10 @@ + <%- include('./partials/header.ejs') %> -
-
-
- -

<%- random %>

- -
-
-
-
-
- - - -
-
-
-
+

The Ultimate Privacy App

-

Be Anonymous watching epic videos, searching +

Be Anonymous watching epic videos, searching thingys on the interwebs and listening to music on poketube - the free yt front end thats focused on ur privacy!!

-
-

No Tracking & Ads

-

Very Fast

-

Built-in video downloader

-

Web Search

+ + +
+ + +
+ + +
+
+
+ +

No Tracking and Ads

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+
+ +

Very Fast

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

+
+
+
+ +

Downloader

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+ +

Web Search

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+
+ +

DRM Free

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+
+ +

Games Included

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+ +
+ <%- include('./partials/card', + icon_background='transparent', + icon="none", + title='Join Us', + description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', + actions='true', + + has_secondary_action='true', + secondary_icon='', + secondary_text='Revolt', + secondary_link='#', + + primary_icon='', + primary_text='Matrix', + primary_link='#' + )%> + + <%- include('./partials/card', + icon_background='transparent', + icon="none", + title='Libre and Free', + description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', + actions='true', + + has_secondary_action='true', + secondary_icon='', + secondary_text='GitHub', + secondary_link='#', + + primary_icon='Codeberg logo', + primary_text='Codeberg', + primary_link='#' + )%>
- - -