Skip to content

Commit d92421b

Browse files
bugclerkDjP-iX
bugclerk
and
DjP-iX
authored
PD-2216 / 24.10 / Pd 2216 sync tnc website with marketing design and messaging guidance (by DjP-iX) (#4244)
* Empty commit to create PR on github. You should reset it * PD-2216 / 26.04 / Pd 2216 sync tnc website with marketing design and messaging guidance (#4241) * Update more.yml * Update docs-nav.html * Update custom.css * Update custom.css (cherry picked from commit 57dd017) --------- Co-authored-by: Dan Pizappi <133042991+DjP-iX@users.noreply.github.com>
1 parent bea96ad commit d92421b

File tree

3 files changed

+171
-6
lines changed

3 files changed

+171
-6
lines changed

‎data/menu/more.yml‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
#available icons: https://github.com/thegeeklab/hugo-geekdoc/tree/master/src/icons
22
---
33
more:
4+
- name: TrueNAS Apps
5+
ref: "https://apps.truenas.com/"
6+
external: true
7+
icon: "icon-dots-grid"
8+
- name: TrueNAS Connect
9+
ref: "https://connect.truenas.com/"
10+
external: true
11+
icon: "gdoc_arrow_right_alt"
412
- name: TrueNAS API Docs
513
ref: "https://api.truenas.com/"
614
external: true
715
icon: "api-icon"
8-
- name: TrueNAS Apps Market
9-
ref: "https://apps.truenas.com/"
10-
external: true
11-
icon: "icon-dots-grid"
12-
- name: "Security Reports"
13-
ref: "https://security.truenas.com"
16+
- name: Security Reports
17+
ref: "https://security.truenas.com/"
1418
external: true
1519
icon: "gdoc_shield"
1620
- name: "Documentation Archive"

‎layouts/partials/docs-nav.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<button class="truenas-docsnav-menubutton" id="productButton" data-product-id="">Product <i class="fa fa-angle-down"></i></button>
99
<div class="truenas-navmenudropdown" id="productDropdown">
1010
<div class="truenas-dropdown-item" onclick="selectProduct('TrueNAS')" data-id="truenas">TrueNAS</div>
11+
<a class="truenas-dropdown-item" href="https://apps.truenas.com" target="_blank">TrueNAS Apps</a>
12+
<a class="truenas-dropdown-item" href="https://connect.truenas.com" target="_blank">TrueNAS Connect</a>
1113
<div class="truenas-dropdown-item" onclick="selectProduct('TrueCommand')" data-id="truecommand">TrueCommand</div>
1214
<div class="truenas-dropdown-item" onclick="selectProduct('TrueNAS Systems')" data-id="hardware">TrueNAS Systems</div>
1315
</div>

‎static/custom.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,20 @@ mark {
9999
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
100100
z-index: 10;
101101
}
102+
/* Normalize link-based dropdown items to behave like the divs */
103+
.truenas-navmenudropdown a.truenas-dropdown-item {
104+
text-decoration: none; /* remove underline */
105+
color: inherit; /* use same base color as div items */
106+
}
107+
108+
.truenas-navmenudropdown a.truenas-dropdown-item:visited {
109+
color: inherit; /* prevent purple visited */
110+
}
111+
112+
.truenas-navmenudropdown a.truenas-dropdown-item:hover {
113+
text-decoration: none; /* keep underline off */
114+
color: #bbb; /* match div hover color */
115+
}
102116
.truenas-dropdown-item {
103117
cursor: pointer;
104118
font-family: "din-2014";
@@ -2470,3 +2484,148 @@ pre.gdoc-mermaid.mermaid.mermaid_sizing {
24702484
}
24712485

24722486
/* End Styling for Version Selector Sections */
2487+
2488+
/* Style TrueNAS Apps Market link as green button */
2489+
.gdoc-nav a[href="https://apps.truenas.com/"],
2490+
.gdoc-nav .gdoc-nav a[href="https://connect.truenas.com"] {
2491+
background-color: #71bf44 !important;
2492+
color: white !important;
2493+
padding: 10px 20px !important;
2494+
border-radius: 15px !important;
2495+
display: block !important;
2496+
text-align: center !important;
2497+
font-weight: bold !important;
2498+
text-decoration: none !important;
2499+
margin: -.5em !important;
2500+
transition: all 0.3s ease !important;
2501+
}
2502+
2503+
.gdoc-nav a[href="https://apps.truenas.com/"]:hover,
2504+
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
2505+
background-color: #5da639 !important;
2506+
border-color: #5da639 !important;
2507+
color: white !important;
2508+
text-decoration: none !important;
2509+
transform: translateY(-2px) !important;
2510+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
2511+
}
2512+
2513+
/* Ensure the icon is white and properly sized */
2514+
.gdoc-nav a[href="https://apps.truenas.com/"] .gdoc-icon,
2515+
.gdoc-nav a[href="https://connect.truenas.com"] .gdoc-icon {
2516+
color: white !important;
2517+
fill: white !important;
2518+
vertical-align: middle !important;
2519+
}
2520+
2521+
/* Dark mode adjustments for the Apps Market button */
2522+
@media (prefers-color-scheme: dark) {
2523+
.gdoc-nav a[href="https://apps.truenas.com/"],
2524+
.gdoc-nav a[href="https://connect.truenas.com"] {
2525+
background-color: #71bf44 !important;
2526+
border-color: #71bf44 !important;
2527+
}
2528+
2529+
.gdoc-nav a[href="https://apps.truenas.com/"]:hover,
2530+
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
2531+
background-color: #5da639 !important;
2532+
border-color: #5da639 !important;
2533+
}
2534+
}
2535+
2536+
:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"],
2537+
.gdoc-nav a[href="https://connect.truenas.com"] {
2538+
background-color: #71bf44 !important;
2539+
border-color: #71bf44 !important;
2540+
}
2541+
2542+
:root[color-theme=dark] .gdoc-nav a[href="https://apps.truenas.com/"]:hover,
2543+
.gdoc-nav a[href="https://connect.truenas.com"]:hover {
2544+
background-color: #5da639 !important;
2545+
border-color: #5da639 !important;
2546+
}
2547+
2548+
/* End TrueNAS Apps Market button styling */
2549+
2550+
/* Style the parent span that contains both icon and link as green button */
2551+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) span.flex,
2552+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) span.flex {
2553+
background-color: #71bf44 !important;
2554+
color: white !important;
2555+
padding: 10px 20px !important;
2556+
border-radius: 15px !important;
2557+
display: inline-flex !important;
2558+
align-items: center !important;
2559+
justify-content: center !important;
2560+
text-align: center !important;
2561+
font-weight: bold !important;
2562+
text-decoration: none !important;
2563+
margin: -.5em !important;
2564+
transition: all 0.3s ease !important;
2565+
width: auto !important;
2566+
}
2567+
2568+
/* Remove styling from the inner link since parent span is now the button */
2569+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) a,
2570+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) a {
2571+
background: none !important;
2572+
border: none !important;
2573+
padding: 0 !important;
2574+
margin: -.5em !important;
2575+
color: white !important;
2576+
text-decoration: none !important;
2577+
font-weight: bold !important;
2578+
}
2579+
2580+
/* Hover effect moved to li to avoid nested hover conflicts */
2581+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1):hover span.flex,
2582+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2):hover span.flex {
2583+
background-color: #5da639 !important;
2584+
border-color: #5da639 !important;
2585+
color: white !important;
2586+
text-decoration: none !important;
2587+
transform: translateY(-2px) !important;
2588+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
2589+
}
2590+
2591+
/* Prevent any hover effects on nested elements that could conflict */
2592+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) label:hover,
2593+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) a:hover,
2594+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) label:hover,
2595+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) a:hover {
2596+
background: none !important;
2597+
transform: none !important;
2598+
box-shadow: none !important;
2599+
}
2600+
2601+
/* Style the original SVG icon to be white */
2602+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) svg.gdoc-icon {
2603+
fill: white !important;
2604+
color: white !important;
2605+
width: 20px !important;
2606+
height: 20px !important;
2607+
margin-right: 8px !important;
2608+
}
2609+
2610+
/* Style the use element inside the SVG */
2611+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1) svg use {
2612+
fill: white !important;
2613+
}
2614+
2615+
/* Reorder the menu items - move Apps Market to the very top */
2616+
.gdoc-nav section:last-child .gdoc-nav__list {
2617+
display: flex !important;
2618+
flex-direction: column !important;
2619+
}
2620+
2621+
/* Move Apps Market (2nd item) to be first */
2622+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(1),
2623+
.gdoc-nav section:last-child .gdoc-nav__list li:nth-child(2) {
2624+
order: -1 !important;
2625+
}
2626+
2627+
/* Keep all other items in their original order */
2628+
.gdoc-nav section:last-child .gdoc-nav__list li:not(:nth-child(1)),
2629+
.gdoc-nav section:last-child .gdoc-nav__list li:not(:nth-child(2)) {
2630+
order: 0 !important;
2631+
}

0 commit comments

Comments
 (0)