From f2cbe9f008f72f8f7ea0a6d67f3c14de2db5bf95 Mon Sep 17 00:00:00 2001 From: Cassidy James Blaede Date: Tue, 5 Nov 2024 16:43:49 -0700 Subject: [PATCH] Refresh styling --- _layouts/app.html | 13 +++---------- _sass/_apps.scss | 5 ----- _sass/_buttons.scss | 23 ++++++++++++----------- _sass/_header.scss | 8 ++++---- _sass/_home.scss | 42 +++++++++++++++--------------------------- _sass/_infobars.scss | 6 ------ css/main.scss | 25 ++++++++++++++++++++++++- index.html | 27 ++++++--------------------- 8 files changed, 64 insertions(+), 85 deletions(-) delete mode 100644 _sass/_infobars.scss diff --git a/_layouts/app.html b/_layouts/app.html index 47500f0a..753f285e 100644 --- a/_layouts/app.html +++ b/_layouts/app.html @@ -5,17 +5,10 @@
{{ page.title }} icon + alt="{{ page.title }} icon" + />

{{ page.title }}

Open in App Center diff --git a/_sass/_apps.scss b/_sass/_apps.scss index 925e9259..7a57e73f 100644 --- a/_sass/_apps.scss +++ b/_sass/_apps.scss @@ -36,8 +36,3 @@ } } -.get-it .call-to-action { - margin-top: 1em; - text-align: center; -} - diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss index ba67f65f..2e6d37a2 100644 --- a/_sass/_buttons.scss +++ b/_sass/_buttons.scss @@ -1,6 +1,6 @@ .button { appearance: none; - border-radius: 0.25em; + border-radius: 0.5em; color: inherit; display: inline-block; font-family: inherit; @@ -10,13 +10,19 @@ outline: 0; text-align: center; text-decoration: none; - transition: all 100ms ease-in; + transition: none; -moz-appearance: none; -webkit-appearance: none; &:focus, - &:hover { - background-color: rgba(white, 0.5); + &:hover, + &:active { + background-color: var(--accent); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.125), + inset 0 0 0 0.125em rgba(255, 255, 255, 0.25); + color: white; + filter: brightness(1.1); } &:active { @@ -25,12 +31,7 @@ } .button.suggested { - background-color: #f15a22; - color: #fff; + background-color: var(--accent); + color: white; font-weight: bold; - - &:focus, - &:hover { - filter: brightness(1.1); - } } diff --git a/_sass/_header.scss b/_sass/_header.scss index e358ab2b..ef781fca 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -36,12 +36,12 @@ header { .button { display: block; - font-size: 16px; - padding: 12px 24px; + font-size: 1rem; + padding: 0.75em 1em; margin-left: auto; margin-right: auto; - margin-top: 0.5em; - max-width: 225px; + margin-top: 1em; + max-width: 12em; @media (min-width: 720px) { float: right; diff --git a/_sass/_home.scss b/_sass/_home.scss index 2da3262f..d23fb018 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -8,56 +8,44 @@ &.apps { display: grid; - grid-template-columns: repeat(auto-fill, 111px); - // flex-wrap: wrap; + grid-template-columns: repeat(auto-fill, 12em); + justify-content: space-around; margin: 0 auto; - justify-content: space-between; - max-width: 1000px; + max-width: 1200px; width: 95vw; .app { - box-shadow: - 0px 6px 24px 0px rgba(0, 0, 0, 0), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0), - inset 0px 1px 0px 1px rgba(255, 255, 255, 0); + border-radius: 2em; font-weight: normal; margin: 0.5em 0; - padding: 1em 0.5em; + padding: 2em 0.5em; text-align: left; - transition: all 200ms ease; vertical-align: top; - width: 111px; - &:hover,&:focus { + &:hover, + &:focus { background-image: linear-gradient( - rgba(255, 255, 255, 0.25), - rgba(255, 255, 255, 0.125) + rgba(255, 255, 255, 0.125), + rgba(255, 255, 255, 0) ); - box-shadow: - 0px 6px 24px 0px rgba(0, 0, 0, 0.1), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), - inset 0px 1px 0px 1px rgba(255, 255, 255, 0.25); } - img { + .icon { display: block; - height: 64px; margin: 0 auto 0.5em; - width: 64px; } .title { display: block; + font-size: 1.5em; + margin-bottom: 0.5em; text-align: center; } .summary { - display: none; - } - - &.hera, - &.loki { - opacity: 0.67; + display: block; + text-align: center; + text-wrap: balance; } } } diff --git a/_sass/_infobars.scss b/_sass/_infobars.scss deleted file mode 100644 index 93cf93c1..00000000 --- a/_sass/_infobars.scss +++ /dev/null @@ -1,6 +0,0 @@ -.infobar { - background: #eee; - color: #333; - padding: 1em 0.5em; - text-align: center; -} diff --git a/css/main.scss b/css/main.scss index 2b88cc1e..c956b992 100644 --- a/css/main.scss +++ b/css/main.scss @@ -4,7 +4,6 @@ @import "typography"; @import "buttons"; -@import "infobars"; @import "header"; @import "footer"; @@ -51,3 +50,27 @@ body { .main { padding: 2em 1em; } + +kbd { + border-radius: 0.25em; + box-shadow: + 0 0 0 1px rgba(black, 0.25), + inset 0 0 0 1px rgba(white, 0.25); + display: inline-block; + font-family: inherit; + font-size: 0.8em; + font-weight: bold; + margin-block: -0.25em; + margin-inline: 0.125em; + padding: 0.25em 0.5em; +} + +.icon { + filter: drop-shadow(0 0.2em 0.25em rgba(black, 0.33)); + height: 64px; + width: 64px; + + @media (prefers-color-scheme: dark) { + filter: drop-shadow(0 0 0.75em rgba(white, 0.125)); + } +} diff --git a/index.html b/index.html index 01265b05..170ac69b 100644 --- a/index.html +++ b/index.html @@ -9,37 +9,22 @@

{{ site.title }}

{{ site.summary }}

-

Get these {{ flatpak_apps | size }} apps on Endless OS.

+

Use your browser’s “Find” feature (i.e. CtrlF or CmdF) to search.

{% for app in flatpak_apps %} {% unless app.app_id == "com.google.Chrome" %} - {{ app.title }} icon + {{ app.title }} icon {{ app.title }} {{ app.summary }} - - {% endunless %} {% endfor %}