Changes for page Collaborate on reproducible science, anywhere
Last modified by bougault on 2023/01/26 14:38
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -8,7 +8,7 @@ 8 8 <div class="container"> 9 9 <div class="row"> 10 10 <div class="col-md-7 col-md-push-5"> 11 - <img class="img-responsive" src="/wiki_home_graphic.svg" /> 11 + <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" /> 12 12 </div> 13 13 <div class="col-md-5 col-md-pull-7"> 14 14 <h2>Collaborate to create reproducible science. Anywhere.</h2> ... ... @@ -16,6 +16,22 @@ 16 16 <a class="btn btn-primary btn-lg">Learn more</a> 17 17 </div> 18 18 </div> 19 + </div> 20 + <div class="container-fluid search__row"> 21 + <div class="container"> 22 + <div class="col-md-6 col-md-offset-3"> 23 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 24 + <div> 25 + <input type="text" class="form-control" name="text"> 26 + <i class="glyphicon glyphicon-search"></i> 27 + </div> 28 + <button class="btn clb-btn-default" type="submit">Search</button> 29 + </form> 30 + </div> 31 + 32 + </div> 33 + </div> 34 + <div class="container"> 19 19 <div class="row tags"> 20 20 <div class="col-md-3"> 21 21 <h3 class="tags__title tags__title--collaborate"> ... ... @@ -52,20 +52,8 @@ 52 52 </div> 53 53 </div> 54 54 </div> 55 -<div class="container"> 56 - <div class="row"> 57 - <div class="col-md-6 col-md-offset-3"> 58 - <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 59 - <div> 60 - <input type="text" class="form-control" name="text"> 61 - <i class="glyphicon glyphicon-search"></i> 62 - </div> 63 - <button class="btn clb-btn-default" type="submit">Search</button> 64 - </form> 65 - </div> 66 - </div> 67 -</div> 68 68 72 + 69 69 <div class="container get-started"> 70 70 <h4 class="get-started__title">GET STARTED</h4> 71 71 <div class="row get-started__row"> ... ... @@ -118,7 +118,15 @@ 118 118 </div> 119 119 </div> 120 120 </div> 121 - 125 +<div class="container"> 126 + <div class="row pre-footer"> 127 + <div class="col-md-12"> 128 + The Collaboratory is part of EBRAINS.<br /> 129 + Discover the other 130 + <a href="https://ebrains.eu" rel="noopener" target="_blank">EBRAINS services</a>. 131 + </div> 132 + </div> 133 +</div> 122 122 <!--div class="container clb-content"> 123 123 124 124 <div class="teasing">
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,32 +1,123 @@ 1 +/* 1 1 .teasing .collaborate {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/collaborate.jpg');} 2 2 .teasing .reproductible {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/reproducible.jpg');} 3 3 .teasing .science {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/science.jpg');} 4 4 .teasing .anywhere {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/anywhere.jpg');} 5 - 6 +*/ 6 6 #mainContentArea{ 7 7 padding:0; 8 8 padding-top:1.25rem 9 9 } 11 +.document-header, 10 10 #mainContentArea #hierarchy, 11 11 #mainContentArea .xcontent>hr, 12 12 #mainContentArea .xdocLastModification{ 13 13 display:none 14 14 } 17 + 15 15 #mainContentArea .xcontent>.row{ 16 16 margin-left:0; 17 17 margin-right:0 18 18 } 19 19 20 -.document-header .document-info{ 21 - width:100%; 22 - text-align:center; 23 - margin-top:3rem 24 -} 25 25 #xwikicontent{ 26 26 padding-left:0; 27 27 padding-right:0; 28 28 min-height:300px; 29 - 27 +/* 28 + p.alert-info{ 29 + padding:2rem 30 + } 31 + .teasing{ 32 + margin-bottom:50px 33 + } 34 + .teasing .card{ 35 + text-align:center; 36 + position:relative; 37 + height:100%; 38 + background-size:cover; 39 + background-repeat:no-repeat; 40 + background-position:50% 50%; 41 + padding-bottom:20px; 42 + margin-bottom:20px 43 + } 44 + .teasing .card::before{ 45 + position:absolute; 46 + top:0; 47 + right:0; 48 + bottom:0; 49 + left:0; 50 + display:block; 51 + background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 85%); 52 + content:'' 53 + } 54 + .teasing .card-header{ 55 + position:relative; 56 + height:150px 57 + } 58 + .teasing .coming-soon{ 59 + position:absolute; 60 + z-index:10; 61 + left:0; 62 + right:0; 63 + padding:.5rem; 64 + border-radius:.25rem; 65 + font-weight:700; 66 + top:50% 67 + } 68 + .teasing .coming-soon span{ 69 + font-size:1.25rem; 70 + line-height:2; 71 + padding:.5rem; 72 + border-radius:.25rem; 73 + font-weight:700; 74 + margin-top:-17px; 75 + background:rgba(255,255,255,.8); 76 + } 77 + .teasing .card-content { 78 + position:relative; 79 + overflow:hidden; 80 + margin-top:0; 81 + padding-top:0; 82 + padding-bottom:0; 83 + padding-left:.5rem; 84 + padding-right:.5rem; 85 + color: @color-white; 86 + font-size:1rem; 87 + .card-title { 88 + color:@color-white; 89 + } 90 + } 91 + .teasing .card-title{ 92 + margin-top:1.5rem; 93 + margin-right:0; 94 + margin-bottom:1rem; 95 + margin-left:0; 96 + font-weight:700 97 + } 98 + .clb-actions { 99 + background-color:#f0f3f1; 100 + padding-top:5rem; 101 + padding-left:0; 102 + padding-right:0; 103 + padding-bottom:0 104 + } 105 + .clb-actions .clb-box{ 106 + margin-bottom:5rem; 107 + font-size:1.125rem; 108 + display: block 109 + } 110 + .clb-actions>.row{ 111 + margin-left:0; 112 + margin-right:0 113 + } 114 + .clb-actions .clb-box:hover{ 115 + text-decoration:none 116 + } 117 + .clb-content>.row{ 118 + margin-bottom:5rem 119 + } 120 +*/ 30 30 .clb-search-bar{ 31 31 display:flex; 32 32 align-items:stretch; ... ... @@ -84,10 +84,10 @@ 84 84 height:100%; 85 85 display:block 86 86 } 87 - */ 88 88 } 179 + */ 89 89 } 90 - /*181 + 91 91 .clb-box{ 92 92 background-color:#fff; 93 93 box-shadow:0 1px 2px 0 rgba(0,0,0,.1); ... ... @@ -120,4 +120,88 @@ 120 120 background-color: darken(@color-brand-primary, 15%); 121 121 } 122 122 } 123 -*/ 214 + 215 +#xwikicontent .get-started__row__title { 216 + margin: 1rem 0; 217 + font-weight: 400; 218 + color: var(@color-brand-primary); 219 +} 220 + 221 +.search__row { 222 + padding:1rem; 223 + margin: 2rem; 224 + background: @color-xwiki-gray; 225 +} 226 +.get-started__row__text { 227 + color: #4a5568; 228 +} 229 +.get-started__title { 230 + text-align: center; 231 + color: #aaa; 232 + padding: 10rem 0; 233 + font-size: 2rem; 234 + border-top: 1px solid #ccc; 235 + margin-top: 10rem; 236 +} 237 +.get-started__row { 238 + margin-top: 3rem; 239 +} 240 + 241 +@media screen and (min-width: 992px) { 242 + .get-started__row { 243 + display: flex; 244 + align-items: center; 245 + } 246 + #xwikicontent .get-started__row__title { 247 + margin: 0; 248 + margin-bottom: 1rem; 249 + } 250 +} 251 +.pre-footer { 252 + margin: 10rem 0; 253 + padding: 10rem 0; 254 + text-align: center; 255 + border-top: 1px solid #ccc; 256 + border-bottom: 1px solid #ccc; 257 +} 258 + 259 +.tags__title { 260 + text-align: center; 261 +} 262 + 263 +.tags__title--collaborate, 264 +.tags__title--science, 265 +.tags__title--reproducible, 266 +.tags__title--anywhere { 267 + padding-top: 8rem; 268 + position: relative; 269 +} 270 + 271 +.tags__title--collaborate::before, 272 +.tags__title--science::before, 273 +.tags__title--reproducible::before, 274 +.tags__title--anywhere::before { 275 + position: absolute; 276 + width: 50px; 277 + height: 50px; 278 + background-repeat: none; 279 + top: 0; 280 + margin-left: 50%; 281 + left: -25px; 282 + content: " "; 283 + display: table; 284 +} 285 + 286 +.tags__title--collaborate::before { 287 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg"); 288 +} 289 +.tags__title--science::before { 290 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg"); 291 +} 292 +.tags__title--reproducible::before { 293 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg"); 294 +} 295 +.tags__title--anywhere::before { 296 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg"); 297 +} 298 +