Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (2 modified, 0 added, 0 removed)
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; ... ... @@ -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; 942 + transition: transform .18s ease, box-shadow .18s ease; 1001 1001 944 + &:hover { 945 + transform: translateY(-2px); 946 + box-shadow: @shadow; 947 + } 948 + 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; 1076 + transition: transform .18s ease, box-shadow .18s ease; 1129 1129 1078 + &:hover { 1079 + transform: translateY(-2px); 1080 + box-shadow: @shadow; 1081 + } 1082 + 1130 1130 .feature-icon { 1131 1131 width: 46px; 1132 1132 height: 46px;
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,55 +1,39 @@ 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 +/* Dropdown panels */ 49 49 50 50 .agnease-dropdown { 51 - min-width: 310px;52 - padding: 10px8px;35 + min-width: 270px; 36 + 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; 45 + gap: 10px; 46 + padding: 9px 11px; 47 + border-radius: 9px; 63 63 color: @brand; 49 + background: transparent; 64 64 white-space: nowrap; 65 - font-size: 16px; 66 - font-weight: 600; 67 - line-height: 1.3; 68 - text-decoration: none; 51 + font-size: 14px; 52 + font-weight: 700; 53 + line-height: 1.25; 69 69 70 70 i { 71 - width: 20px;72 - flex: 0 0 20px;56 + width: 18px; 57 + flex: 0 0 18px; 73 73 color: @brand; 74 74 text-align: center; 75 - font-size: 1 5px;60 + 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; 67 + 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 { 77 + > .active > a, 78 + > .active > a:hover, 79 + > .active > a:focus { 92 92 color: @brand-strong; 81 + background: fade(@brand, 10%); 82 + text-decoration: none; 93 93 94 94 i { 95 95 color: @brand-strong; ... ... @@ -97,30 +97,29 @@ 97 97 } 98 98 99 99 .divider { 100 - margin: 8px 0;90 + margin: 7px 0; 101 101 background-color: fade(@brand, 16%); 102 102 } 103 103 } 104 104 105 -/* Mobile */ 95 +.agnease-products-dropdown, 96 +.agnease-resources-dropdown { 97 + min-width: 260px; 98 +} 106 106 100 +/* Remove gray Bootstrap dropdown item states */ 101 +.dropdown-menu > li > a:hover, 102 +.dropdown-menu > li > a:focus { 103 + background-image: none; 104 +} 105 + 106 +/* ========== Mobile Menu ========== */ 107 + 107 107 @media (max-width: 767px) { 108 - .site-nav { 109 - margin-left: 0; 110 - justify-content: center; 111 - flex-wrap: wrap; 109 + .navbar-nav .agnease-menu-item li a { 110 + font-size: 14px; 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,31 @@ 128 128 border: 0; 129 129 border-radius: 0; 130 130 box-shadow: none; 131 - background: transparent;120 + background: #fff; 132 132 133 133 > li > a { 134 134 padding: 8px 10px; 135 135 white-space: normal; 136 - font-size: 15px; 125 + font-size: 14px; 126 + border-radius: 8px; 127 + color: @brand; 137 137 138 138 i { 139 - width: 1 8px;140 - flex-basis: 1 8px;130 + width: 16px; 131 + flex-basis: 16px; 141 141 } 133 + 134 + &:hover, 135 + &:focus, 136 + &:active { 137 + color: @brand-strong; 138 + background: fade(@brand, 8%); 139 + } 142 142 } 143 143 144 144 .divider { 145 145 margin: 5px 0; 144 + background-color: fade(@brand, 16%); 146 146 } 147 147 } 148 148 }