From 0a9558ea30f8345fa0b6005be7f4dc17af16bf61 Mon Sep 17 00:00:00 2001 From: cybrejon Date: Wed, 21 Feb 2024 00:54:11 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20revamped=20the=20about?= =?UTF-8?q?=20page=20to=20look=20more=20modern=20and=20responsive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/themes/simple.css | 203 ++++++++++++++++++++++++++++---- src/templates/views/about.rs | 143 +++++++++++++++++++--- 2 files changed, 308 insertions(+), 38 deletions(-) diff --git a/public/static/themes/simple.css b/public/static/themes/simple.css index 3990799..a9ba3b6 100644 --- a/public/static/themes/simple.css +++ b/public/static/themes/simple.css @@ -1,8 +1,43 @@ /* @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-family: 'Rubik'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); + optional: sans-serif +} +@font-face { + font-family: 'Rubik'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); + optional: sans-serif +} +@font-face { + font-family: 'Rubik'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); + optional: sans-serif +} +@font-face { + font-family: 'Rubik'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); + optional: sans-serif +} +@font-face { + font-family: 'Rubik'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); + optional: sans-serif } * { @@ -20,8 +55,8 @@ body { flex-direction: column; justify-content: space-between; align-items: center; - height: 100vh; - font-family: Rubik, sans-serif; + min-height: 100vh; + font-family: 'Rubik', sans-serif; background-color: var(--background-color); } @@ -459,39 +494,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 +847,41 @@ input:checked + .slider::before { .slider.round::before { border-radius: 50%; } + +@media only screen and (max-width: 1135px) { + .hero-text-container { + width: unset; + } + .features { + grid-template-columns: repeat(2, 1fr); + } +} +@media only screen and (max-width: 705px) { + .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; + } + .about-footnote { + padding: 0 15px; + } +} \ No newline at end of file diff --git a/src/templates/views/about.rs b/src/templates/views/about.rs index 3f34819..e46b200 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,148 @@ 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()) )