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
-
... ... @@ -10,76 +10,59 @@ 10 10 <div class="col-md-7 col-md-push-5"> 11 11 <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" /> 12 12 </div> 13 - <div class="col-md-5 col-md-pull-7"> 14 - <h2>Collaborate to create reproducible science. Anywhere.</h2> 15 - <a class="btn btn-primary btn-lg">Get started</a> 16 - <a class="btn btn-primary btn-lg">Learn more</a> 13 + <div class="col-md-5 col-md-pull-7 hero-text"> 14 + <h3>Collaborate.<br/>Create reproducible science.<br/>Discover EBRAINS services at work.<br/>From anywhere.</h3> 15 + <a class="btn btn-primary btn-lg" href="/bin/view/Collabs/the-collaboratory/Getting%20Started/">Getting started</a> 17 17 </div> 18 18 </div> 19 19 </div> 20 20 <div class="container-fluid search__row"> 21 - <div class="container">20 + <div class="container"> 22 22 <div class="col-md-6 col-md-offset-3"> 23 23 <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 24 24 <div> 25 - <input type="text" class="form-control" name="text"> 24 + <input type="text" class="form-control" name="text" placeholder="Search in the collaboratory"> 26 26 <i class="glyphicon glyphicon-search"></i> 27 27 </div> 28 28 <button class="btn clb-btn-default" type="submit">Search</button> 29 29 </form> 30 30 </div> 30 + </div> 31 + </div> 31 31 33 + <div class="container highlighted"> 34 + <h4 class="highlighted__title">Highlighted collabs</h4> 35 + <div class="row highlighted_row"> 36 + <div class="col-sm-6 col-md-6 col-md-push-3"> 37 + <div class="thumbnail"> 38 + <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" /> 39 + <div class="caption"> 40 + <h3><a href="/bin/view/Collabs/the-collaboratory/" class="stretched-link">The Collaboratory</a></h3> 41 + <p>The EBRAINS Collaboratory opens a portal onto the full gamut of EBRAINS services, providing you with examples of how to access services and resources, and a means of applying this quickly with little effort to you research. </p> 42 + </div> 43 + </div> 44 + </div> 32 32 </div> 33 33 </div> 47 + 34 34 <div class="container"> 35 - <div class="row tags"> 36 - <div class="col-md-3"> 37 - <h3 class="tags__title tags__title--collaborate"> 38 - Collaborate 39 - </h3> 40 - <p class="tags__text"> 41 - Create projects and documents, invite collaborators, co-produce 42 - articles and release your team work for the community 43 - </p> 49 + <div class="row explore-all"> 50 + <div class="col-md-12"> 51 + Explore all the <a href="/bin/view/Collabs">Collabs</a> 44 44 </div> 45 - <div class="col-md-3"> 46 - <h3 class="tags__title tags__title--reproducible"> 47 - Reproducible 48 - </h3> 49 - <p class="tags__text"> 50 - Initiate environments, install libraries, find and access datasets 51 - to create the stable fertile ground for your experiments 52 - </p> 53 - </div> 54 - <div class="col-md-3"> 55 - <h3 class="tags__title tags__title--science">Science</h3> 56 - <p class="tags__text"> 57 - Develop code, visualise results, generate data and collaborate on 58 - your re-search 59 - </p> 60 - </div> 61 - <div class="col-md-3"> 62 - <h3 class="tags__title tags__title--anywhere">Anywhere</h3> 63 - <p class="tags__text"> 64 - Upload or generate your data and access it any-where anytime, from 65 - your local machine to the most powerful high perfor-mance 66 - computers 67 - </p> 68 - </div> 69 69 </div> 70 70 </div> 71 71 72 72 73 -<div class="container get-started"> 74 - <h4 class="get-started__title">GET STARTED</h4> 75 - <div class="row get-started__row"> 57 +<!-- 58 + <div class="container get-started"> 59 + <h4 class="get-started__title">Get started</h4> 60 + <div class="row get-started__row"> 61 + <div class="col-xs-12 col-md-6"> 62 + <img class="img-responsive" 63 + src="https://via.placeholder.com/600x300"/> 64 + </div> 76 76 <div class="col-xs-12 col-md-6"> 77 - <img 78 - class="img-responsive" 79 - src="https://via.placeholder.com/600x300" 80 - /> 81 - </div> 82 - <div class="col-xs-12 col-md-6"> 83 83 <a href="#"> 84 84 <h2 class="get-started__row__title">Create a collab</h2> 85 85 <p class="get-started__row__text"> ... ... @@ -121,12 +121,11 @@ 121 121 </a> 122 122 </div> 123 123 </div> 124 -</div> 107 +</div> --> 125 125 <div class="container"> 126 126 <div class="row pre-footer"> 127 127 <div class="col-md-12"> 128 - The Collaboratory is part of EBRAINS.<br /> 129 - Discover the other 111 + Discover all the 130 130 <a href="https://ebrains.eu" rel="noopener" target="_blank">EBRAINS services</a>. 131 131 </div> 132 132 </div>
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -218,8 +218,12 @@ 218 218 color: var(@color-brand-primary); 219 219 } 220 220 221 +.hero-text h3 { 222 + line-height:1.3em; 223 +} 224 + 221 221 .search__row { 222 - padding: 1rem;226 + padding:2rem; 223 223 margin: 2rem 0; 224 224 background: @color-xwiki-gray; 225 225 } ... ... @@ -226,20 +226,30 @@ 226 226 .get-started__row__text { 227 227 color: #4a5568; 228 228 } 229 -.get-started__title { 233 +.get-started__title, .highlighted__title{ 230 230 text-align: center; 231 231 color: #aaa; 232 232 /*padding: 10rem 0;*/ 233 - padding: 4rem 0;237 + padding:5rem 0; 234 234 font-size: 2rem; 235 - border-top: 1px solid #ccc; 239 + /*border-top: 1px solid #ccc;*/ 236 236 /*margin-top: 10rem;*/ 237 - margin-top: 5rem; 241 + /*margin-top: 5rem;*/ 238 238 } 239 239 .get-started__row { 240 240 margin-top: 3rem; 241 241 } 242 242 247 +.pre-footer, .explore-all { 248 + font-size: 32px; 249 + line-height: 42px; 250 + text-align: center; 251 +} 252 + 253 +.explore-all{ 254 + padding-top: 5rem; 255 +} 256 + 243 243 @media screen and (min-width: 992px) { 244 244 .get-started__row { 245 245 display: flex; ... ... @@ -250,12 +250,28 @@ 250 250 margin-bottom: 1rem; 251 251 } 252 252 } 267 + 268 +.stretched-link { 269 + &::after { 270 + position: absolute; 271 + top: 0; 272 + right: 0; 273 + bottom: 0; 274 + left: 0; 275 + z-index: 1; 276 + // Just in case `pointer-events: none` is set on a parent 277 + pointer-events: auto; 278 + content: ""; 279 + // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color 280 + background-color: rgba(0, 0, 0, 0); 281 + } 282 +} 283 + 253 253 .pre-footer { 254 - margin: 10rem 0; 255 - padding: 10rem 0; 256 - text-align: center; 285 + margin: 8rem 0 2rem; 286 + padding: 5rem 0; 257 257 border-top: 1px solid #ccc; 258 - border-bottom: 1px solid #ccc; 288 + /*border-bottom: 1px solid #ccc;*/ 259 259 } 260 260 261 261 .tags__title, .tags__text {