From 11d23fd1b20259ae5cb0055fafc26a41493ebb28 Mon Sep 17 00:00:00 2001 From: aocosmic <51456343+cybrejon@users.noreply.github.com> Date: Sat, 2 Mar 2024 14:50:35 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20chore(simple):=20modernize=20the?= =?UTF-8?q?=20appearance=20of=20about=20page=20&=20make=20it=20responsive.?= =?UTF-8?q?=20(#530)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * lazyload search result text with css content-visibility * typo, lightning-fast is grammatically correct * revamped logo to look more modern * added class to control how new logo looks and behaves * added class to control how new logo looks and behaves * Replace old websurfx logo in readme file * major visual revamp * removed logo files and switched to inline svg * added `--logo-color` to make svg logo colorscheme adaptive * Update public/static/themes/simple.css Co-authored-by: neon_arch * [CodeFactor] Apply fixes * chores: fix duplicate footer selector and remove unknown pseudo-class * chores: remove missed duplicate footer selector * chores: pass formatter check by deleting empty line at 18 * fix search result title disappearing after being visited * 💄 style: revamped the about page to look more modern and responsive * [CodeFactor] Apply fixes * chore: remove invalid css property * chore: remove lines between or after svg string literals to conform with proper rust formatting * chore: remove blank lines between svg literals to conform with proper Rust formatting * refactor: changed decimal values to percentage, added quotation in urls, add blank lines to before rule declarations and between font-face rules * refactor: correctly remove blank lines between and after svg string literals to conform with proper rust formatting * chore: revert percentage values into decimals and trimmed blank lines before first rule inside media queries * combine font face queries into one * fix: added missing quotation marks on font face url --------- Co-authored-by: neon_arch Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> Co-authored-by: alamin655 Co-authored-by: codefactor-io Co-authored-by: alamin655 <129589283+alamin655@users.noreply.github.com> --- public/static/themes/simple.css | 173 ++++++++++++++++++++++++++++---- src/templates/views/about.rs | 136 ++++++++++++++++++++++--- 2 files changed, 273 insertions(+), 36 deletions(-) diff --git a/public/static/themes/simple.css b/public/static/themes/simple.css index 3990799..bfc8602 100644 --- a/public/static/themes/simple.css +++ b/public/static/themes/simple.css @@ -1,8 +1,11 @@ /* @import url('./catppuccin-mocha.css'); */ @font-face { font-family: Rubik; - src: url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap'); - fallback: sans-serif; + font-style: normal; + font-weight: 200 600; + font-stretch: 0% 200%; + font-display: swap; + src: url("https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nErXyi0A.woff2") format('woff2'); } * { @@ -20,7 +23,7 @@ body { flex-direction: column; justify-content: space-between; align-items: center; - height: 100vh; + min-height: 100vh; font-family: Rubik, sans-serif; background-color: var(--background-color); } @@ -459,39 +462,121 @@ footer div { font-size: 1.5rem; color: var(--foreground-color); padding-bottom: 10px; + max-width: 1100px; + margin: 14rem auto; + display: flex; + flex-direction: column; + row-gap: 100px; } .about-container article h1 { color: var(--color-two); - font-size: 2.8rem; + font-size: 4.5rem; } -.about-container article div { - padding-bottom: 15px; +.about-container article .logo-container { + display: flex; + align-items: center; + justify-content: center; +} + +.about-container article .logo-container svg { + width: clamp(200px, 530px, 815px); +} + +.about-container article .text-block { + box-shadow: 0 0 0 100vmax var(--foreground-color); + background-color: var(--foreground-color); + clip-path: inset(0 -100vmax); + padding: 90px 0; + display: flex; + gap: 40px; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + color: var(--background-color); +} + +.about-container article .text-block .text-block-title { + font-size: 64px; + font-weight: 500; +} + +.hero-text-container { + width: 860px; +} + +.hero-text { + font-size: 45px; + font-weight: 200; } .about-container a { color: var(--color-three); } -.about-container article h2 { - color: var(--color-three); - font-size: 1.8rem; - padding-bottom: 10px; -} - -.about-container p { - color: var(--foreground-color); - font-size: 1.6rem; - padding-bottom: 10px; -} - -.about-container h3 { - font-size: 1.5rem; -} - .about-container { width: 80%; + margin-bottom: 140px; +} + +.feature-list { + padding: 35px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + row-gap: 60px; +} + +.feature-list-title { + text-align: center; + font-size: 64px; + font-weight: 500; +} + +.features { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; +} + +.feature-card { + background-color: var(--foreground-color); + color: var(--background-color); + text-align: center; + display: flex; + padding: 30px; + border-radius: 24px; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 15px; +} + +.feature-card-header { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + row-gap: 15px; +} + +.feature-card-header h4 { + font-size: 33px; + font-weight: 500; +} + +.feature-card-body p { + font-size: 20px; + font-weight: 200; +} + +.about-footnote { + font-size: 24px; + text-align: center; + color: var(--foreground-color); } /* Styles for the settings page */ @@ -730,3 +815,47 @@ input:checked + .slider::before { .slider.round::before { border-radius: 50%; } + +@media screen and (width <= 1136px) { + .hero-text-container { + width: unset; + } + + .features { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width <= 706px) { + .about-container article .logo-container svg { + width: clamp(200px, 290px, 815px); + } + + .about-container article .text-block .text-block-title { + font-size: 33px; + } + + .hero-text { + font-size: 22px; + } + + .about-container { + width: unset; + } + + .feature-list-title { + font-size: 33px; + } + + .features { + grid-template-columns: 1fr; + } + + .feature-list { + padding: 35px 0; + } + + .feature-card { + border-radius: 0; + } +} \ No newline at end of file diff --git a/src/templates/views/about.rs b/src/templates/views/about.rs index 3f34819..2b4de53 100644 --- a/src/templates/views/about.rs +++ b/src/templates/views/about.rs @@ -1,6 +1,6 @@ //! A module that handles the view for the about page in the `websurfx` frontend. -use maud::{html, Markup}; +use maud::{html, Markup, PreEscaped}; use crate::templates::partials::{footer::footer, header::header}; @@ -15,33 +15,141 @@ use crate::templates::partials::{footer::footer, header::header}; /// /// It returns the compiled html markup code as a result. pub fn about(colorscheme: &str, theme: &str, animation: &Option) -> Markup { + let logo_svg = r#" + + + + + + + + "#; + let feature_lightning = r#" + + "#; + let feature_secure = r#" + + "#; + let feature_clean = r#" + + "#; + let feature_privacy = r#" + + "#; + let feature_foss = r#" + + "#; + let feature_customizable = r#" + + "#; html!( (header(colorscheme, theme, animation)) main class="about-container"{ article { - div{ - h1{"Websurfx"} - hr size="4" width="100%" color="#a6e3a1"{} - } - p{"A modern-looking, lightning-fast, privacy-respecting, secure meta search engine written in Rust. It provides a fast and secure search experience while respecting user privacy."br{}" It aggregates results from multiple search engines and presents them in an unbiased manner, filtering out trackers and ads." + div class="logo-container" { + (PreEscaped(logo_svg)) } - h2{"Some of the Top Features:"} + div class="text-block" { + h3 class="text-block-title" {"Why Websurfx?"} + div class="hero-text-container" { + p class="hero-text" {"Websurfx aggregates results from multiple search engines and presents them in an unbiased manner, filtering out trackers and ads."} + } + } - ul{strong{"Lightning fast "}"- Results load within milliseconds for an instant search experience."} + div class="feature-list" { + h3 class="feature-list-title" {"Features"} + div class="features" { - ul{strong{"Secure search"}" - All searches are performed over an encrypted connection to prevent snooping."} + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_lightning)) } + h4 { + "Lightning-fast" + } + } + div class="feature-card-body" { + p { + "Results load within milliseconds for an instant search experience." + } + } + } - ul{strong{"Ad free results"}" - All search results are ad free and clutter free for a clean search experience."} + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_secure)) } + h4 { + "Secure Search" + } + } + div class="feature-card-body" { + p { + "All searches are performed over an encrypted connection to prevent snooping." + } + } + } - ul{strong{"Privacy focused"}" - Websurfx does not track, store or sell your search data. Your privacy is our priority."} + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_clean)) } + h4 { + "Ad-free Results" + } + } + div class="feature-card-body" { + p { + "All search results are ad free and clutter free for a clean search experience." + } + } + } - ul{strong{"Free and Open source"}" - The entire project's code is open source and available for free on "{a href="https://github.com/neon-mmd/websurfx"{"GitHub"}}" under an GNU Affero General Public License."} + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_privacy)) } + h4 { + "Privacy-focused" + } + } + div class="feature-card-body" { + p { + "Websurfx does not track, store or sell your search data. Your privacy is our priority." + } + } + } + + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_foss)) } + h4 { + "Free and Open-source" + } + } + div class="feature-card-body" { + p { + "The entire project's code is open source and available for free on "{a href="https://github.com/neon-mmd/websurfx"{"GitHub"}}"." + } + } + } + + div class="feature-card" { + div class="feature-card-header" { + div class="feature-card-icon" { (PreEscaped(feature_customizable)) } + h4 { + "Highly Customizable" + } + } + div class="feature-card-body" { + p { + "Websurfx comes with 9 built-in color themes and supports creating custom themes effortlessly." + } + } + } + } + } - ul{strong{"Highly customizable"}" - Websurfx comes with 9 built-in color themes and supports creating custom themes effortlessly."} } - h3{"Devoloped by: "{a href="https://github.com/neon-mmd/websurfx"{"Websurfx team"}}} + h3 class="about-footnote" {"Developed by the "{a href="https://github.com/neon-mmd/websurfx"{"Websurfx team"}}} } (footer()) )