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> ... ... @@ -52,17 +52,18 @@ 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> 55 +<div class="container-fluid search__row"> 56 + <div class="container"> 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 + 66 66 </div> 67 67 </div> 68 68 ... ... @@ -118,7 +118,15 @@ 118 118 </div> 119 119 </div> 120 120 </div> 121 - 122 +<div class="container"> 123 + <div class="row pre-footer"> 124 + <div class="col-md-12"> 125 + The Collaboratory is part of EBRAINS.<br /> 126 + Discover the other 127 + <a href="https://ebrains.eu" rel="noopener" target="_blank">EBRAINS services</a>. 128 + </div> 129 + </div> 130 +</div> 122 122 <!--div class="container clb-content"> 123 123 124 124 <div class="teasing">
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,8 +1,9 @@ 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 ... ... @@ -21,12 +21,106 @@ 21 21 width:100%; 22 22 text-align:center; 23 23 margin-top:3rem 25 + display: none; 24 24 } 25 25 #xwikicontent{ 26 26 padding-left:0; 27 27 padding-right:0; 28 28 min-height:300px; 29 - 31 +/* 32 + p.alert-info{ 33 + padding:2rem 34 + } 35 + .teasing{ 36 + margin-bottom:50px 37 + } 38 + .teasing .card{ 39 + text-align:center; 40 + position:relative; 41 + height:100%; 42 + background-size:cover; 43 + background-repeat:no-repeat; 44 + background-position:50% 50%; 45 + padding-bottom:20px; 46 + margin-bottom:20px 47 + } 48 + .teasing .card::before{ 49 + position:absolute; 50 + top:0; 51 + right:0; 52 + bottom:0; 53 + left:0; 54 + display:block; 55 + background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 85%); 56 + content:'' 57 + } 58 + .teasing .card-header{ 59 + position:relative; 60 + height:150px 61 + } 62 + .teasing .coming-soon{ 63 + position:absolute; 64 + z-index:10; 65 + left:0; 66 + right:0; 67 + padding:.5rem; 68 + border-radius:.25rem; 69 + font-weight:700; 70 + top:50% 71 + } 72 + .teasing .coming-soon span{ 73 + font-size:1.25rem; 74 + line-height:2; 75 + padding:.5rem; 76 + border-radius:.25rem; 77 + font-weight:700; 78 + margin-top:-17px; 79 + background:rgba(255,255,255,.8); 80 + } 81 + .teasing .card-content { 82 + position:relative; 83 + overflow:hidden; 84 + margin-top:0; 85 + padding-top:0; 86 + padding-bottom:0; 87 + padding-left:.5rem; 88 + padding-right:.5rem; 89 + color: @color-white; 90 + font-size:1rem; 91 + .card-title { 92 + color:@color-white; 93 + } 94 + } 95 + .teasing .card-title{ 96 + margin-top:1.5rem; 97 + margin-right:0; 98 + margin-bottom:1rem; 99 + margin-left:0; 100 + font-weight:700 101 + } 102 + .clb-actions { 103 + background-color:#f0f3f1; 104 + padding-top:5rem; 105 + padding-left:0; 106 + padding-right:0; 107 + padding-bottom:0 108 + } 109 + .clb-actions .clb-box{ 110 + margin-bottom:5rem; 111 + font-size:1.125rem; 112 + display: block 113 + } 114 + .clb-actions>.row{ 115 + margin-left:0; 116 + margin-right:0 117 + } 118 + .clb-actions .clb-box:hover{ 119 + text-decoration:none 120 + } 121 + .clb-content>.row{ 122 + margin-bottom:5rem 123 + } 124 +*/ 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 } 183 + */ 89 89 } 90 - /*185 + 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 -*/ 218 + 219 +#xwikicontent .get-started__row__title { 220 + margin: 1rem 0; 221 + font-weight: 400; 222 + color: var(@color-brand-primary); 223 +} 224 + 225 +.search__row { 226 + padding:1rem; 227 + margin: 2rem; 228 + background: @color-xwiki-gray; 229 +} 230 +.get-started__row__text { 231 + color: #4a5568; 232 +} 233 +.get-started__title { 234 + text-align: center; 235 + color: #aaa; 236 + padding: 10rem 0; 237 + font-size: 2rem; 238 + border-top: 1px solid #ccc; 239 + margin-top: 10rem; 240 +} 241 +.get-started__row { 242 + margin-top: 3rem; 243 +} 244 + 245 +@media screen and (min-width: 992px) { 246 + .get-started__row { 247 + display: flex; 248 + align-items: center; 249 + } 250 + #xwikicontent .get-started__row__title { 251 + margin: 0; 252 + margin-bottom: 1rem; 253 + } 254 +} 255 +.pre-footer { 256 + margin: 10rem 0; 257 + padding: 10rem 0; 258 + text-align: center; 259 + border-top: 1px solid #ccc; 260 + border-bottom: 1px solid #ccc; 261 +} 262 + 263 +.tags__title { 264 + text-align: center; 265 +} 266 + 267 +.tags__title--collaborate, 268 +.tags__title--science, 269 +.tags__title--reproducible, 270 +.tags__title--anywhere { 271 + padding-top: 8rem; 272 + position: relative; 273 +} 274 + 275 +.tags__title--collaborate::before, 276 +.tags__title--science::before, 277 +.tags__title--reproducible::before, 278 +.tags__title--anywhere::before { 279 + position: absolute; 280 + width: 50px; 281 + height: 50px; 282 + background-repeat: none; 283 + top: 0; 284 + margin-left: 50%; 285 + left: -25px; 286 + content: " "; 287 + display: table; 288 +} 289 + 290 +.tags__title--collaborate::before { 291 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg"); 292 +} 293 +.tags__title--science::before { 294 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg"); 295 +} 296 +.tags__title--reproducible::before { 297 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg"); 298 +} 299 +.tags__title--anywhere::before { 300 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg"); 301 +} 302 +