forked from coop-cloud/coopcloud.tech
case studies styling and dividers
This commit is contained in:
parent
e9e07cab49
commit
e172696ec1
|
@ -280,15 +280,15 @@ footer .separator {
|
|||
#case_studies-slide-body{
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
transition: max-height 500ms ease;
|
||||
-moz-transition: max-height 500ms ease;
|
||||
-ms-transition: max-height 500ms ease;
|
||||
-o-transition: max-height 500ms ease;
|
||||
-webkit-transition: max-height 500ms ease;
|
||||
transition: max-height 1s ease;
|
||||
-moz-transition: max-height 1s ease;
|
||||
-ms-transition: max-height 1s ease;
|
||||
-o-transition: max-height 1s ease;
|
||||
-webkit-transition: max-height 1s ease;
|
||||
}
|
||||
.expanded {
|
||||
height: auto !important;
|
||||
max-height: 3000px !important;
|
||||
max-height: 4000px !important;
|
||||
}
|
||||
.contracted {
|
||||
background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
|
||||
|
@ -299,4 +299,13 @@ footer .separator {
|
|||
position: absolute;
|
||||
margin: 10px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Styling for divider
|
||||
|
||||
hr.divider {
|
||||
border-top: 1px solid #1C1C1C;
|
||||
border-radius: 3px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
}
|
|
@ -4,9 +4,16 @@
|
|||
|
||||
<div id="case_studies-slide-body">
|
||||
{{ range $index, $item := .data | shuffle }}
|
||||
<div class="columns is-centered my-6 is-vcentered">
|
||||
{{ if ne $index 0 }}
|
||||
<div class="columns is-centered is-gapless">
|
||||
<div class="column is-8">
|
||||
<hr class="divider">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="columns my-6 is-vcentered">
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
<div class="column is-one-quarter">
|
||||
<div class="column is-one-quarter is-offset-1">
|
||||
<div class="image mx-4">
|
||||
{{ with $item.thumbnail }}
|
||||
<img src="{{ $item.thumbnail }}" class="is-rounded">
|
||||
|
@ -15,16 +22,16 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-size-5 is-widescreen is-full-tablet is-half">
|
||||
<div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
|
||||
<h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
|
||||
<p>{{ $item.content | markdownify }}</p>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="column is-size-5 is-widescreen is-full-tablet is-half">
|
||||
<div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
|
||||
<h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
|
||||
<p>{{ $item.content | markdownify }}</p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<div class="column is-one-quarter is-offset-1">
|
||||
<div class="image mx-4">
|
||||
{{ with $item.thumbnail }}
|
||||
<img src="{{ $item.thumbnail }}" class="is-rounded">
|
||||
|
|
Loading…
Reference in New Issue