diff --git a/app/src/assets/home.css b/app/src/assets/home.css
index 1599f88..54990f5 100644
--- a/app/src/assets/home.css
+++ b/app/src/assets/home.css
@@ -1,4 +1,4 @@
-/* The home screen: search first, then the things a controller user picks from. */
+/* The new tab: logo and search in the middle of the screen, the user's own sites in one row of tiles under it. */
html,
body {
@@ -14,13 +14,17 @@ body {
main {
display: flex;
flex-direction: column;
+ align-items: center;
+ justify-content: center;
gap: var(--space-6);
- max-width: calc(1280 * var(--u));
+ min-height: 100vh;
+ max-width: calc(1080 * var(--u));
margin: 0 auto;
- padding: var(--space-6) var(--space-5) calc(80 * var(--u));
+ padding: var(--space-6) var(--space-5);
+ box-sizing: border-box;
}
-.hero { display: grid; gap: var(--space-4); justify-items: center; padding-top: var(--space-6); }
+.hero { display: grid; gap: var(--space-4); justify-items: center; width: 100%; margin-top: -8vh; }
.logo { display: flex; align-items: center; gap: var(--space-3); }
.logo img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
@@ -51,41 +55,46 @@ main {
}
.engine { color: var(--faint); font-size: var(--text-sm); margin: 0; }
-.block h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 650; color: var(--muted); }
-.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(200 * var(--u)), 1fr)); gap: var(--space-3); }
+
+/* Edge's quick links: a square tile per site, its initial in a circle and the name under it. */
+.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
+.tiles[hidden] { display: none; }
+.card-item { display: contents; }
.card {
display: flex;
+ flex-direction: column;
align-items: center;
- gap: var(--space-3);
- padding: var(--space-3) var(--space-4);
+ justify-content: center;
+ gap: var(--space-2);
+ width: calc(112 * var(--u));
+ height: calc(112 * var(--u));
+ padding: var(--space-2);
border: 2px solid transparent;
border-radius: var(--radius);
- background: var(--surface);
+ background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text);
- font-size: var(--text-base);
- text-align: left;
- transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
+ font-size: var(--text-sm);
+ transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
-.card-item { display: contents; }
-.card.big { padding: var(--space-4); font-size: var(--text-lg); }
.card:hover,
-.card:focus-visible { border-color: var(--accent); transform: translateY(calc(-2 * var(--u))); }
+.card:focus-visible { border-color: var(--accent); background: var(--surface); }
.card i {
display: grid;
place-items: center;
flex: none;
- width: calc(44 * var(--u));
- height: calc(44 * var(--u));
+ width: calc(48 * var(--u));
+ height: calc(48 * var(--u));
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 18%, var(--bg));
color: var(--accent);
+ font-size: var(--text-lg);
font-style: normal;
font-weight: 700;
}
-.card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-footer { display: flex; gap: var(--space-4); justify-content: center; color: var(--faint); font-size: var(--text-xs); flex-wrap: wrap; }
+footer { position: fixed; bottom: var(--space-4); left: 0; right: 0; display: flex; align-items: center; gap: var(--space-4); justify-content: center; color: var(--faint); font-size: var(--text-xs); flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
footer a:hover,
footer a:focus-visible { color: var(--accent); }
diff --git a/app/src/assets/newtab.html b/app/src/assets/newtab.html
index 6ee0329..5ffb14f 100644
--- a/app/src/assets/newtab.html
+++ b/app/src/assets/newtab.html
@@ -19,20 +19,8 @@
-
- Continuar assistindo
-
-
-
-
-
-
+
+