Refresh styling

endlessm · Nov 5, 2024 · f2cbe9f · f2cbe9f
1 parent f9f487d
commit f2cbe9f
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 85 deletions.
diff --git a/_layouts/app.html b/_layouts/app.html
@@ -5,17 +5,10 @@
 <header>
   <div class="constrain">
     <img class="icon" width="64" height="64"
-      {% for icon in page.icons %}
-        {% if icon[0] == "64@2" %}
-          srcset="{{ icon[1] | absolute_url }} 2x"
-        {% elsif icon[0] == "128" %}
-          srcset="{{ icon[1] | absolute_url }}"
-        {% elsif icon[0] == "64" %}
-          srcset="{{ icon[1] | absolute_url }}"
-        {% endif %}
-      {% endfor %}
+      srcset="{{ site.baseurl }}/images/icons/64x64/{{ page.app_id }}.png"
       src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
-    alt="{{ page.title }} icon" />
+      alt="{{ page.title }} icon"
+    />
 
     <h1>{{ page.title }}</h1>
     <a class="button suggested" href="appstream://{{ page.app_id }}">Open in App Center</a>

diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -9,37 +9,22 @@
 <div class="home main constrain">
   <h1>{{ site.title }}</h1>
   <h2>{{ site.summary }}</h2>
-  <p>Get these {{ flatpak_apps | size }} apps on Endless OS.</p>
+  <p>Use your browser’s “Find” feature (i.e. <kbd>Ctrl</kbd><kbd>F</kbd> or <kbd>Cmd</kbd><kbd>F</kbd>) to search.</p>
 </div>
 
 <div class="home apps">
   {% for app in flatpak_apps %}
     {% unless app.app_id == "com.google.Chrome" %}
       <a class="app button {{ app.dist }}" href="{{ app.app_id | relative_url }}" title="{{ app.summary }}" id="{{ app.app_id }}" tabindex="0">
-        <img width="64" height="64"
-          {% for icon in app.icons %}
-            {% if icon[0] == "64@2" %}
-              srcset="{{ icon[1] | absolute_url }} 2x"
-            {% elsif icon[0] == "128" %}
-              srcset="{{ icon[1] | absolute_url }}"
-            {% elsif icon[0] == "64" %}
-              srcset="{{ icon[1] | absolute_url }}"
-            {% endif %}
-          {% endfor %}
-          src="{{ '/images/dotted-box-symbolic.svg' | absolute_url }}"
-        alt="{{ app.title }} icon" />
+        <img class="icon" width="64" height="64" loading="lazy"
+          srcset="{{ site.baseurl }}/images/icons/64x64/{{ app.app_id }}.png"
+          src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
+          alt="{{ app.title }} icon"
+        />
 
         <span class="title">{{ app.title }}</span>
         <span class="summary">{{ app.summary }}</span>
       </a>
-
-      <style>
-        .app[id="{{ app.app_id }}"]:hover,
-        .app[id="{{ app.app_id }}"]:focus {
-          background-color: {% if app.color.primary != "((color_primary))" %}{{ app.color.primary }}{% else %}{{ site.color.primary }}{% endif %};
-          color: {% if app.color.primary-text != "((color_text))" %}{{ app.color.primary-text }}{% else %}{{ site.color.primary-text }}{% endif %};
-        }
-      </style>
     {% endunless %}
   {% endfor %}
 </div>