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
-
... ... @@ -4,4 +4,60 @@ 4 4 #set($displayContentMenu=false) 5 5 {{/velocity}} 6 6 7 +{{html clean="false"}} 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 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 22 + <div class="col-md-5 col-md-offset-3"> 23 + <div> 24 + <input type="text" class="form-control" name="text" placeholder="Search word in all wiki pages"> 25 + <i class="glyphicon glyphicon-search"></i> 26 + </div> 27 + </div> 28 + <div class="col-md-1"> 29 + <button class="btn clb-btn-default" type="submit">Search</button> 30 + </div> 31 + </form> 32 + </div> 33 + </div> 34 +{{/html}} 7 7 36 +(% class="container highlighted"%)((( 37 + 38 +(% class="highlighted__title" %) 39 +==== Highlighted collabs ==== 40 +{{html clean="false"}} 41 +<div class="container centered"> 42 +<a href="/bin/view/Collabs/the-collaboratory/Highlights" class="highlighted_view_all">View all</a> 43 +</div> 44 +{{/html}} 45 +(% class="row highlighted_row" %) 46 +((( 47 + 48 +{{HighlightedCollabs featured="true" slider="true" /}} 49 + 50 +))) 51 +))) 52 + 53 +(% class="container" %) 54 +((( 55 +(% class="row explore-all" %) 56 +((( 57 + (% class="col-md-12" %) 58 +((( 59 +Explore all the [[Collabs]] 60 +))) 61 +))) 62 +))) 63 +
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,9 +7,3 @@ 1 -/* 2 -.teasing .collaborate {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/collaborate.jpg');} 3 -.teasing .reproductible {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/reproducible.jpg');} 4 -.teasing .science {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/science.jpg');} 5 -.teasing .anywhere {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/anywhere.jpg');} 6 -*/ 7 7 #mainContentArea{ 8 8 padding:0; 9 9 padding-top:1.25rem ... ... @@ -24,106 +24,13 @@ 24 24 padding-left:0; 25 25 padding-right:0; 26 26 min-height:300px; 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 -*/ 21 + 121 121 .clb-search-bar{ 122 122 display:flex; 123 123 align-items:stretch; 124 124 position:relative 125 125 } 126 - .clb-search-bar >div{27 + .clb-search-bar div{ 127 127 flex:1; 128 128 margin:2px 10px 2px 0 129 129 } ... ... @@ -233,12 +233,8 @@ 233 233 .get-started__title, .highlighted__title{ 234 234 text-align: center; 235 235 color: #aaa; 236 - /*padding: 10rem 0;*/ 237 - padding:5rem 0; 137 + padding:2rem 0 0.5rem 0; 238 238 font-size: 2rem; 239 - /*border-top: 1px solid #ccc;*/ 240 - /*margin-top: 10rem;*/ 241 - /*margin-top: 5rem;*/ 242 242 } 243 243 .get-started__row { 244 244 margin-top: 3rem; ... ... @@ -252,6 +252,7 @@ 252 252 253 253 .explore-all{ 254 254 padding-top: 5rem; 152 + padding-bottom: 5rem; 255 255 } 256 256 257 257 @media screen and (min-width: 992px) { ... ... @@ -265,6 +265,27 @@ 265 265 } 266 266 } 267 267 166 +.glider-contain { 167 + min-height: 502px; 168 +} 169 +.glider { 170 + .highlighted-collab { 171 + position:relative; 172 + border: 1px solid #CCC; 173 + margin: 0 1rem; 174 + height: 100%; 175 + border-radius: @border-radius-default; 176 + > p, 177 + > h3 { 178 + padding-left: 1rem; 179 + padding-right: 1rem; 180 + } 181 + } 182 +} 183 +.highlighted-image{ 184 + /*height: 250px;*/ 185 + background-size: cover; 186 +} 268 268 .stretched-link { 269 269 &::after { 270 270 position: absolute;