Changes for page Collaborate on reproducible science, anywhere
Last modified by bougault on 2023/01/26 14:38
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,136 @@ 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"> 14 + <h2>Collaborate. Create reproducible science. 15 +Discover EBRAINS services at work. 16 +From anywhere.</h2> 17 + <a class="btn btn-primary btn-lg">Get started</a> 18 + <a class="btn btn-primary btn-lg">Learn more</a> 19 + </div> 20 + </div> 21 + </div> 22 + <div class="container-fluid search__row"> 23 + <div class="container"> 24 + <div class="col-md-6 col-md-offset-3"> 25 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 26 + <div> 27 + <input type="text" class="form-control" name="text"> 28 + <i class="glyphicon glyphicon-search"></i> 29 + </div> 30 + <button class="btn clb-btn-default" type="submit">Search</button> 31 + </form> 32 + </div> 9 9 34 + </div> 35 + </div> 36 + <div class="container"> 37 + <div class="row tags"> 38 + <div class="col-md-3"> 39 + <h3 class="tags__title tags__title--collaborate"> 40 + Collaborate 41 + </h3> 42 + <p class="tags__text"> 43 + Create projects and documents, invite collaborators, co-produce 44 + articles and release your team work for the community 45 + </p> 46 + </div> 47 + <div class="col-md-3"> 48 + <h3 class="tags__title tags__title--reproducible"> 49 + Reproducible 50 + </h3> 51 + <p class="tags__text"> 52 + Initiate environments, install libraries, find and access datasets 53 + to create the stable fertile ground for your experiments 54 + </p> 55 + </div> 56 + <div class="col-md-3"> 57 + <h3 class="tags__title tags__title--science">Science</h3> 58 + <p class="tags__text"> 59 + Develop code, visualise results, generate data and collaborate on 60 + your re-search 61 + </p> 62 + </div> 63 + <div class="col-md-3"> 64 + <h3 class="tags__title tags__title--anywhere">Anywhere</h3> 65 + <p class="tags__text"> 66 + Upload or generate your data and access it any-where anytime, from 67 + your local machine to the most powerful high perfor-mance 68 + computers 69 + </p> 70 + </div> 71 + </div> 72 + </div> 73 + 74 + 75 +<div class="container get-started"> 76 + <h4 class="get-started__title">GET STARTED</h4> 77 + <div class="row get-started__row"> 78 + <div class="col-xs-12 col-md-6"> 79 + <img 80 + class="img-responsive" 81 + src="https://via.placeholder.com/600x300" 82 + /> 83 + </div> 84 + <div class="col-xs-12 col-md-6"> 85 + <a href="#"> 86 + <h2 class="get-started__row__title">Create a collab</h2> 87 + <p class="get-started__row__text"> 88 + Discover how to create Collabs, a space which enables you to 89 + collaborate. 90 + </p> 91 + </a> 92 + </div> 93 + </div> 94 + <div class="row get-started__row"> 95 + <div class="col-md-6"> 96 + <img 97 + class="img-responsive" 98 + src="https://via.placeholder.com/600x300" 99 + /> 100 + </div> 101 + <div class="col-md-6"> 102 + <a href="#"> 103 + <h2 class="get-started__row__title">Team</h2> 104 + <p class="get-started__row__text"> 105 + Add members to your team in the collab. 106 + </p> 107 + </a> 108 + </div> 109 + </div> 110 + <div class="row get-started__row"> 111 + <div class="col-md-6"> 112 + <img 113 + class="img-responsive" 114 + src="https://via.placeholder.com/600x300" 115 + /> 116 + </div> 117 + <div class="col-md-6"> 118 + <a href="#"> 119 + <h2 class="get-started__row__title">Jupyter Notebook</h2> 120 + <p class="get-started__row__text"> 121 + Run your Jupyter notebook. Share it with colleagues. 122 + </p> 123 + </a> 124 + </div> 125 + </div> 126 +</div> 127 +<div class="container"> 128 + <div class="row pre-footer"> 129 + <div class="col-md-12"> 130 + The Collaboratory is part of EBRAINS.<br /> 131 + Discover the other 132 + <a href="https://ebrains.eu" rel="noopener" target="_blank">EBRAINS services</a>. 133 + </div> 134 + </div> 135 +</div> 136 +<!--div class="container clb-content"> 137 + 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 -->221 + </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 -->234 + </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 -->247 + </div> 120 120 </div> 121 121 </div> 122 -</div> 250 +</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,95 @@ 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 +.search__row { 222 + padding:1rem; 223 + margin: 2rem 0; 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 + padding:5rem 0; 234 + font-size: 2rem; 235 + border-top: 1px solid #ccc; 236 + /*margin-top: 10rem;*/ 237 + margin-top: 5rem; 238 +} 239 +.get-started__row { 240 + margin-top: 3rem; 241 +} 242 + 243 +.pre-footer { 244 + font-size: 32px; 245 + line-height: 42px; 246 +} 247 + 248 +@media screen and (min-width: 992px) { 249 + .get-started__row { 250 + display: flex; 251 + align-items: center; 252 + } 253 + #xwikicontent .get-started__row__title { 254 + margin: 0; 255 + margin-bottom: 1rem; 256 + } 257 +} 258 +.pre-footer { 259 + margin: 8rem 0 2rem; 260 + padding: 5rem 0; 261 + text-align: center; 262 + border-top: 1px solid #ccc; 263 + /*border-bottom: 1px solid #ccc;*/ 264 +} 265 + 266 +.tags__title, .tags__text { 267 + text-align: center; 268 +} 269 + 270 +.tags__title--collaborate, 271 +.tags__title--science, 272 +.tags__title--reproducible, 273 +.tags__title--anywhere { 274 + padding-top: 4rem; 275 + position: relative; 276 +} 277 + 278 +.tags__title--collaborate::before, 279 +.tags__title--science::before, 280 +.tags__title--reproducible::before, 281 +.tags__title--anywhere::before { 282 + position: absolute; 283 + width: 50px; 284 + height: 50px; 285 + background-repeat: none; 286 + top: 0; 287 + margin-left: 50%; 288 + left: -25px; 289 + content: " "; 290 + display: table; 291 +} 292 + 293 +.tags__title--collaborate::before { 294 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg"); 295 +} 296 +.tags__title--science::before { 297 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg"); 298 +} 299 +.tags__title--reproducible::before { 300 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg"); 301 +} 302 +.tags__title--anywhere::before { 303 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg"); 304 +} 305 +