Changes for page Collaborate on reproducible science, anywhere
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. messines1 +XWiki.asantars - Content
-
... ... @@ -5,8 +5,116 @@ 5 5 {{/velocity}} 6 6 7 7 {{html clean="false"}} 8 -<div class="container clb-content"> 8 + <div class="container"> 9 + <div class="row"> 10 + <div class="col-md-7 col-md-push-5"> 11 + <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" /> 12 + </div> 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> 16 + </div> 17 + </div> 18 + </div> 19 + <div class="container-fluid search__row"> 20 + <div class="container"> 21 + <div class="col-md-6 col-md-offset-3"> 22 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 23 + <div> 24 + <input type="text" class="form-control" name="text" placeholder="Search in the collaboratory"> 25 + <i class="glyphicon glyphicon-search"></i> 26 + </div> 27 + <button class="btn clb-btn-default" type="submit">Search</button> 28 + </form> 29 + </div> 30 + </div> 31 + </div> 9 9 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/">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> 45 + </div> 46 + </div> 47 + 48 + <div class="container"> 49 + <div class="row explore-all"> 50 + <div class="col-md-12"> 51 + Explore all the <a href="/bin/view/Collabs">Collabs</a> 52 + </div> 53 + </div> 54 + </div> 55 + 56 + 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> 65 + <div class="col-xs-12 col-md-6"> 66 + <a href="#"> 67 + <h2 class="get-started__row__title">Create a collab</h2> 68 + <p class="get-started__row__text"> 69 + Discover how to create Collabs, a space which enables you to 70 + collaborate. 71 + </p> 72 + </a> 73 + </div> 74 + </div> 75 + <div class="row get-started__row"> 76 + <div class="col-md-6"> 77 + <img 78 + class="img-responsive" 79 + src="https://via.placeholder.com/600x300" 80 + /> 81 + </div> 82 + <div class="col-md-6"> 83 + <a href="#"> 84 + <h2 class="get-started__row__title">Team</h2> 85 + <p class="get-started__row__text"> 86 + Add members to your team in the collab. 87 + </p> 88 + </a> 89 + </div> 90 + </div> 91 + <div class="row get-started__row"> 92 + <div class="col-md-6"> 93 + <img 94 + class="img-responsive" 95 + src="https://via.placeholder.com/600x300" 96 + /> 97 + </div> 98 + <div class="col-md-6"> 99 + <a href="#"> 100 + <h2 class="get-started__row__title">Jupyter Notebook</h2> 101 + <p class="get-started__row__text"> 102 + Run your Jupyter notebook. Share it with colleagues. 103 + </p> 104 + </a> 105 + </div> 106 + </div> 107 +</div> --> 108 +<div class="container"> 109 + <div class="row pre-footer"> 110 + <div class="col-md-12"> 111 + Discover all the 112 + <a href="https://ebrains.eu" rel="noopener" target="_blank">EBRAINS services</a>. 113 + </div> 114 + </div> 115 +</div> 116 +<!--div class="container clb-content"> 117 + 10 10 <div class="teasing"> 11 11 <div class="row"> 12 12 <div class="col-md-3"> ... ... @@ -90,7 +90,7 @@ 90 90 </a> 91 91 </div> 92 92 </div> 93 - </div> <!-- /.col-md-4 -->201 + </div> 94 94 95 95 <div class="col-md-4"> 96 96 <div class="row"> ... ... @@ -103,7 +103,7 @@ 103 103 </a> 104 104 </div> 105 105 </div> 106 - </div> <!-- /.col-md-4 -->214 + </div> 107 107 108 108 <div class="col-md-4"> 109 109 <div class="row"> ... ... @@ -116,8 +116,8 @@ 116 116 </a> 117 117 </div> 118 118 </div> 119 - </div> <!-- /.col-md-4 -->227 + </div> 120 120 </div> 121 121 </div> 122 -</div> 230 +</div --> 123 123 {{/html}}
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,31 +1,30 @@ 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; 27 +/* 29 29 p.alert-info{ 30 30 padding:2rem 31 31 } ... ... @@ -118,6 +118,7 @@ 118 118 .clb-content>.row{ 119 119 margin-bottom:5rem 120 120 } 120 +*/ 121 121 .clb-search-bar{ 122 122 display:flex; 123 123 align-items:stretch; ... ... @@ -150,6 +150,7 @@ 150 150 .clb-search-bar input[type=text]:focus~i{ 151 151 color: @color-brand-primary; 152 152 } 153 + /* 153 153 @media screen and (min-width:992px){ 154 154 .teasing .row{ 155 155 display:flex ... ... @@ -175,6 +175,7 @@ 175 175 display:block 176 176 } 177 177 } 179 + */ 178 178 } 179 179 180 180 .clb-box{ ... ... @@ -209,3 +209,103 @@ 209 209 background-color: darken(@color-brand-primary, 15%); 210 210 } 211 211 } 214 + 215 +#xwikicontent .get-started__row__title { 216 + margin: 1rem 0; 217 + font-weight: 400; 218 + color: var(@color-brand-primary); 219 +} 220 + 221 +.hero-text h3 { 222 + line-height:1.3em; 223 +} 224 + 225 +.search__row { 226 + padding:2rem; 227 + margin: 2rem 0; 228 + background: @color-xwiki-gray; 229 +} 230 +.get-started__row__text { 231 + color: #4a5568; 232 +} 233 +.get-started__title, .highlighted__title{ 234 + text-align: center; 235 + color: #aaa; 236 + /*padding: 10rem 0;*/ 237 + padding:5rem 0; 238 + font-size: 2rem; 239 + /*border-top: 1px solid #ccc;*/ 240 + /*margin-top: 10rem;*/ 241 + /*margin-top: 5rem;*/ 242 +} 243 +.get-started__row { 244 + margin-top: 3rem; 245 +} 246 + 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 + 257 +@media screen and (min-width: 992px) { 258 + .get-started__row { 259 + display: flex; 260 + align-items: center; 261 + } 262 + #xwikicontent .get-started__row__title { 263 + margin: 0; 264 + margin-bottom: 1rem; 265 + } 266 +} 267 +.pre-footer { 268 + margin: 8rem 0 2rem; 269 + padding: 5rem 0; 270 + border-top: 1px solid #ccc; 271 + /*border-bottom: 1px solid #ccc;*/ 272 +} 273 + 274 +.tags__title, .tags__text { 275 + text-align: center; 276 +} 277 + 278 +.tags__title--collaborate, 279 +.tags__title--science, 280 +.tags__title--reproducible, 281 +.tags__title--anywhere { 282 + padding-top: 4rem; 283 + position: relative; 284 +} 285 + 286 +.tags__title--collaborate::before, 287 +.tags__title--science::before, 288 +.tags__title--reproducible::before, 289 +.tags__title--anywhere::before { 290 + position: absolute; 291 + width: 50px; 292 + height: 50px; 293 + background-repeat: none; 294 + top: 0; 295 + margin-left: 50%; 296 + left: -25px; 297 + content: " "; 298 + display: table; 299 +} 300 + 301 +.tags__title--collaborate::before { 302 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg"); 303 +} 304 +.tags__title--science::before { 305 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg"); 306 +} 307 +.tags__title--reproducible::before { 308 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg"); 309 +} 310 +.tags__title--anywhere::before { 311 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg"); 312 +} 313 +