Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 10.45
edited by Agnease
on 2026/05/22 08:19
Change comment: There is no comment for this version
To version 10.2
edited by Agnease
on 2026/05/19 03:53
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -146,7 +146,7 @@
146 146   </div>
147 147   </section>
148 148  
149 - <section class="resource-strip homepage-resource-strip" aria-labelledby="resources-title">
149 + <section class="resource-strip" aria-labelledby="resources-title">
150 150   <div class="container">
151 151   <h2 id="resources-title">Useful XWiki resources</h2>
152 152   <p class="section-intro">
XWiki.StyleSheetExtension[0]
code
... ... @@ -329,6 +329,12 @@
329 329   border: 1px solid @line;
330 330   border-radius: @radius;
331 331   box-shadow: @shadow-sm;
332 + transition: transform .18s ease, box-shadow .18s ease;
333 +
334 + &:hover {
335 + transform: translateY(-2px);
336 + box-shadow: @shadow;
337 + }
332 332  }
333 333  
334 334  /* ========== Small Widgets ========== */
... ... @@ -444,7 +444,13 @@
444 444   border: 1px solid @line;
445 445   border-radius: @radius;
446 446   box-shadow: @shadow-sm;
453 + transition: transform .18s ease, box-shadow .18s ease;
447 447  
455 + &:hover {
456 + transform: translateY(-2px);
457 + box-shadow: @shadow;
458 + }
459 +
448 448   .service-icon {
449 449   width: 46px;
450 450   height: 46px;
... ... @@ -605,6 +605,7 @@
605 605   order: 0;
606 606   position: static;
607 607   width: 100%;
620 + margin-bottom: 24px;
608 608   }
609 609  
610 610   .resource-content {
... ... @@ -612,77 +612,6 @@
612 612   }
613 613  }
614 614  
615 -/* ========== Homepage Resource Strip ========== */
616 -
617 -.homepage-resource-strip {
618 - background:
619 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
620 -
621 - .resource-grid {
622 - max-width: 1040px;
623 - margin: 26px auto 0;
624 - display: grid;
625 - grid-template-columns: repeat(2, minmax(0, 1fr));
626 - grid-gap: 22px;
627 - align-items: stretch;
628 - }
629 -
630 - .resource-card {
631 - display: flex;
632 - flex-direction: column;
633 - min-width: 0;
634 - min-height: 100%;
635 - padding: 26px;
636 - }
637 -
638 - .resource-card h4 {
639 - margin: 0 0 10px;
640 - color: @text;
641 - font-size: 21px;
642 - line-height: 1.25;
643 - font-weight: 700;
644 - }
645 -
646 - .resource-card p {
647 - margin: 0 0 18px;
648 - color: @muted;
649 - font-size: 15px;
650 - line-height: 1.6;
651 - }
652 -
653 - .resource-card a {
654 - margin-top: auto;
655 - color: @brand;
656 - font-weight: 700;
657 - text-decoration: underline;
658 -
659 - &:hover,
660 - &:focus {
661 - color: @brand-strong;
662 - }
663 - }
664 -}
665 -
666 -@media (max-width: 980px) {
667 - .homepage-resource-strip {
668 - .resource-grid {
669 - grid-template-columns: 1fr;
670 - }
671 - }
672 -}
673 -
674 -@media (max-width: 640px) {
675 - .homepage-resource-strip {
676 - .resource-card {
677 - padding: 22px;
678 - }
679 -
680 - .resource-card h4 {
681 - font-size: 19px;
682 - }
683 - }
684 -}
685 -
686 686  /* ========== CTA ========== */
687 687  
688 688  .cta-section {
... ... @@ -998,7 +998,13 @@
998 998   grid-template-columns: 68px 1fr;
999 999   grid-gap: 22px;
1000 1000   align-items: start;
943 + transition: transform .18s ease, box-shadow .18s ease;
1001 1001  
945 + &:hover {
946 + transform: translateY(-2px);
947 + box-shadow: @shadow;
948 + }
949 +
1002 1002   .product-card-icon {
1003 1003   width: 58px;
1004 1004   height: 58px;
... ... @@ -1126,7 +1126,13 @@
1126 1126   border-radius: @radius;
1127 1127   box-shadow: @shadow-sm;
1128 1128   padding: 22px;
1077 + transition: transform .18s ease, box-shadow .18s ease;
1129 1129  
1079 + &:hover {
1080 + transform: translateY(-2px);
1081 + box-shadow: @shadow;
1082 + }
1083 +
1130 1130   .feature-icon {
1131 1131   width: 46px;
1132 1132   height: 46px;
XWiki.StyleSheetExtension[1]
code
... ... @@ -1,55 +1,59 @@
1 1  /* ========== Agnease Public Top Menu ========== */
2 2  
3 -/* Desktop alignment */
4 -#menuview .navbar-nav {
5 - float: right !important;
6 -}
7 -
8 -/* Top-level menu items */
9 -
10 -.agnease-menu-item,
11 -.agnease-menu-link {
12 - > a,
13 - > .dropdown-toggle {
14 - color: @brand;
15 - font-size: 17px;
16 - font-weight: 600;
17 - padding-left: 16px;
18 - padding-right: 16px;
19 - text-decoration: none;
3 +.agnease-menu-item {
4 + .dropdown-toggle {
5 + font-weight: inherit;
6 + font-size: inherit;
20 20   }
21 21  
22 - > a:hover,
23 - > a:focus,
24 - > a:active,
25 - &.open > a,
26 - &.active > a {
27 - color: @brand-strong;
28 - text-decoration: none;
29 - outline: none;
30 - }
31 -
32 32   .caret {
33 - margin-left: 5px;
10 + margin-left: 4px;
34 34   border-top-color: @brand;
35 35   border-bottom-color: @brand;
36 36   }
37 37  
38 - > a:hover .caret,
39 - > a:focus .caret,
40 - > a:active .caret,
41 - &.open > a .caret,
42 - &.active > a .caret {
15 + &.open > .dropdown-toggle,
16 + .dropdown-toggle:hover,
17 + .dropdown-toggle:focus {
18 + color: @brand-strong;
19 + background: transparent;
20 + background-color: transparent;
21 + box-shadow: none;
22 + }
23 +
24 + &.open > .dropdown-toggle .caret,
25 + .dropdown-toggle:hover .caret,
26 + .dropdown-toggle:focus .caret {
43 43   border-top-color: @brand-strong;
44 44   border-bottom-color: @brand-strong;
45 45   }
46 46  }
47 47  
48 -/* Dropdown panel */
32 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */
49 49  
34 +.navbar-nav > li.agnease-services-menu > a,
35 +.navbar-nav > li.agnease-products-menu > a,
36 +.navbar-nav > li.agnease-services-menu > a:hover,
37 +.navbar-nav > li.agnease-products-menu > a:hover,
38 +.navbar-nav > li.agnease-services-menu > a:focus,
39 +.navbar-nav > li.agnease-products-menu > a:focus,
40 +.navbar-nav > li.agnease-services-menu.open > a,
41 +.navbar-nav > li.agnease-products-menu.open > a,
42 +.navbar-nav > li.agnease-services-menu.open > a:hover,
43 +.navbar-nav > li.agnease-products-menu.open > a:hover,
44 +.navbar-nav > li.agnease-services-menu.open > a:focus,
45 +.navbar-nav > li.agnease-products-menu.open > a:focus {
46 + background: transparent;
47 + background-color: transparent;
48 + color: @brand-strong;
49 + box-shadow: none;
50 +}
51 +
52 +/* Dropdown panels */
53 +
50 50  .agnease-dropdown {
51 - min-width: 310px;
52 - padding: 10px 8px;
55 + min-width: 270px;
56 + padding: 8px;
53 53   border: 1px solid fade(@brand, 18%);
54 54   border-radius: 12px;
55 55   background: #fff;
... ... @@ -58,21 +58,22 @@
58 58   > li > a {
59 59   display: flex;
60 60   align-items: center;
61 - gap: 12px;
62 - padding: 11px 14px;
65 + gap: 10px;
66 + padding: 9px 11px;
67 + border-radius: 9px;
63 63   color: @brand;
69 + background: transparent;
64 64   white-space: nowrap;
65 - font-size: 16px;
66 - font-weight: 600;
67 - line-height: 1.3;
68 - text-decoration: none;
71 + font-size: 14px;
72 + font-weight: 700;
73 + line-height: 1.25;
69 69  
70 70   i {
71 - width: 20px;
72 - flex: 0 0 20px;
76 + width: 18px;
77 + flex: 0 0 18px;
73 73   color: @brand;
74 74   text-align: center;
75 - font-size: 15px;
80 + font-size: 14px;
76 76   }
77 77  
78 78   &:hover,
... ... @@ -79,6 +79,7 @@
79 79   &:focus,
80 80   &:active {
81 81   color: @brand-strong;
87 + background: fade(@brand, 8%);
82 82   text-decoration: none;
83 83   outline: none;
84 84  
... ... @@ -88,8 +88,12 @@
88 88   }
89 89   }
90 90  
91 - > .active > a {
97 + > .active > a,
98 + > .active > a:hover,
99 + > .active > a:focus {
92 92   color: @brand-strong;
101 + background: fade(@brand, 10%);
102 + text-decoration: none;
93 93  
94 94   i {
95 95   color: @brand-strong;
... ... @@ -97,30 +97,31 @@
97 97   }
98 98  
99 99   .divider {
100 - margin: 8px 0;
110 + margin: 7px 0;
101 101   background-color: fade(@brand, 16%);
102 102   }
103 103  }
104 104  
105 -/* Mobile */
115 +.agnease-products-dropdown,
116 +.agnease-resources-dropdown {
117 + min-width: 260px;
118 +}
106 106  
120 +/* Remove gray Bootstrap dropdown item states */
121 +.dropdown-menu > li > a:hover,
122 +.dropdown-menu > li > a:focus {
123 + background-image: none;
124 +}
125 +
126 +/* ========== Mobile Menu ========== */
127 +
107 107  @media (max-width: 767px) {
108 - .site-nav {
109 - margin-left: 0;
110 - justify-content: center;
111 - flex-wrap: wrap;
129 + .navbar-nav > li.agnease-menu-item > a,
130 + .navbar-nav > li > a {
131 + padding-top: 8px;
132 + padding-bottom: 8px;
112 112   }
113 113  
114 - .agnease-menu-item,
115 - .agnease-menu-link {
116 - > a,
117 - > .dropdown-toggle {
118 - font-size: 16px;
119 - padding-top: 9px;
120 - padding-bottom: 9px;
121 - }
122 - }
123 -
124 124   .agnease-dropdown {
125 125   min-width: 0;
126 126   width: 100%;
... ... @@ -128,21 +128,51 @@
128 128   border: 0;
129 129   border-radius: 0;
130 130   box-shadow: none;
131 - background: transparent;
142 + background: #fff;
132 132  
133 133   > li > a {
134 134   padding: 8px 10px;
135 135   white-space: normal;
136 - font-size: 15px;
147 + font-size: 14px;
148 + border-radius: 8px;
149 + color: @brand;
137 137  
138 138   i {
139 - width: 18px;
140 - flex-basis: 18px;
152 + width: 16px;
153 + flex-basis: 16px;
141 141   }
155 +
156 + &:hover,
157 + &:focus,
158 + &:active {
159 + color: @brand-strong;
160 + background: fade(@brand, 8%);
161 + }
142 142   }
143 143  
144 144   .divider {
145 145   margin: 5px 0;
166 + background-color: fade(@brand, 16%);
146 146   }
147 147   }
148 148  }
170 +/* Remove gray background from opened top-level public menu items */
171 +
172 +.site-nav .dropdown.open > a,
173 +.site-nav .dropdown.open > a:hover,
174 +.site-nav .dropdown.open > a:focus,
175 +.site-nav .agnease-menu-item.open > a,
176 +.site-nav .agnease-menu-item.open > a:hover,
177 +.site-nav .agnease-menu-item.open > a:focus,
178 +.navbar-nav > li.dropdown.open > a,
179 +.navbar-nav > li.dropdown.open > a:hover,
180 +.navbar-nav > li.dropdown.open > a:focus,
181 +.navbar-nav > li.agnease-menu-item.open > a,
182 +.navbar-nav > li.agnease-menu-item.open > a:hover,
183 +.navbar-nav > li.agnease-menu-item.open > a:focus {
184 + color: @brand-strong;
185 + background: transparent !important;
186 + background-color: transparent !important;
187 + background-image: none !important;
188 + box-shadow: none !important;
189 +}