Skip to content

PD-2216 / 26.04 / Pd 2216 sync tnc website with marketing design and messaging guidance #4241

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
Mrt134 merged 5 commits into from
Oct 22, 2025
Merged

PD-2216 / 26.04 / Pd 2216 sync tnc website with marketing design and messaging guidance #4241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
47ae054
Update more.yml
DjP-iX Sep 25, 2025
c08075b
Update docs-nav.html
DjP-iX Sep 25, 2025
db2a2d8
Update custom.css
DjP-iX Sep 25, 2025
72710d4
Update custom.css
DjP-iX Oct 22, 2025
8a64d86
Merge branch 'master' into PD-2216-sync-tnc-website-with-marketing-de…
DjP-iX Oct 22, 2025
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
14 changes: 9 additions & 5 deletions data/menu/more.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
#available icons: https://github.com/thegeeklab/hugo-geekdoc/tree/master/src/icons
---
more:
- name: TrueNAS API Docs
ref: "https://api.truenas.com/"
external: true
icon: "api-icon"
- name: TrueNAS Apps
ref: "https://apps.truenas.com/"
external: true
icon: "icon-dots-grid"
- name: TrueNAS Connect
ref: "https://connect.truenas.com/"
external: true
icon: "gdoc_arrow_right_alt"
- name: TrueNAS API Docs
ref: "https://api.truenas.com/"
external: true
icon: "api-icon"
- name: Security Reports
ref: "https://security.truenas.com"
ref: "https://security.truenas.com/"
external: true
icon: "gdoc_shield"
- name: Documentation Archive
Expand Down
2 changes: 2 additions & 0 deletions layouts/partials/docs-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<button class="truenas-docsnav-menubutton" id="productButton" data-product-id="">Product <i class="fa fa-angle-down"></i></button>
<div class="truenas-navmenudropdown" id="productDropdown">
<div class="truenas-dropdown-item" onclick="selectProduct('TrueNAS')" data-id="truenas">TrueNAS</div>
<a class="truenas-dropdown-item" href="https://apps.truenas.com" target="_blank">TrueNAS Apps</a>
<a class="truenas-dropdown-item" href="https://connect.truenas.com" target="_blank">TrueNAS Connect</a>
<div class="truenas-dropdown-item" onclick="selectProduct('TrueCommand')" data-id="truecommand">TrueCommand</div>
<div class="truenas-dropdown-item" onclick="selectProduct('TrueNAS Systems')" data-id="hardware">TrueNAS Systems</div>
</div>
Expand Down
52 changes: 40 additions & 12 deletions static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,20 @@ mark {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
}
/* Normalize link-based dropdown items to behave like the divs */
.truenas-navmenudropdown a.truenas-dropdown-item {
text-decoration: none; /* remove underline */
color: inherit; /* use same base color as div items */
}

.truenas-navmenudropdown a.truenas-dropdown-item:visited {
color: inherit; /* prevent purple visited */
}

.truenas-navmenudropdown a.truenas-dropdown-item:hover {
text-decoration: none; /* keep underline off */
color: #bbb; /* match div hover color */
}
.truenas-dropdown-item {
cursor: pointer;
font-family: "din-2014";
Expand Down Expand Up @@ -2606,7 +2620,8 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
/* End Styling for Version Selector Sections */

/* Style TrueNAS Apps Market link as green button */
.gdoc-nav a[href="https://apps.truenas.com/"] {
.gdoc-nav a[href="https://apps.truenas.com/"],
.gdoc-nav .gdoc-nav a[href="https://connect.truenas.com"] {
background-color: #71bf44 !important;
color: white !important;
padding: 10px 20px !important;
Expand All @@ -2615,11 +2630,12 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
text-align: center !important;
font-weight: bold !important;
text-decoration: none !important;
margin: 0 !important;
margin: -.5em !important;
transition: all 0.3s ease !important;
}

.gdoc-nav a[href="https://apps.truenas.com/"]:hover {
.gdoc-nav a[href="https://apps.truenas.com/"]:hover,
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
background-color: #5da639 !important;
border-color: #5da639 !important;
color: white !important;
Expand All @@ -2629,38 +2645,44 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
}

/* Ensure the icon is white and properly sized */
.gdoc-nav a[href="https://apps.truenas.com/"] .gdoc-icon {
.gdoc-nav a[href="https://apps.truenas.com/"] .gdoc-icon,
.gdoc-nav a[href="https://connect.truenas.com"] .gdoc-icon {
color: white !important;
fill: white !important;
vertical-align: middle !important;
}

/* Dark mode adjustments for the Apps Market button */
@media (prefers-color-scheme: dark) {
.gdoc-nav a[href="https://apps.truenas.com/"] {
.gdoc-nav a[href="https://apps.truenas.com/"],
.gdoc-nav a[href="https://connect.truenas.com"] {
background-color: #71bf44 !important;
border-color: #71bf44 !important;
}

.gdoc-nav a[href="https://apps.truenas.com/"]:hover {
.gdoc-nav a[href="https://apps.truenas.com/"]:hover,
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
background-color: #5da639 !important;
border-color: #5da639 !important;
}
}

:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"] {
:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"],
.gdoc-nav a[href="https://connect.truenas.com"] {
background-color: #71bf44 !important;
border-color: #71bf44 !important;
}

:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"]:hover {
:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"]:hover,
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
background-color: #5da639 !important;
border-color: #5da639 !important;
}

/* End TrueNAS Apps Market button styling */

/* Style the parent span that contains both icon and link as green button */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) span.flex,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) span.flex {
background-color: #71bf44 !important;
color: white !important;
Expand All @@ -2672,23 +2694,25 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
text-align: center !important;
font-weight: bold !important;
text-decoration: none !important;
margin: 0 !important;
margin: -.5em !important;
transition: all 0.3s ease !important;
width: auto !important;
}

/* Remove styling from the inner link since parent span is now the button */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) a,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) a {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
margin: -.5em !important;
color: white !important;
text-decoration: none !important;
font-weight: bold !important;
}

/* Hover effect moved to li to avoid nested hover conflicts */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1):hover span.flex,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2):hover span.flex {
background-color: #5da639 !important;
border-color: #5da639 !important;
Expand All @@ -2699,6 +2723,8 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
}

/* Prevent any hover effects on nested elements that could conflict */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) label:hover,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) a:hover,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) label:hover,
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) a:hover {
background: none !important;
Expand All @@ -2707,7 +2733,7 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
}

/* Style the original SVG icon to be white */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) svg.gdoc-icon {
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) svg.gdoc-icon {
fill: white !important;
color: white !important;
width: 20px !important;
Expand All @@ -2716,7 +2742,7 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
}

/* Style the use element inside the SVG */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) svg use {
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) svg use {
fill: white !important;
}

Expand All @@ -2727,11 +2753,13 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
}

/* Move Apps Market (2nd item) to be first */
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1),
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) {
order: -1 !important;
}

/* Keep all other items in their original order */
.gdoc-nav section:last-child .gdoc-nav__list li:not(:nth-child(1)),
.gdoc-nav section:last-child .gdoc-nav__list li:not(:nth-child(2)) {
order: 0 !important;
}