Homepage fixes after Sebastians feedback

Author: lidiazuin

preview-src/docs-hub.adoc

@@ -36,6 +36,18 @@ Write and execute Cypher queries and visualize the results in nodes and relation
 link:{docs-home}/browser-manual/[Neo4j Browser] +
 link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
 
+=== Neo4j Browser/Query
+
+[.icon]
+image:icons/ndl/icon-scientist.svg[]
+
+[.description]
+Write and execute Cypher queries and visualize the results in nodes and relationships.
+
+[.link]
+link:{docs-home}/browser-manual/[Neo4j Browser] +
+link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
+
 [.display.card.selectable]
 
 === Neo4j Data Importer

src/css/doc.css

@@ -32,7 +32,7 @@ body {
   font-weight: var(--heading-font-weight);
   hyphens: none;
   line-height: calc((var(--doc-line-height) + 1) / 2);
-  margin: 2rem 0 1rem;
+  margin: 17px 0 8px;
 }
 
 .doc h1 {
@@ -191,7 +191,7 @@ body {
 }
 
 .doc a:visited {
-  color: var(--link_visited-font-color);
+  color: var(--link-font-color);
 }
 
 .doc code a {
@@ -640,7 +640,7 @@ body {
 
 .doc .olist li,
 .doc .ulist li {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0rem;
 }
 
 .doc .olist li > div:first-of-type,
@@ -1261,7 +1261,6 @@ body {
   margin: 0 0.2rem;
   content: "→";
   color: var(--link-font-color);
-  transform: rotate(-45deg);
   transition: all 0.2s linear;
   top: 0;
 }

src/css/docs-ndl.css

@@ -144,11 +144,6 @@ body.docs-ndl.hub aside.toc.sidebar {
   flex-basis: 0;
 }
 
-body.docs-ndl .toolbar.is-home {
-  background: rgba(var(--colors-neutral-15));
-  box-shadow: none;
-}
-
 body.docs-ndl.hub main > .content {
   /* align-items: center; */
   flex-direction: column;
@@ -409,7 +404,7 @@ body.docs-ndl .paragraph.footer-link {
 
 body.docs-ndl .banner .paragraph {
   display: flex;
-  width: 100%;
+  width: fit-content;
   padding: 0;
   margin: 1rem;
   color: var(--color-white);
@@ -464,30 +459,14 @@ body.docs-ndl .banner .icon img {
   margin: 0;
 }
 
-body.docs-ndl .banner .button {
+body.docs-ndl .banner .button a {
   border-radius: 0.25rem;
   padding: 0.5em 1.5em;
   font-weight: 400;
   text-align: center;
   /* margin-left: 24px; */
 }
 
-@media screen and (max-width: 1240px) {
-  body.docs-ndl .widget.banner .sectionbody {
-    background-image: none !important;
-  }
-
-  body.docs-ndl .widget.banner .sectionbody > div.openblock {
-    flex: 0 0 100%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .banner .banner-item.button-cta {
-    padding-right: 0 1rem 0;
-  }
-}
-
 .banner .button:hover {
   background: rgba(var(--banner-background-color));
   color: var(--colors-baltic-25);
@@ -521,19 +500,19 @@ body.docs-ndl .highlights .caption {
   padding-left: 0;
 }
 
-body.docs-ndl .highlights .list ul li {
-  border-bottom: 1px solid rgba(var(--colors-neutral-20));
-  padding-bottom: 0.5rem;
+body.docs-ndl .highlights .list a {
+  padding: 8px;
+  text-decoration: none;
 }
 
-body.docs-ndl .highlights .list2 {
-  padding: 0;
+body.docs-ndl .highlights .list a:hover,
+body.docs-ndl .highlights .list a:focus {
+  text-decoration: none;
+  background-color: var(--toc_hover-background-color);
 }
 
-body.docs-ndl .highlights .list2 ul li {
+body.docs-ndl .highlights .list ul li {
   border-bottom: 1px solid rgba(var(--colors-neutral-20));
-  padding-bottom: 0.5rem;
-  list-style-type: none;
 }
 
 body.docs-ndl .widget.highlights .footer-link {
@@ -599,7 +578,6 @@ body.docs-ndl.explainer .sectionbody > div.sect2 {
 }
 
 body.docs-ndl .cards .sect2 > a,
-body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
 body.docs-ndl .lists .sect2 {
   overflow: hidden;
@@ -609,10 +587,9 @@ body.docs-ndl .lists .sect2 {
   align-items: flex-start;
   flex: 1;
   /* justify-content: space-between; */
-  gap: 1rem;
+  gap: 8px;
   /* min-width: 30%; */
   padding: 1rem;
-  /* margin: 0 1rem 1rem 0; */
   background: var(--color-white);
 }
 
@@ -649,7 +626,6 @@ body.docs-ndl .header-label-container > div.labels {
 }
 
 body.docs-ndl .cards .sect2 > a,
-body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
 body.docs-ndl .widget:not(.video) {
   /* box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); */
@@ -744,6 +720,7 @@ body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
 body.docs-ndl .cards.icon-l .sect2 .icon img {
   width: 6rem;
   height: 6rem;
+  margin-bottom: 9px;
 }
 
 body.docs-ndl .lists .sect2 .icon img,
@@ -793,7 +770,14 @@ body.docs-ndl .cards .sect2.selectable .paragraph.link {
 }
 
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
-  margin-top: auto;
+  box-sizing: border-box;
+  margin-top: 30px;
+  margin-bottom: 9px;
+}
+
+body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link {
+  margin-top: 8px;
+  margin-bottom: 9px;
 }
 
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link a {
@@ -852,18 +836,6 @@ body.docs-ndl .cards .sect2 .ulist ul li {
   margin: 0.5rem 0 0;
 }
 
-@media screen and (min-width: 1024px) {
-  body.docs-ndl .toolbar {
-    background-color: rgba(var(--colors-neutral-10));
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  body.docs-ndl .doc {
-    margin: 0 1rem;
-  }
-}
-
 @media screen and (max-width: 1439px) {
   body.docs-ndl .toolbar {
     top: 0;

src/css/themes.css

@@ -53,33 +53,19 @@ body.docs .navbar-burger span {
   background: var(--color-docs);
 }
 
-body.docs .doc .button {
+body.docs .doc .button a {
   background: var(--color-docs);
   color: var(--color-white);
 }
 
-body.docs .doc .button:hover {
-  background: rgba(var(--colors-baltic-60));
-  color: var(--color-white);
-}
-
-body.docs .banner .button {
+body.docs .banner .button a {
   display: flex;
   width: fit-content;
   background: var(--banner-background-color);
   border: 1px solid var(--banner-background-color);
   color: var(--colors-baltic-60);
 }
 
-body.docs .banner .button:hover {
-  background: rgba(var(--banner-background-color));
-  border: 1px solid var(--banner-hover-color);
-}
-
-body.docs .banner .button:hover a {
-  color: var(--banner-hover-color);
-}
-
 body.docs .nav-item .nav-item::before,
 body.docs .toc-menu li a::before {
   color: rgba(var(--colors-baltic-30));

src/css/toolbar.css

@@ -1,17 +1,3 @@
-.toolbar {
-  color: var(--toolbar-font-color);
-  align-items: center;
-  background-color: var(--toolbar-background);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
-  display: flex;
-  font-size: calc(15 / var(--rem-base) * 1rem);
-  height: var(--toolbar-height);
-  justify-content: flex-start;
-  position: sticky;
-  top: var(--navbar-height);
-  z-index: var(--z-index-toolbar);
-}
-
 body.has-banner .toolbar {
   top: calc(var(--navbar-height) + var(--banner-height));
 }

src/css/vars.css

@@ -312,7 +312,6 @@
   /* links */
   --link-font-color: rgba(var(--colors-baltic-50));
   --link_hover-font-color: rgba(var(--colors-baltic-55));
-  --link_visited-font-color: var(--palette-categorical-8);
   --link_unresolved-font-color: var(--important-color);
 
   /* abstract */