Skip to content

Homepage fixes after Sebastians feedback #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Dec 4, 2024
Merged

Homepage fixes after Sebastians feedback #278

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0ce4a2c
Homepage fixes after Sebastians feedback
lidiazuin Nov 1, 2024
fa5274f
reverting changes in docs-hub preview
lidiazuin Nov 1, 2024
3c1eccb
Fixed Docs home link on top of sidebar
lidiazuin Nov 4, 2024
71ec077
Whole card hovering and clickable
lidiazuin Nov 4, 2024
378b2ae
Border lines and hover effect fixed
lidiazuin Nov 4, 2024
73c0a3f
Fixes to links alignment and clickable area of selectable cards
lidiazuin Nov 6, 2024
5a431f9
fixing banner and label styles
lidiazuin Nov 6, 2024
f390dfd
fixing cursor to default when hovering links
lidiazuin Nov 6, 2024
2bf2b0d
reverting change in base and fixing button cursor in theme
lidiazuin Nov 6, 2024
3bddd24
adjustments to font in the banner button and label styling
lidiazuin Nov 7, 2024
22aa906
updates after review
lidiazuin Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions preview-src/docs-ndl.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ image:icons/ndl/cypher-manual.svg[]
Learn how to write Cypher, Neo4j's declarative query language.

[.link]
xref:cypher:index.adoc[Query your data]
link:https://www.neo4j.com/docs/cypher-manual/[Query your data]

=== Neo4j Tools

Expand Down Expand Up @@ -217,7 +217,7 @@ link:https://discord.com/invite/neo4j[Discord]
image:icons/ndl/icon-developercenter.svg[]

[.link]
link:https://neo4j.com/developer-blog/[Developer blog] xref:reference:resources.adoc[Other resources]
link:https://neo4j.com/developer-blog/[Developer blog] link:https://www.neo4.com/docs/reference/resources[Other resources]



Expand Down
10 changes: 4 additions & 6 deletions src/css/doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -191,7 +191,7 @@ body {
}

.doc a:visited {
color: var(--link_visited-font-color);
color: var(--link-font-color);
}

.doc code a {
Expand Down Expand Up @@ -640,7 +640,7 @@ body {

.doc .olist li,
.doc .ulist li {
margin-bottom: 0.5rem;
margin-bottom: 0;
Copy link
Collaborator

@recrwplay recrwplay Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will change the appearance of all unordered lists in the docs. If we want to update the lists in the home page, or just the 'Keep exploring' card, we should create a more specific rule that applies to those link - a rule for something like body.docs-ndl .ulist li... or body.docs-ndl div.lists .ulist li... in docs-ndl.css

Copy link
Collaborator Author

@lidiazuin lidiazuin Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the Keep exploring card is barely being used and the places where it still exists need to be updated, but if this affects the content in the doc pages in a disruptive way, then yes. Do you think that is the case?

Copy link
Collaborator

@recrwplay recrwplay Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this would apply to any page generated from the UI bundle because we wrap the page contents in <article class="doc">...</article>

Copy link
Collaborator Author

@lidiazuin lidiazuin Nov 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think a 0.5rem difference could be disruptive to the rest of the docs? If so, then it's better to create a new rule like you suggested

Copy link
Collaborator

@recrwplay recrwplay Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes list items more readable when the content wraps onto multiple lines. Without it, the spacing between the lines of a list item and the spacing between two list items are pretty much the same. The effect is similar to what would happen if there was no margin below a paragraph.

Copy link
Collaborator Author

@lidiazuin lidiazuin Nov 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, so I will fix it as you suggested!

}

.doc .olist li > div:first-of-type,
Expand Down Expand Up @@ -1261,14 +1261,12 @@ body {
margin: 0 0.2rem;
content: "→";
color: var(--link-font-color);
transform: rotate(-45deg);
transition: all 0.2s linear;
top: 0;
}

.doc a.external:hover::after {
top: -12px;
opacity: 0;
text-decoration: underline;
Copy link
Collaborator

@recrwplay recrwplay Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would remove this. Links are already underlined, so adding this text-decoration just adds an underline to the arrow when hovering over an external link. (This change applies to all external links in the docs).

(I'm happy to make the other changes to external links, though.)

Copy link
Collaborator Author

@lidiazuin lidiazuin Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because for some reason the arrow to the external link is disappearing when hovering

Copy link
Collaborator

@recrwplay recrwplay Nov 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I don't really like that animation. The two lines that are deleted here I'm ok with that change. I just wouldn't add the text-decoration here.

}

.doc .no-arrows a::after {
Expand Down
124 changes: 64 additions & 60 deletions src/css/docs-ndl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,26 @@ body.docs-ndl.explainer .nav-panel-menu {
scrollbar-width: none;
}

body.docs-ndl .nav-menu .docs-home-link a::before {
content: "";
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(10 97 144 / 1);
background-color: var(--color-docs);
border-radius: 4px;
}

body.docs-ndl .nav-menu .docs-home-link {
margin-bottom: 0;
}

body.docs-ndl .nav-menu .docs-home-link:hover,
body.docs-ndl .nav-menu .docs-home-link:focus {
text-decoration: underline;
/* background-color: var(--toc_hover-background-color); */
text-decoration: none;
background-color: var(--colors-baltic-15);
}

body.docs-ndl .nav-menu .home-link {
Expand All @@ -39,7 +51,9 @@ body.docs-ndl .nav-menu .home-link.is-home {
}

body.docs-ndl .nav-menu .home-link.is-home a {
display: none;
display: flex;
background-color: rgba(var(--colors-baltic-10));
color: rgba(var(--colors-baltic-50));
}

body.docs-ndl .nav-module {
Expand Down Expand Up @@ -70,7 +84,6 @@ body.docs-ndl .nav-text {

body.docs-ndl .nav-menu .home-link a::before {
display: inline-block;
content: url(../img/arrow-long-left.svg);
margin-right: 1em;
vertical-align: middle;
line-height: 1;
Expand Down Expand Up @@ -144,11 +157,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;
Expand Down Expand Up @@ -211,10 +219,12 @@ body.docs-ndl .widget .sectionbody {
row-gap: 0;
justify-content: center;
align-content: center;
border: 1px solid var(--panel-border-color);
}

body.docs-ndl .widget.lists .sectionbody {
justify-content: space-between;
line-height: 24px;
}

body.docs-ndl .widget.banner .sectionbody {
Expand Down Expand Up @@ -409,7 +419,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);
Expand All @@ -430,9 +440,9 @@ body.docs-ndl .cards .sect2.selectable a {
}

body.docs-ndl .cards .sect2.selectable a:hover {
transform: scale(1.02);
transition: 0.1s linear;
box-shadow: 0 4px 8px 0 rgba(12, 26, 37, 0.08);
border: 1px solid var(--page-version-missing-font-color);
box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
}

body.docs-ndl .cards .sect2.selectable:hover div.description {
Expand Down Expand Up @@ -464,30 +474,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);
Expand Down Expand Up @@ -521,19 +515,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 {
Expand Down Expand Up @@ -583,37 +577,57 @@ body.docs-ndl .lists ul li a {
body.docs-ndl .sect2 {
display: flex;
flex-direction: column;
cursor: pointer;
border-radius: 16px;
position: relative;
}

body.docs-ndl .cards .sectionbody > div.sect2 {
flex: 0 1 32%;
border: 1px solid var(--panel-border-color);
/* margin-right: 1rem; */
}

body.docs-ndl .cards.bottom-cards .sectionbody > div.sect2 {
flex: 0 1 49%;
border: 1px solid var(--panel-border-color);
}

body.docs-ndl.explainer .sectionbody > div.sect2 {
flex: 0 1 49%;
border: 1px solid var(--panel-border-color);
}

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;
position: relative;
display: flex;
flex-direction: column;
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);
line-height: 2rem;
}

body.docs-ndl .cards .sect2 a::before,
body.docs-ndl .cards:not(.selectable) .sect2 a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

body.docs-ndl .cards:not(.selectable) .sect2:hover {
transition: 0.1s linear;
border: 1px solid var(--page-version-missing-font-color);
box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
}

/* styles for specific types of cards:
Expand Down Expand Up @@ -649,8 +663,7 @@ 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 .cards:not(.selectable) .sect2 > a,
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); */
border: none;
Expand Down Expand Up @@ -744,6 +757,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,
Expand Down Expand Up @@ -793,13 +807,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 .cards:not(.selectable) .sect2 .paragraph.link a {
font-weight: 500;
margin-right: 1rem;
/* text-decoration: none; */
body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link {
margin-top: 8px;
margin-bottom: 9px;
}

body.docs-ndl .cards .sect2 .paragraph.category {
Expand All @@ -821,6 +836,7 @@ body.docs-ndl .highlights a {
body.docs-ndl .highlights a::after,
body.docs-ndl .cards .link a::after {
margin-left: 0.5rem;
margin-right: 0.5rem;
content: "→";
font-weight: 600;
color: var(--link-font-color);
Expand Down Expand Up @@ -852,18 +868,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;
Expand Down
18 changes: 2 additions & 16 deletions src/css/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
Loading
Loading