From b6de909dfa2dbafb0b638b28ef381aa99fabcaf6 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Thu, 17 Oct 2024 12:12:40 +0100 Subject: [PATCH] updates after discussion --- preview-src/docs-ndl.adoc | 20 +++--- src/css/docs-ndl.css | 95 +++++++++++++++------------ src/css/themes.css | 7 ++ src/img/start.svg | 133 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 203 insertions(+), 52 deletions(-) create mode 100644 src/img/start.svg diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc index c1e318df..6124ce5d 100644 --- a/preview-src/docs-ndl.adoc +++ b/preview-src/docs-ndl.adoc @@ -7,20 +7,20 @@ :page-toclevels: -1 -[.widget2.banner] +[.widget.banner.start] == Getting started -[.icon] -image:icons/ndl/start.svg[] +// [.icon] +// image:icons/ndl/start.svg[] -- -[.caption2] +[.caption] Get started with Neo4j -[.description2] +[.description] Learn more about graph databases and start working with your data using Neo4j tools. -[.banner.button] +[.button] xref:tutorials:index.adoc[Get started] -- @@ -177,17 +177,17 @@ Tutorials & How-to guides xref:tutorials:index.adoc[All tutorials] -- -[.widget3.highlights] +[.widget.highlights] == GraphAcademy courses -[.icon2] +[.icon] image:icons/ndl/ga-home.png[] -- -[.caption3] +[.caption] GraphAcademy courses -[.list2] +[.list] * link:{docs-home}/genai/tutorials/embeddings-vector-indexes/[Embedding & Vector Indexes Tutorial] * xref:{docs-home}/getting-started/tutorials/import-relational/[Import data from a relational database into Neo4j] * xref:{docs-home}/getting-started/tutorials/recommendation-engine/[Build a Cypher recommendation engine] diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css index 3725159f..bd477a55 100644 --- a/src/css/docs-ndl.css +++ b/src/css/docs-ndl.css @@ -211,15 +211,22 @@ body.docs-ndl .widget .sectionbody { column-gap: 0; } -body.docs-ndl .widget2 .sectionbody { +body.docs-ndl .widget.banner .sectionbody { background: rgba(var(--colors-baltic-60)); + background-repeat: no-repeat; + background-position: right; + background-size: contain; border-radius: 1rem; border: none; - padding: 0; + padding: 2rem; row-gap: 0; column-gap: 0; } +body.docs-ndl .widget.banner.start .sectionbody { + background-image: url(../img/start.svg); +} + body.docs-ndl .widget3 .sectionbody { background: rgba(var(--colors-neutral-10)); border-radius: 1rem; @@ -237,7 +244,7 @@ body.docs-ndl.sub .widget .sectionbody { column-gap: 1rem; } -body.docs-ndl.sub .widget2 .sectionbody { +body.docs-ndl.sub .widget.banner .sectionbody { background: transparent; padding: 0; justify-content: flex-start; @@ -391,6 +398,9 @@ body.docs-ndl .paragraph.caption { padding: 1rem; margin: 0; color: var(--neutral-color); + font-family: var(--header-font-family); + font-size: var(--doc-font-size-h2); + font-weight: var(--font-weight-normal); } body.docs-ndl .paragraph.footer-link { @@ -399,26 +409,20 @@ body.docs-ndl .paragraph.footer-link { padding: 0; margin: 0; color: var(--neutral-color); + justify-content: flex-end; + padding-right: 0; } -body.docs-ndl .paragraph.caption { - font-family: var(--header-font-family); - font-size: var(--doc-font-size-h2); - font-weight: var(--font-weight-normal); -} - -body.docs-ndl .paragraph.caption2 { +body.docs-ndl .banner .paragraph { display: flex; width: 100%; padding: 0; - margin: 12px 24px 0; + margin: 1rem; color: var(--color-white); } -body.docs-ndl .paragraph.caption2 { - font-family: var(--header-font-family); - font-size: var(--doc-font-size-h2); - font-weight: var(--font-weight-normal); +body.docs-ndl .banner .paragraph.description { + padding-right: 2rem; } body.docs-ndl .paragraph.caption3 { @@ -427,19 +431,11 @@ body.docs-ndl .paragraph.caption3 { padding: 12px 30px 12px; margin: 0; color: var(--neutral-color); -} - -body.docs-ndl .paragraph.caption3 { font-family: var(--header-font-family); font-size: var(--doc-font-size-h2); font-weight: var(--font-weight-normal); } -body.docs-ndl .paragraph.footer-link { - justify-content: flex-end; - padding-right: 0; -} - /* selectable cards */ body.docs-ndl .cards .sect2.selectable { @@ -462,11 +458,13 @@ body.docs-ndl .cards .sect2.selectable:hover div.description { /* banner */ +body.docs-ndl.hub .banner .sectionbody, +body.docs-ndl.explainer .banner .sectionbody { + justify-content: space-between; +} + body.docs-ndl .banner .sectionbody > div.openblock { flex: 0 0 50%; - padding: 3px 3px 3px; - border-bottom: 0; - margin-bottom: 0; } body.docs-ndl .banner .sectionbody > div.icon { @@ -478,9 +476,8 @@ body.docs-ndl .banner .sectionbody > div.icon { } body.docs-ndl .banner .icon img { - width: 639px; - height: 246px; - padding: 0 6.7rem 0; + height: 100%; + padding: 0; margin: 0; } @@ -489,7 +486,17 @@ body.docs-ndl .banner .button { padding: 0.5em 1.5em; font-weight: 400; text-align: center; - margin-left: 24px; + /* 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) { @@ -519,7 +526,7 @@ body.docs-ndl .highlights .sectionbody > div.openblock { } body.docs-ndl .highlights .sectionbody > div.icon { - flex: 0 1 40%; + flex: 0 1 60%; padding-top: 1rem; padding-bottom: 1rem; padding-left: 8rem; @@ -613,7 +620,7 @@ body.docs-ndl .sect2 { } body.docs-ndl .cards .sectionbody > div.sect2 { - flex: 0 1 29%; + flex: 0 1 32%; /* margin-right: 1rem; */ } @@ -718,14 +725,13 @@ body.docs-ndl .sect2 a > h3 { body.docs-ndl .cards .sect2 .icon, body.docs-ndl .widget .icon { - order: 1; padding: 0; margin: 0; width: 100%; } body.docs-ndl .cards .sect2 .icon, -body.docs-ndl .widget2 .icon { +body.docs-ndl .widget.banner .icon { order: 1; padding: 0; margin: 0; @@ -761,6 +767,16 @@ body.docs-ndl .widget.highlights .icon { padding: 2rem; } +/* For the 1st, 3rd etc highlights, move the image to the right */ +body.docs-ndl .widget.highlights:nth-of-type(odd) .icon { + order: 1; +} + +/* We can use this rule to apply styles to the 2nd, 4th highlights etc widget */ +body.docs-ndl .widget.highlights:nth-of-type(even) .openblock { + /* margin-right:40px; */ +} + body.docs-ndl .widget3.highlights .icon { padding: 2rem; } @@ -920,14 +936,14 @@ body.docs-ndl .cards .sect2 .ulist ul li { justify-content: center; } - body.docs-ndl .widget2 .sectionbody { + body.docs-ndl .widget.banner .sectionbody { row-gap: 2rem; } - body.docs-ndl .widget2 .sectionbody > div { + /* body.docs-ndl .widget.banner .sectionbody > div { flex: 0 1 100%; justify-content: center; - } + } */ body.docs-ndl .widget3 .sectionbody { row-gap: 2rem; @@ -947,11 +963,6 @@ body.docs-ndl .cards .sect2 .ulist ul li { flex: 0 0 48%; } - body.docs-ndl .widget2 .sectionbody .sect2, - body.docs-ndl.sub .widget2 .sectionbody .sect2 { - flex: 0 0 48%; - } - body.docs-ndl .widget3 .sectionbody .sect2, body.docs-ndl.sub .widget3 .sectionbody .sect2 { flex: 0 0 48%; diff --git a/src/css/themes.css b/src/css/themes.css index a9f22b65..29264f78 100644 --- a/src/css/themes.css +++ b/src/css/themes.css @@ -64,12 +64,19 @@ body.docs .doc .button:hover { } body.docs .banner .button { + 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); } diff --git a/src/img/start.svg b/src/img/start.svg new file mode 100644 index 00000000..6c566056 --- /dev/null +++ b/src/img/start.svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +