From 1e401627afaa35b7d8fc4913c98ac64a290fda36 Mon Sep 17 00:00:00 2001 From: Sophie Herold Date: Mon, 3 Jan 2022 17:50:51 +0100 Subject: [PATCH 1/5] Add gradient to app header --- Cargo.toml | 2 +- scss/app.scss | 39 ++++++++++++++++++++++------------ scss/style.scss | 52 +++++++++++++++++++++++++-------------------- src/context.rs | 4 ++++ src/svg.rs | 12 +++++++++-- templates/app.html | 53 ++++++++++++++++++++++++---------------------- 6 files changed, 98 insertions(+), 64 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 0ec3725..f84d2ba 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -36,7 +36,7 @@ serde_json = "1.0" serde_yaml = "0.8" structopt = "0.3" svgcleaner = "0.9" -tera = "1.2" +tera = "1.15" tiny-skia = "*" tokio = { version = "1", features = ["full"] } tokio-util = { version = "0.6", features = ["full"] } diff --git a/scss/app.scss b/scss/app.scss index 2a6c9cd..aae8134 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -1,7 +1,31 @@ header.app { - padding: 1em 1em 45px; - background: var(--primary-color); + background-color: var(--primary-color); + background: linear-gradient( + -25deg, + var(--primary-color-variant-1), + var(--primary-color-variant-1), + var(--primary-color-variant-2), + var(--primary-color-variant-2) + ); color: var(--secondary-color); +} + +header.app .bar { + nav a { + color: var(--secondary-color); + } + + nav a:hover { + background: var(--secondary-color); + color: var(--primary-color); + opacity: 0.8; + filter: none; + transition: none; + } +} + +header.app .banner { + padding: 1em 1em 45px; box-sizing: border-box; display: flex; @@ -49,17 +73,6 @@ header.app { } } -body.app header.top { - background: var(--primary-color); - color: var(--secondary-color); - - nav a:hover { - background: var(--secondary-color); - color: var(--primary-color); - opacity: 0.8; - } -} - h2 { margin-top: 10px; } diff --git a/scss/style.scss b/scss/style.scss index 96fc92f..59458be 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -64,33 +64,22 @@ h2:not(:first-of-type) { margin-top: 2.5em; } -header.top { +.bar { font-size: 17px; - color: var(--secondary-color); + display: flex; + justify-content: space-between; + align-items: center; + max-width: var(--content-width); height: var(--header-height); - top: 0; - left: 0; - right: 0; - z-index: 5; - background: #241f31; + margin: auto; - & > div { - display: flex; - justify-content: space-between; - align-items: center; - max-width: var(--content-width); - height: var(--header-height); - margin: auto; - - padding: 0 var(--content-padding); - box-sizing: border-box; - - a, a:visited, a:hover { - color: var(--secondary-color); - text-decoration: none; - } - } + padding: 0 var(--content-padding); + box-sizing: border-box; + a, a:visited, a:hover { + color: var(--secondary-color); + text-decoration: none; + } nav { display: block; @@ -140,6 +129,23 @@ header.top { } } +header.top { + color: var(--secondary-color); + height: var(--header-height); + top: 0; + left: 0; + right: 0; + z-index: 5; + background: #241f31; + + & > div { + @extend .bar; + } + + + +} + .logo { display: flex; diff --git a/src/context.rs b/src/context.rs index 74b3aa0..6c7bac1 100644 --- a/src/context.rs +++ b/src/context.rs @@ -63,6 +63,8 @@ pub struct AppOut { form_factors: Vec, key_colors: Option, background_color: String, + background_color_v1: String, + background_color_v2: String, text_color: String, on_flathub: bool, flathub_stats_installs: Option, @@ -153,6 +155,8 @@ impl Out for App { .find(|(key, _)| key == &"GnomeSoftware::key-colors") .and_then(|(_, value)| value.clone()), background_color: crate::utils::to_css_color(&app.background_color), + background_color_v1: crate::utils::to_css_color(&crate::svg::lighten(&app.background_color)), + background_color_v2: crate::utils::to_css_color(&crate::svg::darken(&app.background_color)), text_color: crate::utils::to_css_color(&app.text_color), on_flathub: app.on_flathub, flathub_stats_installs: app diff --git a/src/svg.rs b/src/svg.rs index bd6ae4c..e892a1b 100644 --- a/src/svg.rs +++ b/src/svg.rs @@ -167,6 +167,14 @@ pub fn generate_icon(icon: &str, size: u32, shade: f32, out_filename: &str) { render(&wrap_icon, size, size, out_filename); } +pub fn darken(color: &palette::Srgb) -> palette::Srgb { +palette::Srgb::from_linear(color.into_linear().darken(0.08)) +} + +pub fn lighten(color: &palette::Srgb) -> palette::Srgb { +palette::Srgb::from_linear(color.into_linear().lighten(0.08)) +} + fn generate_card( image_width: u32, image_height: u32, @@ -176,8 +184,8 @@ fn generate_card( out_filename: &str, extra_code: &str, ) { - let color1 = palette::Srgb::from_linear(color.into_linear().lighten(0.08)); - let color2 = palette::Srgb::from_linear(color.into_linear().darken(0.08)); + let color1 = lighten(color); + let color2 = darken(color); let wrap_card = format!( r##" diff --git a/templates/app.html b/templates/app.html index 4ee1853..da18db1 100644 --- a/templates/app.html +++ b/templates/app.html @@ -26,34 +26,14 @@ {% endblock head %} {% block header %} -
- -
{% endblock header %} {% block content %} @@ -61,10 +41,33 @@
-
-- GitLab From ee80c04aa9dbe18112ba8ea3843cb53fae8b71f4 Mon Sep 17 00:00:00 2001 From: Sophie Herold Date: Fri, 7 Jan 2022 23:29:18 +0100 Subject: [PATCH 2/5] Add background pattern to header --- assets/header-background.svg | 2 ++ scss/app.scss | 27 ++++++++++++++++++++++++--- scss/overview.scss | 2 +- scss/style.scss | 2 +- src/svg.rs | 2 +- 5 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 assets/header-background.svg diff --git a/assets/header-background.svg b/assets/header-background.svg new file mode 100644 index 0000000..31d3e3e --- /dev/null +++ b/assets/header-background.svg @@ -0,0 +1,2 @@ + + diff --git a/scss/app.scss b/scss/app.scss index aae8134..3e538b2 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -8,19 +8,40 @@ header.app { var(--primary-color-variant-2) ); color: var(--secondary-color); + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -150%; + height: 400%; + transform: rotate(-10deg); + background-image: url("header-background.svg"); + background-position: center; + opacity: 0.04; + } } header.app .bar { - nav a { + position: relative; + + a { color: var(--secondary-color); + transition: none; + } + + a:hover { + filter: none; + transition: none; } nav a:hover { background: var(--secondary-color); color: var(--primary-color); opacity: 0.8; - filter: none; - transition: none; } } diff --git a/scss/overview.scss b/scss/overview.scss index 8d19b48..e61b7e2 100644 --- a/scss/overview.scss +++ b/scss/overview.scss @@ -1,6 +1,6 @@ body.overview { --content-width: 1020px; - --header-color: #f6f5f4; + --header-color: #ffffff; --secondary-text-color: #5e5c64; @media (prefers-color-scheme: dark) { diff --git a/scss/style.scss b/scss/style.scss index 59458be..8efb7ff 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -4,7 +4,7 @@ body { --text-color: #3d3846; --background-color: white; --link-color: #4a86cf; - --tile-hover-color: #f6f5f4; + --tile-hover-color: #ffffff; --secondary-color: #deddda; --content-width: 790px; diff --git a/src/svg.rs b/src/svg.rs index e892a1b..759bb1e 100644 --- a/src/svg.rs +++ b/src/svg.rs @@ -7,7 +7,7 @@ use palette::Shade; use appstream::AppId; fn light_default() -> palette::Srgb { - palette::Srgb::from(0xf6f5f4).into_format() + palette::Srgb::from(0xffffff).into_format() } fn dark_default() -> palette::Srgb { -- GitLab From 294cfd8c50c3663aa659a2fc7e7fc1104258e138 Mon Sep 17 00:00:00 2001 From: Sophie Herold Date: Sat, 8 Jan 2022 00:15:32 +0100 Subject: [PATCH 3/5] assets: Fix broken icons in header bg --- assets/header-background.svg | 2 +- scss/app.scss | 4 ++-- scss/style.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/header-background.svg b/assets/header-background.svg index 31d3e3e..5394869 100644 --- a/assets/header-background.svg +++ b/assets/header-background.svg @@ -1,2 +1,2 @@ - + diff --git a/scss/app.scss b/scss/app.scss index 3e538b2..7cc97e9 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -14,8 +14,8 @@ header.app { &::before { content: ""; position: absolute; - left: 0; - right: 0; + left: -10%; + right: -10%; top: -150%; height: 400%; transform: rotate(-10deg); diff --git a/scss/style.scss b/scss/style.scss index 8efb7ff..59458be 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -4,7 +4,7 @@ body { --text-color: #3d3846; --background-color: white; --link-color: #4a86cf; - --tile-hover-color: #ffffff; + --tile-hover-color: #f6f5f4; --secondary-color: #deddda; --content-width: 790px; -- GitLab From f998ccdb10408a09852397db0f739d3eb0b37c35 Mon Sep 17 00:00:00 2001 From: Sophie Herold Date: Sat, 8 Jan 2022 15:12:50 +0100 Subject: [PATCH 4/5] Optimize page load performance --- scss/style.scss | 3 +++ templates/app.html | 2 +- templates/macros.html | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/style.scss b/scss/style.scss index 59458be..e7c9ae0 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -33,18 +33,21 @@ body { @font-face{ font-family: Cantarell; src: url("fonts/Cantarell-Regular.woff2"); + font-display: swap; } @font-face{ font-family: Cantarell; font-weight: bold; src: url("fonts/Cantarell-Bold.woff2"); + font-display: swap; } @font-face { font-family: Cantarell; font-weight: 800; src: url("fonts/Cantarell-ExtraBold.woff2"); + font-display: swap; } html { diff --git a/templates/app.html b/templates/app.html index da18db1..888818f 100644 --- a/templates/app.html +++ b/templates/app.html @@ -64,7 +64,7 @@ diff --git a/templates/macros.html b/templates/macros.html index 45eac73..0cedfad 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -11,7 +11,7 @@ -%}
  • - +
    {{ app.name }} {%- if "mobile" in app.form_factors -%} -- GitLab From 0bed6d40ce32899b078a7a9bd9281ef69af81344 Mon Sep 17 00:00:00 2001 From: Sophie Herold Date: Sat, 8 Jan 2022 15:23:13 +0100 Subject: [PATCH 5/5] Replace broken icon in header bg --- assets/header-background.svg | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/header-background.svg b/assets/header-background.svg index 5394869..bea2f7a 100644 --- a/assets/header-background.svg +++ b/assets/header-background.svg @@ -1,2 +1 @@ - - + \ No newline at end of file -- GitLab