coop-cloud/coopcloud.tech
coop-cloud/coopcloud.tech
1
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

case studies styling and dividers

Browse Source
This commit is contained in:
femmefaytale 2022-04-29 14:44:11 +01:00
parent e9e07cab49
commit e172696ec1
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
themes/coopcloud.tech/assets/scss/main.scss
View File

@ -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;
}

17
themes/coopcloud.tech/layouts/partials/index/case_studies.html
View File

@ -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">