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)
-
Attachments (0 modified, 1 added, 1 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -5,7 +5,7 @@ 5 5 #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome')) 6 6 {{html clean="false"}} 7 7 8 - <section class="hero hero-centered" aria-labelledby="hero-title"> 8 + <section class="hero hero-centered main-page-hero" aria-labelledby="hero-title"> 9 9 <div class="container hero-inner"> 10 10 <h1 id="hero-title">Professional XWiki consulting and engineering</h1> 11 11
- mainHeroBackground.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.Admin - Size
-
... ... @@ -1,1 +1,0 @@ 1 -959.7 KB - Content
- main-page-hero.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.Admin - Size
-
... ... @@ -1,0 +1,1 @@ 1 +1.0 MB - Content
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -167,8 +167,7 @@ 167 167 168 168 .hero { 169 169 overflow: hidden; 170 - background-repeat: no-repeat; 171 - background-attachment: scroll; 170 + position: relative; 172 172 173 173 &.hero-centered { 174 174 text-align: center; ... ... @@ -181,6 +181,51 @@ 181 181 min-height: 330px; 182 182 } 183 183 183 + &.main-page-hero { 184 + background: 185 + 186 + url('/bin/download/PublicWebSite/WebHome/main-page-hero.png') center center / cover no-repeat; 187 + 188 + &::before, 189 + &::after { 190 + content: ""; 191 + position: absolute; 192 + pointer-events: none; 193 + z-index: 1; 194 + } 195 + 196 + /* Fade left and right image edges into the page background */ 197 + &::before { 198 + inset: 0; 199 + background: 200 + linear-gradient( 201 + 90deg, 202 + #fff 0%, 203 + rgba(255, 255, 255, 0) 13%, 204 + rgba(255, 255, 255, 0) 87%, 205 + #fff 100% 206 + ); 207 + } 208 + 209 + /* Fade bottom edge into white before the next section */ 210 + &::after { 211 + left: 0; 212 + right: 0; 213 + bottom: 0; 214 + height: 90px; 215 + background: linear-gradient( 216 + 180deg, 217 + rgba(255, 255, 255, 0) 0%, 218 + #fff 100% 219 + ); 220 + } 221 + 222 + .hero-inner { 223 + position: relative; 224 + z-index: 2; 225 + } 226 + } 227 + 184 184 .hero-inner { 185 185 max-width: 860px; 186 186 margin: 0 auto; ... ... @@ -790,6 +790,15 @@ 790 790 min-height: 280px; 791 791 } 792 792 837 + .hero.main-page-hero { 838 + background: 839 + linear-gradient( 840 + rgba(244, 252, 250, 0.92), 841 + rgba(255, 255, 255, 0.97) 842 + ), 843 + url('/bin/download/PublicWebSite/WebHome/main-page-hero.png') center center / cover no-repeat; 844 + } 845 + 793 793 .hero { 794 794 .lead { 795 795 font-size: 17px;