[FLORA-378] Breadcrumbs for the package name and sub-resources (#431)

* [FLORA-378] Breadcrumbs for the package name and sub-resources

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Introduce a public API ([#415](https://github.com/flora-pm/flora-server/pull/415))
 * Fix mismatching OpenSearch names ([#427](https://github.com/flora-pm/flora-server/pull/427))
 * Fix the margins of the search bar in mobile view ([#430](https://github.com/flora-pm/flora-server/pull/430))
+* Have proper breadcrumbs for the package page title ([#431](https://github.com/flora-pm/flora-server/pull/431))
 
 ## 1.0.12 -- 2023-04-04
 

assets/css/1-core/1-core.css

@@ -0,0 +1,42 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.container {
+  width: auto;
+  max-width: 1300px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container-small {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  max-width: 28rem;
+  width: calc(100% - 2rem);
+}
+
+a {
+  text-decoration: none;
+  color: var(--link-color);
+}
+
+.larger-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 80rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}

assets/css/variables.css → assets/css/1-core/2-variables.css

@@ -62,11 +62,12 @@
 
   /* --install-string-border: hsl(215 28% 17%); */
   --compiler-badge-background: hsl(218 12% 84%);
-  --text-color: hsl(221 39% 11%);
+  --text-color: var(--blue-20);
   --main-page-button-background: var(--gray-100);
   --main-page-button-focus-border-color: var(--purple-30);
   --main-page-button-divider: var(--purple-20);
   --deprecated-version: var(--red-60);
+  --breadcrumb-color: var(--gray-30);
 }
 
 html[data-theme="dark"] {
@@ -101,9 +102,10 @@ html[data-theme="dark"] {
 
   /* --install-string-border: hsl(215 28% 17%); */
   --compiler-badge-background: var(--blue-30);
-  --text-color: var(--blue-80);
+  --text-color: var(--gray-80);
   --main-page-button-background: var(--blue-20);
   --main-page-button-focus-border-color: var(--purple-30);
   --main-page-button-divider: var(--blue-15);
   --deprecated-version: var(--red-60);
+  --breadcrumb-color: hsl(221 9% 60%);
 }

assets/css/2-components/1-navbar.css

@@ -0,0 +1,136 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.top-navbar {
+  background-color: var(--navbar-background-color);
+  border-bottom-width: 1px;
+  border-color: var(--navbar-border-color);
+  margin-bottom: 0.75rem;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  position: sticky;
+
+  .navbar-content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: space-between;
+    height: 4rem;
+    display: flex;
+
+    .navbar-dropdown {
+      display: none;
+    }
+
+    .navbar-left {
+      display: flex;
+      align-items: center;
+      height: 4rem;
+
+      form {
+        max-width: 24rem;
+        width: 100%;
+        display: inline-flex;
+        margin-left: 1.25rem;
+      }
+    }
+
+    .brand {
+      display: flex;
+      flex-shrink: 0;
+      border-bottom-width: 4px;
+      padding-bottom: 0.5rem; /* 8px */
+      border-color: var(--brand-border);
+
+      a {
+        color: rgb(255 255 255);
+        font-weight: 700;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .navbar-right {
+    align-items: center;
+    background-color: var(--navbar-background-color);
+    display: flex;
+    flex-direction: row;
+    left: 0;
+    position: relative;
+    top: 0;
+    width: auto;
+
+    .navbar-menu-button {
+      display: none;
+    }
+  }
+
+  .navbar-link {
+    display: inline-flex;
+    color: rgb(255 255 255);
+    font-weight: 700;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    align-items: center;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .navbar-search {
+    @apply rounded-full w-full mr-3 pl-3 py-1 px-1;
+    @apply leading-tight focus:outline-none border border-2;
+
+    border-color: var(--navbar-search-border-color);
+    color: var(--navbar-search-color);
+    background-color: var(--navbar-search-background-color);
+  }
+
+  .navbar-search:focus {
+    border-color: var(--search-bar-focus-border-color);
+  }
+
+  #navbar-search-package-name {
+    padding-left: 20px;
+  }
+}
+
+@media (max-width: 48rem) {
+  .top-navbar {
+    .navbar-content {
+      display: flex;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      .navbar-left {
+        display: none;
+      }
+
+      .navbar-right {
+        display: none;
+      }
+
+      .navbar-dropdown {
+        align-items: center;
+        display: flex;
+
+        .navbar-dropdown__button {
+          color: rgb(255 255 255);
+          font-weight: 700;
+          text-decoration: none;
+        }
+
+        .navbar-dropdown__menu {
+          background-color: var(--navbar-background-color);
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          left: 0;
+          top: 100%;
+          position: absolute;
+        }
+      }
+    }
+  }
+}

assets/css/2-components/2-package-component.css

@@ -0,0 +1,19 @@
+summary.package-component {
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+summary.package-component > * {
+  display: inline;
+}
+
+summary.package-component:hover {
+  background-color: var(--package-list-item-background-hover-color);
+  border-radius: 6px;
+}

assets/css/2-components/3-breadcrumb.css

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+.breadcrumb {
+  height: 1.5ex;
+  width: auto;
+  display: inline;
+  color: var(--breadcrumb-color);
+}

assets/css/2-components/4-license.css

@@ -0,0 +1,9 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.license-icon {
+  height: 1.25rem;
+  width: 1.25rem;
+  display: inline;
+  margin-top: -0.25rem;
+}

assets/css/package.css → assets/css/3-screens/1-package/1-package.css

@@ -201,6 +201,14 @@
   }
 }
 
+a.breadcrumb-segment {
+  color: var(--breadcrumb-color);
+}
+
+a.breadcrumb-segment:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 47rem) {
   .package-body {
     grid-template-columns: repeat(1, 1fr);

assets/css/categories.css → assets/css/3-screens/2-categories.css

@@ -9,7 +9,6 @@
   h1 {
     font-size: 3rem;
     line-height: 1;
-    letter-spacing: -0.025rem;
     text-align: center;
     overflow-wrap: anywhere;
   }
@@ -50,3 +49,9 @@
     background-color: var(--category-card-background-hover);
   }
 }
+
+@media (max-width: 48rem) {
+  .categories-body {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}